roll20-character-sheets/Top Secret/TopSecret.css

@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Stardos+Stencil:wght@400;700&display=swap');

.ui-dialog .tab-content .charsheet {
    --text-title: "Righteous", sans-serif;
    --text-normal: system-ui;
    --text-notes: monospace;
    --darkmode-accent: limegreen;
    --darkmode-background: #1f1f1f;
    --darkmode-background2: #444;
}

.ui-dialog .tab-content .charsheet .main {
    container-type: inline-size;
    font-family: var(--text-normal);
    line-height: normal;
    position: relative;
}

.sheet-darkmode .ui-dialog .charsheet {
    background-color: var(--darkmode-background);
}

.sheet-darkmode .ui-dialog .tab-content .charsheet .main {
    background-color: var(--darkmode-background);
    color: var(--darkmode-accent);
}

.ui-dialog .tab-content .charsheet .main * {
    box-sizing: border-box;
}

.ui-dialog .tab-content .charsheet .two-column-grid {
    display: grid;
    gap: .5em;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}

.ui-dialog .tab-content .charsheet .flex-row {
    column-gap: 1em;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.ui-dialog .tab-content .charsheet label:has(input[type="checkbox"]):hover,
.ui-dialog .tab-content .charsheet label:has(input[type="radio"]):hover {
    cursor: pointer;
}

.ui-dialog .tab-content .charsheet label:has(input[type="checkbox"]:checked) > span,
.ui-dialog .tab-content .charsheet label:has(input[type="checkbox"]):hover > span {
    text-shadow: 0 0 black;
    background-color: #cbcbcb;
}

.ui-dialog .tab-content .charsheet .flex-row > label {
    display: flex;
    flex: 1 1 6em;
    align-items: center;
}

.ui-dialog .tab-content .charsheet .flex-row > label span {
    margin-right: 4px;
}

.ui-dialog .tab-content .charsheet .three-column-fit {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    width: 100%;
}

.ui-dialog .tab-content .charsheet .three-column-fit > div {
    margin-inline: auto;
    outline: 1px solid #000;
    padding: 0 5px 5px 5px;
    width: 100%;
}

.sheet-darkmode .ui-dialog .tab-content .charsheet .three-column-fit > div,
.sheet-darkmode .ui-dialog .tab-content .charsheet .tab4 {
    outline: 1px solid;
}

.ui-dialog .tab-content .charsheet .span-2 {
    grid-column: span 2;
}

.ui-dialog .tab-content .charsheet .span-3 {
    grid-column: span 3;
}

.ui-dialog .tab-content .charsheet .span-all {
    grid-column: 1/-1;
    width: 100%;
}

.ui-dialog .tab-content .charsheet .nowrap {
    white-space: nowrap;
}

.ui-dialog .tab-content .charsheet .division {
    font-size: 1.5rem;
    font-weight: bold;
    margin-inline: -3px;
}

.ui-dialog .tab-content .charsheet details summary > * {
    display: inline;
}

.ui-dialog .tab-content .charsheet details > summary {
    cursor: pointer;
    display: list-item;
    margin-bottom: 10px;
    position: relative;
}

.ui-dialog .tab-content .charsheet .tab1 details[open] {
    background-color: #fff;
    bottom: -2.75em;
    outline: 1px solid;
    padding: 10px;
    position: absolute;
    width: 23em;
    z-index: 2;
}

.ui-dialog .tab-content .charsheet .d100-roll:before {
    border-radius: 1px;
    box-shadow: 1px 1px 4px #333;
    content: "d100";
    display: block;
    font-family: math;
    font-size: 1rem;
    line-height: 1.85rem;
    outline: 1px solid #333;
    position: relative;
    width: 100%;
}

.ui-dialog .tab-content .charsheet .text-roll::before {
    content: '';
}

.ui-dialog .tab-content .charsheet button.text-roll {
    border-radius: 1px;
    box-shadow: 1px 1px 4px #333;
    font-family: var(--text-normal);
    font-size: 1.2rem;
    line-height: normal;
    margin-inline: auto;
    margin-left: 0;
    outline: 1px solid #333;
    padding: 2px 4px 2px 4px;
    position: relative;
    width: min-content;
    z-index: 1;
}

.ui-dialog .tab-content .charsheet button[type="action"] {
    height: min-content;
    line-height: normal;
    margin-inline: auto;
    padding: 0px 4px 2px 4px;
    width: max-content;
}

.ui-dialog .charsheet button[type=roll] {
    padding: 2px 3px;
    margin: 0px 3px 0px 3px;
    width: 100%;
    max-height: fit-content;
    border: none;
}

.ui-dialog .tab-content .charsheet .reset-image::after {
    content: '1';
    display: inline-block;
    font-family: 'Pictos';
    position: relative;
    top: -1px;
}

.ui-dialog .tab-content .charsheet .no-image::before {
    content: '&';
    display: inline-block;
    font-family: 'Pictos';
    position: relative;
    top: -1px;
}

.ui-dialog .tab-content .charsheet input:has(+ .reset-image) {
    max-height: 1.85em;
}

.ui-dialog .tab-content .charsheet .bubble-image::after {
    content: 'w';
    display: inline-block;
    font-family: 'Pictos';
    position: relative;
    top: -1px;
}

.ui-dialog .tab-content .charsheet .header-grid {
    align-items: center;
    display: grid;
    grid-template-columns: 8em 2.5fr 1fr;
    grid-template-areas:
        "logo title portrait";
    transition: grid-template-columns .8s ease-in-out;
    margin-bottom: 1em;
    min-height: 5.5em;
    position: relative;
}

@container (max-width: 360px) {
    /* does not have an avatar selected */
    .ui-dialog .tab-content .charsheet .header-grid {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "logo title";

        & .page-title {
            grid-column: 1/-1;
            width: 8em;
            justify-self: right;
            position: absolute;
            left: 3.65em;
        }
    }
    /* has an avatar/portrait */
    .ui-dialog .tab-content .charsheet .header-grid:has(img[src^="http"]) {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "logo portrait"
            "title portrait";

        & .page-title {
            grid-column: 1 / 1;
            margin-bottom: -19px;
            position: initial;
            width: min-content;
            justify-self: center;
        }
    }
}

.ui-dialog .tab-content .charsheet .logo-text {
    color: #c90f0f;
    grid-area: logo;
    left: -3em;
    margin-bottom: -2em;
    position: relative;
    text-align: center;
    top: -1.5em;
    transform: rotate(-35deg);
    width: 12em;
    z-index: 0;
}

.sheet-darkmode .ui-dialog .tab-content .charsheet .logo-text {
    color: inherit;
}

.ui-dialog .tab-content .charsheet .logo-text div {
    font-family: "Stardos Stencil", system-ui;
    font-size: 3.5rem;
    font-weight: bold;
    max-height: 3rem;
    text-align: center;
}

.ui-dialog .tab-content .charsheet .page-title {
    font-family: var(--text-title);
    font-size: 2.5rem;
    font-weight: bold;
    grid-area: title;
    margin-bottom: 0;
    position: relative;
    text-align: center;
    z-index: 1;
}

.ui-dialog .tab-content .charsheet .portrait {
    display: none;
}

.ui-dialog .tab-content .charsheet .portrait:has(img[src]) {
    box-shadow: 1px 1px 5px #000;
    display: grid;
    grid-area: portrait;
    height: 11em;
    outline: 1px solid #000;
    position: relative;
    width: 11em;
    z-index: 0;
}

.sheet-darkmode .ui-dialog .tab-content .charsheet .portrait:has(img[src]) {
    outline-color: var(--darkmode-accent);
}

.ui-dialog .tab-content .charsheet .portrait img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-dialog .tab-content .charsheet .portrait button {
    position: absolute;
    bottom: -.5em;
    right: -.5em;
    padding: 0 2px 0 3px;
}

.ui-dialog .tab-content .charsheet .section-title {
    font-family: var(--text-title);
    font-size: 2rem;
    padding-block: 10px;
}

.ui-dialog .tab-content .charsheet .row-title {
    display: inline-block;
    font-family: var(--text-title);
    font-size: 1.5rem;
    margin-inline: auto;
    margin-left: 0;
}

.ui-dialog .tab-content .charsheet label,
.ui-dialog .tab-content .charsheet label > span {
    display: inline-block;
    font-size: 1.5rem;
    margin: 2px;
}

.ui-dialog .tab-content .charsheet input[disabled],
.ui-dialog .tab-content .charsheet input[readonly],
.ui-dialog .tab-content .charsheet .readonly {
    background-color: #999999c7;
    color: #1f1f1f;
    cursor: default;
    max-width: 3em;
    text-align: center;
}

.ui-dialog .tab-content .charsheet nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    justify-content: center;
    margin-block: .5em 1em;
    margin-inline: auto;
}

