::ng-deep .modebar { display: none !important; } * { box-sizing: border-box; } .left { width: 15%; display: flex; flex-direction: column; } .list { padding-top: 10px; margin-left: 5px; overflow-y: scroll; flex-grow: 1; } .right { width: 85%; border-left: groove; overflow: scroll; } .main-container { height: 100%; display: flex; justify-content: space-between; } html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; font-family: helvetica, sans-serif; } .table-wrapper { position: relative; padding-top: 20px; } .table-scroll { height: 100%; overflow: scroll; } .overview { overflow-y: scroll; } .parameter { margin: auto; padding: 2px; } button { float: right; } table { margin-right: 0; margin-left: auto; } thead { background: white; } th > div { width: 4em; text-align: left; background: white; padding: 3px; top: 0; } td { padding: 3px; width: 4em; } td:last-child, th:last-child > div { text-align: right; } svg { } path { fill: none; stroke-width: 1; stroke: black; } .channels { overflow: scroll; border:2px solid #000; } .toolbar { display: flex; } .channel_header { background-color: #14639e /*lightblue*/; border-bottom: 1px solid lightgray; color: white; text-align: center; vertical-align: middle; font-weight: bold; padding: 10px; } .container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } /* On mouse-over, add a grey background color */ .container:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ .container input:checked ~ .checkmark { background-color: #2196F3; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .container input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .content { display: flex; flex-direction: column; }