.col-x {
    width: 67%;
    height: 70vh;
    margin: 0 0 0 1%;
    background-color: #fff;
    box-shadow: rgb(50 50 105 / 15%) 0px 2px 5px 0px, rgb(0 0 0 / 5%) 0px 1px 1px 0px;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 20px 1vw 10px;
}

.col-x td{
    padding: 3px 6px;
}

#storage-list {
    height: calc(100% - 200px);

    overflow: auto;
}

#parts_status {
    margin-bottom: 15px;
}

#storage-list td,  #storage-list th {
    font-size: 13px !important
}

.col-xx {
    width: 50% !important;
}

#device_filtr_position_result {
    display: block;
    overflow: auto;
    max-height: calc(50vh + 0px);
}

#device_filtr_position_result h3 {
    cursor: pointer;
}

#device_filtr_position_result h3:hover {
    color:  var(--main_hover) !important;
}

.part {
    min-height: 45px;
    margin: 3px 3px; 
    padding: 6px 10px; 
    font-size: 12px;
    width: 32%;
}

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

.grid h3:first-of-type {
    grid-column: span 3; 
}

.grid .part {
    width: 100%; 
}

@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(3, 1fr); 
    }

    .grid h3:first-of-type {
        grid-column: span 3; 
    }
}

.section_filtr {
    height: 30%;
    position: relative;
}

.section_filtr-h100 {
    height: 100% !important;
}

.section_filtr > div {
    height: calc(100% - 85px) !important;
    overflow: auto;
}