.ui-dialog .tab-content .charsheet span.tab input {
    align-content: baseline;
    cursor: pointer;
    height: 2.5rem;
    left: -10rem;
    margin-right: -10rem;
    opacity: 0;
    padding: 0;
    position: relative;
    top: -3px;
    width: 10rem;
    z-index: 1;
}

.ui-dialog .tab-content .charsheet select option:nth-child(odd) {
    background-color: #ebebeb;
}

.ui-dialog .tab-content .charsheet span.tab {
    display: inline-block;
    height: 2em;
    min-height: 2rem;
    position: relative;
    width: min-content;
}

.ui-dialog .tab-content .charsheet span.tab::before {
    background: #dddddd;
    border: 2px solid #888888;
    color: #c90f0f;
    content: attr(title);
    display: inline-block;
    font-family: var(--text-title);
    font-size: 1.5rem;
    height: 2.25rem;
    text-align: center;
    width: 10rem;
}

.ui-dialog .tab-content .charsheet span.tab:has(:checked)::before {
    background: #c90f0f;
    border: 2px solid #888888;
    color: white;
}

.sheet-darkmode .ui-dialog .tab-content .charsheet span.tab::before {
    color: #cfcfcf;
    background-color: var(--darkmode-background2);
}

.sheet-darkmode .ui-dialog .tab-content .charsheet span.tab:has(:checked)::before {
    background-color: var(--darkmode-accent);
    color: #000;
}

