File size: 2,184 Bytes
f9f0fec
 
6fe4cc8
f9f0fec
 
 
e83b1be
b9dacb5
f9f0fec
 
 
 
 
 
6fe4cc8
f9f0fec
6fe4cc8
f9f0fec
 
 
 
 
 
 
6fe4cc8
f9f0fec
6fe4cc8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6055c67
34cf1bb
83e7fcc
 
 
 
 
 
 
 
 
 
 
 
 
 
f9f0fec
 
6fe4cc8
 
 
 
 
 
 
 
 
f9f0fec
 
 
 
 
 
 
 
 
 
6fe4cc8
f9f0fec
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6fe4cc8
f9f0fec
 
 
 
 
 
 
 
 
e83b1be
f9f0fec
 
 
 
 
 
 
cd3710e
 
779c7a5
cd3710e
779c7a5
cd3710e
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    color: #3E3E3E;
    overflow: scroll;
}

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;
    overflow: scroll;
    height: 320px;
}

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;
    overflow: scroll;
}

.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;
    }
  }