.table{
        all:inicial;
    }

    .mycontainer:not([class="modal"]) {
        display: flex;
        flex-direction: column;
        height: 100vh;
        width: 100%;
        position: sticky;
        overflow-y: auto;
        overflow-x: auto;
        min-width: fit-content;
    }

    @media screen and (max-width: 844px) {
        #ratio_table{
            display: none!important;
        }
    }
    
    @media screen and (min-width: 844px) {
        #ratio_table{
            display: block!important;
        }
    }

    #header_buttons {
        position: sticky;
        top: 0;
        z-index: 999;
        background-color: #ffffff;
        display: flex;
        align-items: center;
    }

    #header_filters {
        width: 100%;
    }

    #checkstaff_filter {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start; /* 左寄せに設定 */
        align-items: flex-start; /* 上揃えに設定 */
        max-width: 100%; /* 親要素の最大幅を100%に設定 */
        margin-top: -10px; /* 全体のマージン */
    }

    #checkstaff_filter label {
        margin-top: 10px;
        white-space: nowrap;
        flex-basis: auto; 
    }

    #checkstaff_filter label:last-child,
    #checkstaff_filter label:nth-last-child(-n+2):nth-child(even) {
        margin-top: 10px; 
    }

    #userArea{
        border: 1px solid #333;
        border-radius: 20px;
        padding: 0px 20px 0px 20px;
        margin-bottom: 5px;
    }

    #noAlertLINEWORKS{
        padding: 0px 20px 0px 20px;
        margin-bottom: 5px;
    }

    #postbutton {
        display: flex;
        height: 100%;
        width: 25%;
        align-items: center;
        justify-content: center;
        min-width: 120px;
        margin-bottom: 5px;
    }

    #postbutton button{
        color: black;
        font-size: 14px;
        border: 1px solid #333;
        border-radius: 20px;
        padding: 5px 20px;
        background: aqua;
        scale: 1.5;
    }

    #postbutton button[style*="pointer-events: none;"]{
        color: black;
        font-size: 14px;
        border: 1px solid #333;
        border-radius: 20px;
        padding: 5px 20px;
        background: red;
        scale: 1.5;
    }

    #postbutton button:disabled{
        color: black;
        font-size: 14px;
        border: 1px solid #333;
        border-radius: 20px;
        padding: 5px 20px;
        background: gray;
        scale: 1.5;
    }

    .modal-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-main-message {
        width: 100%;
        padding: 10px;
        border: 1px solid gray;
    }

    #sending {
        display: none;
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0px;
        left: 0px;
        background: #000;
        z-index: 1;
        opacity: 0.5;
    }

    #spinner {
        display: none;
        color: #fff;
        z-index: 2;
        opacity: 0.8;
        flex-direction: column !important;
    }

    #maincontainer {
        flex: 1;
        overflow: auto;
        min-width: fit-content;
        height: 100%;
        position: sticky;
    }

    .table{
        width: 100% !important;
    }

    .table thead {
        position: sticky;
        top: 0;
        background-color: #ffffff;
    }

    .table thead:before {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 999;
        border: rgb(222, 226, 230);
        background-color: #ffffff;
    }

    .modal-header span:not([class="modal-close"]) {
        width: 100%;
        text-align: center;
    }

    #type_filter ,#division_filter{
        margin-right: 30px;
        display: flex;
        justify-content: center;
        padding-bottom: 10px;
    }

    #data_mode {
        display: flex;
        justify-content: center;
        padding-bottom: 10px;
    }

    #index_filter {
        display: flex;
        justify-content: center;
        padding-bottom: 10px;
    }

    #status_filter {
        display: flex;
        justify-content: center;
        padding-bottom: 10px;
    }

    #checkstaff_filter {
        display: flex;
        justify-content: center;
        padding-bottom: 10px;
    }

    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        overflow: hidden;
    }

    .modal-dialog-centered {
        align-items: center;
        justify-content: center;
    }

    .modal-main-content {
        display: flex;
        flex-direction: column;
        position: relative;
        background-color: #f4f4f4;
        width: 100%;
        animation-name: modalopen;
        animation-duration: 1s;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    @keyframes modalopen {
        from {
            opacity: 0
        }
        to {
            opacity: 1
        }
    }

    #filters {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5px 20px;
    }

    label:not([class="pastCheck"]):not([class="noAlert"]) input {
        display: none;
    }

    .br_span{
        display: inline-block;
    }
    #header_filters span:not([class*="未実装"],#spin_status) {
        color: #333;
        font-size: 14px;
        border: 1px solid #333;
        border-radius: 20px;
        padding: 5px 20px;
    }
 

    td[name="ratio_filter"][data-is_filtering="true"]{
        color: #333;
        font-size: 14px;
        border: 2px solid #333;
        padding: 5px 20px;
    }


    label[class*="未実装"] {
        pointer-events: none;
        input{
            pointer-events: none
        };
        span{
            color: #333 !important;
            background-color: black;
            font-size: 14px !important;
            border: 1px solid #333 !important;
            border-radius: 20px !important;
            padding: 5px 20px !important;
        }
    }

    label:not([class="pastCheck"]):not([class="noAlert"]) input:checked+span:not([class*="未実装"]) {
        color: #FFF;
        background: gray;
    }


    div > label:not(:has(*)){
        color:  black;
        font-size: 14px;
        font-weight: bold;
        margin-right: 10px;
    }

    #dateFilter{
        font-size: 20px;
    }

    td,
    td *,
    tr th,
    th * {
        background: transparent;
        background-color: transparent;
        text-align: center;
        justify-content: center;
        align-items: center;
        vertical-align: middle;
        white-space: nowrap;
    }

    td input.unchange{
        border: transparent;
    }

    .modal-footer{
        display:flex;
        align-items: center !important;
        justify-content: space-between !important;
    }

    tr[class*="updatd"]:not([class*="details"]){
        background-color: aqua !important;
    }

    tr td[class*="updated"]{
        background-color: aqua !important;
    }

    td[data-is_updated=true] svg{
        color: red !important;
    }

    td:not([style*="pointer-events: none"]):not([data-is_updated=true]) svg{
        color:black !important;
    }

    tr[data-is_updated=true]{
        background-color: aqua !important;
    }

    tr[data-load_status=true][data-is_details=true]{
        background-color: gray !important;
    }

    tr[data-is_details=true] td[data-is_updated=true],tr[data-is_details=true] td[data-is_updated=true] *{
        background-color: lightskyblue !important;
        color: inherit !important;
        svg {
            color :red !important;
        }
    }

    td[class*="未実装"]{
        pointer-events: none !important;
        background-color:black !important;
    }

    tr[data-load_status="last"][data-is_details=true]{
        background-color: lightgray !important;
    }

    td input[type="checkbox"] {
        scale: 2;
    }

    td {
        div.when,
        div.state {
            width: 100%;
            height: 50%;
            color: #333;
            font-size: 14px;
            border-bottom: 1px solid #333;
            background-color: transparent;
        }
    }

    .clossline{
        background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), #999 50%, #999 calc(50% + 0.5px), transparent calc(50% + 1px));
    }

    .pastCheck {
        float: right;
        align-self: flex-end;
    }

    #tableHead {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: white;
    }

    tr.pastClient {
        background-color: gray;
    }

    tr.pastClient td,
    tr.pastClient td * {
        background-color: transparent;
    }

    #tablelist {
        overflow-y: scroll;
        margin-top: 100px;
    }

    table tr{
        th[name*="unarr_"] , td[name*="unarr_"]{
            width: 100px;
            max-width: 100px;
            min-width: 100px;
        }
    }

    table tr td,
    table tr th {
        background-color: transparent !important;
    }

    td.basic_mode{
        position: sticky;
    }

    body {
        width: 100%;
        position: relative;
    }

    tbody {
        overflow-y: scroll;
        height: 100%;
    }

    .container-item {
        padding: 10px;
        margin: 5px;
    }

    .container-item .row {
        padding: 10px;
    }

    .container-item .row .main {
        border: 1px solid gray;
        padding: 10px;
    }

    .container-item .row form * {
        width: 100%;
    }

    .backgroundfix {
        position: fixed;
        width: 100%;
    }

    textarea:read-only {
        background-color: #f5f5f5;
        border: none;
        outline: none;
        resize: none;
        cursor: default;
    }