1// TODO: replace cert table with table component
2.certificate__table {
3  border-left: 1px solid $border-color-01;
4  border-right: 1px solid $border-color-01;
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    width: 100%;
108    background: $background-02;
109    padding: 0.8em 1.8em 0.8em 0.8em;
110    height: 4rem;
111    display: flex;
112  }
113  .replace-btn {
114    margin-left: auto;
115  }
116}
117
118.cert-dropdown{
119  margin-bottom: 0;
120}
121
122// TODO: Update CSR modal with global form-field styles
123.add-csr__section:first-of-type {
124  padding-left: 0;
125}
126
127.add-csr__section:last-of-type {
128  margin-top: 2rem;
129  padding-right: 0;
130
131  @media (min-width: 640px) {
132    margin-top: 0;
133  }
134}
135
136.add-csr__section--border {
137  @media (min-width: 640px) {
138    padding-left: 2rem;
139    border-left: 1px solid $base-02--04;
140  }
141}
142
143.add-csr__text-helper {
144  color: $base-02--02;
145  font-weight: 400;
146  font-size: 14px;
147  line-height: 1.2;
148  margin-bottom: .5em;
149}
150
151input.add-csr__input,
152select.add-csr__select {
153  width: 100%;
154  margin-bottom: 0;
155  max-height: none;
156  height: auto;
157}
158
159.select.add-csr__select  {
160  line-height: 1.15;
161}
162
163input.add-csr__input-no-validation {
164  margin-bottom: 1.7rem;
165}
166
167.add-csr__additional-alt-names {
168  display: flex;
169}
170
171.add-csr__alt-name-add-btn {
172  padding: 0;
173  @media (min-width: 640px) {
174    margin: 1.9rem 0;
175  }
176}
177
178.add-csr__alt-name-delete-btn {
179  height: 34px;
180  padding: 0 0 0 1rem;
181  icon {
182    margin-right: 0;
183  }
184}
185
186.add-csr-code__header {
187  margin-top: 1em;
188}
189
190.add-csr__container-csr-code {
191  white-space: pre-wrap;
192}
193
194.add-csr__text-download {
195  color: $base-02--08;
196}
197
198select.add-csr__multiselect {
199  height: 14rem;
200}
201