.disable-bottom-border .fod-input.fod-input-underline{
    border-bottom: none !important;
}

.disable-margin .fod-input-control>.fod-input-control-input-container>div.fod-input.fod-input-text{
    margin-top: 0 !important;
}

.neutralize-fod-input-wrapper .form-group{
    margin: 0 !important;
    padding: 0 !important;
}

.force-font .fod-button-text{
    font-family: Onest, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 500;
    color: white;
}

.force-font .fod-button-header{
    font-family: Onest, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 500;
    color: var(--bs-white);
}

.fod-button{
    font-family: inherit !important;
    color: var(--default);
}


.custom-role-icon{
    display: flex;
    align-items: center;
    transform: scale(1.5);
}

.force-white.fod-icon-root.fod-svg-icon{
    fill: white !important;
}

.delete-label-row div.mt-2
{
    display: none !important;
}


.outline-date.fod-input.fod-input-text {
    border: 1px solid #e8e8e8;
    border-radius: 0.25rem;
    padding: 3px;
}

.recolor-label.fod-input-label.fod-input-label-animated{
    color: #bdbdbd !important;
}




button.fod-picker-calendar-day p.fod-typography{
    color: inherit; !important;
}

button.fod-picker-calendar-day.fod-selected p.fod-typography{
    color: white; !important;
}


:root{
    --fod-palette-primary: var(--primary) !important;
}

.cancel-fod-color.fod-input{
    color: #bdbdbd; !important;
}

.cancel-fod-border .fod-input.fod-input-outlined .fod-input-outlined-border{
    border-color: rgba(0, 0, 0, 0.09)!important;
}

.inherit-fod-line-height .fod-input>input.fod-input-root-outlined, div.fod-input-slot.fod-input-root-outlined{
    line-height: inherit !important;
}

.required-upload-btn {
     border: 2px solid #d32f2f !important;
     background-color: #ffebee !important;
     color: #d32f2f !important;
}

.my-upload-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     min-width: 120px;
     height: 36px;
     background-color: #4B6ED2 !important;
     color: #fff !important;
     font-size: 13px;
     font-weight: 400;
     text-transform: none !important;
     border-radius: 6px;
     padding: 0 12px;
     line-height: 1;
     cursor: pointer;
     box-sizing: border-box;
     position: relative;
}

     .my-upload-btn:hover {
          background-color: #6282e1 !important;
     }

     .my-upload-btn:active {
          background-color: #093a94 !important;
     }

#uploaded-files {
     display: flex;
     flex-direction: column;
     margin-top: 4;
     gap: 8px; 
}








.error-message {
     color: #d32f2f;
     font-size: 12px;
     font-weight: 500;
     width: 100%;
}


.file-info {
     display: flex;
     align-items: center;
     gap: 6px;
     flex: 1; 
     min-width: 0; 
}

.image-preview {
     width: 18px;
     height: 24px;
     object-fit: cover;
     border-radius: 4px;
     border: 1px solid #ddd;
     flex-shrink: 0;
}


.file-box {
     width: 397px;
     max-width: 100%;
     display: flex;
     flex-direction: column;
     padding: 8px 12px;
     background-color: #f8f9fa;
     border: 1px solid #e0e0e0;
     border-radius: 6px;
     margin-top: -6px;
     gap: 8px;
}

.file-main-content {
     display: flex;
     justify-content: space-between;
     align-items: flex-start; 
     gap: 8px;
     width: 100%;
}

.file-info {
     display: flex;
     align-items: flex-start;
     gap: 6px;
     flex: 1;
     min-width: 0;
}

.file-name-wrapper {
     flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
}

.error-separator {
     height: 1px;
     background-color: #e0e0e0;
     margin: px 0;
     width: 100%;
}

.file-name-wrapper {
     flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
}

     .file-name-wrapper.error-content {
          margin-left: 0;
     }

.file-name {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     font-size: 14px;
     font-weight: 500;
     flex: none;
}

.error-message {
     color: #d32f2f;
     font-size: 12px;
     font-weight: 500;
     margin-top: 2px; 
     line-height: 1.3;
}


.error-box {
     border-color: #d32f2f !important;
}

.file-actions {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-shrink: 0;
}

.download-action {
     display: flex;
     align-items: center;
}

.spinner-wrapper {
     width: 24px;
     height: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
}

.delete-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 18px;
     height: 18px;
     background: transparent;
     border: none;
     color: #757575;
     font-size: 16px;
     cursor: pointer;
     font-weight: bold;
     line-height: 1;
     padding: 0;
}

     .delete-btn:hover {
          color: #d92d20;
     }

.spinner {
     width: 16px;
     height: 16px;
}

.delete-btn:hover {
     color: #d92d20;
}

.file-actions i:hover {
     transform: scale(1.1);
     transition: 0.2s ease;
}

.choose-file-btn {
     background-color: #4B6ED2;
     color: white;
     font-size: 14px;
     font-weight: 400;
     border: none;
     padding: 8px 14px; 
     border-radius: 6px; 
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     height: 47.335px; 
     transition: background-color 0.2s ease-in-out;
}
}

     .choose-file-btn:hover {
          background-color: #6282e1;
     }