.one-pan-tip {
        cursor: pointer;
    }

    .one-pan-tip::before {
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        box-sizing: border-box;
        width: 1em;
        height: 1em;
        margin: 0 1px .15em 1px;
        vertical-align: middle;
        display: inline-block;
    }

    .one-pan-tip-success::before {
        content: '';
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAACrUlEQVR4Xt2Yu2sUQRzHV/BFxNzMXhEQkRAEJbd763+gnYIWVjYitrYBC8FaSzttFBs7LQQLMdnZ3SSKWFhoYWFvOl+IoImJ5283Znf2O7PPmz3QL3zIcff9PZidnUcs63/V4Nm07QTskhvaC8PAvuoIfu7Y0tQh9E1EjmD3qIn1YWiP6G8xESHsNYw3qtlodv9wmavFa+Kt9keu35vDvGNpGPAnWKgtruDrmL+V3IBvYfKxoSkwEPYZrFVPI2uXt6JJahAn4texbKW6bmoHJ+xdwNqFooBNTNAlWF8rmlMPMLBzoorm5h9ae5WgSSHYXewnFb3K5t/AuoQlo6aYTRLvEhU7BW1nt7EnGi32CI0GebVThz5/0fye4C1rRo1W9w00GkGw93KdOZ/3FI+E7E1UNcxtoDn7Dus4Pj+LvlyMzxYydwdvIzW1khXY1syidaDGAGSnEc+3T2sMKiG/QWvOYTrKqL9JUFNvpX5Soa+A71mAYJc1hhx0EPSlGhTDP6En8QX8jeyLlYyUxlvARhroBPyKxgDwO1KtRPR9rjk3YEvoqfn4ZDbTYFoqzmsMeQoWQGr487aHp0uCLCVPBW5g/0iD531+BA1FSDVT0ZwL8LuGjy+FpsLHXCI0FFK14VqtHl+Gz0QuWXJxQFMRFc0p/gaciqzdmOwDmkrRzLm2j08GcyZCUyXSyLnPe7z145OQ+0nlrarGOnhNpkEJg5fTNvaUKL73oXlSxIOC/eSEAZPi6FNrH/aiyMRcaYIn2GPsQSs3ZCcxuDOEvYX1S0Ur8DUliWHiuyvWrSU34hcxmUF+Y73GMj3n6BSS33bGEe3698dt8MSL/iheiDG3EVGDt+LbDBYtg+brz+PiYB9zdSa6B96kwmvEN+LX3xGN/+/xNTmfvbb2YMw/rz8ZKxg+Um5CmgAAAABJRU5ErkJggg==)
    }

    .one-pan-tip-error {
        text-decoration: line-through;
    }

    .one-pan-tip-error::before {
        content: '';
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAACm0lEQVR4Xu2Xv47TQBDGfSf+iGQdCSS4gpKr4I6TvQl0lLwEb0HFS9BQ09JR8wQ0UNDQIihAoCsgdhJfOHF3ZsaSrfG36/U6cVIgPumnKPbM7Hh2Z70Ogv/aotI4fJPqcDrXYT4fE/S7oN+ZDpczrb4u9PAx+mxEeRDspFH4jgbO0w7kD0b5/L66hfF6URqpV10TQrii9HCXMPbK4oA4yHqoFzhGJ2XjQWQG7YdEhz9xPC9lR4OIpu4CA/ZJEodfcNxWYZBNQQ//FsduVP9ryk1+GFzHHAzNYvUaHTcNdzvmURPd3UWnPvCZgUQPn2E+lWgnf48OSKKv3ilsPRtDVsO1D/4eO6rmcsRBWGcT00ZyAoPRa+o72kjm++qmtK+Ehg1cSJ+m5DApujZFGxM1lT6Fklh9NA3tnE+wEvX7WFm6lmIMG5ltOunGDA1dcKWkPyfL17FSSce40reQT+dYqE0rnyLkf2qmXxYfJ9K/EJ+n0MgHrFyp1GtNmWCcVStWkD+ESml1ijbe3BvdkLFWTmxpW7BBc7e2gXH4KTM0asPsPnVW/++3CUukfxnkBxq5wEqV3YdrjhsCfV1I30LTSD1CoyYwqdRc6F6bMPJnUl+rldDQhjl99s0TK5d6TOs0Gj6VPpXanowbRNq3bZ74hjhtiU/GO9K+0uJguIfGElmt1Jy+Jqppben8T6WdVXz8sDhVcHL0Xv2G111wTP4QxusSzMNQroPL6LQF/M79tHZeWpw3Aq87HN+pZIUNtysL3TGpUvRhcozB+oKTyu8GV3BMb/FHKQZdF+f5vouyw4FuaXVvaIl8wPhri7aK53z8xcE8+YzxetfJ0bXb9OTLtr3pnF/g8egJzdsuxtiajg+CPTrk7dvfKf+Q/gIqVFE2PCWqFwAAAABJRU5ErkJggg==)
    }

    .one-pan-tip-partial::before {
        content: '';
        background-image: url(data:image/png;base64,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)
    }

    .one-pan-tip-other::before {
        content: '';
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAD5UlEQVR4Xr2YT2jTUBzHMxR0wmDaNXndxIk6EA9TEPQo/rns5MHtJjK2JrHrhhcRBP/cRHYTFMXDQBAVdhVBBGEHDx48iHhQEQ8DFYS5Jenabd3i71eX9uXbpE3S6gce697vb977vT+JoiTAVZSOwlhPr2WIT+v5jLt8UbgONdsUboH+rk5k3JUJ4Vq6pv8a6+lC+7Zjm+nhNQrKCcRpnLxjimfor2VKo+kBJyBg3MY+LFN7i/4TUcrVB8BgPJW2ITbo/zX+zdOJemhTzHf3Y6xIcB1xraBTbpv9s4uGuh/tZGxTm+JpRPta0x6iTUPcEWVL0NQVc/y06mHUb8b8yO7OyqgG+LQN7T3qhxKUFDl4hXpxoQfuDJpmx1BfoG4dQUPv6OkjqNcKgaOXTZ1CvSo0KnUGPA2o1w7KE/DwlCzXNeopTlbVMKliTt2HemFY+b7UgpHZ40ykhTt1YBvKg1jJ+WdnjZJFnbq6sgxtBnUQ2tnH3Mn6qee2wf165hzaIBj3u9G7oypc1NUzsrBETyLZBkL71rxsw1sI12d9catzaCtjG+pdeKhCVYjOSk32Jzojr3i6/MQoXzZSx2V/KEdw1Lz+DrmTz0LZKAh55aLMgxbSm1ry6m2Uy1immJFzcAwxrfwe7+6XO6nNoiEi6a6jzIPq72otkPYU5TK8WOQcVnkRYK1YRuogGiaBpvub55OOLhPlSFmaBd7nfB1B9ZIEOgOveT65flEeBOl+lQfItwtHddIISuqDHID3R9QJgnTv+RILWxFJKMu3EboGobwRli4uhyZGv8toEBXfGUtXbpQ3g2xyvsTkqawUXUJa9WHr4oYvMfkymLT4HVO7VHWqa09QHgWyfe1LDK85aBAFKvDBJTNznlshmzmK8ihUzlY5D37FkjtorifR6H9QkHLgJBWX3vvkxHhfQ6N/jW3uOuQbHFP8PfhxOt3RvdvBtinuTWUrjfZJ7I8CXp2qpw+/rciCJBttzV77gbJG8HuAHLtuVeNG6w4pkW6hzPKFVF/VjusjBhiXVvgtnwJ1zskKcUeNjyK6viy4Qff2ECy6RDYcLQ/MPlSxDRSyqbNyLG6hNxs335VCZf5qg3qtUtTFCYxDF8ufqOeDFB6gEX+/QL2k0JQ/Rv+Ry4a/e6Fx5fuXod1B3TiQn3X0G7tc6PXtOTqpJGjypyTx6MtQtHdHJ7tzEPcpr0UeKcQZ1057XwqD2ubG/JGSneajzDK1cfp7nabrJZ8g+Pblb9pnjBcLXv7NvpHFaTx1S6PpAYyTmOERZQs5LmGgqI0TohKYRr9thQLdD6sbuVW+1xriHSV1DH004w9PygmOZFyzWwAAAABJRU5ErkJggg==)
    }

    .one-pan-tip-lock::before {
        content: '';
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAABwUlEQVR4Xu1XvUoDQRA+0EoMub+oJBpv9wQLFSzsbASfwc4nsLMwcffERPEJbH0BQXwG2zQWEmttRIuA2Ch2Ohs4vMzueUncjRDug6/Zmdnvy85m99aycuQYIzi0XnWr9RU8/i/wKLv3aPTlUY4IY4S94HzjcEK+KptR0yH8HNcbgVNlm1g8iy5hj3ge7cCiom1OwC5LwcGcHTTs4kK04YcNyZxDDs/wXNoAe+qzR5DwZ5wTA1q4i83hHD0o7U33CIVHmUIu4afJGmhpC+f8GSBykRQpl5tTOEcF8QOMrhr8/d/jycUewvE0uJRfGTUGAm3YYy1BWL07HE9Dkda24zowpr+VRuCFx93NaoIujTpYry/Asj8ke2yE8/sVrJsJ6O2HNJFmwgW+hnUzMZix7oX8ChygxrQxdATMED4r5aTQqLFChXlSLWE3OE9Fo8Ysa2dCruUM56lo1Jgd8HVc61L2hvNUNGpM0LK2JuM6OOmvcTyNxo1B7m1c5y81FXE1c2MCubH++PPk8sXFL8XVHIEx+PztvhX5Ex7/jSMxNgyHMgbnUQdPpJs2iRaxbib85VpB/YzXQz880f8dnyPHuOIbV69cHR4KWOMAAAAASUVORK5CYII=)
    }
    :root {
        --secondary-background-color: #fff;
        --background-color: #ececec;
        --secondary-notselected-background-color: #f6f6f6;
        --element-backgound-color: #f6f6f6;
        --front-color: #000;
        --element-border-color: #ccc;
        --link-color: #2285d5;

        --large-font-size: 1.2rem;
        --medium-font-size: 1rem;
        --small-font-size: 0.8rem;
    }

    [data-theme='light'] {
        --secondary-background-color: #fff;
        --background-color: #ececec;
        --secondary-notselected-background-color: #f6f6f6;
        --element-backgound-color: #f6f6f6;
        --front-color: #000;
        --element-border-color: #ccc;
        --link-color: #2285d5;
    }

    [data-theme='dark'] {
        --secondary-background-color: #000;
        --background-color: #191919;
        --secondary-notselected-background-color: #101010;
        --element-backgound-color: #444;
        --front-color: #dfdfdf;
        --element-border-color: #555;
        --link-color: #4baeff;
    }

    /**********************************************/

    * {
        user-select: none;
        transition: background-color 0.3s ease-in-out, color 0.1s ease-in-out;
        box-sizing: content-box;
    }

    .inputReact {
        background-color: var(--element-backgound-color);
        color: var(--front-color);
        padding: 5px;
        border: 1px solid var(--element-border-color);
        border-radius: 5px;
        font-size: var(--medium-font-size);
    }

    input[type='file'] {
        display: none;
    }

    Canvas {
        border: 1px solid var(--element-border-color);
    }

    /**********************************************/

    .title {
        font-size: clamp(30px, 5vw, 50px);
    }

    .PageContainer {
        max-width: 1000px;
        min-width: 300px;
    }

    .PageSwitchButtonUnselected {
        background-color: var(--secondary-notselected-background-color);
    }

    .PageSwitchButtonSelected {
        background-color: var(--secondary-background-color);
    }

    /**********************************************/

    #decodeImageUrlInput {
        width: 100px;
    }

    #decodeThresholdInput {
        width: 50px;
    }

    /**********************************************/

    #innerThresholdRange,
    #coverThresholdRange,
    #innerContrastRange,
    #coverContrastRange {
        max-width: 320px;
    }

    #innerThresholdInput,
    #coverThresholdInput {
        width: 50px;
    }

    #encodeSizeInput {
        width: 60px;
    }

    /**********************************************/

    #versionRecordTable td {
        padding: 10px;
    }
    
    :root {
        --secondary-background-color: #fff;
        --background-color: #ececec;
        --secondary-notselected-background-color: #f6f6f6;
        --element-backgound-color: #f6f6f6;
        --front-color: #000;
        --front-secondary-color: #666;
        --element-border-color: #ccc;
        --link-color: #2285d5;

        --large-font-size: 1.2rem;
        --medium-font-size: 0.9rem;
        --small-font-size: 0.7rem;
    }

    [data-theme='light'] {
        --secondary-background-color: #fff;
        --background-color: #ececec;
        --secondary-notselected-background-color: #f6f6f6;
        --element-backgound-color: #eaeaea;
        --front-color: #000;
        --front-secondary-color: #666;
        --element-border-color: #cccccc;
        --link-color: #2285d5;
    }

    [data-theme='dark'] {
        --secondary-background-color: #000;
        --background-color: #191919;
        --secondary-notselected-background-color: #101010;
        --element-backgound-color: #444;
        --front-color: #dfdfdf;
        --front-secondary-color: #999;
        --element-border-color: #555;
        --link-color: #4baeff;
    }

    /**************************************/

    .marginTopHigh {
        margin-top: 20px;
    }

    .marginTopMedium {
        margin-top: 10px;
    }

    .marginTopLow {
        margin-top: 5px;
    }

    .marginLeftLow {
        margin-left: 5px;
    }

    .marginRightLow {
        margin-right: 5px;
    }

    .marginBottomMedium {
        margin-bottom: 10px;
    }

    .marginBottomHigh {
        margin-bottom: 20px;
    }

    .marginBottomExtreme {
        margin-bottom: 40px;
    }

    /**************************************/

    .justifyCenter {
        justify-content: center;
    }

    .justifySpaceBetween {
        justify-content: space-between;
    }

    .gapLow {
        gap: 5px;
    }

    .alignCenter {
        align-items: center;
    }

    .flexColumn {
        flex-direction: column;
    }

    .flexRow {
        flex-direction: row;
    }

    .positionRelative {
        position: relative;
    }

    .textAlignCenter {
        text-align: center;
    }

    /**************************************/

    .paddingLow {
        padding: 5px;
    }

    .paddingHigh {
        padding: 15px;
    }

    .displayNone {
        display: none;
    }

    .displayBlock {
        display: block;
    }

    .displayFlex {
        display: flex;
    }

    .fontLarge {
        font-size: var(--large-font-size);
    }

    .fontMedium {
        font-size: var(--medium-font-size);
    }

    .fontSmall {
        font-size: var(--small-font-size);
    }

    .textDecorationNone {
        text-decoration: none;
    }

    .textDecorationUnderline {
        text-decoration: underline;
    }

    .borderNone {
        border: none;
    }

    .borderRadiusLow {
        border-radius: 5px;
    }

    .borderRadiusHigh {
        border-radius: 10px;
    }

    .borderRadiusExtreme {
        border-radius: 20px;
    }

    .borderRadiusOnlyTop {
        border-radius: 10px 10px 0 0;
    }

    .borderRadiusOnlyBottom {
        border-radius: 0 0 15px 15px;
    }

    .borderSolidNone {
        border: 0px, solid;
    }

    .borderCollapse {
        border-collapse: collapse;
    }

    .frontColor {
        color: var(--front-color);
    }

    .frontSecondaryColor {
        color: var(--front-secondary-color);
    }

    .frontLinkColor {
        color: var(--link-color);
    }

    .backgroundSecondary {
        background-color: var(--secondary-background-color);
    }

    .backgroundNotSelected {
        background-color: var(--secondary-notselected-background-color);
    }

    .backgroundElement {
        background-color: var(--element-backgound-color);
    }

    .backgroundPrimary {
        background-color: var(--background-color);
    }

    /**************************************/

    .transformNone {
        transform: none;
    }

    .transformSize:hover {
        transform: scale(1.05);
        transition: transform 0.2s;
    }

    .transformSecondary:hover {
        transform: none;
        background-color: var(--secondary-background-color);
    }

    /**************************************/

    .refWidthHigh {
        width: 90%;
    }

    .refWidthMedium {
        width: 70%;
    }

    .refWidthFull {
        width: 100%;
    }

    .refWidthHalf {
        width: 50%;
    }

    .widthLimit {
        max-width: min(90%, 600px);
    }

    .refWidthLimit {
        width: min(90%, 400px);
    }
    
    .switchContainer {
        position: fixed;
        left: 10px;
        bottom: 10px;
        display: flex;
        align-items: center;
        padding: 12px;
        cursor: pointer;
        background-color: var(--secondary-background-color);
        border-radius: 40px;
        border: 1px solid var(--element-border-color);
        box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
        z-index: 1;
    }

    .switchContainer p {
        margin-right: 10px;
        font-size: 1rem;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 22px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .switchSlider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.4s;
        border-radius: 22px;
    }

    .switchSlider:before {
        position: absolute;
        content: '';
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }

    input:checked + .switchSlider {
        background-color: #002a6e;
    }

    input:checked + .switchSlider:before {
        transform: translateX(18px);
    }
    
    :root {
        --sidebar-width: 200px;
        --sidebar-padding: 30px;
    }

    .sidebarContainer {
        position: fixed;
        top: 0;
        right: 0;
        width: var(--sidebar-width);
        height: 100%;
        background-color: var(--secondary-background-color);
        border-left: 5px solid var(--element-backgound-color);
        box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
        padding: var(--sidebar-padding);
        z-index: 100;
        transition: transform 0.5s, background-color 0.3s ease-in-out;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sidebarHide {
        transform: translateX(calc(var(--sidebar-width) + var(--sidebar-padding)));
    }

    .sidebarShow {
        transform: translateX(0);
    }

    .sidebarContent {
        width: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30px;
    }

    .sidebarContent Canvas {
        width: 90%;
        margin-top: 20px;
    }

    .sidebarToggle {
        position: absolute;
        top: 50%;
        left: 0px;
        box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
        transform: translateY(-50%);
        transform: translateX(-50%);
        width: 40px;
        height: 40px;
        background-color: var(--element-backgound-color);
        color: var(--front-color);
        font-size: var(--large-font-size);
        border: 0px solid;
        border-radius: 50%;
        cursor: pointer;
        z-index: 101;
    }

    #sidebarClearButton {
        margin-top: 10px;
    }

    #sidebarHint {
        font-size: var(--small-font-size);
    }

    .canvasSelected {
        border: var(--front-color) 5px solid;
    }