body { background-color: darkgray; } .classroom-main { margin-top: 64px; } .classroom-error { color: red; } .classroom-meet { display: block; position: absolute; left: 0; right: 0; bottom: 0; top: 64px; } .card { max-width: 36rem !important; margin-bottom: 8px; } .card-full { max-width: 100% !important; } .classroom-tab-invisible { display: none; } textarea.classroom-text { width: 100%; min-height: 300px; } iframe.classroom-iframe { width: 100%; height: 80vh; } iframe.diagrams-inline { width: 100%; height: 60vh; } .classroom-dialog-fullscreen { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: 0; background-color: darkgray; padding: 16px; z-index: 10000000; } .classroom-button-close { position: fixed; right: 16px; bottom: 16px; z-index: 20000000; } .classroom-grp-chat { display: block; position: absolute; left: 0; top: 0; right: 70%; bottom: 50%; width: 30%; overflow: hidden; height: 50%; } .classroom-grp-details { display: block; position: absolute; left: 0; top: 50%; right: 70%; bottom: 0; width: 30%; overflow: hidden; height: 50%; background-color: white; padding: 16px; overflow: auto; } .classroom-grp-diagrams { display: block; position: absolute; left: 30%; top: 0; right: 0; bottom: 0; width: 70%; overflow: hidden; height: 100%; } .classroom-3dscene { width: 100%; height: 80vh; } .classroom-3dcontrols { width: 100%; height: 10vh; } .classroom-3dscene canvas { width: 100%; height: 100%; } .classroom-3d-modal-fullscreen { position: fixed; margin: 0; padding: 0; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000000; background-color: grey; } .classroom-modal-fullscreen { width: 100vh !important; height: 100vh !important; margin: 0; top: 0; left: 0; z-index: 10000000; }