1.certificate__table {
2  border-left: 1px solid $border-color-01;
3  border-right: 1px solid $border-color-01;
4  margin-top: 0.5em;
5  .table__row-header {
6    width: 100%;
7    border-bottom: 1px solid $border-color-01;
8    background-color: $primary-dark;
9    color: $primary-light;
10    font-weight: 700;
11  }
12  .table__row-value {
13    width: 100%;
14    border-bottom: 1px solid $border-color-01;
15  }
16  .certificate__type-header {
17    @include mediaQuery(small) {
18      width: 20%;
19      background: transparent;
20    }
21    width: 100%;
22    padding: 0.8em;
23    padding-left: 1.5em;
24  }
25  .certificate__issue-header {
26    display: none;
27    padding: 0.8em;
28    @include mediaQuery(small) {
29      width: 20%;
30      display: block;
31    }
32  }
33  .certificate__date-header {
34    padding: 0.8em;
35    @include mediaQuery(small) {
36      width: 12%;
37      display: block;
38    }
39    display: none;
40  }
41  .certificate__status-header {
42    padding: 0.8em;
43    @include mediaQuery(small) {
44      width: 5%;
45      display: block;
46    }
47    display: none;
48  }
49  .certificate__type-cell {
50    width: 100%;
51    padding: 0.8em 0.8em 0.8em 1.5em;
52    word-wrap: break-word;
53    background: $background-02;
54    @include mediaQuery(small) {
55      width: 20%;
56      background: transparent;
57    }
58  }
59  .certificate__issue-cell {
60    padding: 0.8em;
61    word-wrap: break-word;
62    @include mediaQuery(small) {
63      width: 20%;
64    }
65    width: 70%;
66  }
67  .certificate__date-cell {
68    width: 70%;
69    padding: 0.8em;
70    word-wrap: break-word;
71    @include mediaQuery(small) {
72      width: 12%;
73    }
74  }
75  .certificate__status-cell {
76    padding: 0.8em;
77    @include mediaQuery(small) {
78      display: block;
79      width: 5%;
80    }
81    display: none;
82  }
83  .certificate__status-icon {
84    width: 1.2em;
85    svg {
86      margin-bottom: .2em;
87    }
88  }
89  .certificate__buttons-cell {
90    @include mediaQuery(small) {
91      width: 10%;
92      padding-top: 0.5em;
93    }
94    width: 100%;
95    text-align: right;
96    padding: 0 1.5em 0 0;
97  }
98  .certificate__title-inline {
99    @include mediaQuery(small) {
100      display: none;
101    }
102    width: 30%;
103    display: block;
104    padding: 0.8em 0.8em 0.8em 1.5em;
105  }
106  .upload__certificate {
107    border-top: 1px solid $border-color-01;
108    width: 100%;
109    background: $background-02;
110    padding: 0.8em;
111  }
112}
113.certificate__upload-chooser {
114  background: $background-02;
115}
116
117
118.certificate__close-modal {
119  float: right;
120  position: relative;
121  bottom: 1rem;
122  left: 2rem;
123}
124.certificate__table__icon {
125  margin-left: 1.5em;
126  margin-bottom: .4em;
127}
128
129.add__certificate__modal {
130  select {
131    margin-bottom: 0;
132  }
133  .file__upload {
134    margin-bottom: 2em;
135  }
136  .select__new-label {
137    margin-bottom: 1em;
138  }
139  .select__new-button {
140    font-size: 1.2em;
141  }
142  .file__name {
143    background-color: $background-02;
144    padding: 0.5em;
145  }
146}
147
148.add-certificate__section {
149  padding-left: 0;
150}
151
152// Combinator needed to match specificity
153// of default modal settings
154.modal.add-csr__modal {
155  width: 100%;
156  max-height: 100vh;
157  overflow-y: auto;
158  z-index: 1001;
159}
160
161.add-csr__section:first-of-type {
162  padding-left: 0;
163}
164
165.add-csr__section:last-of-type {
166  margin-top: 2rem;
167  padding-right: 0;
168
169  @media (min-width: 640px) {
170    margin-top: 0;
171  }
172}
173
174.add-csr__section-title {
175  margin-bottom: 1rem;
176  font-weight: 700;
177}
178
179.add-csr__section--border {
180  @media (min-width: 640px) {
181    padding-left: 2rem;
182    border-left: 1px solid $base-02--04;
183  }
184}
185
186.add-csr__label {
187  white-space: nowrap;
188  display: inline-block;
189}
190
191.add-csr__text-helper {
192  color: $base-02--02;
193  font-weight: 400;
194  font-size: 14px;
195  line-height: 1.2;
196  margin-bottom: .5em;
197}
198
199input.add-csr__input,
200select.add-csr__select {
201  width: 100%;
202  margin-bottom: 0;
203  max-height: none;
204  height: auto;
205}
206
207.select.add-csr__select  {
208  line-height: 1.15;
209}
210
211input.add-csr__input-no-validation {
212  margin-bottom: 1.7rem;
213}
214
215.add-csr__additional-alt-names {
216  display: flex;
217}
218
219.add-csr__alt-name-add-btn {
220  padding: 0;
221  @media (min-width: 640px) {
222    margin: 1.9rem 0;
223  }
224}
225
226.add-csr__alt-name-delete-btn {
227  width: 20px;
228  height: 30px;
229  padding: 0;
230
231  icon {
232    margin-right: 0;
233  }
234}
235
236.add-csr-code__header {
237  margin-top: 1em;
238}
239
240.add-csr__container-csr-code {
241  white-space: pre-wrap;
242}
243
244.add-csr__text-download {
245  color: $base-02--08;
246}
247
248select.add-csr__multiselect {
249  height: 14rem;
250}
251