.ui-dialog .tab-content .charsheet .tab:hover::before {
    background-color: #dddddd75;
}

.ui-dialog .tab-content .charsheet .tab-content {
    display: none;
}

.charsheet nav:has(.tab1:checked) ~ .tab1,
.charsheet nav:has(.tab2:checked) ~ .tab2,
.charsheet nav:has(.tab3:checked) ~ .tab3,
.charsheet nav:has(.tab4:checked) ~ .tab4,
.charsheet nav:has(.tab5:checked) ~ .tab5,
.charsheet nav:has(.tab6:checked) ~ .tab6 {
    display: block;
    min-width: 21em;
    position: relative;
}

.ui-dialog .tab-content .charsheet .tab3 {
    container-type: inline-size;
    container-name: tab3;
}

.ui-dialog .tab-content .charsheet .tab3 section {
    overflow-y: auto;
}

.ui-dialog .tab-content .charsheet .instruction {
    font-family: var(--text-notes);
    font-size: 1.1rem;
    padding-top: 1em;
    text-align: justify;
}

.ui-dialog .tab-content .charsheet .traits-column .two-column-grid {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr auto;
}

.ui-dialog .tab-content .charsheet .traits-column .four-column-grid {
    align-items: center;
    display: grid;
    gap: .5em;
    grid-template-columns: 1fr auto auto auto;
    justify-items: center;
}

.ui-dialog .tab-content .charsheet .traits-column {
    margin-inline: auto;
    min-width: 14em;
    outline: 1px solid #000;
    padding: 0 5px 5px 5px;
    position: relative;
    width: 100%;
}

.ui-dialog .tab-content .charsheet span:has(.life-level) {
    margin-left: -3.8em;
}

.ui-dialog .tab-content .charsheet .life-level {
    border-radius: 100%;
    position: relative;
    height: 3em;
    border: 2px solid #888888;
}

.ui-dialog .tab-content .charsheet input.input-small {
    text-align: center;
    width: 2em;
}

.ui-dialog .tab-content .charsheet input.input-med {
    text-align: center;
    width: 3em;
}

.ui-dialog .tab-content .charsheet input.input-large {
    max-width: 3.75em;
    text-align: center;
}

