/* basis: grid met 1 kolom als fallback */
#page\#0 > div.edocmandocuments.mod_edocman_document-list {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

/* Mobiel: 1 kolom */
@media (max-width: 600px) {
  #page\#0 > div.edocmandocuments.mod_edocman_document-list {
    grid-template-columns: 1fr;
  }
}

/* Middelgroot (tablet): 2 kolommen */
@media (min-width: 601px) and (max-width: 900px) {
  #page\#0 > div.edocmandocuments.mod_edocman_document-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Groot (desktop): 3 kolommen */
@media (min-width: 901px) {
  #page\#0 > div.edocmandocuments.mod_edocman_document-list {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* PDF-icon (rood) */
.mod_edocman_document-list .document-icon .bi-filetype-pdf {
  color: #c61e1e;   /* kies je gewenste kleur */
}

/* DOCX-icon (blauw) */
.mod_edocman_document-list .document-icon .bi-filetype-docx {
  color: #3182CE;   /* kies je gewenste kleur */
}

/* DOC-icon (blauw) */
.mod_edocman_document-list .document-icon .bi-filetype-doc {
  color: #3182CE;   /* kies je gewenste kleur */
}

/* XLSX-icon (groen) */
.mod_edocman_document-list .document-icon .bi-filetype-xlsx {
  color: #156912;   /* kies je gewenste kleur */
}

/* XLS-icon (groen) */
.mod_edocman_document-list .document-icon .bi-filetype-xls {
  color: #156912;   /* kies je gewenste kleur */
}

/* Icoon-tekst PNG en JPG in een wat donkerder geel */
.mod_edocman_document-list .document-icon .bi-filetype-png,
.mod_edocman_document-list .document-icon .bi-filetype-jpg {
  color: #bbb311;  /* donker geel*/
}


/* Maak elk .document een flex-container (horizontaal) */
.mod_edocman_document-list .document {
  display: flex !important;        /* forceer flex */
  align-items: center;             /* verticale centrering */
  gap: 8px;                        /* ruimte tussen icoon en tekst */
  /* optioneel: padding/margin per item */
  padding: 4px 0;
}

/* Zorg dat het icoon niet uitrekt */
.mod_edocman_document-list .document-icon {
  flex: none;                      /* behoud vaste grootte */
  display: flex;                   /* centreer het icoon zelf */
  align-items: center;
  justify-content: center;
}

/* Laat de details de rest van de ruimte innemen */
.mod_edocman_document-list .document-details {
  flex: 1;
  /* optioneel: als je de titel-container wilt uitlijnen */
  display: flex;
  align-items: center;
}





/* REST */

.document-icon {
    color:#009DE0;
    margin-right: 10px;
}

#edocman-document-page .document-card .doc-icon {
    font-size: 28px;
    color: unset;
    flex-shrink: 0;
    color: #009DE0;
}

#edocman-document-page .document-card .document-description {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: var(--border-radius);
    border-left: 4px solid #0eb314;
    margin-bottom: 20px;
}

#edocman-document-page .document-card .document-title {
    font-size: 24px;
    font-weight: 600;
    color: unset;
    margin-right: 10px;
    color: #0EB314;
    margin-top: 9px;
}

#edocman-document-page .document-card .document-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: 120px;
    max-height: fit-content;
}



.control-group:has(#jform_document_url-lbl),
.control-group:has(#jform_view_url-lbl),
.control-group:has(#jform_user_ids-lbl),
.control-group:has(#jform_user_ids-lbl)

{
  display: none;
}

#edocman-categories .edocman-box-heading h3, #edocman-documents .edocman-box-heading h3, #edocman-document-page .edocman-box-heading h3 {
    margin: 0;
    line-height: 24px;
}


div.document-details > div > a  {
word-break: break-all;

}