1. @import '~realize-common/src/app/components/themes/realize/css/variables.less';
2. @import '../assignmentViewer.common.less';
3.  
4. .av__headerNavbar {
5.     background: @white;
6.     color: @grayDark;
7.     width: 100%;
8.     z-index: 100;
9. }
10.  
11. .av__navbar--inner {
12.     display: flex;
13.     flex-direction: row;
14.     color: @grayDark;
15.     height: 40px;
16. }
17.  
18. .av__exit {
19.     font-family: @baseFontBold;
20.     font-size: @font-size-sm;
21.     padding: 13px 0 0 8px;
22.     white-space: nowrap;
23.     a {
24.         color: @grayDark;
25.         [class^="icon-"],
26.         [class*="icon-"] {
27.             font-size: @font-size-sm;
28.             vertical-align: baseline;
29.         }
30.         &:hover {
31.             color: @blueLight;
32.             text-decoration: none;
33.         }
34.     }
35. }
36.  
37. .av__exitText {
38.     padding-left: 3px;
39. }
40.  
41. .av__save {
42.     font-family: @baseFontBold;
43.     font-size: @font-size-sm;
44.     padding: 7px 0 0 8px;
45.     white-space: nowrap;
46. }
47.  
48. .btn.btn--save {
49.     font-family: @avFontHeavy;
50.     font-size: @font-size-sm;
51.     background: @white;
52.     color: @black;
53.     border-radius: 2px;
54.     border: 1px solid @black;
55.     white-space: nowrap;
56.     height: 26px;
57.     min-width: 52px;
58.     width: auto;
59.     text-shadow: none;
60.     text-align: center;
61.     &:hover {
62.         color: @white;
63.         text-decoration: none;
64.         background-color: @grayDark;
65.         background-image: -webkit-linear-gradient(top, @grayDark 0%, @black 100%);
66.     }
67. }
68.  
69. .av__assignmentTitle {
70.     padding: 13px 0 0 10px;
71.     flex-grow: 1;
72.     font-size: @font-size-sm;
73.     font-family: @avFontMedium;
74.     color: @grayDark;
75.     white-space: nowrap;
76.     overflow: hidden;
77.     text-overflow: ellipsis;
78. }
79.  
80. .av__assignmentDueMessages {
81.     padding: 13px 8px 0 0;
82.     color: @grayDarker;
83.     font-family: @avFontHeavy;
84.     white-space: nowrap;
85.     text-align: right;
86. }
87.  
88. .av__assignmentDueDate {
89.     font-size: @font-size-xs;
90.     display: flex;
91.     flex-direction: row-reverse;
92. }
93.  
94. .av__assignmentPastDueDate {
95.     font-size: @font-size-sm;
96.     color: @red;
97.     font-family: @baseFontBold;
98. }
99.  
100. .av__turnIn {
101.     padding: 5px 8px 5px;
102. }
103.  
104. .av__turnedIn {
105.     padding: 12px 14px 0 0;
106.     font-family: @avFontHeavy;
107.     color: @grayDarker;
108. }
109.  
110. @media only screen and (max-width: @mediumBreakpointMax) {
111.  
112.     .av__exit {
113.         a {
114.             padding: 5px 10px 6px;
115.             [class^="icon-"],
116.             [class*="icon-"] {
117.                 margin: 0;
118.             }
119.         }
120.     }
121. }
122.  
123. @media only screen and (max-width: @smallBreakpointMax) {
124.  
125.     .av__assignmentTitle {
126.         font-size: @font-size-sm;
127.         font-family: @avFontMedium;
128.         color: @grayDark;
129.         text-overflow: ellipsis;
130.     }
131.  
132.     .av__exitText {
133.         position: absolute;
134.         overflow: hidden;
135.         width: 0;
136.         height: 0;
137.         left: -1000px;
138.         top: 0;
139.         border: none;
140.         background:none;
141.     }
142.  
143.     .av__assignmentDueMessages {
144.         color: @grayDarker;
145.         font-family: @avFontHeavy;
146.     }
147.  
148.     .av__turnIn {
149.         padding: 4px 10px 7px;
150.         margin-left: 300px;
151.         position: fixed;
152.     }
153. }
154.  
155. .btn.btn--turnIn {
156.     font-family: @avFontHeavy;
157.     font-size: @font-size-sm;
158.     background: @black;
159.     color: @white;
160.     border-radius: 2px;
161.     border: 1px solid @black;
162.     white-space: nowrap;
163.     height: 30px;
164.     min-width: 87px;
165.     width: auto;
166.     text-shadow: none;
167.     text-align: center;
168.     &:hover {
169.         color: @white;
170.         text-decoration: none;
171.         background-color: @grayDark;
172.         background-image: -webkit-linear-gradient(top, @grayDark 0%, @black 100%);
173.     }
174. }
175.  
176. .av__studentStatusPanel {
177.     background-color: @white;
178.     white-space: nowrap;
179. }
180.  
181. .av__studentName {
182.     font-size: @font-size-sm;
183.     font-family: @avFontMedium;
184.     height: 16px;
185. }
186.  
187. .av__status--inProgress {
188.     padding-right: 14px;
189.     font-family: @avFontMedium;
190.     font-weight: @assignmentStatusFontWeight;
191.     font-size: @font-size-sm;
192.     color: @inProgressFontColor;
193. }
194.  
195. .av__status--completed {
196.     padding-right: 14px;
197.     font-family: @avFontMedium;
198.     font-weight: @assignmentStatusFontWeight;
199.     font-size: @font-size-sm;
200.     color: @completedFontColor;
201. }
202.  
203. .av__studentStatus {
204.     right: 10px;
205.     top: 25%;
206.     padding-top: 11px;
207.     text-align: right;
208. }
209.  
210. .turnIn__modalSpinner {
211.     align-items: center;
212.     background-color: @black;
213.     display: flex;
214.     height: 100%;
215.     justify-content: center;
216.     opacity: 0.5;
217.     position: absolute;
218.     width: 100%;
219.     z-index: 999;
220.     .icon-spinner {
221.         color: @white;
222.         font-size: 120px;
223.         padding: 0;
224.     }
225. }
226.  
227.  
228.