.ui-dialog .tab-content .charsheet .hit-determination-grid {
    background-color: #dddddd;
    display: grid;
    gap: 4px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
    "title   title       reset"
    "shooter target      wounds"
    "misc    automatic   automatic"
    "total   total       total";
    margin-bottom: 1em;
    min-width: 56.5em;
    outline: 1px solid #000;
    padding: 5px;
}
.ui-dialog .tab-content .charsheet .hit-det-title {grid-area: title;}
.ui-dialog .tab-content .charsheet .hit-det-reset {grid-area: reset;}
.ui-dialog .tab-content .charsheet .hit-det-shooter {grid-area: shooter;}
.ui-dialog .tab-content .charsheet .hit-det-target {grid-area: target;}
.ui-dialog .tab-content .charsheet .hit-det-total {grid-area: total;}

.ui-dialog .tab-content .charsheet .hit-determination-grid button[name="act_hitDetResetAll"] {
    margin-right: 0;
}

.ui-dialog .tab-content .charsheet .hit-determination-grid span:has(input[name="attr_hit_det_total"]) {
    float: right;
    margin-top: -2.25em;
}

.sheet-darkmode .ui-dialog .tab-content .charsheet .hit-determination-grid {
    background-color: transparent;
    outline: 1px solid;
}

@container tab3 (max-width: 710px) {
    .ui-dialog .tab-content .charsheet .main .hit-determination-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "title        reset"
            "shooter      target"
            "wounds       misc"
            "automatic    automatic"
            "total        total";
        min-width: min-content;

        & .hit-det-misc[open] {
            max-width: 95%;
            top: 17%;
        }

        & .hit-det-automatic {
            margin: -.5em auto auto 15%;
        }

    }
}

.ui-dialog .tab-content .charsheet .mph {
    display: none;
}

.ui-dialog .tab-content .charsheet select:has(.show-mph:checked) + .mph {
    align-items: center;
    display: inline-flex;
    margin: -1em auto 1em auto;
}

.ui-dialog .tab-content .charsheet .hit-det-misc {
    grid-area: misc;
    margin-block: 0 .5em;
    max-width: 33%;
}

.ui-dialog .tab-content .charsheet .main .hit-det-misc[open] {
    background-color: #fff;
    left: 0;
    margin-bottom: 5px;
    max-width: 70%;
    outline: 1px solid #000;
    padding: 10px;
    position: absolute;
    z-index: 3;
    top: 23%;
}

.sheet-darkmode .ui-dialog .tab-content .charsheet .tab1 details[open],
.sheet-darkmode .ui-dialog .tab-content .charsheet .hit-det-misc[open] {
    background-color: var(--darkmode-background2);
    outline: 1px solid;
}

.sheet-darkmode .ui-dialog .tab-content .charsheet .hit-det-automatic {
    background-color: #ffffff3b;
}

.ui-dialog .tab-content .charsheet details[open] > summary::after {
    content: '*';
    font-family: 'Pictos';
    opacity: .35;
    position: absolute;
    right: -6px;
    top: -12px;
    z-index: 1;
}

.ui-dialog .tab-content .charsheet details.updates[open] > ul {
    margin: auto;
    margin-top: .25em;
    outline: 1px solid #000;
    padding: .5em 1em 1em 1em;
}

.ui-dialog .tab-content .charsheet details.updates[open] ul ol > strong {
    margin-block: .5em;
    margin-left: -1.85em;
}

.ui-dialog .tab-content .charsheet details.updates > summary {
    margin: 0;
    text-align: right;
    width: 100%;
}

.ui-dialog .tab-content .charsheet details.updates[open] > summary::after {
    display: none;
}

.ui-dialog .tab-content .charsheet details[open] > summary:hover::after {
    opacity: 1;
}

.ui-dialog .tab-content .charsheet .hit-det-misc label {
    align-items: flex-start;
    display: inline-flex;
    font-weight: normal;
    line-height: normal;
    margin: auto;
}

.ui-dialog .tab-content .charsheet .hit-det-misc label:has(+ strong) input {
    margin: 7px 0 0 2px;
}

