/**
 * DROPZONE
 */
.as-dropzone {
    cursor: pointer;
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-content: center;
    text-align: center;
    min-height: 180px;
    min-width: 320px;
    color: var(--color-mat-input-label);
    border: 2px dashed var(--color-dropzone-border);
    border-radius: 7px;
    user-select: none;
    margin: 2em var(var(--dl-col-padding-h-half));
}

.as-dropzone:hover,
.as-dropzone.inDragging {
    background-color: var(--color-dropzone-active);
}

.as-dropzone-ico {
    color: var(--color-primary);
    font-size: 24px;
    margin-bottom: .35em;
}

.as-dropzone-title {
    font-size: var(--font-size-menu) !important;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold) !important;
    margin-bottom: .25em;
}

.as-dropzone-txt {
    margin-right: .2em;
}

.as-dropzone-link {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold) !important;
}

/**
 * DOC TYPES
 */
.as-dropzone-doc-types {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--margin-blocks-vert) 0;
}

.doc-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--font-size);
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-semibold);
    border: 1px solid;
    padding: 2px 7px;
}

.doc-type-pdf {
    background: rgba(220,38,38,0.08);
    color: #dc2626;
    border-color: rgba(220,38,38,0.2);
}

.doc-type-txt {
    background: rgba(67,124,180,0.08);
    color: var(--cyan);
    border-color: rgba(67,124,180,0.2);
}

.doc-type-img {
    background: rgba(217,119,6,0.08);
    color: #d97706;
    border-color: rgba(217,119,6,0.2);
}

.doc-type-csv {
    background: rgba(22,163,74,0.08);
    color: #16a34a;
    border-color: rgba(22,163,74,0.2);
}

.doc-type-xlsx {
    background: rgba(22,163,74,0.10);
    color: #15803d;
    border-color: rgba(22,163,74,0.25);
}

/**
 * FILE LIST
 */
#uploadDoc {
    min-height: 100%;
}

.uploadDoc-row {
    position: relative;
    cursor: pointer;
    height: 100%;
    line-height: normal !important;
    background-color: transparent !important;
}

.uploadDoc-row:hover > td,
.uploadDoc-row.uploadDoc-selected > td {
    background-color: var(--color-list-row-bg-hover) !important;
}

.uploadDoc-row > td {
    border-left: 0 !important;
    border-top: 1px solid var(--color-dropzone-border) !important;
    border-right: 0;
    border-bottom: 1px solid var(--color-dropzone-border) !important;
    padding: .8em .25em !important;
}

.uploadDoc-row > td:first-of-type {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    border-left: 1px solid var(--color-dropzone-border) !important;
}

.uploadDoc-row > td:last-of-type {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-right: 1px solid var(--color-dropzone-border) !important;
}

.uploadDoc-row .uploadDoc-inner-row {
    display: flex;
    flex-direction: row;
}

.uploadDoc-row .uploadDoc-inner-col {
    display: flex;
    flex-direction: column;
}

.uploadDoc-row .as-list-table-cell .btn-group {
    justify-content: end;
}

.uploadDoc-row .btn-group-floating {
    top: 48px;
}

.uploadDoc-row .as-btn.as-ico > span:first-child {
    color: var(--color-ico-text) !important;
}

.uploadDoc-prev {
    object-fit: cover;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-secondary);
    border-radius: 50%;
    background-color: var(--color-light-bg);
    margin: .5em 0 !important
}

.uploadDoc-prev-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-mat-input-label);
    border-radius: 50%;
    color: var(--color-mat-input-label);
    background-color: var(--color-input-disabled-bg);
    margin: .5em 0 !important
}

.uploadDoc-inner-row a .uploadDoc-prev:hover {
    border-color: var(--color-primary);
}

.uploadDoc-row .uploadDoc-file-name {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    max-width: clamp(120px, 100%, 240px);
    text-align: start !important;
    text-wrap: wrap;
    word-break: break-all;
}

.uploadDoc-row .uploadDoc-file-name a,
.uploadDoc-row .uploadDoc-file-name a:visited {
    color: var(--color-text);
}

.uploadDoc-row .uploadDoc-file-name a:hover {
    color: var(--color-primary);
}

.uploadDoc-row .as-list-table-cell {
    width: fit-content;
    align-self: start;
    text-align: start;
    color: var(--color-mat-input-label)
}

.uploadDoc-action-btn {
    border: 0;
    color: var(--color-text);
    background-color: transparent;
    width: var(--size-button);
}

.uploadDoc-action-btn:hover {
    color: var(--color-primary);
}

/**
 * MODAL
 */
#upload-doc-modal .material-td,
#edit-doc-modal .material-td {
    margin-right: 1em !important;
    margin-bottom: 1em !important;
}

#upload-doc-modal .uploadDoc-row > td,
#edit-doc-modal .uploadDoc-row > td {
    border: none !important;
}

#edit-doc-modal .uploadDoc-row:hover > td, 
#edit-doc-modal .uploadDoc-row.uploadDoc-selected > td {
    background-color: unset !important;
}

/**
 * PROGRESS
 */
#uploadDoc .as-progress-wrapper {
    margin-top: auto;
}

/**
 * OTHER
 */
.uploadDoc-cont {
    position: relative;
    height: 100%;
}

.uploadDoc-header > .as-row:first-child {
    align-items: center;
    justify-content: space-between;
}

.uploadDoc-header .btn-group {
    width: fit-content;
    padding: 0;
}

table.uploadDoc-table {
    height: 100%;
    width: inherit !important;
    border-collapse: separate !important;
    border-spacing: 0 1em !important;
}

.uploadDoc-row .uploadDoc-file-description {
    color: var(--color-mat-input-label);
    font-size: 10px;
    font-style: italic;
    max-width: 120px;
    overflow: hidden !important;
    text-align: start !important;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.uploadDoc-row .material-td:first-child:not(:last-child) {
    margin-bottom: 1em;
}

.uploadDoc-row .uploadDoc-download {
    color: var(--color-ico-text);
    background-color: var(--color-ico-bg);
    border: var(--border-width) solid var(--color-input-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.uploadDoc-row .uploadDoc-download:not(:disabled):hover {
    color: var(--color-light-text);
    background-color: var(--color-modal-confirm-bg) !important;
    border-color: var(--color-modal-confirm-bg);
}

.uploadDoc-row .uploadDoc-download:not(:disabled):hover > span:first-child {
    color: var(--color-light-text) !important;
}

.uploadDoc-row .uploadDoc-time,
.uploadDoc-row .uploadDoc-user {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: fit-content;
    text-transform: uppercase;
    color: var(--color-mat-input-label);
}

.uploadDoc-row .uploadDoc-date {
    align-self: start;
    width: fit-content;
    color: var(--color-mat-input-label);
}

.uploadDoc-row .uploadDoc-date span.fal {
    color: var(--color-secondary);
    margin-right: .5em;
}

.uploadDoc-row .uploadDoc-time span.fal,
.uploadDoc-row .uploadDoc-user span.fal {
    color: var(--color-secondary);
    margin-left: .5em;
    margin-right: .5em;
}

.modal #uploadDoc {
    min-height: unset;
    padding-bottom: var(--margin-blocks-vert);
}

#uploadDoc.dl-panel .uploadDoc-cont {
    margin-left: 0;
    background: none;
    border-bottom: none;
    padding: 0;
}

.docupload-row-check,
.uploadDoc-row-check {
    width: 1.5em !important;
    height: 1.5em !important;
    margin: .8em 1em !important;
}

.material-td-checkbox:has(.uploadDoc-row-check) {
    margin-right: 0;
    margin-bottom: 0;
}