/* 131025 .contents{ display: flex; flex: 1; flex-direction: column; height: calc(100vh - 160px); margin: .9rem .5rem; width: 100%; }
@media only screen and (max-width: 1680px){ .contents{ height: calc(100vh - 166px); } } */
.contents{ display: flex; flex: 1; flex-direction: column; margin: 10px 8px; width: 100%; }
.container{ display: grid; flex: 1; grid-template-columns: 1fr 12px 1fr; grid-template-rows: 1fr; min-height: 0; height:100%; max-height:100%; min-width: 0; width: 100%; }
/* 131025 
    .column{ height: 100%; min-width: 0; overflow: hidden; padding: 0; } /*191025*/
.column{ min-width: 0; overflow: hidden; padding: 0; }
.left{ min-width: 300px; }
.right{ min-width: 200px; }
.resize-handle{ align-items: center; background: transparent; cursor: col-resize; display: flex; justify-content: center; min-width: 12px; }
.resize-handle::before{ background-image: repeating-linear-gradient(to bottom, #777, #777 4px, transparent 4px, transparent 8px); content: ""; display: block; height: 20%; width: 4px; }
.resize-handle:hover{ background: #f9f9f9; }
.resize-handle:active{ background: #f0f0f0; }
.container.stack{ grid-template-columns: 1fr !important; grid-template-rows: auto 12px 1fr; }
.container.stack .resize-handle{ align-items: center; cursor: row-resize; display: flex; height: 12px; justify-content: center; margin-bottom: 8px; position: relative; top: 3px; width: 100%; }
.container.stack .resize-handle::before{ background-image: repeating-linear-gradient(to right, #777, #777 4px, transparent 4px, transparent 8px); content: ""; display: block; height: 4px; width: 30%; }
.container.stack .left{ margin-bottom: 0.5rem; }
.container.stack .right{ margin-top: 0.5rem; }