1  .form {
  2    background-color: #ffffff;
  3    padding: 40px;
  4    max-width: 810px;
  5    border-radius: 8px;
  6    box-shadow:
  7      0 10px 15px -3px rgb(0 0 0 / 10%),
  8      0 4px 6px -4px rgb(0 0 0 / 10%);
  9  
 10    @media screen and (max-width: 768px) {
 11      padding: 20px;
 12    }
 13  }
 14  .header {
 15    display: flex;
 16    justify-content: space-between;
 17    margin-bottom: 0px;
 18  
 19    @media screen and (max-width: 768px) {
 20      flex-direction: column;
 21    }
 22  
 23    .invoice__title {
 24      font-size: 2rem;
 25    }
 26    .input__default {
 27      width: 48%;
 28      max-height: 45px;
 29  
 30      @media screen and (max-width: 768px) {
 31        width: 100%;
 32      }
 33    }
 34  
 35    .photo__drop__zone {
 36      display: flex;
 37      flex-direction: column;
 38      align-items: center;
 39      background-color: #fff;
 40      border: 1px solid #aaa;
 41      border-radius: 3px;
 42      border: none;
 43      cursor: pointer;
 44      position: relative;
 45  
 46      &:hover {
 47        .image__label {
 48          display: flex;
 49        }
 50      }
 51  
 52      @media screen and (max-width: 768px) {
 53        display: block;
 54        margin-top: 15px;
 55      }
 56    }
 57    .logo__input {
 58      display: none;
 59    }
 60  }
 61  
 62  .img__holder {
 63    width: 150px;
 64    height: 150px;
 65    background-color: rgb(255, 255, 255);
 66    border-radius: 5px;
 67  
 68    .logo {
 69      width: 100%;
 70      height: 100%;
 71      object-fit: contain;
 72    }
 73  }
 74  .image__label {
 75    display: none;
 76    padding: 3px;
 77    cursor: pointer;
 78    position: absolute;
 79    bottom: 0;
 80    color: darkslategray;
 81  }
 82  .logoIcon {
 83    width: 20px;
 84    height: 20px;
 85    margin-left: 5px;
 86  }
 87  
 88  .invoice__details {
 89    display: grid;
 90    grid-template-columns: repeat(2, minmax(0, 1fr));
 91    gap: 2.25rem;
 92  
 93    @media screen and (max-width: 768px) {
 94      display: flex;
 95      flex-direction: column;
 96    }
 97  }
 98  
 99  .input__default {
100    border-radius: 3px;
101    outline: none;
102    border: 1px solid #aaa;
103    width: 100%;
104    padding: 10px 16px;
105    @media screen and (max-width: 768px) {
106      margin-bottom: 8px;
107    }
108  }
109  
110  .form__field {
111    margin-top: 0.5rem;
112    margin-bottom: 0.5rem;
113    display: flex;
114    align-items: center;
115    width: 100%;
116  }
117  //custom made
118  .checkbox__container {
119    margin-top: 10px;
120    display: flex;
121    align-items: center;
122  }
123  
124  .checkbox__container label {
125    display: flex;
126    align-items: center;
127    margin-right: 20px;
128  }
129  
130  .checkbox__container input[type="checkbox"] {
131    margin-right: 5px;
132  }
133  // custom made
134  .label {
135    font-size: 0.85rem;
136    min-width: 25%;
137    color: #454545;
138  }
139  
140  .divider {
141    margin: 8px 0;
142    border: none;
143    outline: none;
144    height: 0.5px;
145    background: #e5e7eb;
146  }
147  
148  .row__group {
149    display: grid;
150    grid-template-columns: repeat(2, minmax(0, 1fr));
151    gap: 2.25rem;
152  
153    @media screen and (max-width: 768px) {
154      display: flex;
155      flex-direction: column;
156    }
157  }
158  
159  .group {
160    flex: 0 0 50%;
161  }
162  
163  .table__wrapper {
164    overflow-x: auto;
165  }
166  
167  .table {
168    border-collapse: collapse;
169    width: 100%;
170    margin-bottom: 1rem;
171    color: #212529;
172    margin-top: 20px;
173  
174    thead {
175      tr {
176        text-transform: uppercase;
177        padding: 0.8rem 0;
178        font-weight: 700;
179        border-top: 1px solid;
180        border-bottom: 0.5px solid;
181        font-size: 11px;
182  
183        .controls {
184          width: 8px;
185          max-width: 8px;
186        }
187      }
188    }
189    th {
190      text-align: right;
191      padding: 0.5rem 0.2rem;
192      border: none;
193      font-weight: 500;
194      -webkit-font-smoothing: antialiased;
195    }
196    td {
197      border: none;
198      padding-top: 8px;
199      padding-bottom: 0px;
200      padding: 0.25rem;
201    }
202    .invoice__items {
203      tr {
204        border-bottom: 1px dashed #ddd;
205      }
206      .input__default {
207        margin-bottom: 5px;
208      }
209      td {
210        vertical-align: top;
211      }
212    }
213    .item__row {
214      cursor: pointer;
215      transition:
216        transform 0.5s ease-out,
217        -webkit-transform 0.5s ease-out;
218  
219      &__actions {
220        color: aquamarine;
221  
222        &__mobile {
223          display: flex;
224          justify-content: space-between;
225          align-items: center;
226        }
227      }
228  
229      .rate {
230        text-align: right;
231      }
232  
233      input,
234      .amount,
235      .tax {
236        text-align: right;
237      }
238      .description {
239        span {
240          display: block;
241        }
242  
243        input {
244          text-align: left;
245        }
246        .details {
247          resize: vertical;
248          min-height: 63px;
249          max-height: 150px;
250          font-family: "Arial";
251  
252          @media screen and (max-width: 768px) {
253            min-height: 125px;
254          }
255        }
256      }
257  
258      .rate,
259      .qty,
260      .amount {
261        min-width: 120px;
262      }
263  
264      .amount {
265        max-width: 120px;
266        word-wrap: break-word;
267      }
268    }
269  }
270  .invoice__headers {
271    .description {
272      text-align: left;
273    }
274  }
275  
276  .btn__remove,
277  .btn__add {
278    min-width: 30px;
279    padding: 4px;
280    background: #e5e7eb;
281    font-size: 14px;
282    color: #374151;
283    padding: 8px 10px;
284    border: 1px solid #d1d5db;
285    border-radius: 6px;
286    -webkit-font-smoothing: antialiased;
287    font-weight: 500;
288    display: inline-block;
289    overflow: hidden;
290    text-decoration: none;
291    cursor: pointer;
292  }
293  .btn__add {
294    background-color: #444;
295  
296    @media screen and (max-width: 768px) {
297      margin-top: 20px;
298    }
299  }
300  .svg__close__icon {
301    width: 0.6875em;
302    display: inline-block;
303    font-size: inherit;
304    height: 1em;
305    overflow: visible;
306    vertical-align: -0.125em;
307  }
308  
309  .total__section {
310    text-align: right;
311  
312    @media screen and (max-width: 768px) {
313      text-align: left;
314      margin-bottom: 20px;
315      margin-top: 20px;
316    }
317  
318    .total {
319      padding-left: 90px;
320  
321      @media screen and (max-width: 768px) {
322        padding-left: 20px;
323      }
324    }
325  }
326  
327  // mobile //
328  .mobile__section {
329    margin-top: 30px;
330  }
331  .input__group {
332    display: flex;
333    justify-content: space-between;
334  
335    .input__default {
336      width: 90%;
337    }
338  
339    .qty {
340      justify-content: flex-end;
341      display: flex;
342    }
343  }
344  
345  .mobile__details {
346    resize: vertical;
347    min-height: 100px;
348    font-family: "Arial";
349  }
350  .btn__text {
351    margin-left: 4px;
352  }
353  
354  .item__row {
355    cursor: pointer;
356    transition:
357      transform 0.5s ease-out,
358      -webkit-transform 0.5s ease-out;
359  
360    &__actions {
361      &__mobile {
362        display: flex;
363        justify-content: space-between;
364        align-items: center;
365        margin-bottom: 12px;
366      }
367    }
368  }
369  
370  /* Styling for the <select> dropdown */
371  .form__field select {
372    width: 100%;
373    padding: 10px 16px;
374    border-radius: 3px;
375    outline: none;
376    border: 1px solid #aaa;
377    background-color: #fff;
378    appearance: none; /* Hide default arrow icon in some browsers */
379    // background-image: url('path-to-your-custom-arrow-icon.png'); /* Add a custom arrow icon */
380    background-repeat: no-repeat;
381    background-position: right center;
382    cursor: pointer;
383    font-size: 14px;
384    color: #555;
385    transition:
386      border-color 0.2s,
387      box-shadow 0.2s;
388  }
389  
390  .form__field select:focus {
391    border-color: #007bff;
392    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
393  }