#aws-custom-upload-field.aws-upload-container {
width: 100%;
box-sizing: border-box;
margin-bottom: 1em; } #aws-custom-upload-field.aws-upload-container .awspc-field-label-line { width: 60%; padding-right: 1em;
padding-top: 6.2rem;
vertical-align: top;
text-align: left;
box-sizing: border-box;
}
#aws-custom-upload-field.aws-upload-container .awspc-field-widget-line { width: 100%; vertical-align: top;
box-sizing: border-box;
}
#aws-custom-upload-field .aws-upload-wrapper {
display: flex; align-items: flex-start; gap: 1em; flex-wrap: nowrap; padding: 0em 0; flex-direction: row;
width: 92.5%;
}
#aws-custom-upload-field .aws-file-label { flex: 0 0 auto; padding-top: 0; font-weight: normal; box-sizing: border-box;
line-height: 1.2; text-align: left; width: 100%; }
#aws-custom-upload-field .aws-file-input-area {
flex: 1; min-width: 200px; border: 2px dashed #ccc; padding: 1em; text-align: center; background-color: #f9f9f9; border-radius: 5px; min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box;
position: relative; } #aws-custom-upload-field .aws-file-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
} #aws-custom-upload-field .aws-choose-files-button {
background-color: #8fbeb2; color: white;
width: 90%;
padding: 8px 5px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
margin-bottom: 5px; transition: background-color 0.2s ease;
}
#aws-custom-upload-field .aws-choose-files-button:hover {
background-color: #5b967f;
} #aws-custom-upload-field .aws-no-file-chosen {
font-size: 0.7em;
color: #777;
margin-top: 15px;
} #aws-custom-upload-field .aws-upload-info {
font-size: 0.8em;
color: #555;
margin-top: 10px;
line-height: 1.4;
} .aws-uploaded-files-preview {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
justify-content: center; width: 100%; }
.aws-uploaded-file-item {
position: relative;
border: 1px solid #ddd;
padding: 5px;
border-radius: 4px;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
max-width: 100px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.aws-uploaded-file-item img {
max-width: 80px; max-height: 80px; height: auto;
border-radius: 3px;
margin-bottom: 5px;
}
.aws-uploaded-file-item .aws-file-name {
font-size: 0.75em;
color: #333;
word-break: break-all; text-align: center;
padding: 0 3px;
max-width: 100%; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.aws-delete-file-button {
position: absolute;
top: -8px;
right: -8px;
background-color: #dc3232; color: white;
border: none;
border-radius: 50%; width: 20px;
height: 20px;
font-size: 0.8em;
line-height: 1;
text-align: center;
cursor: pointer;
padding: 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: background-color 0.2s ease;
}
.aws-delete-file-button:hover {
background-color: #a00;
} .aws-loading-indicator {
display: flex;
align-items: center;
justify-content: center;
font-style: italic;
color: #888;
margin-top: 10px;
} @media (max-width: 768px) {
#aws-custom-upload-field.aws-upload-container {
width: 100%;
padding-left: 0px; box-sizing: border-box;
margin: 0em 0px;
}
#aws-custom-upload-field .aws-upload-wrapper {
flex-direction: column; align-items: stretch; flex-wrap: wrap; padding-left: 0; }
#aws-custom-upload-field .aws-file-label {
display: block;
width: 100%;
text-align: center;
padding-right: 25px;
}
#aws-custom-upload-field .aws-file-input-area {
min-width: 100%; } #aws-custom-upload-field.aws-upload-container .awspc-field-label-line,
#aws-custom-upload-field.aws-upload-container .awspc-field-widget-line {
width: 113%;
padding-left: 25px;
display: block; padding-right: 0; padding-top: 5px;
padding-bottom: 5px;
}
} #aws-free-upload-field {
margin: 1em 20px !important;
box-sizing: border-box;
} #aws-free-upload-field.aws-upload-container .awspc-field-label-line {
width: 100%; display: block; padding-right: 0; padding-top: 30px;
vertical-align: top;
text-align: left;
box-sizing: border-box;
}
#aws-free-upload-field.aws-upload-container .awspc-field-widget-line {
width: 210%; display: block; margin-top: -15px;
vertical-align: top;
box-sizing: border-box;
overflow-x: hidden; }
#aws-free-upload-field label {
display: block; width: 317%; white-space: normal; word-wrap: break-word; font-size: 1em; color: #333; }
#aws-free-upload-field input[type="file"] {
width: 100%; margin-top: -20px; box-sizing: border-box; background-color: #fff;
}
#aws-free-upload-field .aws-loading-indicator {
font-style: italic;
color: #888;
margin-top: 10px;
text-align: center;
}
#aws-free-upload-field .aws-uploaded-files-preview {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
justify-content: flex-start; width: 100%;
} #aws-free-upload-field .aws-uploaded-file-item {
position: relative;
border: 1px solid #ddd;
padding: 5px;
border-radius: 4px;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
max-width: 100px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
#aws-free-upload-field .aws-uploaded-file-item img {
max-width: 80px;
max-height: 80px;
height: auto;
border-radius: 3px;
margin-bottom: 5px;
}
#aws-free-upload-field .aws-uploaded-file-item .aws-file-name {
font-size: 0.75em;
color: #333;
word-break: break-all;
text-align: center;
padding: 0 3px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#aws-free-upload-field .aws-delete-file-button {
position: absolute;
top: -8px;
right: -8px;
background-color: #dc3232;
color: white;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 0.8em;
line-height: 1;
text-align: center;
cursor: pointer;
padding: 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: background-color 0.2s ease;
}
#aws-free-upload-field .aws-delete-file-button:hover {
background-color: #a00;
}
@media (max-width: 768px) {
#aws-custom-upload-field.aws-upload-container {
width: 100%;
padding-left: 0px;
box-sizing: border-box;
margin-bottom: 1em;
} #aws-free-upload-field.aws-upload-container .awspc-field-label-line,
#aws-free-upload-field.aws-upload-container .awspc-field-widget-line {
width: 100%; display: block; padding-right: 0; }
}
@media (max-width: 768px) {
#aws-free-upload-field input[type="file"] {
width: 100%;
margin-top: 50px;
box-sizing: border-box;
background-color: #fff;
}
}
@media (max-width: 768px) {
#aws-free-upload-field label {
display: block;
width: 100%;
white-space: normal;
word-wrap: break-word;
font-size: 1em;
color: #333;
}
}
@media (max-width: 768px) {
#aws-free-upload-field {
margin: -1em 0px !important;
box-sizing: border-box;
}
}