Spaces:
Runtime error
Runtime error
| body { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| margin: 0; | |
| color: #3E3E3E; | |
| } | |
| div#main-container { | |
| display: flex; | |
| flex-direction: column; | |
| flex-wrap: nowrap; | |
| height: 100vh; | |
| align-items: center; | |
| row-gap: 40px; | |
| } | |
| div#title { | |
| font-family: sans-serif; | |
| text-align: center; | |
| } | |
| div#appcontent-ctn { | |
| display: flex; | |
| column-gap: 30px; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| row-gap: 4px; | |
| } | |
| div#left-ctn { | |
| display: flex; | |
| flex-direction: column; | |
| row-gap: 4px; | |
| } | |
| div#right-ctn { | |
| display: flex; | |
| flex-direction: column; | |
| row-gap: 4px; | |
| height: 320px; | |
| overflow: scroll; | |
| } | |
| div#checkbox-rear { | |
| width: 100%; | |
| } | |
| div#checkbox-rear > div { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: flex-start; | |
| width: 100%; | |
| align-items: center; | |
| height: 30px; | |
| font-family: sans-serif; | |
| } | |
| div#buttons-container { | |
| display: flex; | |
| justify-content: flex-start; | |
| flex-direction: row; | |
| width: 100%; | |
| height: 40px; | |
| gap: 4px; | |
| } | |
| div#instructions-container { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: flex-start; | |
| width: 100%; | |
| height: 40px; | |
| gap: 4px; | |
| } | |
| div#canvas-container { | |
| margin: 0; | |
| } | |
| canvas#myCanvas { | |
| border-radius: 4px; | |
| } | |
| #buttons-container > button { | |
| cursor: pointer; | |
| flex: 1; | |
| } | |
| div#instructions-container > input[type="text"] { | |
| flex: 3; | |
| padding: 0 10px; | |
| font-size: large; | |
| } | |
| div#instructions-container > button { | |
| cursor: pointer; | |
| flex: 1; | |
| } | |
| div#loading-div { | |
| font-size: 40px; | |
| width: 100%; | |
| height: 40px; | |
| } | |
| div#vision-text-container { | |
| width: 576px; | |
| font-family: sans-serif; | |
| display: flex; | |
| flex-direction: column; | |
| flex: 1; | |
| } | |
| .text-msg { | |
| font-size: 0.8em; | |
| line-height: 1.4em; | |
| } | |
| .text-msg:last-child{ | |
| font-size: 1.2em; | |
| line-height: 1.3em; | |
| font-weight: bold; | |
| } | |
| div#vision-text-container > div { | |
| margin: 10px 0; | |
| padding-bottom: 10px; | |
| } | |
| @media screen and (max-width: 500px) { | |
| div#vision-text-container { | |
| width: 380px; | |
| } | |
| } |