#delete-buttons {
  display:flex;
  gap:10px;
  justify-content:flex-end
  }
  
  #delete-modal p {
  color:#721c24;
  margin-bottom:20px
  }
  
  #drop-zone {
  border:2px dashed #4a90e2;
  border-radius:5px;
  color:#666;
  margin-bottom:15px;
  padding:20px;
  text-align:center;
  transition:background-color .3s ease
  }
  
  #drop-zone.dragover {
  background-color:#e1e1e1
  }
  
  #drop-zone:hover {
  background-color:#f0f8ff
  }
  
  #file-list {
  margin-top:20px
  }
  
  #file-list button {
    margin-left: 10px;
    padding: 2px 8px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
  
  #file-list div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid #eee;
  }
  
  .file-item {

    justify-content: space-between;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid #eee;
  }
  
  .file-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
  }
  
  .file-item.folder-path {
    color: #666;
    font-style: italic;
  }
  
  .upload-progress {
    margin-top: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
    text-align: center;
  }

  #folder-tree-container .folder-icon,.content-area-content .folder-icon,.content-area-content .file-icon {
  display:inline-block;
  margin-right:5px;
  vertical-align:middle
  }
  
  /* Base styles for folder tree */
.folder-tree-container {
  position: relative;
  overflow-y: auto;
}

.folder-tree-toggle {
  display: none;  /* Hide by default on desktop */
  width: 100%;
  padding: 10px 15px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  position: relative;
  margin-bottom: 10px;
}

