optimized-react-component-library-xyz123 0.1.68 → 0.1.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -118,15 +118,14 @@ fieldset {
118
118
  margin-bottom: 3.6rem;
119
119
  }
120
120
 
121
- .pts-root-question legend{
122
- font-family: Arial;
123
- font-size: 1.6rem;
124
- font-style: normal;
125
- font-weight: 400;
126
- line-height: 20px;
121
+ .pts-root-question legend {
122
+ font-family: Arial;
123
+ font-size: 1.6rem;
124
+ font-style: normal;
125
+ font-weight: 400;
126
+ line-height: 20px;
127
127
  }
128
128
 
129
-
130
129
  .pts-root-question legend,
131
130
  .pts-root-question label,
132
131
  .pts-radio-option {
@@ -265,7 +264,7 @@ textarea:focus-visible,
265
264
  margin: 0 0 15px 0;
266
265
  text-align: left;
267
266
  }
268
- .pts-cookieBanner-Links{
267
+ .pts-cookieBanner-Links {
269
268
  margin-bottom: 1.6rem;
270
269
  }
271
270
 
@@ -329,18 +328,18 @@ textarea:focus-visible,
329
328
  margin-bottom: 2.8rem;
330
329
  }
331
330
 
332
- .pts-main-service-headline a svg{
333
- width: 1.6rem;
334
- height: 1.6rem;
335
- background-color: #6e3282;
336
- border-radius: 50%;
337
- padding: 0.4rem;
338
- flex-shrink: 0;
339
- margin-right: 1.6rem;
331
+ .pts-main-service-headline a svg {
332
+ width: 1.6rem;
333
+ height: 1.6rem;
334
+ background-color: #6e3282;
335
+ border-radius: 50%;
336
+ padding: 0.4rem;
337
+ flex-shrink: 0;
338
+ margin-right: 1.6rem;
340
339
  }
341
340
 
342
- .pts-main-service-headline a svg path{
343
- fill:#ffffff;
341
+ .pts-main-service-headline a svg path {
342
+ fill: #ffffff;
344
343
  }
345
344
 
346
345
  .pts-moreinfo-list {
@@ -616,10 +615,10 @@ textarea:focus-visible,
616
615
  font-size: 1.4rem;
617
616
  }
618
617
 
619
- .textfield-about{
620
- margin-bottom: 0.4rem;
621
- color: #545454;
622
- font-size: 1.4rem;
618
+ .textfield-about {
619
+ margin-bottom: 0.4rem;
620
+ color: #545454;
621
+ font-size: 1.4rem;
623
622
  }
624
623
 
625
624
  /* ---------- TEXTAREA ---------- */
@@ -739,40 +738,39 @@ textarea:focus-visible,
739
738
  width: 100%;
740
739
  }
741
740
 
742
- dl{
741
+ dl {
743
742
  display: grid;
744
743
  grid-template-columns: 50% 50%;
745
-
746
744
  }
747
745
 
748
- dt , dd{
746
+ dt,
747
+ dd {
749
748
  padding: 16px 0px 4px 0px;
750
749
  margin-inline-start: 0px;
751
- border-bottom: 1px solid #DDD;
750
+ border-bottom: 1px solid #ddd;
752
751
  line-height: 2.4rem;
753
752
  margin: 0 !important;
754
753
  width: 100% !important;
755
754
  }
756
755
 
757
- dt{
756
+ dt {
758
757
  font-size: 1.6rem !important;
759
758
  font-weight: 600 !important;
760
759
  }
761
760
 
762
- dd{
761
+ dd {
763
762
  padding-left: 36px;
764
763
  }
765
764
 
766
- .preview-undefined{
767
- display:none;
765
+ .preview-undefined {
766
+ display: none;
768
767
  }
769
768
 
770
-
771
- .pts-addFiles-preview{
772
- display:flex;
769
+ .pts-addFiles-preview {
770
+ display: flex;
773
771
  }
774
772
 
775
- .pts-addFiles-preview .no-answer-preview-page{
773
+ .pts-addFiles-preview .no-answer-preview-page {
776
774
  display: inline-block;
777
775
  padding: 16px 0px 0px 8px;
778
776
  text-align: center;
@@ -885,1060 +883,3 @@ dd{
885
883
  .errorSummary-text {
886
884
  color: #8e0039;
887
885
  }
888
-
889
- /* ---------- FILE UPLOAD ---------- */
890
- .files-upload {
891
- width: 100%;
892
- max-width: 800px;
893
- margin: 0 auto;
894
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
895
- }
896
-
897
- /* Drop Zone */
898
- .files-drop-zone {
899
- border: 2px dashed #6e3282;
900
- border-radius: 12px;
901
- padding: 3rem 2rem;
902
- text-align: center;
903
- transition: all 0.3s ease;
904
- background-color: #fafafa;
905
- cursor: pointer;
906
- position: relative;
907
- overflow: hidden;
908
- }
909
-
910
- .files-drop-zone:hover {
911
- border-color: #6e3282;
912
- background-color: #f5ebf8;
913
- transform: translateY(-2px);
914
- box-shadow: 0 4px 12px rgba(220, 148, 253, 0.15);
915
- }
916
-
917
- .files-drop-zone.drag-active {
918
- border-color: #6e3282;
919
- background-color: #f5ebf8;
920
- transform: scale(1.02);
921
- box-shadow: 0 8px 25px rgba(30, 167, 253, 0.2);
922
- }
923
-
924
- .files-drop-zone:focus {
925
- /* border-color: #6e3282;
926
- background-color: #f5ebf8;
927
- transform: translateY(-2px);
928
- box-shadow: 0 4px 12px rgba(220, 148, 253, 0.15);
929
- transform: translateY(-3px);
930
-
931
- animation: focusPulse 1s ease-in-out infinite;
932
- box-shadow: inset 0 0 0 4px #6e3282;
933
-
934
- border: none; */
935
- border: 0.2rem solid #6e3282;
936
- }
937
-
938
- .files-drop-zone:focus-visible {
939
- outline-offset: 0 !important;
940
- outline-style: solid !important;
941
- outline-color: #fff !important;
942
- outline-width: 2px !important;
943
- box-shadow: 0 0 0 4px #000 !important;
944
- }
945
-
946
- .files-drop-content {
947
- pointer-events: none;
948
- }
949
-
950
- .files-icon {
951
- font-size: 4rem;
952
- margin-bottom: 1rem;
953
- opacity: 0.7;
954
- animation: float 3s ease-in-out infinite;
955
- }
956
-
957
- @keyframes float {
958
- 0%,
959
- 100% {
960
- transform: translateY(0px);
961
- }
962
- 50% {
963
- transform: translateY(-10px);
964
- }
965
- }
966
-
967
- .files-drop-text {
968
- font-size: 1.2rem;
969
- margin-bottom: 0.5rem;
970
- color: #333;
971
- font-weight: 500;
972
- }
973
-
974
- .files-drop-info {
975
- font-size: 0.9rem;
976
- color: #666;
977
- margin: 0;
978
- }
979
-
980
- .files-allowed-types {
981
- font-size: 0.85rem;
982
- color: #555;
983
- margin: 0.75rem 0 0 0;
984
- padding: 0.5rem;
985
- background-color: rgba(146, 64, 252, 0.1);
986
- border-radius: 6px;
987
- border-left: 3px solid #ce95e0;
988
- }
989
-
990
- .files-allowed-types strong {
991
- color: #6e3282;
992
- }
993
-
994
- .files-input-hidden {
995
- display: none;
996
- }
997
-
998
- /* Summary */
999
- .files-summary {
1000
- margin: 1.5rem 0;
1001
- padding: 1rem;
1002
- background-color: #f8f9fa;
1003
- border-radius: 8px;
1004
- border: 1px solid #e9ecef;
1005
- }
1006
-
1007
- .files-summary-stats {
1008
- display: flex;
1009
- gap: 1rem;
1010
- margin-bottom: 1rem;
1011
- flex-wrap: wrap;
1012
- }
1013
-
1014
- .stat {
1015
- padding: 0.5rem 1rem;
1016
- border-radius: 20px;
1017
- background-color: #e9ecef;
1018
- font-size: 0.9rem;
1019
- display: flex;
1020
- align-items: center;
1021
- gap: 0.5rem;
1022
- }
1023
-
1024
- .stat.pending {
1025
- background-color: #fff3cd;
1026
- color: #856404;
1027
- }
1028
-
1029
- .stat.completed {
1030
- background-color: #d1e7dd;
1031
- color: #0a3622;
1032
- }
1033
-
1034
- .stat.error {
1035
- background-color: #f8d7da;
1036
- color: #721c24;
1037
- }
1038
-
1039
- .files-summary-actions {
1040
- display: flex;
1041
- gap: 0.5rem;
1042
- flex-wrap: wrap;
1043
- }
1044
-
1045
- .action-button {
1046
- padding: 0.75rem 1.5rem;
1047
- border: none;
1048
- border-radius: 6px;
1049
- cursor: pointer;
1050
- font-weight: 500;
1051
- transition: all 0.2s ease;
1052
- display: flex;
1053
- align-items: center;
1054
- gap: 0.5rem;
1055
- }
1056
-
1057
- .action-button.primary {
1058
- background-color: #1ea7fd;
1059
- color: white;
1060
- }
1061
-
1062
- .action-button.primary:hover {
1063
- background-color: #1890ff;
1064
- transform: translateY(-1px);
1065
- }
1066
-
1067
- .action-button.secondary {
1068
- background-color: #6c757d;
1069
- color: white;
1070
- }
1071
-
1072
- .action-button.secondary:hover {
1073
- background-color: #5a6268;
1074
- transform: translateY(-1px);
1075
- }
1076
-
1077
- /* Files List */
1078
- .files-list {
1079
- margin-top: 1.5rem;
1080
- }
1081
-
1082
- .files-list h4 {
1083
- margin-bottom: 1rem;
1084
- color: #333;
1085
- font-size: 1.1rem;
1086
- font-weight: 600;
1087
- }
1088
-
1089
- .files-items {
1090
- list-style: none;
1091
- padding: 0;
1092
- margin: 0;
1093
- }
1094
-
1095
- .file-item {
1096
- display: flex;
1097
- align-items: center;
1098
- gap: 1rem;
1099
- padding: 1rem;
1100
- border: 1px solid #e9ecef;
1101
- border-radius: 8px;
1102
- margin-bottom: 0.75rem;
1103
- background-color: white;
1104
- transition: all 0.2s ease;
1105
- position: relative;
1106
- }
1107
-
1108
- .file-item:hover {
1109
- background-color: #f8f9fa;
1110
- border-color: #dee2e6;
1111
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
1112
- }
1113
-
1114
- .file-item.uploading {
1115
- background-color: #e6f7ff;
1116
- border-color: #91d5ff;
1117
- }
1118
-
1119
- .file-item.completed {
1120
- background-color: #f6ffed;
1121
- border-color: #b7eb8f;
1122
- }
1123
-
1124
- .file-item.error {
1125
- background-color: #fff2f0;
1126
- border-color: #ffccc7;
1127
- }
1128
-
1129
- .file-icon-status {
1130
- font-size: 1.5rem;
1131
- min-width: 2rem;
1132
- text-align: center;
1133
- }
1134
-
1135
- .file-info {
1136
- flex: 1;
1137
- min-width: 0;
1138
- }
1139
-
1140
- .file-name {
1141
- font-weight: 500;
1142
- color: #333;
1143
- margin-bottom: 0.5rem;
1144
- word-break: break-word;
1145
- }
1146
-
1147
- .file-details {
1148
- display: flex;
1149
- gap: 1rem;
1150
- font-size: 0.85rem;
1151
- color: #666;
1152
- flex-wrap: wrap;
1153
- }
1154
-
1155
- .file-size {
1156
- color: #666;
1157
- }
1158
-
1159
- .file-status {
1160
- color: #1ea7fd;
1161
- font-weight: 500;
1162
- }
1163
-
1164
- .file-error {
1165
- color: #dc3545;
1166
- font-weight: 500;
1167
- }
1168
-
1169
- .progress-bar {
1170
- width: 100%;
1171
- height: 4px;
1172
- background-color: #e9ecef;
1173
- border-radius: 2px;
1174
- margin-top: 0.5rem;
1175
- overflow: hidden;
1176
- }
1177
-
1178
- .progress-fill {
1179
- height: 100%;
1180
- background-color: #1ea7fd;
1181
- transition: width 0.3s ease;
1182
- border-radius: 2px;
1183
- }
1184
-
1185
- .file-actions {
1186
- display: flex;
1187
- gap: 0.5rem;
1188
- }
1189
-
1190
- .action-btn {
1191
- background: none;
1192
- border: 1px solid transparent;
1193
- padding: 0.5rem;
1194
- border-radius: 6px;
1195
- cursor: pointer;
1196
- font-size: 1rem;
1197
- transition: all 0.2s ease;
1198
- min-width: 2.5rem;
1199
- height: 2.5rem;
1200
- display: flex;
1201
- align-items: center;
1202
- justify-content: center;
1203
- }
1204
-
1205
- .action-btn.upload {
1206
- color: #1ea7fd;
1207
- border-color: #1ea7fd;
1208
- }
1209
-
1210
- .action-btn.upload:hover {
1211
- background-color: #1ea7fd;
1212
- color: white;
1213
- }
1214
-
1215
- .action-btn.retry {
1216
- color: #fd7e14;
1217
- border-color: #fd7e14;
1218
- }
1219
-
1220
- .action-btn.retry:hover {
1221
- background-color: #fd7e14;
1222
- color: white;
1223
- }
1224
-
1225
- .action-btn.remove {
1226
- color: #6e3282;
1227
- border-color: #6e3282;
1228
- }
1229
-
1230
- .action-btn.remove:hover {
1231
- background-color: #6e3282;
1232
- color: white;
1233
- }
1234
-
1235
- /* Responsive Design */
1236
- @media (max-width: 768px) {
1237
- .files-drop-zone {
1238
- padding: 2rem 1rem;
1239
- }
1240
-
1241
- .files-icon {
1242
- font-size: 3rem;
1243
- }
1244
-
1245
- .files-drop-text {
1246
- font-size: 1rem;
1247
- }
1248
-
1249
- .files-summary-stats {
1250
- flex-direction: column;
1251
- gap: 0.5rem;
1252
- }
1253
-
1254
- .files-summary-actions {
1255
- flex-direction: column;
1256
- }
1257
-
1258
- .action-button {
1259
- justify-content: center;
1260
- }
1261
-
1262
- .file-item {
1263
- flex-direction: column;
1264
- align-items: flex-start;
1265
- gap: 0.75rem;
1266
- }
1267
-
1268
- .file-details {
1269
- flex-direction: column;
1270
- gap: 0.25rem;
1271
- }
1272
-
1273
- .file-actions {
1274
- align-self: flex-end;
1275
- }
1276
- }
1277
-
1278
- @media (max-width: 480px) {
1279
- .files-upload {
1280
- padding: 0 0.5rem;
1281
- }
1282
-
1283
- .files-drop-zone {
1284
- padding: 1.5rem 1rem;
1285
- }
1286
-
1287
- .file-item {
1288
- padding: 0.75rem;
1289
- }
1290
- }
1291
-
1292
- /* ---------- END FILE UPLOAD ---------- */
1293
-
1294
- /* ---------- ADD FILES ---------- */
1295
-
1296
- /* ExploreFiles.tsx */
1297
-
1298
- .invisible {
1299
- display: none;
1300
- width: 1px;
1301
- }
1302
-
1303
- .filePickLabel {
1304
- display: flex;
1305
- align-items: center;
1306
- justify-content: flex-start;
1307
- width: 100%;
1308
- margin: 0;
1309
- padding: 0;
1310
- height: 48px;
1311
- border: 1px solid #747474;
1312
- border-radius: var(--bs-border-radius);
1313
- }
1314
- .filePickLabel:focus {
1315
- border: #000000 2px solid;
1316
- box-shadow: none;
1317
- }
1318
- .filePickLabel .filePickButton {
1319
- cursor: pointer;
1320
- padding: 16px;
1321
- height: 100%;
1322
- background: #747474;
1323
-
1324
- border-top-left-radius: 4px;
1325
- border-bottom-left-radius: 4px;
1326
-
1327
- display: flex;
1328
- /* padding: 0px 16px; */
1329
- align-items: center;
1330
- flex-direction: column;
1331
- justify-content: center;
1332
- align-self: stretch;
1333
- color: #ffff;
1334
-
1335
- /* Body/B2 (Main) Regular */
1336
- font-family: Arial;
1337
- font-size: 16px;
1338
- font-style: normal;
1339
- font-weight: 400;
1340
- line-height: 24px; /* 150% */
1341
- }
1342
-
1343
- .filePickButton {
1344
- width: auto !important;
1345
- border: none;
1346
- margin-left: 0px !important;
1347
- }
1348
-
1349
- .filePickButton.error {
1350
- background: #8e0039 !important;
1351
- color: #fff !important;
1352
- }
1353
- @media (max-width: 990px) {
1354
- .filePickLabel .filePickButton {
1355
- font-size: 14px;
1356
- line-height: 14px;
1357
- text-align: center;
1358
- }
1359
- }
1360
-
1361
- .filePickLabel .filePickText {
1362
- padding-left: 16px;
1363
- color: #000;
1364
-
1365
- font-family: Arial;
1366
- font-size: 16px;
1367
- font-style: normal;
1368
- font-weight: 400;
1369
- line-height: 24px;
1370
- }
1371
-
1372
- .inputContainer {
1373
- display: flex;
1374
- align-items: center;
1375
- justify-content: center;
1376
- width: 100%;
1377
- height: 100%;
1378
- }
1379
-
1380
- @media (max-width: 768px) {
1381
- .inputContainer {
1382
- margin-bottom: 16px;
1383
- }
1384
- }
1385
-
1386
- .inputContainer button {
1387
- margin: 0;
1388
- /* padding: 0; */
1389
- padding: 8px 24px;
1390
- margin-left: 16px;
1391
- height: 50px;
1392
- width: 200px;
1393
- }
1394
-
1395
- .inputContainer input[type='text'] {
1396
- font-size: 16px;
1397
- }
1398
-
1399
- .custom-file-button input[type='file'] {
1400
- margin-left: -2px !important;
1401
- }
1402
-
1403
- .custom-file-button input[type='file']::-webkit-file-upload-button {
1404
- display: none;
1405
- }
1406
-
1407
- .custom-file-button input[type='file']::file-selector-button {
1408
- display: none;
1409
- }
1410
-
1411
- .custom-file-button:hover label {
1412
- background-color: #dde0e3;
1413
- cursor: pointer;
1414
- }
1415
-
1416
- /* DropFiles.tsx */
1417
-
1418
- @media (max-width: 768px) {
1419
- .DropZoneContainer {
1420
- display: none;
1421
- }
1422
- }
1423
-
1424
- .DropZone {
1425
- color: #000;
1426
- margin-top: 20px;
1427
- margin-bottom: 16px;
1428
-
1429
- /* Body/B1 Regular */
1430
- font-family: Arial;
1431
- font-size: 20px;
1432
- font-style: normal;
1433
- font-weight: 400;
1434
- line-height: 24px; /* 120% */
1435
-
1436
- display: inline-flex;
1437
- width: 100%;
1438
- height: 180px;
1439
- position: relative;
1440
- clip-path: inset(0 round 8px 8px 8px 8px);
1441
-
1442
- background: var(--neutral-350, #f7f7f7);
1443
-
1444
- align-items: center;
1445
- justify-content: center;
1446
- text-align: center;
1447
- gap: 10px;
1448
- flex-direction: column;
1449
- cursor: pointer;
1450
- }
1451
-
1452
- .DropZone::before {
1453
- content: '';
1454
- position: absolute;
1455
- left: -7px;
1456
- top: -7px;
1457
- right: -7px;
1458
- bottom: -7px;
1459
- border: 9px dashed rgba(0, 0, 0, 0.6);
1460
- border-radius: 15px 15px 15px 15px;
1461
- box-sizing: border-box;
1462
- }
1463
-
1464
- .DropZone:hover {
1465
- background: var(--neutral-350, #f7f7f7);
1466
- opacity: 0.9;
1467
- cursor: copy;
1468
- }
1469
- .ClipboardLink {
1470
- display: block;
1471
- position: relative;
1472
- z-index: 2000;
1473
- cursor: pointer;
1474
- font-size: '12px';
1475
- text-decoration: 'underline';
1476
- color: black;
1477
- }
1478
- .ClipboardLink:hover {
1479
- cursor: pointer;
1480
- }
1481
-
1482
- /* SelectedFiles.tsx */
1483
-
1484
- .makeTopSpace {
1485
- margin-top: 12px;
1486
- }
1487
- /* @media (max-width: 768px) {
1488
- .makeTopSpace {
1489
- margin-top: 0px;
1490
- }
1491
- } */
1492
-
1493
- .UploadedFile {
1494
- margin-top: 24px;
1495
- }
1496
- /* @media (max-width: 768px) {
1497
- .UploadedFile {
1498
- margin-top: 24px;
1499
- }
1500
- } */
1501
- .uploadFileRow {
1502
- max-width: 555px;
1503
- }
1504
- @media (max-width: 768px) {
1505
- .uploadFileRow {
1506
- margin-left: 0px;
1507
- }
1508
- }
1509
- .uploadedFileName {
1510
- /* margin-left: 8px; */
1511
- color: #000000;
1512
- position: relative;
1513
- border: 0px solid red;
1514
- width: 76%;
1515
- /* max-width: 430px; */
1516
- top: -21px;
1517
- left: 24px;
1518
- }
1519
-
1520
- .desktopFileName {
1521
- display: block;
1522
- }
1523
- .mobileFirstFileName {
1524
- display: block;
1525
- }
1526
-
1527
- .uploadedDot.mobileVersion {
1528
- display: none;
1529
- }
1530
-
1531
- @media (max-width: 768px) {
1532
- svg.uploadFileIcon {
1533
- display: none;
1534
- }
1535
- .uploadedDot.mobileVersion {
1536
- display: flex;
1537
- }
1538
- }
1539
-
1540
- .lastCol {
1541
- display: flex;
1542
- justify-content: flex-end;
1543
- max-width: 62px;
1544
- padding: 0;
1545
- margin: 0;
1546
- }
1547
-
1548
- .fileInListContainer {
1549
- max-width: 624px;
1550
- }
1551
-
1552
- .fileListUnorderedList {
1553
- list-style: none !important;
1554
- padding: 0;
1555
- margin: 0;
1556
- }
1557
-
1558
- .fileInList {
1559
- width: 100%;
1560
- }
1561
- .fileInList .row {
1562
- display: flex;
1563
- justify-content: space-between;
1564
- align-items: center;
1565
- max-width: 100% !important;
1566
- border: 0px solid black;
1567
-
1568
- padding: 0px 0px;
1569
- --bs-gutter-x: 0px !important;
1570
- }
1571
-
1572
- .fileInList .row .col {
1573
- padding: 0;
1574
- margin: 0;
1575
- }
1576
-
1577
- .fileInList .row .lastCol {
1578
- display: flex;
1579
- justify-content: flex-end;
1580
- }
1581
-
1582
- .fileInList .makeSpace {
1583
- border-bottom: 1px solid #747474;
1584
- /* margin-top: 24px; */
1585
- }
1586
-
1587
- .fileInfo {
1588
- display: flex;
1589
- flex-direction: column;
1590
- align-items: flex-start;
1591
- gap: 13px;
1592
- }
1593
- .uploadedPercentage {
1594
- /* Body/B3 Regular */
1595
- font-family: Arial;
1596
- font-size: 13px;
1597
- font-style: normal;
1598
- font-weight: 400;
1599
- line-height: 16px; /* 123.077% */
1600
- margin-top: 2px;
1601
- }
1602
- @media (max-width: 768px) {
1603
- .uploadedPercentage {
1604
- display: none;
1605
- }
1606
- }
1607
- .trashCan {
1608
- width: 57px;
1609
- display: flex;
1610
- flex-direction: column;
1611
- flex-shrink: 0;
1612
- justify-content: start;
1613
- align-items: center;
1614
- padding: 0;
1615
- }
1616
- .trashCan a {
1617
- cursor: pointer;
1618
- display: flex;
1619
- flex-direction: column;
1620
- flex-shrink: 0;
1621
- justify-content: center;
1622
- align-items: center;
1623
- padding: 0;
1624
- }
1625
-
1626
- .trashCan svg {
1627
- width: 24px;
1628
- height: 27px;
1629
- stroke-width: 2px;
1630
- stroke: var(--purple-900-primary, #6e3282);
1631
- }
1632
-
1633
- .trashCanPositioning {
1634
- display: flex;
1635
- align-items: flex-start;
1636
- justify-content: flex-end;
1637
- gap: 4px;
1638
- flex-shrink: 0;
1639
- padding: 0;
1640
-
1641
- position: relative;
1642
- border: 0px solid red;
1643
- max-width: 70px;
1644
- top: -6px;
1645
- left: 12px;
1646
- }
1647
-
1648
- .trashCanText {
1649
- color: #6e3282;
1650
-
1651
- /* Body/B4 Regular */
1652
- font-family: Arial;
1653
- font-size: 10px;
1654
- font-style: normal;
1655
- font-weight: 400;
1656
- line-height: normal;
1657
- }
1658
- .removeError {
1659
- width: 57px;
1660
- display: flex;
1661
- flex-direction: column;
1662
- flex-shrink: 0;
1663
- justify-content: start;
1664
- align-items: center;
1665
- padding: 0;
1666
- }
1667
- .removeError svg {
1668
- width: 16px;
1669
- height: 18px;
1670
- stroke-width: 2px;
1671
- stroke: var(--purple-900-primary, #6e3282);
1672
- }
1673
- .removeError a {
1674
- cursor: pointer;
1675
- }
1676
-
1677
- .uploadedDot {
1678
- border-radius: 17px;
1679
- background: var(--red-green-green, #008e55);
1680
- display: flex;
1681
- width: 16px;
1682
- height: 16px;
1683
- padding: 10px;
1684
- flex-direction: column;
1685
- justify-content: center;
1686
- align-items: center;
1687
- gap: 10px;
1688
- flex-shrink: 0;
1689
- }
1690
- .uploadedDot.uploadFailed {
1691
- background: var(--red-green-red, #8e0039);
1692
-
1693
- color: var(--neutral-300, #fff);
1694
- /* Body/B3 Bold */
1695
- font-family: Arial;
1696
- font-size: 13px;
1697
- font-style: normal;
1698
- font-weight: 700;
1699
- line-height: 16px; /* 123.077% */
1700
- }
1701
-
1702
- .uploadedDot svg {
1703
- stroke-width: 1.5px;
1704
- stroke: var(--neutral-300, #fff);
1705
- flex-shrink: 0;
1706
- }
1707
-
1708
- .uploadStatus {
1709
- display: flex;
1710
- align-items: flex-start;
1711
- justify-content: flex-end;
1712
- gap: 8px;
1713
- flex-shrink: 0;
1714
- padding: 0;
1715
-
1716
- position: relative;
1717
- border: 0px solid red;
1718
- max-width: 70px;
1719
- top: 0;
1720
- right: 0;
1721
- }
1722
- @media (max-width: 768px) {
1723
- .uploadStatus {
1724
- display: none;
1725
- }
1726
- }
1727
- /*
1728
- .uploadStatus {
1729
- display: flex;
1730
-
1731
- align-items: center;
1732
- justify-content: flex-end;
1733
- gap: 8px;
1734
- flex-shrink: 0;
1735
- padding: 0;
1736
- } */
1737
- .uploadFileIcon {
1738
- display: flex;
1739
- align-items: flex-start;
1740
- justify-content: flex-end;
1741
- gap: 8px;
1742
- flex-shrink: 0;
1743
- padding: 0;
1744
-
1745
- position: relative;
1746
- border: 0px solid red;
1747
- max-width: 70px;
1748
- top: 0;
1749
- left: 0;
1750
- }
1751
- .uploadFileName {
1752
- display: flex;
1753
- align-items: normal;
1754
- justify-content: flex-start;
1755
- gap: 8px;
1756
- flex-shrink: 0;
1757
- padding: 0;
1758
- color: #000;
1759
-
1760
- /* Body/B3 Bold */
1761
- font-family: Arial;
1762
- font-size: 16px;
1763
- font-style: normal;
1764
- font-weight: 400;
1765
- line-height: 24px;
1766
- }
1767
- .uploadFileName.uploadFailed {
1768
- color: var(--red-green-red, #8e0039);
1769
- }
1770
- .errorMessageAddingFile {
1771
- color: var(--red-green-red, #8e0039);
1772
- /* Body/B3 Regular */
1773
- font-family: Arial;
1774
- font-size: 13px;
1775
- font-style: normal;
1776
- font-weight: 400;
1777
- line-height: 16px; /* 123.077% */
1778
- /* padding: 0;
1779
- margin-top: -8px; */
1780
- }
1781
-
1782
- @media (max-width: 768px) {
1783
- .errorMessageAddingFile {
1784
- margin-left: 12px;
1785
- }
1786
- }
1787
-
1788
- .selectedFilesLinkButton {
1789
- display: flex;
1790
- align-items: center;
1791
- padding-bottom: 16px;
1792
- padding-left: 0;
1793
- gap: 8px;
1794
- flex-shrink: 0;
1795
- stroke-width: 2px;
1796
- stroke: var(--purple-900-primary, #6e3282);
1797
- color: var(--purple-900-primary, #6e3282);
1798
- /* Body/B2 (Main) Regular */
1799
- font-family: Arial;
1800
- font-size: 16px;
1801
- font-style: normal;
1802
- font-weight: 400;
1803
- line-height: 24px; /* 150% */
1804
- text-decoration: none;
1805
- cursor: pointer;
1806
-
1807
- background-color: transparent;
1808
- border: 0px;
1809
- }
1810
-
1811
- .selectedFilesLinkButton:hover {
1812
- color: var(--purple-900-primary, #6e3282);
1813
- text-decoration: underline;
1814
- }
1815
-
1816
- .uploadFileRow_x {
1817
- max-width: 630px;
1818
- }
1819
-
1820
- /* Indicator.tsx */
1821
-
1822
- .uploadIndicator {
1823
- height: 6px;
1824
- flex-shrink: 0;
1825
- margin-top: 0px;
1826
-
1827
- border-radius: 8px 8px 8px 8px;
1828
- }
1829
- @media (max-width: 768px) {
1830
- .uploadIndicator {
1831
- display: none;
1832
- }
1833
- }
1834
- .uploadIndicator.uploadDone {
1835
- width: 100%;
1836
- background: var(--red-green-green, #008e55);
1837
- }
1838
- .uploadIndicator.uploadFailed {
1839
- width: 10%;
1840
- background: var(--red-green-red, #8e0039);
1841
- }
1842
- .uploadIndicator.uploadLoading {
1843
- width: 50%;
1844
- background: var(--red-green-red, rgb(211, 165, 0));
1845
- }
1846
-
1847
- .UploadedFile .divider {
1848
- border: 1px solid #747474;
1849
- margin-top: 24px;
1850
- }
1851
- @media (max-width: 768px) {
1852
- .UploadedFile .divider {
1853
- margin-top: 0px;
1854
- }
1855
- }
1856
-
1857
- /* Clipboard.tsx */
1858
-
1859
- .ClipboardFiles {
1860
- display: flex;
1861
- flex-direction: column;
1862
- align-items: center;
1863
- gap: 16px;
1864
- padding: 16px;
1865
-
1866
- margin-top: 32px;
1867
- background-color: #222;
1868
- animation-name: color;
1869
- animation-duration: 1s;
1870
- animation-iteration-count: infinite;
1871
-
1872
- border-radius: 8px;
1873
- cursor: pointer;
1874
- }
1875
-
1876
- .ClipboardFiles.clicked {
1877
- background-color: #ccc;
1878
- animation-name: none;
1879
- cursor: copy;
1880
- }
1881
-
1882
- @keyframes color {
1883
- 0% {
1884
- background-color: #ddd;
1885
- }
1886
- 25% {
1887
- background-color: #ccc;
1888
- }
1889
- 50% {
1890
- background-color: #bbb;
1891
- }
1892
- 75% {
1893
- background-color: #ccc;
1894
- }
1895
- 100% {
1896
- background-color: #ddd;
1897
- }
1898
- }
1899
-
1900
- /* AddFiles.tsx */
1901
-
1902
- .addFilesMandatory {
1903
- margin-bottom: 16px;
1904
- }
1905
-
1906
- .addFilesMandatory.error {
1907
- display: inline;
1908
- margin-bottom: 0px;
1909
- }
1910
-
1911
-
1912
-
1913
- /* preview */
1914
-
1915
- /* .addFilesPreviewContainer {
1916
- margin: 0;
1917
- margin-top: 16px;
1918
- width: 100%;
1919
- flex-direction: row;
1920
- }
1921
- @media (max-width: 768px) {
1922
- .addFilesPreviewContainer {
1923
- flex-direction: column;
1924
- }
1925
- .addFilesPreviewContainer .answer {
1926
- margin: 0;
1927
- padding: 0;
1928
- margin-top: 8px;
1929
- margin-bottom: 8px;
1930
-
1931
- width: 100%;
1932
- }
1933
- }
1934
-
1935
- .addFilesFieldset p {
1936
- font-size: 16px;
1937
- }
1938
-
1939
- .addfileserror {
1940
- margin-bottom: 16px !important;
1941
- margin-top: 16px !important;
1942
- } */
1943
-
1944
- /* ---------- END ADD FILES ---------- */