.table-properties th {
    color: #ffffff;
}

table.dataTable thead th, table.dataTable thead td {
    padding: 10px 10px;
    font-weight: normal;
}

table.dataTable {
    margin-top: 10px;
}

.body-page-condition {
    display: flex;
    flex-direction: column;
}

.search-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 10px;
}

.search-item {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 40px;
}

.search-item label {
    color: white;
    text-align: center;
    padding: 0.3rem 0;
    background: var(--contractor-primary);
    min-width: 80px;
    padding-top: 8px;
}

.search-item input{
    border: 0.5px solid var(--contractor-primary);
    font-size: unset;
    border-radius: unset;
    padding: unset;
    width: unset;
}

.search-item select {
    border: 0.5px solid var(--contractor-primary);
}

.search-item .short-input {
    width: 100%;
}

.search-item .long-input {
    width: 100%;
    padding: 10px;
}

.search-item span {
    font-size: 25px;
    color: var(--contractor-primary);;
}

.col-3 {
    width: 32rem;
    margin: 0.5rem 1rem;
}

.body-page-button {
    background-color: #fff;
    color: var(--contractor-primary) !important;
    background:none;
}

.body-page-button:hover {
    background-color: #fff !important;
    background:none;
}

input:read-only {
    background-color: white !important;
}

.container {
    margin: 2vw 5vw;
    width: 60% !important;
}

.container p {
    font-size: 1.26rem;
}

.page-mobile {
    display: none;
}

.tab-content .tab-mobile-content {
    overflow: auto;
    white-space: nowrap;
}

.sticky-col {
    position: sticky !important;
}

.first-col {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    font-size: 1.2rem;
    left: 0px;
    border: unset;
}

th.first-col {
    background: var(--contractor-primary);
}

td.first-col {
    background: #fff;
}

.normal-col {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    font-size: 1.2rem;
    height: 40px;
}

.table_data {
    overflow: auto;
    position: relative;
}

.btn-back {
    display: flex;
    justify-content: center;
}

@media (max-aspect-ratio: 10/9) {
    .container {
        margin: 0 5vw;
        width: 100% !important;
    }

    .col-3 {
        width: 30rem;
        margin: 0.5rem 1rem;
    }

    .con-navbar {
        justify-content: center;
    }

    .page-pc {
        display: none;
    }

    .page-mobile {
        display: block;
    }

    ul.nav.nav-tabs {
        font-size: calc(100vw/36);
    }

    .body-page-button {
        width: unset;
    }

    .search-item {
        font-size: 1.2rem;
    }

    .sort-content {
        text-align: right;
        margin: 0.5rem 0;
    }

    .sort-content span {
        font-size: 1.2rem;
        color: var(--contractor-primary);
    }

    .form-submit {
        width: unset;
        font-size: 1.3rem;
        padding: 1rem 5rem;
    }

    .tab-content table {
        width: 1200px;
        font-size: calc(100vw/33);
    }

    .sort-item-select {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sort-item-select .sort-title,
    .sort-item-select .sort-display {
        width: 90vw;
        margin: 0.5rem 0;
    }

    .sort-item-select .sort-display {
        padding: 1rem 2.5rem; 
        background: var(--div-background);
    }
    .sort-item-select .first-select{
        width: 75vw;
    }

    .sort-item-select .sort-items {
        width: 75vw;
        display: flex;
        flex-direction: column;
        margin: 0.5rem 0;
    }

    .sort-item-select {
        position: fixed;
        overflow: hidden;
        left: 0;
        top: 75px;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: opacity 0.4s, top 0.8s;  
        opacity: 1;   
        z-index: 99;                          
    }

    .sort-item-select.closed {
        opacity: 0;                             
        top: -100%;
    }

    .sort-modal-button {
        margin: 2rem 0 3rem 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .sort-modal-button button#sort-modal-accept {
        margin: 0 1rem;
        border: unset;
        padding: 1rem 2rem;
        color: white;
        background: var(--contractor-primary);
        border-radius: 0.4rem;
    }

    .sort-modal-button button#sort-modal-close {
        border: 1px solid;
        padding: 1rem 2rem;
        background: white;
        border-radius: 0.4rem;
    }
}