.ui-dialog .tab-content .charsheet .hit-det-automatic {
    background-color: #fff;
    border-radius: 4px;
    display: grid;
    grid-area: automatic;
    grid-template-columns: 8em repeat(10, auto);
    grid-template-rows: 2em 1.85em;
    height: min-content;
    max-width: 30em;
    min-width: 22em;
    outline: 1px solid #000;
    padding: 2px 8px 2px 4px;
    text-align: center;
}

.ui-dialog .tab-content .charsheet .hit-det-automatic label {
    font-weight: normal;
    margin: auto;
    display: flex;
}

.charsheet .hit-det-automatic > span,
.charsheet .hit-det-automatic > input {
    width: 14px;
}

.charsheet .radio-box-auto,
.charsheet .radio-box-semi {
    appearance: none;
    background-color: #0078d4;
    border-radius: 100%;
    max-height: 14px;
}

.sheet-darkmode .charsheet .radio-box-auto,
.sheet-darkmode .charsheet .radio-box-semi {
    background-color: #000;
}

.charsheet .radio-box-auto:checked ~ .radio-box-auto:not(:checked),
.charsheet .radio-box-semi:checked ~ .radio-box-semi:not(:checked) {
    appearance: auto;
}

.charsheet .radio-box-auto:focus,
.charsheet .radio-box-semi:focus {
    outline-offset: 0;
}

.ui-dialog .tab-content .charsheet .weapons-grid {
    align-items: center;
    display: grid;
    gap: .5em;
    grid-template-columns: 3em minmax(12em, 3fr) 3em 3em 3em 3em 3.5em 4em 3em 5em 4em 5em 3.5em;
    padding-bottom: 2px;
}

.ui-dialog .charsheet .weapons-grid > * {
    display: block;
    justify-items: center;
    margin: auto;
    margin-bottom: 0;
    text-align: center;
    width: 100%;
}

.ui-dialog .tab-content .charsheet .weapons-grid > span {
    font-weight: bold;
}

.ui-dialog .tab-content .charsheet .weapon-range-modifier-column {
    border-bottom: 1px solid #000;
    grid-column: span 4;
    margin-bottom: -1.5em;
}

.ui-dialog .tab-content .charsheet .general-column-header {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    width: auto;
}

.ui-dialog .tab-content .charsheet .full-width-element {
    width: 100%;
}

.ui-dialog .tab-content .charsheet .main .tab4 > div {
    margin-inline: auto;
    margin-left: 0;
    min-width: fit-content;
    outline: 1px solid #000;
    padding: 0 5px 5px 5px;
    width: 60%;
}

.ui-dialog .tab-content .charsheet .aok-grid {
    align-items: center;
    display: grid;
    gap: .5em;
    grid-template-columns: 3em auto 3em 3em;
    grid-template-rows: 2.25em;
    justify-items: center;
    width: 100%;
}

.ui-dialog .tab-content .charsheet .aok-col-1-heading,
.ui-dialog .tab-content .charsheet .aok-col-1 input[list="areas-of-knowledge"] {
    min-width: 22em;
    text-align: center;
    width: 90%;
}

.ui-dialog .tab-content .charsheet .height-column {
    width: 4em;
}

.ui-dialog .tab-content .charsheet .weight-column {
    width: 4em;
}

.ui-dialog .tab-content .charsheet .sex-column {
    width: 2em;
}

.ui-dialog .tab-content .charsheet .age-column {
    width: 3em;
}

.ui-dialog .tab-content .charsheet .left-aligned {
    text-align: left;
}

.ui-dialog .tab-content .charsheet .right-aligned {
    text-align: right;
    float: right;
}

.ui-dialog .tab-content .charsheet .indent {
    margin-left: 2em;
}

.ui-dialog .tab-content .charsheet .name-field {
    width: 22em;
}

.ui-dialog .tab-content .charsheet .handedness-field {
    width: 5em;
}

.ui-dialog .tab-content .charsheet .language-fluency-column {
    margin-left: -10em;
    width: 5em;
}

.ui-dialog .tab-content .charsheet .language-fluency-field {
    width: 5em;
}

.ui-dialog .tab-content .charsheet .languages-known-column {
    width: 25em;
}

.ui-dialog .tab-content .charsheet .languages-known-field {
    width: 15em;
}

.ui-dialog .tab-content .charsheet .text-area {
    width: 100%;
}

