roll20-character-sheets/StarWars5E/StarWars5E_CSS.css

.ui-dialog .tab-content .charsheet {
    /* Tempory fix for label color x') */
    .label {
        color: black;
    }
    /* Remove Arrow froms numbers */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type=number] {
        -moz-appearance: textfield;
    }

    .pc,
    .npc,
    .ship {
        display: none;
    }
    
    .npc_toggle[value="0"] ~ .pc,
    .npc_toggle[value="1"] ~ .npc,
    .npc_toggle[value="2"] ~ .ship {
        display: block;
    }
    
    .container {
        width: 800px;
        background: #afc6d6;
        background: -moz-linear-gradient(left, #afc6d6 0%, #d6d6d6 30%, #d6d6d6 70%, #afc6d6 100%);
        background: -webkit-linear-gradient(left, #afc6d6 0%, #d6d6d6 30%, #d6d6d6 70%, #afc6d6 100%);
        background: linear-gradient(to right, #afc6d6 0%, #d6d6d6 30%, #d6d6d6 70%, #afc6d6 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#afc6d6', endColorstr='#afc6d6', GradientType=1);
        color: #000000;
        font-family: 'Open Sans', sans-serif;
        font-size: 1em;
        line-height: 1em;
        position: relative;
        padding:0
    }
    
    .advantagetoggle {
        position: absolute;
        top: 92px;
        left: 570px;
        z-index: 1;
    }
    
    .advantagetoggle input[type=radio] {
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        width: 18px;
        height: 18px;
        z-index: 2;
    }
    
    .advantagetoggle input[type=radio] + span {
        position: absolute;
        top: 0;
        right: 0;
        width: 17px;
        height: 17px;
        border: 1px solid black;
        border-radius: 5px;
        background-color: #E8E8E8;
        color: black;
        text-align: center;
        font-weight: bold;
    }
    
    
    .header .top {
        height: 42px;
    }
    
    .header .part {
        width: 157px;
        display: inline-block;
        text-align: center;
    }
    
    .header .part input[type=text],
    .header .part select {
        border: 1px solid #666;
        border-radius: 5px;
        height: 56px;
        width: 110px;
        text-align: center;
    }
    
    .header .header-info select {
        padding-left: 0;
        padding-right: 0;
    }
    
    .header .part input[type=text] {
        font-size: 30px;
    }
    
    .header .part span.display {
        border: 1px solid #666;
        border-radius: 5px;
        height: 54px;
        width: 110px;
        text-align: center;
        margin: 0;
        display: inline-block;
        line-height: 54px;
        font-size: 25px;
    }
    
    .header input,
    .header select {
        border-bottom: 1px solid #D3D3D3;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        background: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        color: black;
    }
    
    .header input {
        padding: 0;
    }
    
    .header select {
        margin-bottom: 0;
    }
    
    .header input[type=number] {
        text-align: center;
    }
    
    .header input[type=number]::-webkit-inner-spin-button,
    .header input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    
    .header input[type=number] {
        -moz-appearance: textfield;
    }
    
    .header span {
        display: block;
        font-size: 9px;
        line-height: 12px;
    }
    
    .header .name-container span.label {
        text-align: left;
        font-weight: normal;
        margin-top: 0;
    }
    
    .name-container {
        width: 250px;
        display: inline-block;
        vertical-align: top;
    }
    
    .name-container input {
        font-size: 20px;
        margin-top: -9px;
    }
    
    .header-info {
        width: 532px;
        margin-left: -2px;
        display: inline-block;
        border: 3px double #666;
        padding: 5px;
        max-height: 74px;
    }
    
    .hlabel-container {
        display: inline-block;
        margin-left: -4px;
    }
    
    .hlabel-container.multiclass-container {
        vertical-align: top;
    }
    
    .hlabel-container:first-child {
        margin-left: 0;
    }
    
    .body {
        width: calc(800px - 4rem);
        margin-left: 2rem;
        margin-right: 2rem;
        margin-top: 22px;
    }
    
    .attributes-container {
        width: 70px;
        margin-right: 5px;
        display: inline-block;
        vertical-align: top;
    }
    
    .attr-container {
        width: 70px;
        border: 1px solid #666;
        border-radius: 5px;
        position: relative;
        padding-bottom: 10px;
        margin-bottom: 19px;
        height: 64px;
        text-align: center;
    }
    .skill > span,
    .saving-throw span{
        width: 1.8rem;
        text-align: center;
    }
    .attr-container button[type=roll],
    .saving-throw button[type=roll],
    .skill button[type=roll],
    .ac-init-speed-container button[type=roll],
    .npc button[type=roll] {
        background-color: transparent;
        color: black;
        border: none;
        font-size: 9px;
        line-height: 12px;
        background-image: none;
        text-shadow: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
        width: 100%;
        font-weight: bold;
    }
    
    .subcontainer button[type=roll] {
        background-color: transparent;
        color: black;
        border: none;
        font-size: 9px;
        line-height: 12px;
        background-image: none;
        text-shadow: none;
        box-shadow: none;
        padding: 0;
        margin: 10px 0 0 0;
        width: 100%;
        font-weight: bold;
    }
    
    .attr-container button[type=roll]::before,
    .saving-throw button[type=roll]::before,
    .skill button[type=roll]::before,
    .ac-init-speed-container button[type=roll]::before,
    .subcontainer button[type=roll]::before,
    .npc button[type=roll]::before {
        content: "" !important;
    }
    
    .attr-container button[type=roll] {
        overflow: hidden;
    }
    
    button[type=roll]:hover,
    button[type=roll]:hover *,
    .power button[type=roll]:hover input[type=text],
    .action .display button[type=roll]:hover * {
        color: #EC2127;
    }
    
    button[type=roll] * {
        pointer-events: none;
    }
    
    .attr-container input {
        border: none;
        background: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        color: black;
        margin-top: 3px;
    }
    
    .attr {
        font-size: 30px;
        line-height: 40px;
    }
    
    .attr-mod {
        width: 40px;
        height: 20px;
        border: 1px solid #666;
        border-radius: 50%;
        z-index: 2;
        position: absolute;
        top: 62px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        background-color: white;
    
    }
    
    .attr-mod input {
        text-align: center;
        /*    width: 100%;
            height: 20px;*/
        font-size: 20px;
        margin: 0;
        padding: 0;
        vertical-align: middle;
        line-height: 22px;
    }
    
    .skills-saves-container {
        width: 161px;
        margin-right: 5px;
        display: inline-block;
        vertical-align: top;
    }
    
    .insp-prof-container {
        margin-bottom: 10px;
    }
    
    .insp-prof-container .value {
        display: inline-block;
        border: 1px solid #666;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        background-color: white;
        position: relative;
    }
    
    .insp-prof-container .value input[type=checkbox] {
        height: 100%;
        width: 100%;
        border-radius: 50%;
        opacity: 0;
        z-index: 2;
        position: relative;
    }
    
    .insp-prof-container .value input[type=checkbox] ~ span {
        height: 100%;
        width: 100%;
        border-radius: 50%;
        background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/StarWars5E/pictures/alliance.png')
                center center no-repeat;
        background-size: 80% 80%;
        cursor: pointer;
        position: absolute;
        top: 0;
        display: none;
    }
    
    .insp-prof-container .value input[type=checkbox]:checked ~ span {
        display: block;
    }
    
    .insp-prof-container .value span {
        font-size: 20px;
        font-weight: normal;
        line-height: 34px;
    }
    
    .insp-prof-container .label {
        width: calc(100% - 29px);
        height: 30px;
        margin-left: -15px;
        margin-top: 3px;
        display: inline-block;
        border: 1px solid #666;
        border-radius: 5px;
        vertical-align: top;
    }
    
    .insp-prof-container span {
        display: block;
        font-size: 9px;
        width: 100%;
        text-align: center;
        line-height: 30px;
        font-weight: bold;
    }
    
    .charsheet .ship .insp-prof-container .value input[type=number] {
        width: 140%;
    }
    
    .insp-prof-container .value input,
    .saving-throw input[type=text],
    .skill input[type=text],
    .ac-init-speed-container input,
    .hp input,
    .exhaustion input,
    .hdice-dsaves-container input[type=text],
    .hdice-dsaves-container input[type=number],
    .attacks input,
    .equipment input,
    .tool input,
    .proficiencies input,
    .pc .traits input,
    .ship .traits input,
    .power input,
    .options .body input,
    .resources input[type=number] {
        width: 100%;
        text-align: center;
        font-size: 20px;
        border: none;
        background: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        color: black;
    }
    
    .resources input[type=number],
    .hdice-dsaves-container input[type=number] {
        padding-right: 0;
        padding-left: 10px;
    }
    
    .saving-throw-container,
    .skills-container {
        width: 165px;
        border: 1px solid #666;
        border-radius: 5px;
        margin-bottom: 10px;
        padding-top: 5px;
    }
    
    .pwr-dice-container {
        width: 242px;
        border: 1px solid #666;
        border-radius: 5px;
        margin-bottom: 10px;
        padding-top: 5px;
    }
    
    .pwr-die-system {
        width: 240px;
        height: 20px;
        margin-bottom: 5px;
        margin-top: 5px;
    }
    
    .pwr-die-system input[type=text] {
        font-size: 12px;
        width: 21px;
        text-align: center;
    }
    
    .pwr-die-system button[type=roll] {
        background-color: transparent;
        color: black;
        border: none;
        font-size: 12px;
        line-height: 15px;
        background-image: none;
        text-shadow: none;
        box-shadow: none;
        padding: 0;
        margin-left: 10px;
        font-weight: bold;
        width: calc(100% - 72px);
        overflow: hidden;
        word-wrap: break-word;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
    }
    
    .pwr-dice-container .label span {
        display: block;
        font-size: 9px;
        line-height: 12px;
        width: 100%;
        text-align: center;
        font-weight: bold;
        margin: 10px;
    }
    
    .saving-throw,
    .skill {
        width: 165px;
        height: 18px;
    }
    
    .saving-throw input[type=checkbox],
    .skill input[type=checkbox] {
        margin-left: 5px;
    }
    
    .saving-throw input[type=text],
    .skill input[type=text] {
        font-size: 12px;
        width: 21px;
    }
    
    .col1 .saving-throw > span,
    .col1 .skill > span {
        font-size: 12px;
        display: inline-block;
        text-align: center;
        min-width: 21px;
    }
    
    .saving-throw button[type=roll],
    .skill button[type=roll] {
        width: calc(100% - 60px);
        overflow: hidden;
        word-wrap: break-word;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
    }
    
    .saving-throw-container .label span,
    .skills-container .label span,
    .textbox-container .label span,
    .ac-init-speed-container span.label,
    .hp span,
    .exhaustion span.label,
    .hdice-dsaves-container span,
    .attacks span,
    .globalattack span,
    .equipment span,
    .textbox span,
    .tool_proficiencies span,
    .proficiencies span,
    .powers span,
    .options .body span {
        display: block;
        font-size: 9px;
        line-height: 12px;
        width: 100%;
        text-align: center;
        font-weight: bold;
        margin-top: 5px;
    }
    
    .exhaustion div span.ex-description {
        font-size: 9px;
        line-height: 9px;
        text-align: left;
        width: 116px;
        display: block;
    }
    
    .exhaustion span.label {
        width: 100%;
        display: inline-block;
        text-align: center;
    }
    
    .exhaustion div.ex-descriptions {
        display: inline-block;
        padding-top: 5px;
    }
    
    .exhaustion-toggle[value="0"] ~ .exhaustion {
        display: none;
    }
    
    .exhaustion input[type="number"] {
        width: 116px;
        display: inline-block;
        vertical-align: top;
    }
    
    .skill button span,
    .options .body .skill span span {
        color: #A0A0A0;
        font-weight: normal;
    }
    
    .textbox-container,
    .tool_proficiencies {
        border: 1px solid #666;
        border-radius: 5px;
        width: 243px;
    }
    
    .tool_proficiencies,
    .attacks {
        padding-bottom: 10px;
    }
    
    .textbox-container textarea {
        width: calc(100% - 10px);
        resize: vertical;
        border: none;
    }
    
    .ac-init-speed-container,
    .hp,
    .exhaustion,
    .hdice-dsaves-container,
    .attacks,
    .equipment {
        width: 240px;
        margin-bottom: 10px;
    }
    
    /* .ship-cargo {
        width: 490px;
        margin-bottom: 10px;
    } */
    
    .ac-init-speed-container div {
        width: calc(31%);
        height: 100%;
        border: 1px solid #666;
        border-radius: 5px;
        display: inline-block;
        vertical-align: top;
    }
    
    .ac-init-speed-container span.label {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    
    .ac-init-speed-container button[type=roll] {
        display: block;
    }
    
    .hp,
    .exhaustion,
    .subcontainer,
    .attacks,
    .equipment {
        border: 1px solid #666;
        border-radius: 5px;
    }
    
    .hp input {
        font-size: 30px;
    }
    
    .exhaustion input {
        font-size: 20px;
    }
    
    .hp input[type="number"] {
        width: 100%;
        padding-right: 0;
        padding-left: 20px;
    }
    
    .hp span.label,
    .exhuastion span .label,
    .hdice-dsaves-container span.label {
        margin-top: 10px;
    }
    
    .hp .top span,
    .hdice-dsaves-container .top span,
    .attacks .top span,
    .tool_proficiencies .top span,
    .proficiencies .top span,
    .traits .top span {
        text-align: left;
        margin-left: 5px;
        color: #000000;
        font-weight: normal;
        display: inline-block;
        width: initial;
    }
    
    .hp .top input,
    .hdice-dsaves-container .top input[type=text] {
        border-bottom: 1px solid #000000;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        background: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        color: black;
        width: auto;
        display: inline-block;
        font-size: 12px;
        padding: 0;
    }
    
    .hdice-dsaves-container .top input[type=text] {
        width: 80px;
    }
    
    .subcontainer {
        width: 116px;
        display: inline-block;
        vertical-align: top;
        min-height: 64px;
    }
    
    .subcontainer input[type=text].label {
        display: block;
        font-size: 9px;
        line-height: 12px;
        width: 100%;
        text-align: center;
        font-weight: bold;
    }
    
    .hdice-dsaves-container .row-container {
        float: right;
        margin-right: 5px;
        margin-top: 5px;
    }
    
    .hdice-dsaves-container .row-container span {
        display: inline-block;
        width: inherit;
    }
    
    .money {
        width: 70px;
        display: inline-block;
    }
    
    .coin {
        display: flex;
        flex-direction: row;
        gap: 0.1rem;
        border: 1px solid #666;
        border-radius: 5px;
        margin: 0.2rem;
        background-color: white;
        padding: 0;
        align-items: center;
    }
    
    .coin span {
        color: #000000;
        width: 5px;
    }
    
    .coin input {
        font-size: 11px;
        padding: 0;
        flex: 1;
    }
    
    .equipment {
        position: relative;
        min-height: 276px;
    }
    
    .equipment textarea {
        width: calc(100% - 69px);
        margin: 0 0 0 -5px;
        resize: vertical;
        border: none;
        display: inline-block;
        padding: 0;
        min-height: 264px;
    }
    
    .equipment span,
    .textbox span {
        margin-top: 0;
    }
    
    .textbox {
        width: 100%;
        border: 1px solid #666;
        border-radius: 5px;
        margin-bottom: 5px;
    }
    
    .textbox textarea {
        width: calc(100% - 10px);
        resize: vertical;
        border: none;
        margin: 0;
        padding-bottom: 0;
        min-height: 48px;
        height: 48px;
    }
    
    /*.col3 {
        width: 245px;
        margin-left: -3px;
    }*/
    
    .footer {
        -webkit-user-select: auto;
        -moz-user-select: text;
        font-size: 10px;
        color: rgb(165, 165, 165);
        margin-top: 10px;
    }
    
    .footer div {
        width: 45%;
        display: inline-block;
    }
    
    .attacks {
        min-height: 274px;
        margin-bottom: 10px;
    }
    
    .attacks .display button[type=roll],
    .tool .display button[type=roll],
    .proficiency .display button[type=roll],
    .deployment .display button[type=roll] {
        background-color: transparent;
        color: black;
        border: none;
        background-image: none;
        text-shadow: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
        width: 100%;
        font-weight: bold;
    }
    
    .attacks .display button[type=roll]::before,
    .tool .display button[type=roll]::before,
    .proficiency .display button[type=roll]::before,
    .deployment .display button[type=roll]::before {
        content: "" !important;
    }
    
    .attacks .display input,
    .tool .display input,
    .equipment .item input,
    .attacks .display span,
    .tool .display span,
    .equipment .item span,
    .proficiencies .display span {
        line-height: 12px;
        border-top-left-radius: 5px;
        border-bottom-right-radius: 5px;
        background-color: #EFEFEF;
        cursor: pointer;
        text-align: left;
        font-size: 9px;
        font-weight: bold;
    }
    
    .attacks .display span,
    .tool .display span,
    .equipment .item span,
    .proficiencies .display span {
        min-height: 12px;
        display: inline-block;
        margin-top: 0;
        padding: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
        white-space: nowrap;
    }
    
    .traits .display .title {
        font-family: "Times New Roman", Times, serif;
        font-size: 16px;
        text-transform: capitalize;
        font-variant: small-caps;
        font-weight: bold;
        color: rgb(126, 45, 64);
    }
    
    .traits .display .subheader {
        font-style: italic;
        color: #000000;
        margin-top: -3px;
    }
    
    .traits .display .subheader span {
        font-size: 10px;
        display: inline;
    
    }
    
    .attacks .options-flag,
    .power .options-flag,
    .tool .options-flag,
    .npc .npc_options-flag,
    .pc .trait .options-flag,
    .pc .global-mod .options-flag,
    .ship .trait .options-flag,
    .ship .global-mod .options-flag,
    .action .options-flag,
    .textbox .options-flag,
    .proficiencies .options-flag,
    .traits .options-flag,
    .equipment .inventorysubflag,
    .header .options-flag {
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        width: 18px;
        height: 18px;
        z-index: 2;
    }
    
    .attacks .options-flag + span,
    .power .options-flag + span,
    .tool .options-flag + span,
    .npc .npc_options-flag + span,
    .trait .options-flag + span,
    .global-mod .options-flag + span,
    .action .options-flag + span,
    .textbox .options-flag + span,
    .proficiencies .options-flag + span,
    .traits .options-flag + span,
    .equipment .inventorysubflag + span,
    .header .options-flag + span {
        position: absolute;
        top: 0;
        right: 0;
        white-space: nowrap;
        width: 18px;
        height: 18px;
        font-size: 20px;
        font-family: pictos;
        color: #A0A0A0;
        cursor: pointer;
        margin-top: 0;
        display: none;
    }
    
    .pc .global-mod .options-flag:not(:checked) ~ .display,
    .pc .global-mod .options-flag:checked ~ .options,
    .ship .global-mod .options-flag:not(:checked) ~ .display,
    .ship .global-mod .options-flag:checked ~ .options {
        width: 80%;
        display: inline-block;
    }
    
    
    .attacks .options-flag:checked + span,
    .power .options-flag:checked + span,
    .tool .options-flag:checked + span,
    .npc .npc_options-flag:checked + span,
    .trait .options-flag:checked + span,
    .global-mod .options-flag:checked + span,
    .action .options-flag:checked + span,
    .textbox .options-flag:checked + span,
    .proficiencies .options-flag:checked + span,
    .traits .options-flag:checked + span,
    .equipment .inventorysubflag:checked + span,
    .header .options-flag:checked + span {
        color: black;
        display: block;
    }
    
    .attacks .attack:hover .options-flag + span,
    .power:hover .options-flag + span,
    .tool:hover .options-flag + span,
    .npc:hover > .npc_options-flag + span,
    .trait:hover .options-flag + span,
    .global-mod:hover .options-flag + span,
    .action:hover .npc_options-flag + span,
    .trait:hover .npc_options-flag + span,
    .textbox:hover > .options-flag + span,
    .proficiency:hover .options-flag + span,
    .deployment:hover .options-flag + span,
    .item:hover .inventorysubflag + span,
    .pc .trait:hover .output,
    .pc .header:hover .options-flag + span,
    .ship .trait:hover .output,
    .ship .header:hover .options-flag + span {
        display: block;
    }
    
    .pc .header .options-flag,
    .ship .header .options-flag {
        top: 8px;
        right: 4px;
    }
    
    .pc .header .options-flag + span,
    .ship .header .options-flag + span {
        top: 8px;
        right: 4px;
    }
    
    .pc .global-mod .display-flag,
    .pc .trait .display-flag,
    .ship .global-mod .display-flag,
    .ship .trait .display-flag {
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }
    
    .pc .global-mod .options-flag:checked ~ .display-flag,
    .pc .trait .options-flag:checked ~ .display-flag,
    .ship .global-mod .options-flag:checked ~ .display-flag,
    .ship .trait .options-flag:checked ~ .display-flag {
        width: 0;
        height: 0;
    }
    
    .pc .trait .display-flag:checked ~ .display .desc,
    .ship .trait .display-flag:checked ~ .display .desc {
        display: none;
    }
    
    .pc .trait .output,
    .ship .trait .output {
        position: absolute;
        top: -8px;
        right: 30px;
        width: 18px;
        height: 18px;
        z-index: 2;
        background: none;
        border: none;
        font-family: pictos;
        font-size: 20px;
        display: none;
    }
    
    .pc .trait .output:before,
    .ship .trait .output:before {
        content: "";
    }
    
    .textbox .display .desc {
        white-space: pre-wrap;
        word-break: break-word;
    }
    
    .licensecontainer,
    .attack,
    .power,
    .tool,
    .npc,
    .action,
    .textbox,
    .proficiencies,
    .traits {
        position: relative;
    }
    
    .npc_display_row {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        padding: 0.5rem;
    }
    
    .npc_display_row .display,
    .npc_display_row .actions_container {
        width: 50%;
    }
    
    .npc_display_row .traits .display {
        width: 100%;
    }
    
    .attack .options,
    .power .options,
    .tool .options,
    .npc .npc_options,
    .trait .options,
    .global-mod .options,
    .action .options,
    .textbox .options,
    .proficiencies .options,
    .trait .options {
        display: none;
        border-top: 2px dashed gold;
    }
    
    .item .subitem,
    .header .options {
        display: none;
    }
    
    .textbox .display {
        padding: 5px 5px 5px 10px;
    }
    
    .textbox .display span {
        font-weight: normal;
        font-size: 12px;
        text-align: left;
        line-height: 16px;
    }
    
    .textbox.pibf span {
        white-space: pre-wrap;
        word-break: break-word;
    }
    
    .attacks .options-flag:checked ~ .options,
    .power .options-flag:checked ~ .options,
    .tool .options-flag:checked ~ .options,
    .npc .npc_options-flag:checked ~ .npc_options,
    .trait .options-flag:checked ~ .options,
    .global-mod .options-flag:checked ~ .options,
    .action .options-flag:checked ~ .options,
    .textbox .options-flag:checked ~ .options,
    .proficiencies .options-flag:checked ~ .options,
    .traits .options-flag:checked ~ .options,
    .item .inventorysubflag:checked ~ .subitem {
        display: inherit;
    }
    
    .header .options-flag:checked ~ .options {
        min-height: 74px;
        vertical-align: top;
        display: inline-block;
    }
    
    .ship .header .options {
        min-height: 74px;
        vertical-align: top;
        display: inline-block;
    }
    
    .textbox .options-flag:checked ~ .display,
    .header .options-flag:checked ~ .display {
        display: none;
    }
    
    .power-level {
        position: relative;
        margin-bottom: 5px;
    }
    
    .header-info.options span {
        display: inline-block;
        font-weight: bold;
    }
    
    .header-info.options input {
        width: 170px;
    }
    
    .level {
        width: 20px;
        display: inline-block;
    }
    
    .level:after,
    .level:before {
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid #FFF;
        left: 0;
        top: -6px;
        content: '';
        position: absolute;
    }
    
    .level:before {
        border-top: 23px solid transparent;
        border-bottom: 23px solid transparent;
        border-left: 24px solid;
        border-left-color: inherit;
        left: -2px;
        top: -9px;
    }
    
    .level span {
        z-index: 3;
        margin-left: -3px;
        position: relative;
        font-size: 16px;
        top: 2px;
    }
    
    .cantrips {
        display: inline-block;
        border: 1px solid black;
        height: 25px;
        border-radius: 5px;
        width: 238px;
        text-align: center;
        margin-left: -20px;
    }
    
    .cantrips span {
        display: block;
        font-size: 9px;
        line-height: 12px;
        width: 100%;
        text-align: center;
        font-weight: bold;
        margin-top: 8px;
    }
    
    .power-labels {
        color: #000000;
    }
    
    .power-labels span {
        display: inline;
        font-weight: normal;
        font-size: 8px;
    }
    
    .power-level input {
        width: 100%;
        text-align: center;
        font-size: 20px;
        border: none;
        background: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: textfield;
        -webkit-border-radius: 0;
        border-radius: 0;
        color: black;
        padding: 0;
        margin: 2px;
        height: 100%;
    }
    
    .power-level .total,
    .power-level .expended {
        display: inline-block;
        border: 1px solid black;
        height: 25px;
        border-radius: 5px;
        text-align: center;
        margin-left: -20px;
        background-color: white;
    }
    
    .power-level .total {
        width: 114px;
        vertical-align: bottom;
    }
    
    .power-level .total span {
        font-size: 20px;
        font-weight: normal;
        position: relative;
        top: 3px;
    }
    
    .power-level .expended {
        width: 139px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    
    .power {
        margin-bottom: 5px;
        width: 245px;
    }
    
    .power .display {
        position: relative;
    }
    
    .power .display button[type=roll] {
        background-color: transparent;
        color: black;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #D3D3D3;
        background-image: none;
        text-shadow: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
        width: 100%;
        font-weight: bold;
        text-align: left;
    }
    
    .power .display button[type=roll]::before {
        content: "" !important;
    }
    
    span.powerritual,
    span.powerconcentration {
        display: none;
        font-size: 8px;
        font-weight: normal;
        margin-top: 0;
        color: white;
        background-color: black;
        position: absolute;
        width: 10px;
        height: 10px;
        top: 0;
        line-height: 10px;
    }
    
    .powericon_flag:not([value="none"]) + .body .power .display .powerritual:not([value="0"]) ~ span.powerritual {
        display: inline-block;
        right: 11px;
    }
    
    .powericon_flag:not([value="none"]) + .body .power .display .powerconcentration:not([value="0"]) ~ span.powerconcentration {
        border-radius: 100%;
        display: inline-block;
        right: 0;
    }
    
    .power .display .componentscontainer {
        position: absolute;
        top: 3px;
        right: 0;
        width: auto;
    }
    
    .power .display .v,
    .power .display .s,
    .power .display .m {
        display: none;
    }
    
    .powericon_flag[value="all"] + .body .power .display input.v:not([value="0"]) ~ .componentscontainer span.v,
    .powericon_flag[value="all"] + .body .power .display input.s:not([value="0"]) ~ .componentscontainer span.s,
    .powericon_flag[value="all"] + .body .power .display input.m:not([value="0"]) ~ .componentscontainer span.m {
        display: inline;
        width: initial;
        font-size: 8px;
    }
    
    .power .display input[type=text] {
        font-size: 12px;
        line-height: 12px;
        cursor: pointer;
        text-align: left;
        padding: 0;
        margin: 0;
        background-color: transparent;
        color: black;
        border: none;
        background-image: none;
        text-shadow: none;
        box-shadow: none;
        width: 100%;
    }
    
    .power .display span.powername {
        font-size: 12px;
        text-align: left;
        font-weight: normal;
        margin-right: -4px;
        margin-left: 4px;
        display: inline;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 220px;
    }
    
    .power .display .prep ~ span.powername {
        margin-left: 14px;
    }
    
    .repcontrol {
        min-height: 27px;
    }
    
    .repcontrol .btn {
        /*visibility: hidden;*/
        border: medium none;
        color: #000000;
        background: none;
        box-shadow: none;
    }
    
    .repcontrol .btn:focus {
        outline: 0;
    }
    
    .repcontrol .repcontrol_edit:after {
        content: '(';
        visibility: visible;
        font-family: pictos;
        background-color: #fff;
        border: 1px solid black;
        border-radius: 2px;
        font-size: 12px;
        height: 12px;
        width: 12px;
        padding: 2px 4px 2px 4px;
        color: black;
    }
    
    .editmode ~ .repcontrol .repcontrol_edit:after {
        content: ')';
    }
    
    .repcontrol .repcontrol_add:before {
        content: '&';
        visibility: visible;
        font-family: pictos;
        background-color: #fff;
        border: 1px solid black;
        border-radius: 2px;
        font-size: 12px;
        height: 12px;
        width: 12px;
        padding: 2px 4px 2px 4px;
        color: black;
    }
    
    .repcontrol .repcontrol_edit:hover:after,
    .repcontrol .repcontrol_add:hover:before {
        background-color: #EFEFEF;
    }
    
    .resources .repcontrol {
        margin-top: -10px;
    }
    
    .itemcontrol {
        z-index: 10;
    }
    
    .itemcontrol .repcontrol_del {
        font-size: 10px;
        margin-top: 3px;
        padding: 0;
        height: 18px;
        width: 18px;
    }
    
    .itemcontrol .repcontrol_move {
        font-size: 10px;
        margin-top: 3px;
        padding: 0;
        height: 18px;
        width: 18px;
    }
    
    .tool .options,
    .attack .options,
    .power .options,
    .proficiencies .options,
    .traits .options,
    .global-mod .options {
        padding-left: 5px;
    }
    
    .tool .options span,
    .attack .options span,
    .power .options span,
    .options .body span,
    .proficiencies .options span,
    .traits .options span,
    .global-mod .options span {
        width: initial;
        display: inline-block;
        text-align: left;
    }
    
    .tool .options input,
    .attack .options input[type=text],
    .power .options input[type=text],
    .options .body input[type=text],
    .proficiencies .options input[type=text],
    .proficiencies .options input[type=number],
    .traits .options input[type=text],
    .global-mod .options input[type=text],
    .global-mod .options input[type=number] {
        display: inline-block;
        text-align: left;
        font-size: 12px;
        border-bottom: 1px solid #D3D3D3;
        padding: 0;
        width: initial;
    }
    
    .tool .options select,
    .attack .options select,
    .power .options select,
    .options .body select,
    .proficiencies .options select,
    .traits .options select,
    .hdice-dsaves-container .options select,
    .hp select {
        border-bottom: 1px solid #D3D3D3;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        background: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        color: black;
        display: inline-block;
        font-size: 12px;
        width: initial;
        padding: 0;
        margin: 0;
        line-height: 18px;
        height: 18px;
    }
    
    .tool .options input[type=checkbox],
    .attack .options input[type=checkbox],
    .power .options input[type=checkbox],
    .options .body input[type=checkbox],
    .npc .npc_options input[type=checkbox],
    .proficiencies .options input[type=checkbox],
    .traits .options input[type=checkbox],
    .global-mod .options input[type=checkbox] {
        width: 13px;
        font-size: initial;
        -webkit-appearance: checkbox;
        -moz-appearance: checkbox;
    }
    
    .attack .options input[type=text].num,
    .options input[type=text].num {
        width: 15px;
        text-align: center;
    }
    
    .power .options textarea {
        width: calc(100% - 10px);
        resize: vertical;
        margin-bottom: 0;
    }
    
    .power-container {
        min-height: 60px;
        margin-bottom: 1px;
    }
    
    .power-container input[name="attr_powercastingtime"] {
        width: 168px;
    }
    
    .power-container input[name="attr_powerrange"] {
        width: 201px;
    }
    
    .power-container input[name="attr_powertarget"] {
        width: 199px;
    }
    
    .power-container .power .options input[name="attr_powercomp_materials"] {
        margin-left: 17px;
        width: 223px;
    }
    
    .power-container input[name="attr_powerduration"] {
        width: 186px;
    }
    
    .options .sheet-row {
        display: block;
        width: 100%;
    }
    
    .options .title input[type=text] {
        width: 62px;
        border: none;
        text-align: center;
        color: #A0A0A0
    }
    
    .options .title {
        text-align: center;
    }
    
    .class_options,
    .skill_options,
    .general_options {
        border: 1px solid #666;
        border-radius: 5px;
        padding: 5px;
        margin-bottom: 5px;
    }
    
    .general_options {
        position: relative;
    }
    
    .hlabel-container .showing,
    .hlabel-container .hiding,
    .header .showing,
    .header input[value="1"].flag ~ .hiding {
        display: none;
    }
    
    .hlabel-container input[value="1"].flag ~ .showing,
    .hlabel-container input[value="0"].flag ~ .hiding,
    .header input[value="1"].flag ~ .showing {
        display: inline-block;
    }
    
    .options .sheet-row > span {
        color: black;
    }
    
    .power .display {
        position: relative;
    }
    
    .power .prep {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: absolute;
        top: 0;
        border: 1px solid black;
    }
    
    .power input[type=checkbox]:checked ~ span.prep {
        background-color: #EC2127;
    }
    
    .power .prep-box {
        -webkit-appearance: checkbox;
        -moz-appearance: checkbox;
        opacity: 0;
        z-index: 2;
        position: relative;
        width: 12px
    }
    
    .charsheet .power .display button[type=roll].powercard {
        width: calc(100% - 18px);
    }
    
    .triangleold {
        border-top: 3px solid transparent;
        border-bottom: 3px solid transparent;
        border-left: 360px solid rgb(126, 45, 64);
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    .triangle {
        border: 1px solid rgb(126, 45, 64);
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    .red,
    .npc .display .red input,
    .npc .display .red span {
        color: rgb(126, 45, 64);
    }
    
    .npc .npc_options input {
        border-bottom: 1px solid #D3D3D3;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        background: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        color: black;
        width: 200px;
        display: inline-block;
        font-size: 12px;
        padding: 0;
    }
    
    .npc .npc_options span {
        display: inline-block;
        font-size: 9px;
        line-height: 12px;
        text-align: left;
        font-weight: bold;
    }
    
    .npc .npc_options .title span {
        text-align: center;
        font-size: 14px;
        display: block;
        margin-top: 5px;
    }
    
    .npc .npc_options {
        border-bottom: 2px dashed gold;
    }
    
    .npc input[type=text].num {
        width: 20px;
        text-align: center;
    }
    
    .npc .col {
        width: calc(33% - 5px);
    }
    
    .npc .spacer {
        height: 5px;
    }
    
    .npc select {
        border-bottom: 1px solid #D3D3D3;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        background: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        color: black;
        line-height: inherit;
    }
    
    .npc .display input,
    .npc .reaction input {
        border: none;
        background: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        color: black;
        margin: 0;
        pointer-events: none;
        padding: 0;
        height: 16px;
        line-height: 16px;
        margin-top: -2px;
    }
    
    .npc .display .title span {
        font-family: "Times New Roman", Times, serif;
        font-size: 24px;
        width: 100%;
        text-transform: capitalize;
        font-variant: small-caps;
        font-weight: bold;
        display: block;
        text-align: left;
        line-height: 27px;
    }
    
    .npc .display .subtitle span {
        font-size: 12px;
    }
    
    .npc .display .num3 {
        width: 27px;
        text-align: center;
    }
    
    .npc .display .actype + .parens {
        display: none;
    }
    
    .npc .display .actype:not([value=""]) + .parens {
        display: inline;
    }
    
    .npc .display .parens {
        margin-left: -2px;
    }
    
    .npc .display .parens:before {
        content: "(";
    }
    
    .npc .display .parens:after {
        content: ")";
    }
    
    .npc .display .parens.xp:after {
        content: " XP)";
    }
    
    .npc .display span.npc-init-die {
        font-family: "dicefontd20";
        font-size: 16px;
        display: block;
    }
    
    .npc .attr-container {
        width: 55px;
        border: 0;
        border-radius: 0;
        position: relative;
        padding: 5px 0 5px 0;
        margin: 0;
        height: inherit;
        display: inline-block;
        text-align: center;
    }
    
    .npc .attr-container span {
        font-size: 13px;
        font-weight: normal;
        display: inline;
        margin-bottom: 2px;
    }
    
    .npc .attr-container span.bold {
        display: block;
    }
    
    .npc span.bold,
    .npc .action button span.bold,
    .npc .trait button span.bold {
        font-weight: bold;
    }
    
    .npc .attr-container input {
        width: 20px;
        text-align: center;
    }
    
    .npc .attr-container input:nth-child(3) {
        width: 30px;
        margin-left: -5px;
    }
    
    .npc .display .flag[value="0"] + button,
    .npc .display .flag[value="0"] + div,
    .npc .display .flag[value=""] + button,
    .npc .display .flag[value=""] + div,
    .npc .display .status {
        display: none;
    }
    
    .npc .display .flag[value]:not([value=""]) + div {
        display: block;
    }
    
    .npc button[type=roll] input {
        border: none;
        background: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        color: black;
        margin: 0;
        pointer-events: none;
        padding: 0;
        height: 16px;
        line-height: 16px;
    }
    
    .npc button[type=roll] {
        width: auto;
        white-space: nowrap;
    }
    
    .npc .saving button[type=roll] span,
    .npc .skills button[type=roll] span {
        font-size: 13px;
        font-weight: normal;
        width: auto;
        display: inline-block;
        line-height: 16px;
        height: 16px;
        vertical-align: bottom;
    }
    
    .npc .display .flag[value="1"] + button .spacer,
    .npc .display .flag[value="2"] + button .spacer {
        display: none;
    }
    
    .npc .display button input {
        width: 14px;
        text-align: center;
    }
    
    .npc .display .flag[value="1"] + button .stat::before,
    .npc .display .flag[value="2"] + button .stat::before {
        content: "+";
    }
    
    .npc .display .flag[value="1"] + button .stat::after,
    .npc .display .flag[value="3"] + button .stat::after {
        content: ", ";
    }
    
    .negativeflag[value="1"] + .npcattr::before {
        content: "(";
    }
    
    .negativeflag[value="0"] + .npcattr::before {
        content: "(+";
    }
    
    .npcattr::after {
        content: ")";
    }
    
    .traits {
        min-height: 20px;
    }
    
    .npc .display .traits .trait,
    .npc .reaction .trait {
        position: relative;
    }
    
    .npc .display .traits input,
    .npc .reaction input {
        pointer-events: initial;
    }
    
    
    .npc .reaction input {
        font-weight: bold;
        width: 100%;
    }
    
    .npc .display .traits textarea,
    .npc .reaction textarea,
    .attack textarea {
        resize: vertical;
        height: 36px;
        min-height: 36px;
        border: none;
        padding: 0;
        box-shadow: none;
    }
    
    .npc .actiontitle {
        border-bottom: 1px solid rgb(126, 45, 64);
        width: 100%;
        margin-bottom: 5px;
    }
    
    .npc .actions .title {
        font-size: 18px;
        text-transform: capitalize;
        font-variant: small-caps;
        line-height: inherit;
        height: inherit;
        margin: 0;
    }
    
    .npc .traits,
    .npc .actions {
        min-height: 40px;
    }
    
    .npc .description_flag[value="0"] + textarea,
    .npc .description_flag[value=""] + textarea {
        display: none;
        height: 36px;
        min-height: 36px;
    }
    
    .npc .attack_option {
        display: none;
    }
    
    .npc .attack_options[value="on"] ~ .attack_option,
    .npc .attack_options[value="{{attack=1}}"] ~ .attack_option {
        display: block;
    }
    
    .npc .action .display .description_flag[value="3"] + textarea {
        height: 54px;
    }
    
    .npc .action .display .description_flag[value="4"] + textarea {
        height: 72px;
    }
    
    .npc .action .display .description_flag[value="5"] + textarea {
        height: 90px;
    }
    
    .npc .action .display .description_flag[value="6"] + textarea {
        height: 108px;
    }
    
    .npc .action .display .description_flag[value="7"] + textarea {
        height: 126px;
    }
    
    .npc .action .display .description_flag[value="8"] + textarea {
        height: 144px;
    }
    
    .npc .action .display .description_flag[value="9"] + textarea {
        height: 162px;
    }
    
    .npc .action .display .description_flag[value="10"] + textarea {
        height: 180px;
    }
    
    .npc .action .display .description_flag[value="11"] + textarea {
        height: 196px;
    }
    
    .npc .action .display .description_flag[value="12"] + textarea {
        height: 216px;
    }
    
    .npc .action .display .description_flag[value="13"] + textarea {
        height: 234px;
    }
    
    .npc .action .display .description_flag[value="14"] + textarea {
        height: 252px;
    }
    
    .npc .action .display .description_flag[value="15"] + textarea {
        height: 270px;
    }
    
    .npc .action .display .description_flag[value="16"] + textarea {
        height: 288px;
    }
    
    .npc .action .display .description_flag[value="17"] + textarea {
        height: 306px;
    }
    
    .npc .action .display .description_flag[value="18"] + textarea {
        height: 324px;
    }
    
    .npc .action .display .description_flag[value="19"] + textarea {
        height: 342px;
    }
    
    .npc .action .display .description_flag[value="20"] + textarea {
        height: 360px;
    }
    
    .npc .actions select {
        width: auto;
        margin: 0;
        padding: 0;
        height: 13px;
        line-height: 13px;
        font-size: 13px;
    }
    
    .npc .trait button[type=roll],
    .npc .action button[type=roll] {
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
    }
    
    .npc .trait button span,
    .npc .action button span {
        font-size: 13px;
        font-weight: normal;
    }
    
    .npc .traits .wide,
    .npc .actions .wide {
        width: 100%;
        text-align: left;
    }
    
    .npc .traits .wide span:after,
    .npc .actions .wide span:after {
        content: ".";
    }
    
    .npc .trait .display .description,
    .npc .action .display .description {
        white-space: normal;
        color: #555555;
        line-height: 18px;
    }
    
    .npc .action .display textarea,
    .npc .trait .display textarea,
    .legendaryactions {
        border: none;
        margin-bottom: 0;
        padding: 0;
        text-shadow: none;
        box-shadow: none;
        height: 36px;
        min-height: 36px;
        resize: none;
        overflow: hidden;
    }
    
    .legendaryactions {
        height: 90px;
        pointer-events: none;
        margin-bottom: 15px;
        color: #555555;
    }
    
    .npcpoweroptions {
        display: inline-block;
        margin-left: 17px;
    }
    
    .container.npc .legendary,
    .container.npc .reaction,
    .npcpower_flag[value="0"] ~ .npcpower,
    .npcpowercastingflag:not(:checked) ~ .npcpoweroptions {
        display: none;
    }
    
    .legendary_flag:not([value="0"]) ~ .legendary,
    .reaction_flag[value="1"] ~ .reaction {
        display: block;
    }
    
    .npc .action textarea,
    .npc .trait textarea,
    .pc .globalattack textarea {
        resize: vertical;
    }
    
    .equipment .inventorysubflag {
        height: 10px;
        width: 10px;
        top: 10px;
        right: 0;
    }
    
    
    .equipment .inventorysubflag + span {
        height: 10px;
        width: 10px;
        top: 10px;
        right: 0;
        font-size: 10px;
        padding: 0;
    }
    
    .equipment .complex {
        width: 160px;
        vertical-align: top;
        padding-top: 5px;
        margin-bottom: 15px;
    }
    
    .proficiencies .complex,
    .traits .complex {
        width: 240px;
        vertical-align: top;
        padding-top: 5px;
        margin-bottom: 15px;
    }
    
    .pictos {
        font-family: pictos;
    }
    
    .equipment .header span {
        display: inline-block;
    }
    
    .item {
        margin-bottom: 2px;
    }
    
    .item .name {
        width: 100px;
    }
    
    .item input[type="text"].weight {
        width: 25px;
        text-align: center;
    }
    
    .item .subitem .subfield {
        font-weight: normal;
        background-color: transparent;
        padding: 0;
        width: 112px;
    }
    
    .item .subitem .subtextarea {
        width: calc(100% - 20px);
        font-size: 9px;
        padding: 0 5px 0 15px;
        min-height: 32px;
        height: 32px;
        margin: 0;
    }
    
    .equipment .weighttotal {
        position: absolute;
        left: 0;
        top: 160px;
        width: 70px;
    }
    
    .equipment .weighttotal input {
        pointer-events: none;
    }
    
    .item .subitem span {
        width: 32px;
        padding: 0 0 0 10px;
        display: inline-block;
    }
    
    .equipment .warning {
        display: none;
    }
    
    .equipment .warningflag[value="show"] ~ .warning {
        display: block;
    }
    
    .equipment .warning span,
    .equipment .encumb {
        color: red;
    }
    
    .equipment .encumb {
        display: none;
        font-size: 9px;
    }
    
    .npc .warning {
        color: red;
        font-size: 9px;
    }
    
    .equipment .encumberance[value="IMMOBILE"] ~ .immobile,
    .equipment .encumberance[value="HEAVILY ENCUMBERED"] ~ .heavily,
    .equipment .encumberance[value="ENCUMBERED"] ~ .encumbered,
    .equipment .encumberance[value="OVER CARRYING CAPACITY"] ~ .over {
        display: block;
    }
    
    .equipment .warning input[type="checkbox"] {
        -webkit-appearance: checkbox;
        -moz-appearance: checkbox;
        width: auto;
    }
    
    .equipment .item .subitem .equipped {
        -webkit-appearance: checkbox;
        -moz-appearance: checkbox;
        width: initial;
        margin-left: 15px;
    }
    
    .equipment .item .subitem .equippedlabel {
        width: calc(100% - 50px);
        text-align: left;
        padding-left: 5px;
    }
    
    .equipment .equippedflag[value="0"] ~ .item > .name {
        color: #999;
    }
    
    .version {
        position: absolute;
        top: 0;
        right: 0;
        pointer-events: none;
    }
    
    .charsheet .options .body .version input[type="text"] {
        border-bottom: none;
        width: 20px;
    }
    
    .powerattackinfo {
        display: none;
    }
    
    .charsheet .powers .powerattackinfoflag[value="ATTACK"] ~ .powerattackinfo,
    .charsheet .npc .powerattackinfoflag[value="ATTACK"] ~ .powerattackinfo {
        display: block;
    }
    
    .attack input[type=text].flat {
        display: none;
    }
    
    .attack .flatflag[value*="saveflat"] ~ input[type=text].flat {
        display: inline-block;
    }
    
    
    .attacks .ammo {
        display: none;
    }
    
    .ammoflag[value="on"] + .attacks .ammo {
        display: block;
    }
    
    .hlabel-container [name="attr_race_display"] {
        width: 200px;
    }
    
    .hlabel-container [name="attr_alignment"] {
        width: 180px;
    }
    
    .hlabel-container [name="attr_experience"] {
        width: 100px;
    }
    
    .class {
        width: 74px;
    }
    
    .charsheet .hlabel-container .multiclass-display {
        width: 57px;
        font-size: 13px;
        border-bottom: 1px solid #D3D3D3;
        line-height: 35px;
        height: 27px;
        margin-right: -4px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .charsheet .hlabel-container .multiclass-display-level {
        width: 31px;
        text-align: center;
        font-size: 13px;
        border-bottom: 1px solid #D3D3D3;
        line-height: 35px;
        height: 27px;
        overflow: hidden;
    }
    
    .charsheet .hlabel-container input.class-level {
        margin-left: -6px;
        width: 34px;
    }
    
    .options .body input[type=text].pb_custom {
        display: none;
    }
    
    .options .body input[value="custom"] + input[type=text].pb_custom {
        display: inline-block;
    }
    
    .attr-mod .baseattr {
        /*display: none;*/
        opacity: 0;
        height: 0;
        width: 0;
        pointer-events: none;
        display: inline;
        position: absolute;
    }
    
    .finalattr {
        font-size: 20px;
        line-height: 20px;
    }
    
    .attr-mod:hover .baseattr,
    .attr-mod .baseattr:focus {
        /*display: inline;*/
        opacity: 1;
        height: 20px;
        width: 40px;
        pointer-events: auto;
        position: static;
    }
    
    .attr-mod:hover .finalattr,
    .attr-mod .baseattr:focus ~ .finalattr {
        display: none;
    }
    
    .attr-mod .attr-flag[value="1"] + .finalattr {
        color: #3e99e8;
    }
    
    .attr-mod .attr-flag[value="1"] + .finalattr:after {
        content: '*';
        font-size: 15px;
        position: absolute;
    }
    
    .power_slot_mods .column {
        width: 32%;
        display: inline-block;
    }
    
    .power_slot_mods .num_plus {
        margin-left: 2px;
    }
    
    .init {
        text-align: center;
    }
    
    .init span {
        font-size: 20px;
        line-height: 31px;
    }
    
    .class_options .subclass {
        margin-left: 19px;
    }
    
    .header .display .class-display {
        width: 298px;
        text-transform: capitalize;
        overflow: hidden;
        word-wrap: break-word;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    .no_events {
        pointer-events: none;
    }
    
    /* TRANSITION SCRIPT */
    .class_options,
    .skill_options,
    .attribute_options,
    .save_options,
    .general_options,
    .transition_options {
        border: 1px solid #666;
        border-radius: 5px;
        padding: 5px;
        margin-bottom: 5px;
    }
    
    .transition_options {
        display: none;
    }
    
    .already_transitioned[value="0"] ~ .transition_options {
        display: block;
    }
    
    .sheet_select img {
        padding: 5px;
        border: 1px solid #BBB;
        border-radius: 5px;
    }
    
    .sheet_select img:hover {
        background-color: #DDD;
        cursor: pointer !important;
    }
    
    .charsheet .options .sheet-row span.transition_text {
        color: #A0A0A0;
    }
    
    .charsheet .options .sheet-row span.transition_text_highlight {
        color: #F00;
    }
    
    .globalattack input[type="checkbox"] {
        display: inline;
        height: 12px;
        width: 12px;
        -webkit-appearance: checkbox;
        -moz-appearance: checkbox;
        margin-left: 5px;
        margin-top: 10px;
    }
    
    .globalattack textarea {
        width: 200px;
        display: inline;
        height: 25px;
        margin: 1px;
    }
    
    .globalattack .label {
        margin-bottom: 5px;
        padding-top: 5px;
        color: #A0A0A0;
        border-top: 1px dotted #A0A0A0;
    }
    
    .missing-info {
        margin-bottom: 100px;
        display: none;
    }
    
    .missing-info-flag[value="1"] + .missing-info,
    .missing-info:hover .missing-info-desc,
    .missing-info-desc:hover {
        display: block;
    }
    
    .actions.npcpower.powers,
    .missing-info-desc {
        display: none;
    }
    
    .npcpower_flag[value="1"] + .actions.npcpower.powers {
        display: block;
    }
    
    .powers .innate {
        color: #A0A0A0;
        display: none;
        font-size: 12px;
        font-weight: normal;
    }
    
    .innate:before {
        content: ", "
    }
    
    .innate_flag:not([value=""]) + .innate {
        display: inline;
    }
    
    .backgrounds_options label select,
    .backgrounds_options label span,
    .backgrounds_options label button {
        display: inline-block;
    }
    
    .backgrounds_options label button[type="roll"] {
        margin-top: .5em;
    }
    
    .backgrounds_options label br {
        margin-top: .1em;
    }
    
    .backgrounds_options label select:not([required]) {
        width: calc(100% - 4em);
    }
    
    
    .pc .globalattack {
        border: none;
    }
    
    .pc .global-mod .options-flag:not(:checked) ~ .display .title,
    .ship .global-mod .options-flag:not(:checked) ~ .display .title {
        font-size: 9px;
        font-weight: bold;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 4px;
        padding-right: 4px;
        display: inline-block;
        width: 100%;
        background-color: #EFEFEF;
        line-height: 16px;
        border-top-left-radius: 5px;
        border-bottom-right-radius: 5px;
        text-align: left;
    }
    
    .pc .global-mod .options-flag:not(:checked) ~ .display .subheader,
    .ship .global-mod .options-flag:not(:checked) ~ .display .subheader {
        font-size: 9px;
        font-weight: bold;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 4px;
        padding-right: 4px;
        height: 16px;
        display: inline-block;
        width: 70px;
        background-color: #EFEFEF;
        border-top-left-radius: 5px;
        border-bottom-right-radius: 5px;
        text-align: left;
    }
    
    .pc .global-mod .active-flag,
    .ship .global-mod .active-flag {
        margin-bottom: 10px;
    }
    
    .pc .global-mod .options-flag:checked ~ .active-flag,
    .ship .global-mod .options-flag:checked ~ .active-flag {
        margin-bottom: 50px;
    }
    
    .pc .global-mod .options-flag:checked ~ .display,
    .ship .global-mod .options-flag:checked ~ .display {
        display: none;
    }
    
    .npc .display .info {
        font-weight: normal;
    }
    
    .fixed-bottom-title{
        display:flex;
        width:100%;
        justify-content: center;
        align-items: center;
        gap: 0.2rem;
        margin-bottom: -1rem;
    }
    .fixed-bottom-title span {
        margin: 0;
        width: auto;
    }
    

    /* Row & Column*/
    .flex-row,
    .flex-column{
        display: flex;
        flex-wrap: nowrap;
        gap : 0.5rem;
    }
    
    .flex-row {
        flex-direction: row;
    }
    
    .flex-column {
        flex-direction: column;
    }
    
    .flex-w-1 {
        width: calc(1 * 100% / 12);
    }
    
    .flex-w-2 {
        width: calc(2 * 100% / 12);
    }
    
    .flex-w-3 {
        width: calc(3 * 100% / 12);
    }
    
    .flex-w-4 {
        width: calc(4 * 100% / 12);
    }
    
    .flex-w-5 {
        width: calc(5 * 100% / 12);
    }
    
    .flex-w-6 {
        width: calc(6 * 100% / 12);
    }
    
    .flex-w-7 {
        width: calc(7 * 100% / 12);
    }
    
    .flex-w-8 {
        width: calc(8 * 100% / 12);
    }
    
    .flex-w-9 {
        width: calc(9 * 100% / 12);
    }
    
    .flex-w-10 {
        width: calc(10 * 100% / 12);
    }
    
    .flex-w-11 {
        width: calc(11 * 100% / 12);
    }
    
    .flex-w-12 {
        width: calc(12 * 100% / 12);
    }
    
    /* Axis Alignement */
    .flex-justify-start{
        justify-content: flex-start;
    }
    .flex-justify-end{
        justify-content: flex-end;
    }
    .flex-justify-center{
        justify-content: center;
    }
    .flex-justify-sb{
        justify-content: space-between;
    }
    .flex-justify-sa{
        justify-content: space-around;
    }
    .flex-justify-se{
        justify-content: space-evenly;
    }
    
    /* Cross Axis Alignment*/
    .flex-align-start{
        align-items: flex-start;
    }
    .flex-align-end{
        align-items: flex-end;
    }
    .flex-align-center{
        align-items: center;
    }
    .flex-align-stretch{
        align-items: stretch;
    }
    

    /* Tab Switching */
    input[type=radio].tab-button {
        opacity: 0;
        position: absolute;
        top: 92px;
        right: 2rem;
        width: 18px;
        height: 18px;
        z-index: 2;
    }
    
    input[type=radio].tab-button + span {
        position: absolute;
        top: 92px;
        right: 2rem;
        width: 17px;
        height: 17px;
        border: 1px solid black;
        border-radius: 5px;
        background-color: #E8E8E8;
        color: black;
        text-align: center;
        font-weight: bold;
    }
    
    .advantagetoggle input[type=radio]:checked + span,
    input[type=radio].tab-button:checked + span {
        color: #FFFFFF;
        background-color: #EC2127;
    }
    
    .advantagetoggle input.toggle-left,
    .advantagetoggle input.toggle-left + span {
        right: calc(181px + 2rem);
        width: 90px;
    }
    
    .advantagetoggle input.toggle-center,
    .advantagetoggle input.toggle-center + span {
        right: calc(113px + 2rem);
        width: 65px;
    }
    
    .advantagetoggle input.toggle-right,
    .advantagetoggle input.toggle-right + span {
        right: calc(0px + 2rem);
        width: 110px;
    }
    
    .whispertoggle {
        left: 270px;
    }
    
    .advantagetoggle.whispertoggle input.toggle-right,
    .advantagetoggle.whispertoggle input.toggle-right + span {
        width: 50px;
    }
    
    .advantagetoggle.whispertoggle input.toggle-left,
    .advantagetoggle.whispertoggle input.toggle-left + span {
        right: calc(54px + 2rem);
        width: 55px;
    }
    
    .npc_toggle[value="1"] ~ .advantagetoggle {
        top: -10px;
        left: 390px;
    }
    
    .npc_toggle[value="1"] ~ .advantagetoggle.whispertoggle {
        top: -10px;
        left: 120px;
    }
    
    .advantagetoggle {
        display: none;
    }
    
    .toggleflag[value*="advantagetoggle"] + .advantagetoggle,
    .toggleflag[value*="whispertoggle"] + .whispertoggle,
    .toggleflag[value="1"] + .conditional-visibility,
    .toggleflag[value="1"] + .sheet-row.conditional-visibility {
        display: block;
    }
    
    .npc_toggle[value="1"] + .npcpowercastingflag[value="1"] ~ .pc,
    .npc_toggle[value="1"] + .npcpowercastingflag[value="1"] ~ .pc .tab.powers .header {
        display: block;
        visibility: hidden;
        width: 0;
        top: -150px;
        margin: 0;
        padding: 0;
    }
    
    .npc_toggle[value="1"] + .npcpowercastingflag[value="1"] ~ .pc .tab.powers {
        display: block;
    }
    
    .npc_toggle[value="1"] + .npcpowercastingflag[value="1"] ~ .pc .tab.core,
    .npc_toggle[value="1"] + .npcpowercastingflag[value="1"] ~ .pc .tab.bio,
    .npc_toggle[value="1"] + .npcpowercastingflag[value="1"] ~ .pc .tab.options {
        display: none;
    }
    
    .npc_toggle[value="2"] ~ .ship .tab.ship-core,
    .npc_toggle[value="2"] ~ .ship .tab.ship-cargo,
    .npc_toggle[value="2"] ~ .ship .tab.ship-mods,
    .npc_toggle[value="2"] ~ .ship .tab.ship-suites {
        display: none;
    }
    
    .npc_toggle[value="1"] + .npcpowercastingflag[value="1"] ~ .pc .tab.powers .body {
        visibility: visible;
    }
    
    .npc_toggle[value="1"] + .npcpowercastingflag[value="1"] ~ .pc .tab.powers .body .col {
        display: block;
    }
    
    .conditional-visibility,
    .options .sheet-row.conditional-visibility {
        display: none;
    }
    
    .npc_toggle[value="1"] ~ .advantagetoggle input[type=radio] + span {
        text-transform: lowercase;
        font-variant: small-caps;
        font-weight: normal;
        background: transparent;
        border: none;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    
    .npc_toggle[value="1"] ~ .advantagetoggle input[type=radio] + span:first-letter {
        text-transform: uppercase;
    }
    
    .npc_toggle[value="1"] ~ .advantagetoggle input[type=radio] + span > span.togm {
        text-transform: uppercase;
    }
    
    .npc_toggle[value="1"] ~ .advantagetoggle input[type=radio]:checked + span {
        font-weight: bold;
        color: rgb(126, 45, 64);
    }
    
    .tab {
        display: none;
    }
    
    input[type=radio].tab-button.core:checked ~ .tab.core,
    input[type=radio].tab-button.bio:checked ~ .tab.bio,
    input[type=radio].tab-button.powers:checked ~ .tab.powers,
    input[type=radio].tab-button.options:checked ~ .tab.options,
    input[type=radio].tab-button.ship-core:checked ~ .tab.ship-core,
    input[type=radio].tab-button.ship-cargo:checked ~ .tab.ship-cargo,
    input[type=radio].tab-button.ship-mods:checked ~ .tab.ship-mods,
    input[type=radio].tab-button.ship-suites:checked ~ .tab.ship-suites {
        display: block;
    }
    
    input[type=radio].tab-button.core,
    input[type=radio].tab-button.core + span {
        right: calc(121px + 2rem);
        width: 45px;
    }
    
    input[type=radio].tab-button.ship-core,
    input[type=radio].tab-button.ship-core + span {
        height: 15px;
        right: calc(100px + 2rem);
        width: 80px;
    }
    
    input[type=radio].tab-button.ship-cargo,
    input[type=radio].tab-button.ship-cargo + span {
        height: 15px;
        right: calc(20px + 2rem);
        width: 80px;
    }
    
    input[type=radio].tab-button.ship-mods,
    input[type=radio].tab-button.ship-mods + span {
        top: 110px;
        height: 15px;
        right: calc(100px + 2rem);
        width: 80px;
    }
    
    input[type=radio].tab-button.ship-suites,
    input[type=radio].tab-button.ship-suites + span {
        top: 110px;
        height: 15px;
        right: calc(20px + 2rem);
        width: 80px;
    }
    
    input[type=radio].tab-button.bio,
    input[type=radio].tab-button.bio + span {
        right: calc(88px + 2rem);
        width: 30px;
    }
    
    input[type=radio].tab-button.powers,
    input[type=radio].tab-button.powers + span {
        right: calc(20px + 2rem);
        width: 65px;
    }
    
    /* Switch between complex & simple data */
    .equipment .complex,
    .equipment .simple,
    .proficiencies .complex,
    .proficiencies .simple,
    .traits .complex,
    .traits .simple
    {
        display: none;
    }
    
    .equipment .inventoryflag[value="complex"] ~ .complex,
    .equipment .inventoryflag[value="simple"] ~ .simple,
    .proficiencies .inventoryflag[value="complex"] ~ .complex,
    .proficiencies .inventoryflag[value="simple"] ~ .simple,
    .traits .inventoryflag[value="complex"] ~ .complex,
    .traits .inventoryflag[value="simple"] ~ .simple
    {
        display: inline-block;
    }

}
/* Translation Overrides */
/* Spanish */
.ui-dialog .tab-content .charsheet.lang-es {
    .break-lang {
        white-space: break-spaces;
    }

    .hp .top input{
        width: 125px;
    }

    .powers .header .break-lang {
        font-size: 8.5px;
        margin-top: 0;
    }

    .insp-prof-container .break-lang {
        line-height: 15px;
    }

    .fixed-bottom-title{
        flex-direction: column;
        gap: 0;
    }

    .ship-cargo .hp .top input,
    .ship-mods .hp .top input ,
    .ship-suites .hp .top input {
        width: 110px;
    }

    .attacks .top .lang-long {
        font-size: 7.5px;
    }
}


/*Dark mode fix for sheet bg*/
.sheet-darkmode .sheetform {
    background : none !important;
}
.rolltemplates {
    display: none;
}

.sheet-rolltemplate-power .sheet-grey
{
    color: #A0A0A0;
    font-weight: normal;
}

.sheet-rolltemplate-simple .sheet-container
{
    width: 240px;
    color: black;
    border: 1px solid black;
    border-radius: 10px;
    background-color: white;
}

.sheet-rolltemplate-atk .sheet-container,
.sheet-rolltemplate-atkdmg .sheet-container.sheet-atk,
.sheet-rolltemplate-dmg .sheet-atk
{
    width: 240px;
    color: black;
    border: 1px solid black;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: white;
}

.sheet-rolltemplate-dmg .sheet-container,
.sheet-rolltemplate-atkdmg .sheet-container.sheet-damagetemplate
{
    width: 240px;
    color: black;
    border: 1px solid black;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: white;
}

.sheet-rolltemplate-simple .sheet-result,
.sheet-rolltemplate-atk .sheet-result,
.sheet-rolltemplate-atkdmg .sheet-result,
.sheet-rolltemplate-dmg .sheet-result,
.sheet-npc .sheet-subtitle .sheet-italics
{
    width: 100%;
    display: flex
}

.sheet-rolltemplate-atkdmg .sheet-damagetemplate .sheet-result,
.sheet-rolltemplate-dmg .sheet-damagetemplate .sheet-result
{
    min-height: 45px;
}

.sheet-rolltemplate-simple .sheet-adv,
.sheet-rolltemplate-atk .sheet-adv,
.sheet-rolltemplate-atkdmg .sheet-adv,
.sheet-rolltemplate-dmg .sheet-adv
{
    width: 119px;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    margin-top: 15px;
}

.sheet-rolltemplate-simple .sheet-adv span,
.sheet-rolltemplate-simple .sheet-solo span,
.sheet-rolltemplate-atk .sheet-adv span,
.sheet-rolltemplate-atk .sheet-solo span,
.sheet-rolltemplate-atkdmg .sheet-adv span,
.sheet-rolltemplate-atkdmg .sheet-solo span,
.sheet-rolltemplate-dmg .sheet-adv span,
.sheet-rolltemplate-dmg .sheet-solo span
{
    width: 30px;
    font-size: 20px;
    background-color: transparent;
    border: 0px;
    padding: 0px;
}

.sheet-rolltemplate-simple .sheet-advspacer,
.sheet-rolltemplate-atk .sheet-advspacer,
.sheet-rolltemplate-atkdmg .sheet-advspacer,
.sheet-rolltemplate-dmg .sheet-advspacer
{
    width: 0px;
    border: 1px solid black;
    display: inline-block;
    height: 35px;
}

.sheet-rolltemplate-simple .sheet-solo,
.sheet-rolltemplate-atk .sheet-solo,
.sheet-rolltemplate-atkdmg .sheet-solo,
.sheet-rolltemplate-dmg .sheet-solo
{
    width: 100%;
    text-align: center;
    height: 23px;
    padding-top: 15px;
}

.sheet-rolltemplate-simple span,
.sheet-rolltemplate-atk span,
.sheet-rolltemplate-atkdmg span,
.sheet-rolltemplate-dmg span,
.sheet-rolltemplate-desc span
{
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    font-weight: bold;
}

.sheet-rolltemplate-dmg .sheet-desc span.sheet-plus,
.sheet-rolltemplate-atkdmg .sheet-desc span.sheet-plus
{
    font-weight: bold;
    font-size: 20px;
    display: inline;
}

.sheet-rolltemplate-simple .sheet-grey,
.sheet-rolltemplate-simple .sheet-grey .inlinerollresult.fullcrit,
.sheet-rolltemplate-simple .sheet-grey .inlinerollresult.fullfail,
.sheet-rolltemplate-simple .sheet-grey .inlinerollresult.importantroll,
.sheet-rolltemplate-simple .sheet-label span span,
.sheet-rolltemplate-atk .sheet-label span span,
.sheet-rolltemplate-atk .sheet-grey,
.sheet-rolltemplate-atk .sheet-grey .inlinerollresult.fullcrit,
.sheet-rolltemplate-atk .sheet-grey .inlinerollresult.fullfail,
.sheet-rolltemplate-atk .sheet-grey .inlinerollresult.importantroll,
.sheet-rolltemplate-atkdmg .sheet-label span span,
.sheet-rolltemplate-atkdmg .sheet-grey,
.sheet-rolltemplate-atkdmg .sheet-grey .inlinerollresult.fullcrit,
.sheet-rolltemplate-atkdmg .sheet-grey .inlinerollresult.fullfail,
.sheet-rolltemplate-atkdmg .sheet-grey .inlinerollresult.importantroll,
.sheet-rolltemplate-dmg .sheet-label span span,
.sheet-rolltemplate-dmg .sheet-grey,
.sheet-rolltemplate-dmg .sheet-grey .inlinerollresult.fullcrit,
.sheet-rolltemplate-dmg .sheet-grey .inlinerollresult.fullfail,
.sheet-rolltemplate-dmg .sheet-grey .inlinerollresult.importantroll,
.sheet-rolltemplate-npc .sheet-grey,
.sheet-rolltemplate-npc .sheet-grey .inlinerollresult.fullcrit,
.sheet-rolltemplate-npc .sheet-grey .inlinerollresult.fullfail,
.sheet-rolltemplate-npc .sheet-grey .inlinerollresult.importantroll,
.sheet-rolltemplate-npcaction .sheet-grey,
.sheet-rolltemplate-npcaction .sheet-grey .inlinerollresult.fullcrit,
.sheet-rolltemplate-npcaction .sheet-grey .inlinerollresult.fullfail,
.sheet-rolltemplate-npcaction .sheet-grey .inlinerollresult.importantroll,
.sheet-rolltemplate-npcatk .sheet-grey,
.sheet-rolltemplate-npcatk .sheet-grey .inlinerollresult.fullcrit,
.sheet-rolltemplate-npcatk .sheet-grey .inlinerollresult.fullfail,
.sheet-rolltemplate-npcatk .sheet-grey .inlinerollresult.importantroll
{
    color: #A0A0A0;
    border: 0px;
    font-weight: normal;
}

.sheet-rolltemplate-simple .sheet-label,
.sheet-rolltemplate-atk .sheet-label,
.sheet-rolltemplate-atkdmg .sheet-label,
.sheet-rolltemplate-dmg .sheet-label
{
    text-align: center;
    margin-top: -3px;
    padding-bottom: 5px;
}

.sheet-rolltemplate-simple .sheet-label span span,
.sheet-rolltemplate-atk .sheet-label span span,
.sheet-rolltemplate-atkdmg .sheet-label span span,
.sheet-rolltemplate-dmg .sheet-label span span
{
    padding: 0px;
    border: 0px;
    background-color: transparent;
    font-size: 12px;
}

.sheet-rolltemplate-simple .inlinerollresult.fullcrit,
.sheet-rolltemplate-atk .inlinerollresult.fullcrit,
.sheet-rolltemplate-atkdmg .inlinerollresult.fullcrit,
.sheet-rolltemplate-dmg .inlinerollresult.fullcrit
{
    color: #3FB315;
    border: 0px;
}

.sheet-rolltemplate-simple .inlinerollresult.fullfail,
.sheet-rolltemplate-atk .inlinerollresult.fullfail,
.sheet-rolltemplate-atkdmg .inlinerollresult.fullfail,
.sheet-rolltemplate-dmg .inlinerollresult.fullfail
{
    color: #B31515;
    border: 0px;
}

.sheet-rolltemplate-simple .inlinerollresult.importantroll,
.sheet-rolltemplate-atk .inlinerollresult.importantroll,
.sheet-rolltemplate-atkdmg .inlinerollresult.importantroll,
.sheet-rolltemplate-dmg .inlinerollresult.importantroll
{
    color: #4A57ED;
    border: 0px;
}

.sheet-rolltemplate-atk .sheet-damage,
.sheet-rolltemplate-atkdmg .sheet-damage,
.sheet-rolltemplate-dmg .sheet-damage
{
    text-align: center;
    margin-top: -5px;
}

.sheet-rolltemplate-atkdmg .sheet-damagetemplate .inlinerollresult.fullcrit,
.sheet-rolltemplate-atkdmg .sheet-damagetemplate .inlinerollresult.fullfail,
.sheet-rolltemplate-atkdmg .sheet-damagetemplate .inlinerollresult.importantroll,
.sheet-rolltemplate-dmg .sheet-damagetemplate .inlinerollresult.fullcrit,
.sheet-rolltemplate-dmg .sheet-damagetemplate .inlinerollresult.fullfail,
.sheet-rolltemplate-dmg .sheet-damagetemplate .inlinerollresult.importantroll,
.sheet-rolltemplate-npcaction .sheet-damagetemplate .inlinerollresult.fullcrit,
.sheet-rolltemplate-npcaction .sheet-damagetemplate .inlinerollresult.fullfail,
.sheet-rolltemplate-npcaction .sheet-damagetemplate .inlinerollresult.importantroll,
.sheet-rolltemplate-npcdmg .sheet-damagetemplate .inlinerollresult.fullcrit,
.sheet-rolltemplate-npcdmg .sheet-damagetemplate .inlinerollresult.fullfail,
.sheet-rolltemplate-npcdmg .sheet-damagetemplate .inlinerollresult.importantroll,
.sheet-rolltemplate-atkdmg .sheet-desc .inlinerollresult.fullcrit,
.sheet-rolltemplate-atkdmg .sheet-desc .inlinerollresult.importantroll,
.sheet-rolltemplate-atkdmg .sheet-desc .inlinerollresult.fullfail,
.sheet-rolltemplate-dmg .sheet-desc .inlinerollresult.fullcrit,
.sheet-rolltemplate-dmg .sheet-desc .inlinerollresult.importantroll,
.sheet-rolltemplate-dmg .sheet-desc .inlinerollresult.fullfail
.sheet-rolltemplate-atk .sheet-desc .inlinerollresult.fullcrit,
.sheet-rolltemplate-atk .sheet-desc .inlinerollresult.importantroll,
.sheet-rolltemplate-atk .sheet-desc .inlinerollresult.fullfail,
.sheet-rolltemplate-mancerroll .inlinerollresult.fullcrit,
.sheet-rolltemplate-mancerroll .inlinerollresult.importantroll,
.sheet-rolltemplate-mancerroll .inlinerollresult.fullfail
{
    color: black;
    border: 0px;
}

.sheet-rolltemplate-atk .sheet-save .sheet-savedc,
.sheet-rolltemplate-dmg .sheet-save .sheet-savedc,
.sheet-rolltemplate-atkdmg .sheet-save .sheet-savedc
{
    padding-bottom: 5px;
    text-align: center;
}

.sheet-rolltemplate-atk .sheet-save .sheet-savedc span,
.sheet-rolltemplate-dmg .sheet-save .sheet-savedc span,
.sheet-rolltemplate-atkdmg .sheet-save .sheet-savedc span
{
    font-size: 15px;
    font-weight: bold;
}

.sheet-rolltemplate-atk .sheet-save .sheet-label span,
.sheet-rolltemplate-dmg .sheet-save .sheet-label span,
.sheet-rolltemplate-atkdmg .sheet-save .sheet-label span
{
    font-weight: bold;
}

.sheet-rolltemplate-atk .sheet-save .inlinerollresult,
.sheet-rolltemplate-dmg .sheet-save .inlinerollresult,
.sheet-rolltemplate-atkdmg .sheet-save .inlinerollresult
{
    background-color: transparent;
    border: 0px;
    padding: 0px;
    display: inline-block;
    font-weight: bold;
}

.sheet-rolltemplate-dmg .sheet-desc .inlinerollresult,
.sheet-rolltemplate-atkdmg .sheet-desc .inlinerollresult,
.sheet-rolltemplate-atk .sheet-desc .inlinerollresult,
.sheet-rolltemplate-mancerroll .inlinerollresult
{
    background-color: transparent;
    border: 0px;
    display: inline-block;
    font-weight: bold;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 6px;
}

.sheet-rolltemplate-dmg .sheet-desc .sheet-label span,
.sheet-rolltemplate-atkdmg .sheet-desc .sheet-label span {
    font-weight: bold;
}

.sheet-rolltemplate-atk .sheet-save span,
.sheet-rolltemplate-dmg .sheet-save span,
.sheet-rolltemplate-atkdmg .sheet-save span
{
    font-weight: normal;
    line-height: 12px;
    display: block;
}

.sheet-rolltemplate-atk .sheet-save span.sheet-bold,
.sheet-rolltemplate-dmg .sheet-save span.sheet-bold,
.sheet-rolltemplate-atkdmg .sheet-save span.sheet-bold
{
    font-weight: bold;
    display: inline-block;
}

.sheet-rolltemplate-atk .sheet-sublabel,
.sheet-rolltemplate-atkdmg .sheet-sublabel,
.sheet-rolltemplate-dmg .sheet-sublabel
{
    text-align: center;
    font-style: italic;
    margin-top: -2px;
    min-height: 17px;
}

.sheet-rolltemplate-atk .sheet-descold,
.sheet-rolltemplate-atkdmg .sheet-descold,
.sheet-rolltemplate-dmg .sheet-descold
{
    width: 240px;
    background: url(http://i.imgur.com/4988JS0.png) top left;
    background-size: 240px 100%;
    background-repeat: no-repeat;
    color: black;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.sheet-rolltemplate-atk .sheet-desc,
.sheet-rolltemplate-atkdmg .sheet-desc,
.sheet-rolltemplate-dmg .sheet-desc,
.sheet-rolltemplate-desc .sheet-desc
{
    width: 240px;
    border: 1px solid black;
    color: black;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: white;
}

.sheet-rolltemplate-atk .sheet-desc span,
.sheet-rolltemplate-atkdmg .sheet-desc span,
.sheet-rolltemplate-dmg .sheet-desc span,
.sheet-rolltemplate-desc .sheet-desc span
{
    font-weight: normal;
    line-height: 12px;
    display: block;
}

.sheet-rolltemplate-atk .sheet-info span,
.sheet-rolltemplate-atkdmg .sheet-info span,
.sheet-rolltemplate-dmg .sheet-info span
{
    text-align: left;
    padding: 0px 5px 0px 5px;
}

.sheet-rolltemplate-atk .sheet-info .inlinerollresult,
.sheet-rolltemplate-atkdmg .sheet-info .inlinerollresult,
.sheet-rolltemplate-dmg .sheet-info .inlinerollresult
{
    font-size: inherit;
    padding: 0px;
}

.sheet-rolltemplate-atkdmg .sheet-damagetemplate .sheet-sublabel,
.sheet-rolltemplate-dmg .sheet-damagetemplate .sheet-sublabel,
.sheet-rolltemplate-atkdmg .sheet-desc .sheet-sublabel,
.sheet-rolltemplate-dmg .sheet-desc .sheet-sublabel
{
    display: block;
    width: 100%;
    font-size: 10px;
    font-weight: normal;
    margin-top: -5px;
    color: #A0A0A0;
}

.sheet-rolltemplate-atk .sheet-sublabel span,
.sheet-rolltemplate-atkdmg .sheet-sublabel span,
.sheet-rolltemplate-dmg .sheet-sublabel span
{
    font-weight: normal;
    color: black;
}

.sheet-rolltemplate-atk .sheet-spacer,
.sheet-rolltemplate-atkdmg .sheet-spacer,
.sheet-rolltemplate-dmg .sheet-spacer
{
    height: 10px;
}

.sheet-rolltemplate-dmg {
    margin-top: -7px;
    position: relative;
}

.sheet-rolltemplate-atk a[href^="~"] {
    background-color: transparent;
    padding: 0px;
    color: black;
    border: 0px;
}

.sheet-rolltemplate-atk a:hover {
    color: #EC2127;
}

.sheet-rolltemplate-atk a[href^="~"]:visited {
    pointer-events: none;
}

.sheet-rolltemplate-power .sheet-container {
    width: 240px;
    background-color: #bdc8cc;
    color: black;
    font-family: "Times New Roman", Times, serif;
    padding: 10px;
    border: 1px solid black;
}

.sheet-rolltemplate-power .sheet-row {
    display: block;
}

.sheet-rolltemplate-power .sheet-title {
    color: rgb(126, 45, 64);
    font-size: 1.2em;
}

.sheet-rolltemplate-power .sheet-italics,
.sheet-npc .sheet-italics
{
    font-style: italic;
}

.sheet-rolltemplate-power .sheet-bold,
.sheet-actions .sheet-bold
{
    font-weight: bold;
}

.sheet-rolltemplate-power .sheet-spacer {
    height: 5px;
}

.sheet-rolltemplate-mancerroll .sheet-container {
    width: 200px;
    color: black;
    background-color: white;
    border: 1px solid black;
}
.sheet-rolltemplate-mancerroll .sheet-row {
    border-bottom: 1px dotted black;
    padding: 4px;
}
.sheet-rolltemplate-mancerroll .sheet-row.sheet-header {
    border-bottom: 1px solid black;
    font-size: 1.2em;
    font-weight: bold;
}
.sheet-rolltemplate-mancerroll .sheet-desc {
    font-size: 1.2em;
    font-style: italic;
    margin-left: 4px;
}
.sheet-rolltemplate-mancerroll .sheet-result {
    margin-left: 80px;
}

.sheet-rolltemplate-mancerroll .sheet-result .inlinerollresult {
    width: 50px;
    text-align: right;
}


.sheet-rolltemplate-npc,
.sheet-rolltemplate-npcaction .sheet-container,
.sheet-rolltemplate-npcatk,
.sheet-rolltemplate-npcdmg,
.sheet-rolltemplate-traits
{
    width: 240px;
    border: 1px solid;
    background-color: #bdc8cc;
    padding: 5px;
}

.sheet-rolltemplate-npcaction .sheet-container.sheet-dmgcontainer
{
    margin-top: 5px;
}

.sheet-rolltemplate-npcdmg {
    margin-top: -8px;
}

.sheet-rolltemplate-npc .sheet-header,
.sheet-rolltemplate-npcaction .sheet-header,
.sheet-rolltemplate-npcatk .sheet-header,
.sheet-rolltemplate-npcdmg .sheet-header
{
    color: rgb(126, 45, 64);
    font-size: 18px;
    text-align: left;
    font-family: "Times New Roman", Times, serif;
    font-variant: small-caps;
}

.sheet-rolltemplate-traits .sheet-header {
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    text-transform: capitalize;
    font-variant: small-caps;
    font-weight: bold;
    color: rgb(126, 45, 64);
}

.sheet-rolltemplate-npc .sheet-italics,
.sheet-rolltemplate-npcaction .sheet-italics,
.sheet-rolltemplate-npcatk .sheet-italics,
.sheet-rolltemplate-npcdmg .sheet-italics,
.sheet-rolltemplate-traits .sheet-italics
{
    font-style: italic;
}

.sheet-rolltemplate-npc .sheet-subheader,
.sheet-rolltemplate-npcaction .sheet-subheader,
.sheet-rolltemplate-npcatk .sheet-subheader,
.sheet-rolltemplate-npcdmg .sheet-subheader
{
    line-height: 13px;
    margin-top: -3px;
}

.sheet-rolltemplate-traits .sheet-subheader
{
    font-style: italic;
    color: #A0A0A0;
    margin-top: -5px;
}

.sheet-rolltemplate-npc .sheet-subheader span,
.sheet-rolltemplate-npcaction .sheet-subheader span,
.sheet-rolltemplate-npcatk .sheet-subheader span,
.sheet-rolltemplate-npcdmg .sheet-subheader span
{
    font-size: 11px;
    line-height: 11px;
}

.sheet-rolltemplate-traits .sheet-subheader span {
    font-weight: normal;
    font-size: 10px;
    text-align: left;
    line-height: 16px;

}

.sheet-rolltemplate-traits .sheet-desc {
    font-weight: normal;
    font-size: 12px;
    text-align: left;
    line-height: 16px;
}

.sheet-rolltemplate-npc .sheet-arrow-rightold,
.sheet-rolltemplate-npcaction .sheet-arrow-rightold,
.sheet-rolltemplate-npcatk .sheet-arrow-rightold,
.sheet-rolltemplate-npcdmg .sheet-arrow-rightold
{
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 195px solid rgb(126, 45, 64);
}

.sheet-rolltemplate-npc .sheet-arrow-right,
.sheet-rolltemplate-npcaction .sheet-arrow-right,
.sheet-rolltemplate-npcatk .sheet-arrow-right,
.sheet-rolltemplate-npcdmg .sheet-arrow-right
{
    border: 1px solid rgb(126, 45, 64);
    margin-bottom: 2px;
    margin-top: 2px;
}

.sheet-rolltemplate-npc .inlinerollresult,
.sheet-rolltemplate-npcaction .inlinerollresult,
.sheet-rolltemplate-npcatk .inlinerollresult,
.sheet-rolltemplate-npcdmg .inlinerollresult,
.sheet-rolltemplate-traits .inlinerollresult
{
    background-color: #bdc8cc;
    border: none;
}

.sheet-rolltemplate-npc .inlinerollresult.fullcrit,
.sheet-rolltemplate-npcaction .inlinerollresult.fullcrit,
.sheet-rolltemplate-npcatk .inlinerollresult.fullcrit,
.sheet-rolltemplate-npcdmg .inlinerollresult.fullcrit
{
    color: #3FB315;
    border: none;
}

.sheet-rolltemplate-npc .inlinerollresult.fullfail,
.sheet-rolltemplate-npcaction .inlinerollresult.fullfail,
.sheet-rolltemplate-npcatk .inlinerollresult.fullfail,
.sheet-rolltemplate-npcdmg .inlinerollresult.fullfail
{
    color: #B31515;
    border: none;
}

.sheet-rolltemplate-npc .inlinerollresult.importantroll,
.sheet-rolltemplate-npcaction .inlinerollresult.importantroll,
.sheet-rolltemplate-npcatk .inlinerollresult.importantroll,
.sheet-rolltemplate-npcdmg .inlinerollresult.importantroll
{
    color: #4A57ED;
    border: none;
}

.sheet-rolltemplate-npcatk a[href^="~"] {
    background-color: transparent;
    padding: 0px;
    color: black;
    border: 0px;
}

.sheet-rolltemplate-npcatk .sheet-header a[href^="~"] {
    color: rgb(126, 45, 64);
}

.sheet-rolltemplate-npcatk a[href^="~"]:hover {
    color: #EC2127;
}

.sheet-rolltemplate-simple .sheet-charname,
.sheet-rolltemplate-atk .sheet-charname,
.sheet-rolltemplate-dmg .sheet-charname,
.sheet-rolltemplate-atkdmg .sheet-charname
{
    text-align: center;
    margin-top: -10px;
}

.sheet-rolltemplate-simple .sheet-charname span,
.sheet-rolltemplate-atk .sheet-charname span,
.sheet-rolltemplate-dmg .sheet-charname span,
.sheet-rolltemplate-atkdmg .sheet-charname span
{
    font-size: 11px;
    font-weight: normal;
    color: #A0A0A0;
}

.sheet-rolltemplate-dmg .sheet-label .sheet-rolltemplate-inline,
.sheet-rolltemplate-dmg .sheet-savedc .sheet-rolltemplate-inline,
.sheet-rolltemplate-atkdmg .sheet-savedc .sheet-rolltemplate-inline,
.sheet-rolltemplate-atkdmg .sheet-label .sheet-rolltemplate-inline {
    display: inline-block;
}