.NGLViewer { position: relative; text-align: center; display: flex; align-items: stretch; justify-content: space-between; } .NGLViewer:fullscreen { background-color: white; } .NGLViewer:-webkit-full-screen { background-color: white; } .NGLFullscreen { position: absolute; top: 0px; left: 0px; width: 35px; height: 35px; background-image: url('/images_static/fullpage_rest.png'); cursor: pointer; z-index: 1; } .NGLFullscreen:hover { background-image: url('/images_static/fullpage_hover.png'); } .NGLViewer > div { /*width: 49.5%;*/ /*display: inline-block;*/ /*margin: auto;*/ vertical-align: top; } .NGLViewer .viewport1, .NGLViewer .viewport2 { position: relative; text-align: center; flex-grow: 2; } .NGLViewer .viewport2 { border-left: 1px dashed #ccc; } .NGLViewer .viewport { height: 400px; text-align: left; } .NGLViewer:fullscreen { white-space: nowrap; flex-wrap: nowrap; } .NGLViewer:-webkit-full-screen { white-space: nowrap; flex-wrap: nowrap; } .NGLViewer:fullscreen .viewport1, .NGLViewer:fullscreen .viewport2 { height: 100%; display: flex; flex-direction: column; align-items: stretch; } .NGLViewer:-webkit-full-screen .viewport1, .NGLViewer:-webkit-full-screen .viewport2 { height: 100%; display: flex; flex-direction: column; align-items: stretch; } .NGLViewer:fullscreen .viewport { flex-grow: 2; height: 100%; } .NGLViewer:-webkit-full-screen .viewport { flex-grow: 2; height: 100%; } .NGLViewer h2 { margin-top: 10px; text-align: center; } .NGLViewer:fullscreen .viewer { flex-grow: 2; } .NGLViewer:-webkit-full-screen .viewer { flex-grow: 2; } .structureSelector { text-align: left; padding-top: 5px; padding-bottom: 5px; } .structureSelector select { width: 100%; } .structureSelector p { font-weight: bold; margin: 0px; } .structureSelector p span { font-weight: normal; } .NGLViewer .structureInfo { display: flex; flex-direction: column; /*gap: 1rem;*/ margin: 5px; } .NGLViewer .controls { background-color: #FFFFFF; position: relative; } .NGLViewer .controls > div { text-align: left; width: 388px; padding-top: 5px; padding-bottom: 5px; } .NGLViewer .controls p { margin: 0px; display: inline-block; width: 81px; } .NGLViewer .controls .clearHighlight { width: 114px; } .colorLegendEntry { white-space: nowrap; vertical-align: top; } .colorLegendEntry > div { display: inline-block; white-space: normal; vertical-align: top; } .colorLegend .colorLegendColor { width: 12px; height: 12px; top: 8px; position: relative; transform: translateY(-50%); margin-right: 5px; border: 1px #a3a3a3 solid; border-radius: 3px; } .colorLegend .title { font-weight: bold; } svg.mapped rect.highlightable, svg.mapped rect.antibody, div.colorLegendEntry.structureHL { cursor: pointer; } .boxmargin { margin-top: 2em; } @media (orientation: portrait) { .NGLViewer:fullscreen { flex-direction: column; } .NGLViewer:-webkit-full-screen { flex-direction: column; } .NGLViewer:fullscreen .structureSelector { margin: auto; } .NGLViewer:-webkit-full-screen .structureSelector { margin: auto; } .NGLViewer:fullscreen .controls { display: flex; height: auto; position: relative; margin-bottom: 5px; } .NGLViewer:-webkit-full-screen .controls { height: auto; position: relative; } .NGLViewer:fullscreen #variantLegend, .NGLViewer:fullscreen #colorLegend { flex-grow: 1; } .NGLViewer:-webkit-full-screen #variantLegend, .NGLViewer:-webkit-full-screen #colorLegend { flex-grow: 1; } #NGLViewer:fullscreen > div:nth-child(1) { flex-grow: 2; } #NGLViewer:-webkit-full-screen > div:nth-child(1) { flex-grow: 2; } } #transcriptName { width: 14px; padding: 3px; transform: rotate(-90deg); } #transcriptOffset { position: absolute; top: 0px; height: 10px; width: 100%; background-color: #c2c2c2; } table#protein_browser tr th div.tabs, table#protein_browser tr th .tab_scroll_right, table#protein_browser tr th .tab_scroll_left { display: none; } table#protein_browser tr th div.tab_border { border-bottom: 1px #c2c2c2 dashed; border-radius: 0px; } table#protein_browser tr th div.tab_border, table#protein_browser tr td { border-left: none; } .transcriptView .transcript.selected > rect { fill: #c5dfbc; stroke: #c5dfbc; } .transcriptView .transcript { cursor: pointer; }