/* Firefox styling */
@supports (-moz-appearance:none) {
    .charsheet .sheet-chrome {
        display: none;
    }

    /* Only show up and down arrows on hover or focus */
    input[type="number"] {
        -moz-appearance: textfield;
    }
    input[type="number"]:hover,
    input[type="number"]:focus {
        -moz-appearance: revert;
    }

    /* Add datalist arrow to Firefox */
    input[list] + span:before,
    input[list] + span:before {
        content: "▼";
        color: #333;
        font-size: 10px;
        margin-left: -18px;
        padding-right: 8px;
        pointer-events:none;
        text-align: start;
        visibility: collapse;
    }
    input[list]:hover + span:before,
    input[list]:focus + span:before {
        visibility: visible;
    }
    input[type="number"][list]:hover + span:before,
    input[type="number"][list]:focus + span:before {
        margin-left: -38px;
    }
}

/* Not Firefox styling */
@supports not (-moz-appearance:none) {
    .charsheet .sheet-firefox {
        display: none;
    }
}