#big-canvas {
    display: flex;
    width: 100%;
    border: solid 1px black;
    font-family: sans-serif;
    font-size: 10px;
    box-sizing: border-box;
}
#big-canvas * {
    box-sizing: border-box;

}
#left-canvas {
    height: 400px;
}
#right-canvas {
    height: 400px;
}
#map-canvas {
    height: 400px;
}
#left-canvas input[type=text] {
    width: 100%;
    padding: 0.5em;
}


#psitems-canvas {
    overflow: auto;
}

#ajaxresult {
    left: 0px;
    top: 0px;
}

@media screen
and (max-width: 768px) {
    #big-canvas {
        min-width: 310px;
        flex-direction: column; 
        height: 500px;
    }
    #left-canvas {
        height: 200px;
    }
    #right-canvas {
        height: 300px;
    }    
    #psitems-canvas {
        height: 180px;
    }    
}
@media screen
and (min-width: 769px) {
    #big-canvas {
        min-width: 640px;
        flex-direction: row; 
        height: 400px;
    }
    #left-canvas {
        width: 180px;
        height: 400px;
    }
    #right-canvas {
        width: calc(100% - 180px);
        height: 400px;
    }
    #psitems-canvas {
        height: 380px;
    }    
}