.document-uploader {
    max-width:720px;
    width: 100%;
}
.page-indicator {
   
    display:flex;
    align-items:center;
    position:relative;
    height:43px;
    margin:15px auto;
    padding-bottom:16px;
    width:calc(100% - 117px)
}
.document-uploader > div {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
.document-uploader > div > div:not(.page-indicator):not(.cancel_button_container) {
    width:100%
}
.document-uploader .cancel_button_container {
    width:65px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding-bottom:16px;
}
.document-uploader .cancel_button_container button {
    width:45px;
    height:45px;
    font-size:0;
    border-radius:50%;
    background-color:var(--c-o2i)
}
.document-uploader .cancel_button_container button::before {
    content:"\e987";
    font:var(--icon-font);
}
.page-indicator .step-container {
    z-index:1;
    top:0px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.page-indicator .step-container:first-child {
    align-items:flex-start
}
.page-indicator .step-container:nth-last-child(2) {
    align-items:flex-end;
}
.page-indicator .step-container .step-text {
    white-space:nowrap;
    font-weight:bold;
    font-size:10px;
    text-transform:uppercase;
    margin-top:5px;
    display:none;
    color:var(--c-emphasis)
}
.page-indicator .step-container .step-decoration {
    width:24px;
    height:24px;
    background-color:var(--o-primary-b);
    border-radius:50%;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
   
}
.page-indicator .step-container .step-decoration::before {
    width:100%;
    height:100%;
    min-width:unset;
    content:"";
    display:flex;
    background-color:var(--c-white-e);
    border-radius:50%;
}
.page-indicator .step-container.active .step-decoration::before {
    background-color:var(--o-green-a);
    content: "\e91b";
    font:var(--icon-font);
    color:var(--c-s-white);
}
.page-indicator .step-progress-bar-container {
    width:100%;
    height:4px;
   background-color:var(--c-o2)
}
.page-indicator .step-progress-bar-container div {
    position:absolute;
    left:0px;
    height:1px;
    top:calc(50% - 8px);
    transform:translate(0%, -50%);
     background-color:var(--o-green-a)
}
.document-page .title {
    font-size:0px;
    margin-right:auto;
    padding:0px 16px;
}
.document-page .title div:not(.separator) {
    font-size:16px;
    font-weight:bold;
}
.document-page .hint {
    margin:18px 0px;
    margin-right:auto;
}
#root .document-page .field-documentInform {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    padding:15px 0px;
   
}
.document-page .field-documentInform label {
    display:contents;
}
.document-page .field-documentInform label .label-text {
    width:100%;
    text-align:center;
    margin-bottom:10px;
}
.document-page .field-documentInform label .label-caption {
    order:3;
    display:flex;
    align-items:center;
    margin-left:8px;
}
.document-uploader .page-buttons {
    display:flex;
    flex-direction:row;
    justify-content:center;
    width:100%;
     max-width:320px;
}
.document-uploader .page-buttons button {
    
    border-radius: var(--r);
    padding:8px 10px;
    border-radius: var(--r-d2);
    background-color: var(--c-o);
    color: var(--c-f);
    max-width:180px;
    width:100%;
}
.document-uploader .page-buttons button:not(:disabled) {
    box-shadow: var(--x-surface-c);
    
}
.document-uploader .page-buttons button.previous {
    margin-right:5px;
}
.document-uploader .page-buttons button.next:not(:disabled),
.document-uploader .page-buttons button.submit:not(:disabled){
    background-color:var(--o-green-b);
    color:var(--c-s-white);
}
.document-page {
    display:flex;
    flex-direction:column;
    align-items:center;
     min-height:50vh;
}
.document-uploader .input-field {
    max-width:320px;
    width:100%;
     display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    margin:10px 0px;
    border:1px solid var(--c-o2);
    border-radius: var(--r-d2);
    padding-bottom:10px;
     background-color: var(--o-primary-b);
}
.document-uploader .input-field input[type="file"] {
    display:none;
}
.document-uploader .input-field label.field-label{
   width:100%;
padding:10px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.document-uploader .input-field label.field-label::before {
    content:"\e9bb";
    font:var(--icon-font);
    width:24px;
    margin-right:8px;
}
.document-uploader .input-field label.internalLabel {
    padding:10px;
    box-shadow: var(--x-surface-c);
    margin:0 auto;
    border-radius: var(--r-d2);
    background-color: var(--c-o);
    cursor: pointer;
}
.document-uploader .input-field.has-file  label.internalLabel .label-text,
.document-uploader .input-field.has-file  label.internalLabel .file-text{
    display:none;
}
.document-uploader .input-field.has-file label.field-label {
    position:relative;
    padding:10px 36px;
}
.document-uploader .input-field.has-file label.field-label::after {
     content: "\e91b";
    background-color:var(--o-green-b);
    content: "\e91b";
    font:var(--icon-font);
    color:var(--c-s-white);
    width:24px;
    height:24px;
    border-radius:50%;
    position:absolute;
    right:8px;
}
.document-uploader .input-field.has-file  label.internalLabel {
    margin-right:unset;
    border-top-right-radius:0px;
    border-bottom-right-radius:0px;
     background-color:var(--o-green-b);
    color:var(--c-s-white);
}
.document-uploader .input-field.has-file button.delete {
    margin-right:auto;
    box-shadow: var(--x-surface-c);
    border-radius: var(--r-d2);
    background-color: var(--c-o);
     border-top-left-radius:0px;
    border-bottom-left-radius:0px;
     background-color:var(--o-green-b);
    color:var(--c-s-white);
}
.document-uploader .field-IdDocType {
    border:0;
    padding-bottom:0px;
}
.document-uploader .field-IdDocType label {
    display:none;
}
.document-uploader .file-display {
    display:flex;
    flex-direction:column;
    padding:10px;
}
.document-uploader .file-display .file-entry {
    display:flex;
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    
    width:100%;
    margin-bottom:10px;
    padding:8px;
    background-color:var(--o-primary-b);
    position:relative;
    border-radius:var(--r-d2);
    padding-right:38px;
}
.document-uploader .file-display .file-entry[class*="upload"] svg{
    display:none;
}
.document-uploader .file-display .file-entry.upload-successful::before {
    content:"";
     background-color:var(--o-green-a);
    content: "\e91b";
    font:var(--icon-font);
    color:var(--c-s-white);
    width:24px;
    height:24px;
    border-radius:50%;
    right:8px;
    top:50%;
    transform:translate(0%,-50%);
    position:absolute;
    order: 1;
}
.document-uploader .file-display .file-entry .error-container{
    order:4;
    margin-top:10px;
}
.document-uploader .file-display .file-entry.upload-failed::before {
    content:"";
    background-color:var(--o-red-a);
    content: "\e905";
    font:var(--icon-font);
    color:var(--c-s-white);
    width:24px;
    height:24px;
    border-radius:50%;
       right:8px;
    top:50%;
    transform:translate(0%,-50%);
    position:absolute;
    order: 1;
}
.document-uploader .file-display .file-entry .file-name {
    flex:1;
}
.document-uploader .file-display .file-entry svg {
    min-width:24px;
    min-height:24px;
    width:24px;
    height:24px;
    margin-left:auto;
      right:8px;
    top:50%;
    transform:translate(0%,-50%);
    position:absolute;
}
.document-uploader .file-display .file-entry .type {
    order:-1;
    text-transform:capitalize;
    width:100%;
}
.document-uploader .file-display .file-entry svg .percent {
    stroke:var(--o-green-a);
}
.document-uploader .end-page {
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:50vh;
    padding-top:20px;
    /* border:1px solid var(--o-primary); */
    border-radius:var(--r-d2)
}
.document-uploader .end-page a {
    padding:10px;
    margin-top:10px;
    background-color:var(--o-green-b);
     border-radius: var(--r-d2);
    color:var(--c-s-white-e)
}
.document-uploader select {
    background-image:url(/v1.03/r/images/site/icons/ar-dropdown.svg);
    background-repeat:no-repeat;
    background-size:24px;
    background-position: 100% center;
    background-color: var(--o-primary-b);
}
.document-uploader .hint ul {
    padding-left:45px;
    list-style:disc
}
.document-uploader .hint ol {
    padding-left:45px;
    list-style:decimal
}
.document-uploader .hint p {
    line-height:1.2;
    margin:4px 0px;
}

.document-uploader .hint ul li {
    margin:4px 0px;
    white-space:normal;
}
.document-entries {
   display:flex;
   flex-direction:column;
   width:100%;
   /* padding:0px 16px; */
}
.document-entries >  .document-status{
    display:flex;
    flex-direction:row;
    padding:10px;
    border-radius:var(--r);
    
    align-items:center;
    margin-bottom:10px;
    background-color:var(--o-primary-b);
    box-shadow:var(--x-surface)
}
.document-entries >  .document-status .document-status-icon {
   
}
.document-entries >  .document-status .document-status-icon::before {
     width:24px;
    height:24px;
    font:var(--icon-font);
   margin-right:8px;
}
.document-entries >  .document-status .document-status-icon.pending::before {
     content:"\e93a"
}
.document-entries >  .document-status .document-status-icon.success::before {
     content:"\e970";
}
.document-entries .document-entries-wrapper {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
.document-entries .document {
    display:flex;
    flex-direction:column;
    padding:10px;
    width:100%;
    border:1px solid var(--c-o2);
    border-radius:var(--r-d2);
    margin-bottom:10px;
    padding-right:38px;
    position:relative;
    background-color:var(--o-primary-b)
}
.document-entries .document > div {
    width:100%;
    display:flex;
    padding:4px;
}
.document-entries .document > div.document-name .value {
    word-break:break-word
}
.document-entries .document::before {
    width:24px;
    height:24px;
    position:absolute;
    right:8px;
    top:50%;
    transform:translate(0%,-50%);
    content:"";
    font:var(--icon-font)
}
.document-entries .document.approved::before {
    content:"\e971";
    color:var(--o-green-a)
}
.document-entries .document.pending::before {
    content:"\e93a";
    color:var(--o-yellow)
}
.document-entries .document.rejected::before {
    content:"\e96d";
    color:var(--o-red-a)
}
.document-entries .document > div .label{
    margin-right:8px;
}
.document-entries .document.rejected {
    opacity: 0.3;
    background-image:repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 5px,
    var(--c-o2i) 5px,
    var(--c-o2i) 10px
  );
}
.document-entries .document.pending {
    opacity:0.7
}

.document-entries .document > div.document-status{
    display:none;
}
.upload-box {
    display:flex;
    flex-direction:row;
    align-items:center;
    width:100%;
    padding:16px;
}
.upload-box .upload-info {
    flex:1;
    padding:15px;
   
    box-shadow: var(--x-surface);
    background-color:var(--o-primary-b);
    border-radius:var(--r);
    margin-right:10px;
    position:relative;
    
}
.upload-box .upload-info.documents-approved {
    padding-left:40px;
}
.upload-box .upload-info.documents-approved::before {
    content:"\e91b";
    font: var(--icon-font);
    position:absolute;
    left:10px;
    top:50%;
    transform:translate(0%,-50%);
    background-color:var(--o-green-b);
    border-radius:50%;
}
.upload-box .upload-info[class*="documents"] {
    margin-right:0px;
}
.upload-box .upload-info  .upload-box-title {
    font-weight:bold;
    margin-bottom:8px;
}
.upload-box button {
    width:45px;
    height:45px;
    border-radius:50%;
    background-color:var(--o-green-b);
    font-size:0px;
    box-shadow: var(--x-surface);
}
.upload-box button::before {
    content:"\e98f";
    font:var(--icon-font);
    color:var(--c-s-white-e)
}
.document-accordion {
    display:flex;
    flex-direction:column;
    
   padding:0px 16px;
    width:100%;
    margin-bottom:10px;
}
.document-accordion .document-accordion-header {
    display:flex;
    flex-direction:row;
    padding:10px;
    background-color:var(--o-primary-b);
    align-items:center;
    cursor:pointer;
    box-shadow:var(--x-s)
}
.document-accordion .document-accordion-header:not(.expanded) {
    border-radius:var(--r)
}
.document-accordion .document-accordion-header.expanded {
    border-top-left-radius:var(--r);
    border-top-right-radius:var(--r);
}
.document-accordion .document-accordion-header .icon {
    font:var(--icon-font);
    margin-right:8px;
}
.document-accordion .document-accordion-header .icon.other-documents::before {
    content:"\e9b9"
}
.document-accordion .document-accordion-header .icon.documents::before {
    content:"\e9bb"
}
.document-accordion .document-accordion-header .toggle {
     font:var(--icon-font);
    margin-left:auto;
   
}
.document-accordion .document-accordion-header .toggle::before {
     content:"\e993";
   
}
.document-accordion .document-accordion-header.expanded .toggle::before {
   content:"\e981";
}
.document-accordion .document-accordion-header .num-documents {
    width:24px;
    height:24px;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:var(--o-green-b);
    color:var(--c-s-white-e);
    border-radius:50%;
    margin-left:10px;
}
.document-accordion .input-field,
.document-accordion .page-buttons{
    max-width:unset;
}
.document-accordion .document-accordion-section {
    padding:10px;
    background-color:var(--c-o1i);
     border-bottom-left-radius:var(--r);
    border-bottom-right-radius:var(--r);
}
.theme-light .document-uploader select {
    background-image:url(/v1.03/r/images/site/icons/ar-dropdown_black.svg);
}
.theme-light .document-uploader .input-field {
    border:1px solid var(--c-o2i)
}
.theme-light .page-indicator .step-progress-bar-container {
    background-color:var(--c-o2i)
}
.theme-light .document-entries .document {
    border:1px solid var(--c-o2i)
}
@media (prefers-color-scheme: light) {
    .theme-auto .document-uploader select {
    background-image:url(/v1.03/r/images/site/icons/ar-dropdown_black.svg);
}
.theme-auto .document-uploader .input-field {
    border:1px solid var(--c-o2i)
}
.theme-auto .page-indicator .step-progress-bar-container {
    background-color:var(--c-o2i)
}
.theme-auto .document-entries .document {
    border:1px solid var(--c-o2i)
}
}