.folder-tree-toggle::after {
  content: '▼';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.folder-tree-toggle.collapsed::after {
  transform: translateY(-50%) rotate(-90deg);
}

.folder-tree {
  display: block;  /* Always visible on desktop */
}

  #layout-options-modal .layout-option {
  background-color:#f0f0f0;
  border:none;
  cursor:pointer;
  display:block;
  margin-bottom:10px;
  padding:10px;
  text-align:left;
  width:100%
  }
  
  #layout-options-modal .layout-option:hover {
  background-color:#e0e0e0
  }
  
  #modal-image {
  display:block;
  margin:auto;
  max-height:calc(100vh - 120px);
  max-width:100%;
  object-fit:contain
  }
  
  #office-frame {
  border:none;
  height:100%;
  width:100%
  }
  
  #options-button {
  background-color:transparent;
  border:none;
  cursor:pointer;
  font-size:1.2em
  }
  
  #options-modal {
  padding:20px
  }
  
  #options-modal .ui-button {
  margin:0 10px
  }
  
  #options-modal .ui-dialog-buttonpane {
  margin-top:20px;
  text-align:center
  }
  
  #options-modal .ui-dialog-buttonset {
  display:inline-block;
  float:none
  }
  
  #search-button {
  background-color:#007bff;
  border:1px solid #007bff;
  border-radius:0 4px 4px 0;
  color:#fff;
  cursor:pointer;
  padding:5px 10px
  }
  
  #search-input {
  border:1px solid #ccc;
  border-radius:4px 0 0 4px;
  padding:5px 10px;
  width:300px
  }
  
  .actions {
  gap:10px;
  justify-content:center;
  width:100%
  }
  
  .actions a {
  margin-right:5px;
  text-decoration:none
  }
  
  .actions button {
  background:none;
  border:none;
  cursor:pointer;
  font-size:16px
  }
  
  .button--add-root-folder,.button--set-icon-size {
  display:block!important;
  margin:10px auto!important;
  padding:10px!important;
  width:80%
  }
  
  .button--danger {
  background-color:#dc3545;
  border:none;
  border-radius:4px;
  color:#fff;
  cursor:pointer;
  padding:8px 16px
  }
  
  .button--danger:hover {
  background-color:#c82333
  }
  
  .content-area {
  display:flex;
  flex:1;
  flex-direction:column;
  flex-grow:1;
  margin-left:20px;
  overflow:hidden;
  overflow-y:auto;
  padding-left:10px;
  width:75%
  }
  
  .content-area-content {
  background:#fff;
  border-radius:4px;
  box-shadow:0 2px 4px #0000001a;
  flex:1;
  overflow-y:auto;
  padding:20px;
  position:relative;
  z-index:1
  }
  
  .content-area-content,.folder-content-table td,.grid-item,.item-content {
  overflow:visible!important
  }
  
  .content-area-content[data-layout="big-icons"] .folder-content-grid {
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))
  }
  
  .content-area-content[data-layout="big-icons"] .folder-icon,.content-area-content[data-layout="big-icons"] .file-icon {
  height:80px;
  margin-bottom:10px;
  width:80px
  }
  
  .content-area-content[data-layout="big-icons"] .folder-name,.content-area-content[data-layout="big-icons"] .file-name {
  font-size:14px
  }
  
  .content-area-content[data-layout="big-icons"] .grid-item {
  align-items:center;
  display:flex;
  flex-direction:column;
  position:relative;
  text-align:center
  }
  
  .content-area-content[data-layout="big-icons"] .grid-item:hover .item-details,.content-area-content[data-layout="big-icons"] .grid-item:hover .actions,.content-area-content[data-layout="medium-icons"] .grid-item:hover .item-details,.content-area-content[data-layout="medium-icons"] .grid-item:hover .actions {
  background:#fff;
  border:1px solid #ddd;
  display:block;
  padding:10px;
  z-index:10
  }
  
  .content-area-content[data-layout="big-icons"] .item-details,.content-area-content[data-layout="big-icons"] .actions {
  display:none
  }
  
  .content-area-content[data-layout="grid-2"] .folder-content-grid {
  grid-template-columns:repeat(2,1fr)
  }
  
  .content-area-content[data-layout="grid-3"] .folder-content-grid {
  grid-template-columns:repeat(3,1fr)
  }
  
  .content-area-content[data-layout="grid-4"] .folder-content-grid {
  grid-template-columns:repeat(4,1fr)
  }
  
  .content-area-content[data-layout="list"] .folder-content-grid {
  display:none
  }
  
  .content-area-content[data-layout="list"] .folder-content-table {
  display:table
  }
  
  .content-area-content[data-layout="medium-icons"] .folder-content-grid {
  display:grid;
  gap:15px;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr))
  }
  
  .content-area-content[data-layout="medium-icons"] .folder-icon,.content-area-content[data-layout="medium-icons"] .file-icon {
  height:60px;
  margin-bottom:8px;
  width:60px
  }
  
  .content-area-content[data-layout="medium-icons"] .folder-name,.content-area-content[data-layout="medium-icons"] .file-name {
  font-size:12px
  }
  
  .content-area-content[data-layout="medium-icons"] .grid-item {
  align-items:center;
  display:flex;
  flex-direction:column;
  position:relative;
  text-align:center
  }
  
  .content-area-content[data-layout="medium-icons"] .item-details,.content-area-content[data-layout="medium-icons"] .actions {
  display:none
  }
  
  .content-area-content[data-layout^="grid"] .folder-content-grid {
  display:grid;
  gap:20px
  }
  
  .content-area-content[data-layout^="grid"] .folder-content-table {
  display:none
  }
  
  .content-area-title {
  border-bottom:1px solid #e0e0e0;
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  padding-bottom:10px
  }
  
  .create-folder,.add-files,.button--add-root-folder,.button--set-icon-size {
  background-color:#007bff!important;
  border:none!important;
  border-radius:5px!important;
  color:#fff!important;
  cursor:pointer!important;
  display:inline-block!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.5!important;
  margin-right:10px!important;
  padding:10px 15px!important;
  text-align:center!important;
  text-decoration:none!important;
  transition:background-color .3s ease!important;
  user-select:none!important;
  vertical-align:middle!important
  }
  
  .create-folder:active,.add-files:active {
  background-color:#004085
  }
  
  .create-folder:focus,.add-files:focus {
  box-shadow:0 0 0 3px #007bff80;
  outline:none
  }
  
  .create-folder:hover,.add-files:hover {
  background-color:#0056b3!important
  }
  
  .default-icon {
  display:inline-block;
  font-size:20px;
  text-align:center;
  width:20px
  }
  
  .dropdown {
  display:inline-block;
  position:relative
  }
  
  .dropdown-content {
  background-color:#f9f9f9;
  box-shadow:0 8px 16px 0 #0003;
  display:none;
  min-width:160px;
  position:absolute;
  z-index:1
  }
  
  .dropdown-content a {
  color:#000;
  display:block;
  padding:12px 16px;
  text-decoration:none
  }
  
  .dropdown-content a:hover {
  background-color:#f1f1f1
  }
  
  .dropdown:hover .dropdown-content {
  display:block
  }
  
  .extension-badge {
  background:#ffffffe6;
  border-radius:3px;
  bottom:5px;
  box-shadow:0 1px 3px #0003;
  padding:2px;
  position:absolute;
  right:5px;
  z-index:2
  }
  
  .extension-icon {
  height:32px;
  object-fit:contain;
  vertical-align:middle;
  width:32px
  }
  
  .extension-icon-cell {
  text-align:center
  }
  
  .file-content-wrapper {
  align-items:center;
  display:flex;
  flex-direction:column;
  position:relative;
  width:100%;
  width:100%
  }
  
  .file-thumbnail {
  backface-visibility:hidden;
  background-color:#fff;
  border-radius:4px;
  height:300px;
  margin-right:8px;
  object-fit:contain!important;
  perspective:1000px;
  transform:translateZ(0);
  transition:transform .2s ease;
  vertical-align:middle;
  width:300px;
  will-change:transform
  }
  
  .files-and-folders-container {
  background:#fff;
  bottom:0;
  display:flex;
  flex-direction:column;
  left:0;
  overflow:hidden;
  padding:1px 10px 10px;
  position:fixed;
  right:0;
  top:11rem;
  }
  
  .files-and-folders-dialog .ui-dialog-buttonpane {
  border-top:1px solid #ddd;
  margin-top:20px;
  padding-top:15px;
  text-align:right
  }
  
  .files-and-folders-dialog .ui-dialog-buttonset button {
  border-radius:5px;
  cursor:pointer;
  font-size:16px;
  font-weight:700;
  padding:10px 20px;
  transition:background-color .3s ease
  }
  
  .files-and-folders-dialog .ui-dialog-buttonset button:first-child {
  background-color:#4a90e2;
  border:none;
  color:#fff
  }
  
  .files-and-folders-dialog .ui-dialog-buttonset button:first-child:hover {
  background-color:#357abd
  }
  
  .files-and-folders-dialog .ui-dialog-buttonset button:last-child {
  background-color:#e74c3c;
  border:none;
  color:#fff
  }
  
  .files-and-folders-dialog .ui-dialog-buttonset button:last-child:hover {
  background-color:#c0392b
  }
  
  .files-and-folders-dialog .ui-dialog-content {
  background-color:#fff;
  color:#333;
  padding:20px
  }
  
  .files-and-folders-dialog .ui-dialog-titlebar {
  background:#4a90e2;
  color:#fff;
  font-size:24px;
  font-weight:700;
  letter-spacing:1px;
  padding:15px 20px;
  text-align:center;
  text-transform:uppercase
  }
  
  .files-and-folders-dialog input[type="text"],.files-and-folders-dialog select {
  border:1px solid #ddd;
  border-radius:5px;
  box-sizing:border-box;
  font-size:16px;
  height:40px;
  margin-bottom:15px;
  padding:10px;
  width:100%
  }
  
  .files-and-folders-dialog.ui-dialog {
  border:none;
  border-radius:8px;
  box-shadow:0 2px 10px #0000001a;
  font-family:Arial,sans-serif;
  margin:0 auto;
  max-width:600px;
  padding:0;
  width:100%
  }
  
  .files-and-folders-wrapper {
  display:flex;
  flex:1;
  height:calc(100vh - 100px);
  margin-top:20px;
  overflow:hidden
  }
  
  .folder {
  cursor:pointer;
  overflow:hidden;
  position:relative;
  text-overflow:ellipsis;
  white-space:nowrap
  }
  
  .folder > ul {
  display:none
  }
  
  .folder-actions {
  align-items:center;
  border-bottom:1px solid #ddd;
  display:flex;
  justify-content:space-between;
  padding:10px 0
  }
  
  .folder-content {
  width:100%
  }
  
  .folder-content-grid {
  display:grid;
  gap:20px;
  height:100%;
  overflow:visible!important;
  overflow-y:auto;
  padding:20px;
  position:relative
  }
  
  .folder-content-table {
  border-collapse:collapse;
  width:100%
  }
  
  .folder-content-table .actions button,.content-area table .actions button {
  background:none;
  border:none;
  cursor:pointer;
  display:inline-block;
  font-size:16px;
  height:24px;
  line-height:24px;
  margin:0 2px;
  padding:5px;
  vertical-align:middle;
  width:24px
  }
  
  .folder-content-table .actions,.content-area table .actions {
  text-align:center;
  white-space:nowrap
  }
  
  .folder-content-table td {
  vertical-align:middle!important
  }
  
  .folder-content-table th,.content-area table th {
  background-color:#f2f2f2!important;
  font-weight:700!important
  }
  
  .folder-content-table th,.folder-content-table td,.content-area table th,.content-area table td {
  border:1px solid #ddd!important;
  overflow:hidden!important;
  padding:8px!important;
  text-align:left!important;
  text-overflow:ellipsis!important;
  vertical-align:middle!important;
  white-space:nowrap!important
  }
  
  .folder-content-table th:last-child,.folder-content-table td:last-child,.content-area table th:last-child,.content-area table td:last-child {
  width:120px!important
  }
  
  .folder-content-table th:nth-child(1),.content-area table th:nth-child(1) {
  width:40%!important
  }
  
  .folder-content-table th:nth-child(2),.content-area table th:nth-child(2) {
  width:20%!important
  }
  
  .folder-content-table th:nth-child(3),.content-area table th:nth-child(3) {
  width:10%!important
  }
  
  .folder-content-table th:nth-child(4),.content-area table th:nth-child(4) {
  width:15%!important
  }
  
  .folder-content-table th:nth-child(5),.content-area table th:nth-child(5) {
  width:15%!important
  }
  
  .folder-content-table thead {
  background:#fff;
  box-shadow:0 2px 4px #0000001a;
  position:sticky;
  top:0;
  z-index:10
  }
  
  .folder-content-table,.content-area table {
  border-collapse:collapse!important;
  margin-bottom:1em;
  table-layout:fixed!important;
  width:100%!important
  }
  
  .folder-icon {
  display:inline-block;
  height:20px;
  margin-right:5px;
  text-align:center;
  vertical-align:middle;
  width:20px
  }
  
  .folder-icon,.file-icon {
  cursor:pointer;
  font-size:24px;
  margin-bottom:10px;
  margin-right:10px;
  object-fit:contain;
  transition:none!important;
  vertical-align:middle
  }
  
  .folder-item {
  cursor:pointer;
  margin-bottom:5px;
  padding-left:20px;
  position:relative
  }
  
  .folder-item .actions button {
  pointer-events:auto
  }
  
  .folder-item.selected {
  background-color:#e0e0e0
  }
  
  .folder-item:hover {
  background-color:#f5f5f5
  }
  
  .folder-label {
  vertical-align:middle
  }
  
  .folder-name {
  cursor:pointer
  }
  
  .folder-name,.file-name {
  font-weight:700;
  margin-bottom:10px;
  word-break:break-word
  }
  
  .folder-toggle {
  cursor:pointer;
  height:20px;
  left:0;
  line-height:20px;
  position:absolute;
  text-align:center;
  top:8%;
  width:20px
  }
  
  .folder-tree {
  border-right:1px solid #ccc;
  list-style-type:none;
  min-width:250px;
  overflow-y:auto!important;
  padding-left:0;
  padding-right:10px;
  position:sticky;
  top:0
  }
  
  .folder-tree > ul {
  padding-left:0
  }
  
  .folder-tree ul {
  cursor:pointer;
  list-style-type:none;
  padding-left:15px
  }
  
  .folder.active {
  font-weight:700
  }
  
  .folder.expanded > ul {
  display:block
  }
  
  .folder.selected {
  background-color:#e0f0ff
  }
  
  .folder.selected > .folder-name {
  color:#06c;
  cursor:pointer;
  font-weight:700
  }
  
  .folder:hover {
  background-color:#f0f0f0
  }
  
  .grid-item {
  align-items:center;
  background-color:#f9f9f9;
  border:1px solid #ddd;
  border-radius:5px;
  box-shadow:0 2px 4px #0000001a;
  display:flex;
  flex-direction:column;
  overflow:visible!important;
  padding:15px;
  position:relative;
  text-align:center;
  z-index:1
  }
  
  .grid-item:hover {
  z-index:1000
  }
  
  .icon-size-large {
  height:40px;
  width:40px
  }
  
  .icon-size-medium {
  height:24px;
  width:24px
  }
  
  .icon-size-small {
  height:16px;
  width:16px
  }
  
  .item-content {
  align-items:center;
  display:flex;
  flex-direction:column;
  margin-bottom:10px;
  width:100%
  }
  
  .item-details {
  align-items:center;
  display:flex;
  flex-direction:column;
  margin-bottom:10px;
  width:100%
  }
  
  .item-details span {
  margin-bottom:5px
  }
  
  .kebab-menu {
  position:absolute;
  right:5px;
  top:5px;
  z-index:10
  }
  
  .kebab-menu-button {
  background:none;
  border:none;
  cursor:pointer;
  font-size:24px;
  line-height:1;
  padding:4px
  }
  
  .kebab-menu-content {
  background-color:#fff;
  border:1px solid #ddd;
  border-radius:4px;
  box-shadow:0 2px 5px #0000001a;
  display:none;
  padding:10px;
  position:absolute;
  right:0;
  top:100%;
  z-index:20
  }
  
  .kebab-menu.active .kebab-menu-content {
  display:block
  }
  
  .left-actions {
  display:flex;
  gap:10px
  }
  
  .message {
  border-radius:4px;
  margin-bottom:10px;
  padding:10px
  }
  
  .message--error {
  background-color:#f8d7da;
  border:1px solid #f5c6cb;
  color:#721c24
  }
  
  .message--status {
  background-color:#d4edda;
  border:1px solid #c3e6cb;
  color:#155724
  }
  
  .office-file-name {
  font-size:1.2em;
  margin:0
  }
  
  .office-modal {
  background-color:#000000b3;
  display:none;
  height:100%;
  left:0;
  position:fixed;
  top:8rem;
  width:100%;
  z-index:500
  }
  
  .office-modal-body {
  height:90%;
  padding:0
  }
  
  .office-modal-close {
  background:none;
  border:none;
  cursor:pointer;
  font-size:24px;
  padding:0 8px
  }
  
  .office-modal-content {
  background-color:#fefefe;
  border-radius:4px;
  box-shadow:0 4px 8px #0003;
  height:90%;
  margin:2% auto;
  overflow:hidden;
  position:relative;
  width:95%
  }
  
  .office-modal-header {
  align-items:center;
  background-color:#f8f9fa;
  border-bottom:1px solid #dee2e6;
  display:flex;
  justify-content:space-between;
  padding:0.4rem;
  }
  
  .right-actions {
  display:flex;
  justify-content:flex-end
  }
  
  .roles-container {
  border:1px solid #ccc;
  margin-top:10px;
  max-height:200px;
  overflow-y:auto;
  padding:10px
  }
  
  .roles-container input[type="checkbox"] {
  margin-right:5px
  }
  
  .roles-container li {
  margin-bottom:5px
  }
  
  .roles-container ul {
  list-style-type:none;
  margin:0;
  padding:0
  }
  
  .search-container {
  display:flex;
  flex-grow:1;
  justify-content:center
  }
  
  .thumbnail-container {
  align-items:center;
  background-color:#fff;
  border-radius:4px;
  display:flex;
  justify-content:center;
  margin-bottom:5px;
  padding:5px;
  position:relative
  }
  
  .thumbnail-container:hover .extension-badge {
  z-index:1003
  }
  
  .thumbnail-hover {
  cursor:pointer;
  transition:transform .2s ease
  }
  
  .thumbnail-hover:hover {
  box-shadow:0 0 10px #0003;
  height:auto!important;
  transform:scale(1.05);
  width:25rem!important;
  z-index:1002;
  z-index:1000
  }
  
  .thumbnail-loading {
  background-color:#000000b3;
  border-radius:5px;
  color:#fff;
  font-size:14px;
  left:50%;
  padding:10px;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%)
  }
  
  .thumbnail-modal {
  background-color:#000000e6;
  border-radius:.3125rem;
  box-shadow:0 0 1.25rem #00000080;
  display:none;
  padding:1.25rem;
  position:fixed;
  z-index:9999;
  z-index:1001
  }
  
  .thumbnail-modal .modal-content {
  height:auto;
  margin:0;
  padding:0;
  position:relative;
  width:auto
  }
  
  .thumbnail-modal .modal-filename {
  background-color:#000000b3;
  border-radius:3px;
  color:#fff;
  font-size:14px;
  margin-top:10px;
  padding:5px;
  text-align:center
  }
  
  .thumbnail-modal img {
  display:block;
  height:auto;
  max-height:none;
  max-width:none;
  object-fit:contain;
  width:auto
  }
  
  .ui-dialog {
  z-index:1000
  }
  
  .visibility {
  border-radius:3px;
  display:inline-block;
  font-size:.8em;
  padding:2px 6px
  }
  
  .visibility.private {
  background-color:#f44336;
  color:#fff
  }
  
  .visibility.public {
  background-color:#4CAF50;
  color:#fff
  }
  
  .visibility.shared {
  background-color:#2196F3;
  color:#fff
  }
  
  .visibility.undefined {
  background-color:#9E9E9E;
  color:#fff
  }
  
  [data-layout="big-icons"] .extension-badge {
  bottom:15px;
  right:15px
  }
  
  [data-layout="big-icons"] .file-info {
  padding:8px
  }
  
  [data-layout="big-icons"] .file-thumbnail {
  height:8rem;
  object-fit:contain!important;
  width:8rem
  }
  
  [data-layout="grid-2"] .extension-badge,[data-layout="grid-3"] .extension-badge,[data-layout="grid-4"] .extension-badge {
  bottom:10px;
  right:10px
  }
  
  [data-layout="grid-2"] .file-info,[data-layout="grid-3"] .file-info,[data-layout="grid-4"] .file-info {
  padding:5px
  }
  
  [data-layout="grid-2"] .file-thumbnail,[data-layout="grid-3"] .file-thumbnail,[data-layout="grid-4"] .file-thumbnail {
  height:auto;
  max-height:9.375rem;
  width:100%
  }
  
  [data-layout="grid-2"] .grid-item,[data-layout="grid-3"] .grid-item,[data-layout="grid-4"] .grid-item {
  align-items:center;
  display:flex;
  flex-direction:column;
  min-height:250px;
  padding:15px
  }
  
  [data-layout="list"] .extension-badge {
  display:none
  }
  
  [data-layout="list"] .extension-badge.centered {
  display:none
  }
  
  [data-layout="list"] .file-name,[data-layout="list"] .folder-name {
  display:inline-block!important;
  line-height:32px!important;
  vertical-align:middle!important
  }
  
  [data-layout="list"] .file-thumbnail {
  border-radius:.25rem;
  height:3rem;
  margin-right:.5rem;
  object-fit:contain;
  transition:all .3s ease;
  vertical-align:middle;
  width:3rem
  }
  
  [data-layout="list"] .file-thumbnail[src$=".svg"] {
  height:32px!important;
  object-fit:contain!important;
  width:32px!important
  }
  
  [data-layout="list"] .folder-icon,[data-layout="list"] .file-icon {
  display:inline-block!important;
  height:52px!important;
  margin-right:8px!important;
  object-fit:contain!important;
  vertical-align:middle!important;
  width:52px!important
  }
  
  [data-layout="list"] .thumbnail-container {
  align-items:center!important;
  display:inline-flex!important;
  position:relative;
  vertical-align:middle!important
  }
  
  [data-layout="list"] td {
  overflow:visible!important;
  position:relative!important
  }
  
  [data-layout="list"] td:first-child {
  align-items:center!important;
  display:flex!important;
  gap:8px!important
  }
  
  [data-layout="medium-icons"] .extension-badge {
  bottom:8px;
  right:8px
  }
  
  [data-layout="medium-icons"] .file-info {
  padding:5px
  }
  
  [data-layout="medium-icons"] .file-thumbnail {
  height:4rem;
  object-fit:contain!important;
  width:4rem
  }
  
  [data-layout^="grid"] .extension-badge.centered .extension-icon,[data-layout="big-icons"] .extension-badge.centered .extension-icon,[data-layout="medium-icons"] .extension-badge.centered .extension-icon {
  height:32px;
  object-fit:contain;
  width:32px
  }
  
  [data-layout^="grid"] .extension-badge.centered,[data-layout="big-icons"] .extension-badge.centered,[data-layout="medium-icons"] .extension-badge.centered {
  align-items:center;
  background:transparent;
  box-shadow:none;
  display:flex;
  justify-content:center;
  margin-top:5px;
  padding:0;
  position:static
  }
  
  [data-layout^="grid"] .extension-icon-cell {
  display:none
  }
  
  [data-layout^="grid"] .file-info,[data-layout="big-icons"] .file-info,[data-layout="medium-icons"] .file-info {
  align-items:center;
  display:flex;
  flex-direction:column;
  margin-top:10px;
  width:100%
  }
  
  [data-layout^="grid"] .file-name,[data-layout="big-icons"] .file-name,[data-layout="medium-icons"] .file-name {
  margin-bottom:5px;
  text-align:center;
  word-break:break-word
  }
  
  [data-layout^="grid"] .file-thumbnail {
  height:300px;
  object-fit:contain!important;
  transition:all .3s ease;
  width:100%;
  z-index:1
  }
  
  [data-layout^="grid"] .file-thumbnail[src$=".svg"] {
  height:200px!important;
  object-fit:contain!important;
  width:100%!important
  }
  
  [data-layout^="grid"] .grid-item {
  overflow:visible!important;
  position:relative!important;
  transition:z-index 0s linear .3s;
  z-index:1
  }
  
  [data-layout^="grid"] .grid-item:hover {
  transition-delay:0s;
  z-index:1000
  }
  
  [data-layout^="grid"] .thumbnail-container {
  height:100%;
  position:relative;
  width:50%;
  z-index:1
  }
  
  [data-layout^="grid"] .thumbnail-container:hover .file-thumbnail {
  background:#fff;
  box-shadow:0 0 10px #0003;
  height:auto!important;
  max-height:none;
  max-width:none;
  transform:scale(1.05);
  width:25rem!important;
  z-index:1000
  }
  
  body {
  color:#333;
  font-family:Arial,sans-serif;
  line-height:1.6
  }
  
  @media (max-width: 1024px) {
  #search-input {
  width:100%
  }
  
  .content-area {
  width:100%
  }
  
  .create-folder,.add-files {
  display:block;
  margin-bottom:10px;
  width:100%
  }
  
  .files-and-folders-dialog.ui-dialog {
  width:95%
  }
  
  .files-and-folders-wrapper {
  flex-direction:column
  }
  
  .folder-actions {
  align-items:stretch;
  flex-direction:column
  }
  
  .folder-content-table .name-column,.content-area table .name-column {
  max-width:150px
  }
  
  .folder-content-table th,.folder-content-table td,.content-area table th,.content-area table td {
  padding:5px!important
  }
  
  .folder-tree {
  border-bottom:1px solid #ccc;
  border-right:none;
  height:auto;
  max-height:300px;
  overflow-y:hidden!important;
  width:100%
  }
  
  .left-actions,.right-actions {
  justify-content:center;
  margin-bottom:10px
  }
  
  .search-container {
  margin-bottom:10px;
  order:-1
  }
  }

  /* Media queries for mobile */
@media screen and (max-width: 768px) {
  .folder-tree-toggle {
    display: block;  /* Show only on mobile */
  }

  .folder-tree {
    display: none;  /* Hidden by default on mobile */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: -10px;
    background: #fff;
  }

  .folder-tree.expanded {
    display: block;
  }
}