.dragzone.over {
  border-color: #000;
  background-color: #eee;
  }


.grid-container {
    display: grid;
    max-width: 99%;
    height: calc(100vh - 220px);
    overflow-y: auto;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-auto-rows: minmax(min-content, max-content); /* Adjust row height based on content */
    /* make the rendering process more smooth */

  }
  
  .grid-container :-moz-drag-over {
    background-color: transparent;
    cursor: hand;
  }

  .grid-container .file-item {
    display: flex;
    flex-direction: column;
    padding: 12px 10px 12px 10px;
    border-radius: 4px;
    box-sizing: border-box;
    justify-content: space-between;
    cursor: pointer;
    padding: 4px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.05s;
    height: 140px;
    width: 130px;
    margin: 4px;
    animation: fadeIn 0.5s ease-out;
  }
    
    .file-item.selected {
        border: 2px solid #007bff; 
    }    

    .file-item .image-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;
        padding: 4px;
        flex-wrap: wrap;
        height: calc(width*1.2);  
        object-fit: contain;
        object-position: center;
        margin: auto;
        overflow: hidden;        
    }

    .file-item .image-container img {
        justify-content: center;
        max-height: 100%;
        max-width: 100%;
    }

    .file-item .file-detail {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px;
        box-sizing: border-box;
        width: 100%;
    }

    .file-item .file-detail span {
        white-space: nowrap; /* Prevent text wrapping */
        justify-self: start;   
        text-overflow: ellipsis;
        font-size: x-small;
        overflow: hidden;
        padding: 1px 4px 1px 2px;
    }

    .file-item .file-detail button {
        background-color: transparent;
        border: none;
        cursor: pointer;  
        padding: 1px 6px 1px 4px;      
    }

    .file-item .file-detail button:hover {
        color: #007bff;
        background-color: lightgray;
        border-radius: 4px;
    }

.view-header-btn-container {
  display: flex;
  align-items: center;
  width: auto;
  margin: 0 0 0 0;
  padding: 0.3em 1.2em 0.3em 7px;
}


.form-select {
  /* remove the default width */
  width: fit-content;
  margin: 0 8px 0 8px;
 
}

.form-check {
  width: 1.5em;
  margin: 0 8px 0 8px;
}

.select-info{
  margin: 0 0 0 10px;
}

.form-control {
  width: 100%;
  margin: 0 0 6px 0;
  padding-left: 6px;
  font: inherit;
  border-radius: 4px;
  }  

.table-header-btn {
  background-color: transparent;
  border: none;
}

.table-header-btn>i {
  color: lightgray
}


.table-header-btn>i:hover {
  color: lightblue;
}


.table-search {
  text-align: right;
  position: relative;
}

.table-search input {
  margin: 0 0 0 0.5em;
  display: inline-block;
  width: auto;
  padding: 0.1em 0.5em 0.1em 2.0em;
  line-height: 1.5;
  font-size: small;

}

.table-search::before {
  content: "\f002"; /* Font Awesome search icon unicode */
  font-family: "Font Awesome 5 Free"; /* Make sure this matches your Font Awesome version */
  font-weight: 900; /* Font weight for the icon, may vary based on the version */
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Ensure the icon doesn't interfere with input interaction */
  color: #aaa; /* Icon color */
}

.table-search .form-control-sm {
  min-height: 0;
}

.table-header-btn {
  margin: 0 24px 0 24px;
  padding: 0 0 0 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  justify-content: left;

}

.select-all-group {
  margin: 0 24px 0 24px;

}

.form-select, form-check {
  /* remove the default width */

  line-height: 1.2;
  width: auto;
 
}

.btn.table-header-btn:hover {
  color: transparent;
} 

#btn-select-all-grid-items {
  width: 10ch;
}

/* Hide the dropdown by default */
.dropdown-menu {
  display: none;
}

/* When the 'show' class is added to the dropdown, display it */
.dropdown-menu.show {
  display: block;
  top: 23.5px; 
  left: 24px;
}

.view-info-container {
  display: flex;
  align-items: center;
} 

.grid-paging ul.pagination {
  flex-wrap: wrap;
}