.ui-dialog .tab-content .charsheet .repcontainer[data-groupname="repeating_friends"] .repitem,
.ui-dialog .tab-content .charsheet .repcontainer[data-groupname="repeating_contacts"] .repitem,
.ui-dialog .tab-content .charsheet .repcontainer[data-groupname="repeating_enemies"] .repitem,
.ui-dialog .tab-content .charsheet .repcontainer[data-groupname="repeating_miscellaneous"] .repitem {
    display: inline-grid;
    grid-template-columns: 2em 1fr;
    align-items: center;
    width: 100%;
}

.ui-dialog .tab-content .charsheet .repcontainer .repitem textarea {
    grid-column: 1/-1;
    height: 3.5em;
    resize: vertical;
    min-height: 3.5em;
    max-height: 10em;
}

/* roll template */
.sheet-rolltemplate-general {
    box-shadow: 2px 2px 5px #000;
    margin-bottom: 0.5em;
    margin-inline: auto;
    max-width: 360px;
    outline: 2px solid #000;
    overflow: clip;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-general {
    color: initial;
    outline-color: var(--darkmode-accent);
}

.sheet-rolltemplate-general .sheet-heading,
.sheet-rolltemplate-general .sheet-subheading {
    background-color: #000;
    color: #FFF;
    display: flex;
    flex-wrap: wrap;
    margin-inline: auto;
    padding-inline: 5px;
}

.sheet-rolltemplate-general .sheet-heading {
    font-size: 1.25em;
    justify-content: center;
    line-height: normal;
    margin-inline: auto;
    padding: 5px;
}

.sheet-rolltemplate-general .sheet-subheading {
    justify-content: center;
    padding-bottom: 4px;
}

.sheet-rolltemplate-general .sheet-body {
    padding: 5px 10px 10px 5px;
}

.sheet-rolltemplate-general .sheet-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    line-height: normal;
    overflow: clip;
}

.sheet-rolltemplate-general .sheet-row-full {
    justify-self: center;
    line-height: normal;
    margin-inline: auto;
    padding: 2px;
    text-align: center;
}

.sheet-rolltemplate-general .sheet-footer {
    background-color: #000;
    color: #fff;
    min-height: .5em;
    width: 100%;
}

.sheet-rolltemplate-general .sheet-image {
    box-shadow: 2px 2px 5px #000;
    display: grid;
    margin: auto;
    outline: 2px solid #000;
}

.sheet-rolltemplate-general .sheet-left,
.sheet-rolltemplate-general .sheet-left span {
    margin-inline: auto;
    margin-left: 0;
    text-align: left;
}

.sheet-rolltemplate-general .sheet-success {
    color: #007400;
    font-size: 1.25em;
    font-weight: bold;
}

.sheet-rolltemplate-general .sheet-fail {
    color: #c90f0f;
    font-size: 1.25em;
    font-weight: bold;
}

.sheet-rolltemplate-general .sheet-damage {
    color: #c90f0f;
    font-size: 1em;
    font-weight: bold;
}

.sheet-rolltemplate-general .sheet-key,
.sheet-rolltemplate-general .sheet-value {
    align-self: center;
    display: flex;
    margin-inline: auto;
}

.sheet-rolltemplate-general .sheet-key {
    font-weight: bold;
    margin-right: 0;
    text-align: right;
}

.sheet-rolltemplate-general .sheet-value {
    margin-right: 0;
    align-items: center;
}

.sheet-rolltemplate-general span.inlinerollresult {
    display: inline-block;
    font-size: 1.1em;
    line-height: 1em;
    margin-block: 1px;
    min-width: 1.5em;
    padding: 0 2px 0 2px;
    text-align: center;
}

.sheet-rolltemplate-general a[href^="!"],
.sheet-rolltemplate-general a[href^="~"] {
    background: none;
    background-color: #fafafa6b;
    border-radius: 4px;
    box-shadow: 2px 2px 5px #000;
    color: #333;
    padding: 0 4px 0 4px;
}

.sheet-rolltemplate-general a[href^="!"]:hover,
.sheet-rolltemplate-general a[href^="~"]:hover {
    background-color: #e6e6e6;
    outline: 1px solid #333;
}