/* ==========================================
   TABLET
   1100px ลงมา
========================================== */

@media screen and (max-width:1100px){

/* ---------- Sidebar ---------- */

#sidebar{
    width:200px;
}

.sidebar{
    width:200px;
    padding:15px;
}

.sidebar h2{
    font-size:1.22rem;
}

.sidebar a{
    padding:12px 10px;
    font-size:1.06rem;
}

/* ---------- Content ---------- */

.content{
    margin-left:200px;
    width:calc(100% - 200px);
    padding:20px;
}

/* ---------- Title ---------- */

.page-title{
    font-size:1.95rem;
}

/* ---------- Card ---------- */

.card{
    padding:18px;
}

/* ---------- Grid ---------- */

.grid{
    grid-template-columns:160px 1fr;
    gap:12px;
}

/* ---------- Search ---------- */

.search-row,
.search-row-long,
.case-row,
.bottom-row{

    display:grid;
    grid-template-columns:1fr;
    gap:12px;

}

.case-inputs{

    display:grid;
    grid-template-columns:1fr;
    gap:10px;

}

/* ---------- Buttons ---------- */

.search-buttons{

    display:flex;
    flex-direction:column;
    gap:10px;

}

.search-buttons .btn,
.search-buttons button{

    width:100%;

}

/* ---------- Table ---------- */

.table-wrapper{

    overflow-x:auto;
    -webkit-overflow-scrolling:touch;

}

table{

    min-width:1000px;

}

/* ---------- Progress ---------- */

.progress-header{

    flex-wrap:wrap;
    gap:8px;

}

.progress-row{

    gap:8px;

}

}