.alink {
    text-decoration: none;
}

.btn-square-pop {
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #fd9535; /*背景色*/
    border-bottom: solid 2px #d27d00; /*少し濃い目の色に*/
    border-radius: 4px; /*角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
    font-weight: bold;
}

    .btn-square-pop:active {
        border-bottom: solid 2px #fd9535;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
    }

button[data-enable="false"]{
    color:gray
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

    #overlay img {
        max-width: 100%;
        max-height: 100%;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
        border-radius: 8px;
        background: white;
        padding: 8px;
    }

input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

h1 {
    padding: 0.5em; /*文字周りの余白*/
    color: #010101; /*文字色*/
    background: #eaf3ff; /*背景色*/
    border-bottom: solid 3px #516ab6; /*下線*/
}

main{
    overflow:hidden;
}

table{
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
    overflow: scroll;
}

tbody {
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    height: auto;
}

th {
    font-size: 14px;
    resize:horizontal;
    overflow:hidden;
}

th, td {
    font-weight: normal;
    border: 1px solid black; /* セルの枠線を設定 */
    padding: 0; /* セルの内側の余白をなくす */
    white-space: nowrap;
}



td input{
    border: none; /* inputの枠線をなくす */
    outline: none; /* focusの枠線をなくす */
    width: 100%; /* inputをセルの全幅に広げる */
    box-sizing: border-box; /* paddingとborderをwidthに含める */
    text-overflow: ellipsis;
    background-color: transparent;
}

    td select {
        width: 100%;
        max-width: 100%;
    }

td button {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

.selectarea {
    background: #FECA40;
}


.fontsolid {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.fixrowcolumleft0 {
    position: sticky;
    top: var(--topoffset);
    left: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    z-index: 3;
}

.fixrowcolumleft1 {
    position: sticky;
    top: var(--topoffset);
    border-top: none;
    border-left: none;
    border-right: none;
    z-index: 3;
    left: var(--firstoffset);
}
.fixrowcolumleft2 {
    position: sticky;
    top: var(--topoffset);
    border-top: none;
    border-left: none;
    border-right: none;
    z-index: 3;
    left: var(--secoffset);
}
.fixrowcolumleft00 {
    position: sticky;
    top: 0;
    left: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    z-index: 3;
}

.fixrowcolumleft01 {
    position: sticky;
    top: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    z-index: 3;
    left: var(--firstoffset);
}

.fixrowcolumleft02 {
    position: sticky;
    top: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    z-index: 3;
    left: var(--secoffset);
}
.fixrow {
    position: sticky;
    top: var(--topoffset);
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: none;
    z-index: 2;
}
.fixrow0 {
    position: sticky;
    top: 0;
    border-top: 0;
    border-bottom: 1px solid #000;
    border-left: none;
    z-index: 3;
}
.fixrowcolumright {
    position: sticky;
    top: var(--topoffset);
    right: 0;
    border-top: none;
    z-index: 2;
}
.fixrowcolumright0 {
    position: sticky;
    top: 0;
    right: 0;
    border-top: none;
    z-index: 2;
}

.fixrow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background: #ccc;
    z-index: -1;
}
.fixrow0::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background: transparent;
    z-index: -1;
}
.fixrowcolumleft0::before, .fixrowcolumright::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background: #ccc;
    z-index: -1;
    left: 0;
}

.fixrowcolumleft00::before, .fixrowcolumright0::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background: #ccc;
    z-index: -1;
    left: 0;
}
.fixrowcolumleft1::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background: #ccc;
    z-index: -1;
    left: 0;
}
.fixrowcolumleft01::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background: #ccc;
    z-index: -1;
    left: 0;
}
.fixrowcolumleft2::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background: #ccc;
    z-index: -1;
    left: 0;
}
.fixrowcolumleft02::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background: #ccc;
    z-index: -1;
    left: 0;
}
.fixcolumleft0 {
    text-align: center;
    font-size: 16px;
    position: sticky;
    border-left: none;
    border-right: none;
    z-index: 0;
    left: 0;
}
.fixcolumleft1 {
    text-align: center;
    font-size: 16px;
    position: sticky;
    border-top: none;
    border-left: none;
    border-right: none;
    z-index: 0;
    left: var(--firstoffset);
}
.fixcolumleft2 {
    text-align: center;
    font-size: 16px;
    position: sticky;
    border-top: none;
    border-left: none;
    border-right: none;
    z-index: 0;
    left: var(--secoffset);
}

.fixcolumright {
    position: sticky;
    right: 0;
    border-top: none;
}

    .fixcolumleft0::before, .fixcolumright::before {
        left: 0;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        background: #ccc;
        z-index: -1;
    }

.fixcolumleft1::before {
    left: 0;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    background: #ccc;
    z-index: -1;
}
.fixcolumleft2::before {
    left: 0;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background: #ccc;
    z-index: -1;
}


#the-canvas {
    border: 1px solid black;
    direction: ltr;
    overflow: scroll;
}


td[data-selected="1"] {
    background-color: yellow;
}

td[data-topborder="1"] {
    border-top: 2px solid red !important;
}

td[data-bottomborder="1"] {
    border-bottom: 2px solid red !important;
}
td[data-rightborder="1"] {
    border-right: 2px solid red !important;
}
td[data-leftborder="1"] {
    border-left: 2px solid red !important;
}