/* file manger serach strat */
.file-section-body {
  margin-bottom: 0rem !important;
  padding-bottom: 0;
  display: flex;
  width: 100%;
}

.fileSearchResultContainer {
  width: 100%;
}

.fileHeaderSearch {
  border-radius: 0.4rem;
  display: inline-block;
  width: 100%;
  min-width: 100%;
}
.beta-icon{
  width: 4rem !important;
  margin-bottom: 1.15rem;
  margin-left: 0.8rem;
  padding-top: 0 !important;
}

/* Commenter access: the editor header says so, next to the file name, so the
   restriction is visible before the person tries to type. Scoped with :has() so
   the header of every other document keeps exactly the layout it has today. */
.editfilename:has(.fm-editor-commentOnlyBadge) {
  display: flex;
  align-items: center;
}

.fm-editor-commentOnlyBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 1rem;
  padding: 0.2rem 0.8rem;
  border: 0.1rem solid var(--color-border-light);
  border-radius: 1.2rem;
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  font-size: var(--font-size-11);
  font-weight: 500;
  line-height: 1.8rem;
  white-space: nowrap;
  vertical-align: middle;
}

.fm-editor-commentOnlyBadge svg {
  flex-shrink: 0;
}

.fileheaderSearchTab {
  margin-bottom: 1rem;
  background: var(--white);
  width: 100%;
  border-radius: 0.5rem;
  display: flex;
  list-style: none;
  filter: drop-shadow(0px 6px 9px rgb(from var(--dark-black) r g b / 20%));
  border-top: 0.1rem solid var(--gray);
}

.fileheaderSearchTab li span {
  display: block;
  text-align: center;
  padding-bottom: 0.8rem;
}

.fileheaderSearchTab li {
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-15);
  line-height: 1.5;
  /* identical to box height, or 125% */
  color: var(--black);
  padding: 1.8rem 1.62rem;
  cursor: pointer;
  box-sizing: border-box;
}

.fileheaderSearchTab li:hover {
  background: var(--dark-white);
}

.fileheaderSearchTab li.active {
  background: var(--dark-white);
}

/* file manger end here */
.cardWrap {
  padding-bottom: 1.2rem;
}

.row-card-file {
  flex-direction: row;
  flex-wrap: wrap;
  --auto-grid-min-size: 23rem;
  display: grid;
  grid-gap: 2rem;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
}

.card-file-manager {
  position: relative;
  padding: 1.2rem 1.2rem 1.2rem 1.2rem;
  height: 100%;
  border-radius: 0.8rem;
  border: 0.05rem solid var(--color-border-light);
  background: var(--color-surface);
}

.cardFileHeader {
  font-weight: 500;
  font-size: var(--font-size-15);
  /* identical to box height, or 127% */
  display: flex;
  align-items: center;
  line-height: 1.6rem;
  color: var(--black);
  padding-bottom: 1.2rem;
}

.folderLabel {
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-15);
  line-height: 1.9;
  line-height: 1.976rem;
  /* identical to box height, or 127% */
  color: var(--black);
  padding-left: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  width: 100%;
  max-width: 15rem;
  max-width: 12rem;
}

#sharedToDropdown{
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.container-card-file-manager {
  grid-gap: 0.5em;
  grid-auto-rows: max-content;
  padding-bottom: 5rem;
}

.card-file-manager-content {
  margin: 0px auto;
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  cursor: pointer;
  max-width: 25rem;
  background: var(--white);
  padding: 0;
  height: 14rem;
  border-radius: 6.24px;
  border: 0.05rem solid var(--color-border);
}

.card-footer {
  background: none;
  font-style: normal;
  font-weight: 600;
  font-size: var(--font-size-15);
  line-height: 1.9;
  /* identical to box height, or 127% */
  color: var(--black);
  border-top: none;
  position: relative;
  padding: 0;
  margin-right: 0.3rem;
  padding-top: 1.2rem;
  display: flex;
  justify-content: space-between;
  padding-left: 0rem;
  align-items: center;
}

.folderManger {
  padding-bottom: 1rem;
  padding-top: 1rem;
  margin-bottom: 0px;
}

.flex-file-card {
  display: flex;
  flex-direction: row;
}

.card-file-content {
  box-sizing: border-box;
  width: 90px;
  height: 107.09px;
  background: var(--white);
  border: 0.1rem solid var(--color-border);
  box-shadow: 0px 4px 8px rgb(from var(--color-text-secondary) r g b / 25%);
  border: 0.2rem solid var(--color-text-primary);
  margin: 0 auto;

}

.card-header {
  background-color: inherit;
  background-color: inherit;
  border: none;
  display: flex;
  justify-content: space-between;
  padding: 0px;
  margin-bottom: 1.2rem;
  margin-left: 1.2rem;
  margin-right: 0.5rem;
  padding: 0px;
  margin-bottom: 1.2rem;
  margin-left: 1.2rem;
}

.videoPlayIcon {
  position: absolute;
}

.card-file-manager-content img {
  width: 100%;
  max-height: 100%;
  height: 100vh;
}
.default-img-display {
    width: 100%;
    height: 100% !important;
    max-width: 8rem;
    max-height: 8rem !IMPORTANT;
    margin: 0px auto;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
}

.favouriteActive {
  position: absolute;
  left: 0;
  top: 0rem;
}

.option-card-header img {
  width: 100%;
}

.card-footer-seprator {
  width: 220px;
  height: 0px;
  left: 763px;
  bottom: 579px;
  border: 0.1rem solid var(--gray);
}

.fileMangerTopStrip {
  padding-top: 0.7rem;
  padding-left: 2rem;
  padding-bottom: 0.7rem;
}

.fileMangerTopStrip1 {
  padding-top: 0.7rem;
  padding-left: 2.5rem;
  padding-bottom: 0.7rem;
  height: 4.3rem;
  width: 100vw;
}

.fileManager {
  background: var(--white);
  right: 0;
  flex-direction: column;
  width: 100%;
}

.leftMenu-file-manager {
  border-right: 0.1rem solid var(--gray);
  float: left;
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  min-width: 17rem;
  /* max-width: 28rem; */
  max-width: 31.0rem;
  height: 100vh;
  box-shadow: 0px 4px 8px rgb(from var(--color-text-primary) r g b / 10%);
  padding-left: 0rem;
  clear: both;

}

.filesNewTab {
  width: 100%;
  max-width: max-content;
  display: flex;
  padding: 1.3rem 1.3rem;
  flex-direction: column;
  border-radius: 0.8rem;
  background: var(--color-surface);
  box-shadow: 0px 3px 1px -2px rgb(from var(--color-text-primary) r g b / 20%), 0px 2px 2px 0px rgb(from var(--color-text-primary) r g b / 14%), 0px 1px 5px 0px rgb(from var(--color-text-primary) r g b / 12%);
  margin-bottom: 2.0rem;
  color: var(--color-text-secondary);
  text-align: center;

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  align-items: center;
  cursor: pointer;

}


.leftMenuWarp > ul:not(.mui-nav) {
  padding-top: 0rem;
}

.fm-sharedFiles-subMenu span {
  padding-left: 7.5rem !important;
  max-height: 4.2rem !important;
  margin-bottom: 1.2rem !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  margin-bottom: 0px !important;
}



.filesNewTab .filesMenuIcons {
  color: var(--color-text-primary);
  text-align: center;

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 2.0rem;
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
}

.leftMenuWarp > ul:not(.mui-nav) li {
  /* or 131% */
  /* 184.615% */
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.leftMenuWarp > ul:not(.mui-nav) span.fileMangerActive {
  background: var(--color-background);
  border-radius: 0.8rem;
}
.driveDashIcon {
  margin-right: 0.5rem;
}
.leftMenuWarp > ul:not(.mui-nav) li span {
  padding-right: 1rem;
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  position: relative;
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 2.4rem;
  list-style: none;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 4.3rem;
  margin-bottom: 0.5rem;
  height: 4.6rem;
  cursor: pointer;
}

.leftMenuWarp > ul:not(.mui-nav) li span:hover {
  background: var(--color-background);
  border-radius: 0.8rem;
}

.darkmode .leftMenuWarp > ul:not(.mui-nav) li span:hover {
  background: var(--light-slate-brown-v2);
}


.leftMenuWarp > ul:not(.mui-nav) li span img {
  vertical-align: middle;
}

.fm-sharedFiles-subMenu li:not(.fileMangerActive):hover {
  background: var(--dim-gray) !important;
}

.fileStorage {
  padding-left: 1.5rem;
}

span.storagealigment {
  display: flex;
}
.storageIcon {
  padding-right: 1rem;
}

.storageIcon img {
  vertical-align:auto;
  vertical-align:auto;
}

.drive-svg_icons {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
}

.storageTitle {
  /* or 131% */
  padding-bottom: 2em;
  display: inline-block;
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 1.7rem;
  /* 184.615% */

}

.storageUsed {
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-15);
  font-size: var(--font-size-15);
  line-height: 1.7;
  /* or 131% */
  color: var(--black);
  padding-top: 1rem;
  display: block;
  position: relative;
  background: linear-gradient(90deg, var(--color-brand) 25%, var(--color-surface-alt) 25%);
  width: 100%;
  max-width: 50%;
}

.color-bar {
  display: flex;
  height: 0.4rem;
  max-width: 50%;
  padding-bottom: 0rem;
}
.half-red {
  background-color: var(--color-brand);
}

.half-gray {
  background-color: var(--color-surface-alt);
}

.storageUsedText {
  font-style: normal;
  padding-top: 2rem;
  font-weight: 500;
  font-size: var(--font-size-15);
  line-height: 1.7;
  color: var(--black);
  display: block;
  position: relative;
  width: 100%;
}

.fileStorageBtn {
  padding-top: 1rem;
}

.storageBtn {
  background: var(--dark-gray);

  padding: 0.8rem 1.5rem;
  border-radius: 0.3rem;
  border: solid 0.1rem var(--dark-gray);
  font-size: var(--font-size-15);
  font-weight: 700;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.2rem;
  text-align: center;
  color: var(--white);
  cursor: pointer;
  height: 3.7rem;
}

/* top */
.fileMangerWrap {
  padding: unset;
  display: flex;
  width: 100%;
  margin-top: 0;
  align-items: center;
  justify-content: space-between;
}

.fileMagerRighSideIcon {
  display: flex;
  align-items: flex-end;
  margin-bottom: 0.1rem;
}

.fileManagerTopRight{
  display: flex;
}

/* Per-row "more options" menu in the version history panel */
.version-history-sidebar li.version-block {
  position: relative;
}

.version-more-wrap {
  position: absolute;
  top: 1.8rem;
  right: 1rem;
}

.version-more-btn {
  background: none;
  border: none;
  padding: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  cursor: pointer;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
}

.version-more-btn img {
  width: auto;
  height: 2rem;
}

/* Visible on hover, on the selected version, and while its menu is open */
.version-block:hover .version-more-btn,
.version-block.highlighted-version .version-more-btn,
.version-more-wrap.menu-open .version-more-btn,
.version-more-btn:focus-visible {
  visibility: visible;
}

.version-more-btn:hover {
  background-color: var(--dark-white);
}

.version-more-menu {
  position: absolute;
  top: 2.6rem;
  right: 0;
  min-width: 16rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background-color: var(--white);
  border: 0.1rem solid var(--gray);
  border-radius: 0.4rem;
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.15);
  z-index: 2100;
}

.version-restore-option {
  padding: 0.8rem 1.4rem;
  font-size: 1.3rem;
  color: var(--black);
  white-space: nowrap;
  cursor: pointer;
}

.version-restore-option:hover {
  background-color: var(--dark-white);
}

.fileMagerRighSideIcon {
  margin-bottom: 0.1rem;
  justify-content: end;
  padding-right: 5.3rem;
}

.fileMagerTopLeft {
  font-weight: 600;
  font-size: var(--font-size-15);
  /* identical to box height, or 129% */
  align-items: center;
  color: var(--black);
  display: block;
}


/* Version History Sidebar */
.version-history-sidebar {
  display: none; /* Initially hidden */
  position: fixed;
  top: 4.3rem;
  right: 0;
  width: 30rem;
  height: 100%;
  background-color: var(--color-surface);
  border-left: 2px solid var(--color-border-light);
  border: 0.1rem solid var(--gray);
  box-shadow: -2px 0 5px rgb(from var(--color-text-primary) r g b / 10%);
  z-index: 2000;
  transition: all 0.3s ease;

}

.editable-input {
  direction: rtl;
  text-align: left;
  display: inline-block;
  unicode-bidi: plaintext;
  padding-left: .5rem;
  padding-right: 2rem;
  background-color: var(--color-background);
  border: 0.1rem solid var(--black);
  border-radius: 0.4rem;
  outline: none;
  height : 2.5rem;
  text-align: center;
  transition:none;
  max-width: 160rem;
  overflow: hidden;
  }

  .edit-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  }


  #editor-filename{
  max-width: 100% - 25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }

  .hidden-measure {
  white-space: nowrap;
  position: absolute;
  visibility: hidden;
  }

  .cancel-edit {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  background: url("../../images/icons/close.svg") no-repeat center center;
  background-size: contain;
  margin-left: .8rem;
  }

.current-version {
  color: green;
  font-weight: bold;
  margin-left: 5px;
}


.fileViewPopup1 {
  position: fixed;
  top: 4.3rem;
  right: 0;
  width: 43rem;
  height: 100%;
  background: var(--white);
  z-index: 999;
  padding: 1rem 0 0rem 0rem;
  border: 0.1rem solid var(--gray);
  background: var(--white);
  box-shadow: -3px 0px 4px 0px rgb(from var(--color-text-primary) r g b / 50%);
}

#heading-table{
  padding-top: 1.5rem;
  padding-left: 2rem;
  font-size: var(--font-size-21);
  font-weight: bold;
  padding-bottom: 3rem;
}

#version-list {
  list-style-type: none; /* Remove default bullet points */
  margin: 0;
  padding: 0;
  /* Use a clean font */
  max-height: calc(100vh-16rem); /* Set max height for scrolling */
  overflow-y: auto; /* Enable vertical scrolling if needed */
  height: 100vh;
  border-radius: 4px;

   /* Subtle shadow */
}

#version-list li {
  display: flex; /* Use flexbox for alignment */
  justify-content: space-between; /* Space out the content */
  align-items: left; /* Center items vertically */
  padding: 15px 15px; /* Add padding for better spacing */
  cursor: pointer; /* Change cursor to indicate clickability */
  /* Smooth hover effects */
  font-weight: 500;
  font-size: var(--font-size-15);
}

#version-list li span :nth-child(1){
  font-size: var(--font-size-11);
  display: block
}

#version-list li span :nth-child(0){
  display: block;
}

#version-list li:hover {
  background-color: var(--color-background); /* Change background on hover */
}

#version-list li:last-child {
  border-bottom: none; /* Remove border for the last item */
}

#version-list li .version-timestamp {
  font-size: var(--font-size-11); /* Smaller font for timestamp */
  color: var(--color-text-secondary); /* Subtle color for less emphasis */
}

#version-list li .version-id {
  font-weight: bold; /* Make version ID more prominent */
  color: var(--color-text-primary); /* Darker color for better visibility */
}

#version-list li:active {
  background-color: var(--color-info-bg); /* Highlight on click */

  /* Inner shadow effect */
}

/* Specific class targeting the list items */
.version-history-sidebar li.highlighted-version {
  background-color: var(--light-white);  /* Light background */
}

.date-item{
  font-size: var(--font-size-15);
  font-weight: 500;
  display: block;
}

.version-item{
  font-size: var(--font-size-11);
  display: block;
}

.version-block{
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#close-sidebar-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: var(--font-size-19);
  cursor: pointer;
  color: var(--light-slate-brown-v1);
}

#close-sidebar-btn:hover {
  color: var(--color-text-primary);
}

/* If the sidebar is visible, adjust the iframe width */
iframe {
  transition: width 0.3s ease;
}

/* Version history toggle button */
#version-history-icon {
  cursor: pointer;
  z-index: 1001;
  margin-left: 10px;
  padding-right: 1rem;
}

#file-details-icon {
  cursor: pointer;
  z-index: 1001;
}

#file-details-icon img{
  width: auto;
  height: 2.4rem;
  padding-top: 0.3rem;
}

#content-iframe{
  width: 89%;
  height: 89%;
  padding-bottom:3.4rem;
  position: absolute;
  padding-right: 1rem;
}

#version-history-icon img {
  width: auto;
  height: 2.4rem;
  padding-top: 0.3rem;
}

.linkshare-openFolder {
    padding-left: 2rem;
}

.fileRightWrap ul {
  display: flex;
  list-style: none;
  margin-bottom: 0px;
  justify-content: end;
  align-items: center;
}

.fileRightWrap ul li {
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  cursor: pointer;
  text-decoration: none;
  align-items: center;
  position: relative;
  align-items: center;
  position: relative;
  float: left;
}

.fileRightWrap ul li:last-child {
  background-image: none;
}

.fileMangerDropDown {
  position: absolute;
  top: 5.5rem;
  background: var(--white);
  border: 0.1rem solid var(--color-border);
  box-shadow: 0px 1px 8px 0px rgb(from var(--color-text-primary) r g b / 20%), 2px 4px 22px 0px rgb(from var(--color-text-primary) r g b / 10%);
  width: 100%;
  max-width: 100%;
  padding-top: 0 !important;
  margin-bottom: 0px;
  z-index: 999;
  right: 0;
  border-radius: 0.4rem;
  list-style: none;
  padding-left: 0;

}

.fileMangerDropDown li span {
  padding-left: 1.8rem !important;
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
  padding-right: 1.8rem !important;
  line-height: 2rem !important;
}

.leftMenuWarp {
  position: relative;
  margin-left: 2.0rem;
  margin-right: 2.0rem;
  margin-top: 2.0rem;
}

.fileMangerDropDown li {
  margin-bottom: 0px !important;
  list-style: none;
  display: block;
}

.fileMangerDropDown li span {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  height: 4.2rem;
}

.fileMangerDropDown li span img {
  width: 100%;
  max-width: 2.2rem;
  max-height: 2.2rem;
}

.fileMangerDropDown li:last-child {
  border-bottom: none;
}
.fileMangerDropDown li:hover {
  background-color: var(--dark-white); /* Change to your desired hover color */
  color: var(--black);
}

.leftMenuDropDown {
  background: var(--white);

  width: 100%;
  max-width: 100%;
  padding-top: 0 !important;
  margin-bottom: 0px;
  z-index: 99;
  left: 0;
  margin-top: 0rem;
  clear: both;
  padding-top: 0rem !IMPORTANT;
}

.leftMenuDropDown li span img {
  width: 100%;
  max-width: 2.2rem;
  max-height: 2.2rem;
}

.card-file-manager:hover {
  background-color: var(--dark-white);
}

.fmPreviewF1 ul {
  position: absolute;
  right: 0;
  z-index: 999;
  background: var(--white);
  width: 100%;
  left: 100%;
  box-shadow: 0px 1px 8px 0px rgb(from var(--color-text-primary) r g b / 20%), 2px 4px 22px 0px rgb(from var(--color-text-primary) r g b / 10%);
  top: 0 !important;
  min-width: 21rem;
  max-width: 15%;


  }

.fmPreviewF1 ul li {
  list-style: none;
  display: flex;
  align-items: center;
  background: var( --white);
  padding: 1.4rem 1.6rem;
  cursor: pointer;
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 1.9rem;
}



.fmFIconF2 {
  margin-right: 1.5rem;
  text-align: center;
  /* Inline images carry baseline descent, which pushed the icon a couple of
     pixels below the label; a zero-line-height flex box removes it. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  line-height: 0;
}

.fmFIconF2 img{
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.fmPreviewF1 ul li:hover {
  background: var(--dark-white);
  color: var( --black);
}

.renameInput {
  flex: 1;
  padding: 1.6rem 0.9rem;
  gap: 10px;
  color: var(--dark-gray);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 1.8rem;
  margin-right: -2rem;
}

.renameInputSahre {
  border: 1px solid var(--gray);
  border-radius: 3px;
  width: 100%;
  height: 4.4rem;
  border-bottom: 1px solid var(--red);
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-15);
  line-height: 1.7rem;
  /* identical to box height, or 131% */
  align-items: center;
  color: var(--black);
  padding-left: 1.3rem;
  background: none;
}

.fileManagerCommonPopup {
  width: 64.8rem;
  margin: 0 auto;
  border-radius: 0.9rem;
  background-color: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 1px 8px 0px rgb(from var(--color-text-primary) r g b / 20%);
  padding-bottom: 1rem;
  padding-left: 2.5rem;
  padding-top: 2.5rem;
  padding-right: 2.5rem;

}

.fileHeadf1 {
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-17);
  line-height: 2.1rem;
  /* identical to box height, or 131% */
  padding-bottom: 1.5rem;
  color: var(--black);
}

.fileCommonFooterBtn {
    display: flex;
    align-items: center;
    padding-top: 1.3rem;
    justify-content: flex-end;
}
.fileCommonFooterBtn2 {
  padding-left: 40.3rem;

}
.fileCommonFooterBtn3 {
  padding-left: 36rem;

}
.fileUnCheckIconf2 {
  background-image: url(../../images/filemanger/uncheckbox.svg);
  background-image: url(../../images/filemanger/uncheckbox.svg);
  text-decoration: none;
  width: 2.5rem;
  height: 2.5rem;
  top: 0;
  top: 1.3rem;
  left: 0;
  cursor: pointer;
  visibility: hidden;
  background-repeat: no-repeat;
  background-position: 0;
  position: absolute;
  z-index: 998;
  background-color: var(--dark-white);
}

.fileCheckIconf2 {
  background: url(../../images/filemanger/checkbox.svg) no-repeat right center;
  background: url(../../images/filemanger/checkbox.svg) no-repeat right center;
  text-decoration: none;
  width: 2.5rem;
  height: 2.5rem;
  top: 0;
  top: 1.3rem;
  left: 0;
  cursor: pointer;
  visibility: hidden;
  background-repeat: no-repeat;
  background-position: 0;
  position: absolute;
  z-index: 998;
  background-color: var(--dark-white);
}

.card-file-manager:hover .fileUnCheckIconf2 {
  visibility: visible;
}

.fileCheckIcon {
  display: block;
  background: url(../../images/filetypeicon/checkbox.svg) no-repeat right center;
  text-decoration: none;
  background-size: 100%;
  position: absolute;
  z-index: 9;
  width: 2rem;
  height: 2rem;
  top: 0.4rem;
  right: 1rem;
}

.folderUnCheckIconf2 {
  background-image: url(../../images/filetypeicon/uncheckbox.svg);
  text-decoration: none;
  width: 2rem;
  height: 2rem;
  top: 1.3rem;
  right: 0;
  cursor: pointer;
  visibility: hidden;
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: 0;
  position: absolute;
  z-index: 999;
}

.folderCheckIconf2 {
  background: url(../../images/filetypeicon/checkbox.svg) no-repeat right center;
  text-decoration: none;
  width: 2rem;
  height: 2rem;
  top: 1.3rem;
  right: 0;
  cursor: pointer;
  visibility: hidden;
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: 0;
  position: absolute;
  z-index: 999;
}

.card-folder-manager:hover .folderUnCheckIconf2 {
  visibility: visible;
}

.folderCheckIcon {
  display: block;
  background: url(../../images/filetypeicon/checkbox.svg) no-repeat right center;
  text-decoration: none;
  background-size: 100%;
  position: absolute;
  z-index: 9;
  width: 2rem;
  height: 2rem;
  top: 0.4rem;
  right: 1rem;
}

.filef3 {
  display: flex;
  align-items: center;
}

.fileTabF5 ul {
  display: inline-flex;
  list-style: none;
  border-bottom: 0.1rem solid var(--dark-gray);
  width: 94.5%;
}

.fileWrapF5 {
  padding-top: 2.5rem;
  padding-bottom: 1rem;
}

.fileTabsF6 ul {
  list-style: none;
}

#fm-movepopup .fileTabsF6 ul {
  padding-block: 0.5rem;
}

.filef4 {
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-15);
  line-height: 21px;
  /* identical to box height, or 191% */
  color: var(--brown);
  padding-right: 2rem;
}

.fileFolderF4 .fileFolderIconWrap {
  border: 0.1rem solid var(--gray);
  border-radius: 0.5rem;
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-15);
  /* identical to box height, or 191% */
  color: var(--black);
  padding: 0.6rem 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.fileTabF5 ul li span {
  font-weight: 500;
  font-size: var(--font-size-15);
  line-height: 2rem;
  color: var(--black);
  padding: 0px 0rem;
  padding-bottom: 0.8rem;
  display: inline-block;
  cursor: pointer;
}

.fileTabsF6 ul {
  margin-bottom: 0;
  height: calc(100vh - 68rem);
  overflow: auto;
  min-height: calc(100vh - 85rem);
}

.fileTabsF6 ul li span {
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-15);
  line-height: 2.8rem;
  color: var(--brown);
  width: 100%;
  max-width: 80%;
}

.moveState {
  color: var(--black) !important;
  font-weight: 600 !IMPORTANT;
  background: var(--color-surface);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 11px;
  margin-right: 10px;
  cursor: pointer;
}

.fileFolderF4 {
  display: flex;
  align-items: center;
}

.fileMoveFolder {
  padding-left: 2.6rem;
  padding-right: 0.5rem;
}

.fileIconF1 img {
  vertical-align: middle;
  width: 100%;
  max-width: 2rem;
  height: 100%;
  max-height: 2rem;
}

.bgColorMove {
  background: var(--dark-gray) !important;
  border-color: var(--dark-gray) !important;
}

.fileFolderF4 span img {
  padding-right: 0.3rem;
}

.fileTabsF6 ul li {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  margin-right: 2rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.fileTabsF6 ul li:hover {
  background: var(--dark-white);
  border-radius: 100rem;
}

.selectedMvLi {
  background: var(--dark-white);
  border-radius: 0.3rem;
}

.fileTabF5 ul li span.selected {
  border-bottom: 2px solid var(--black);
  position: relative;
  color: var(
  --black) !important;
  font-weight: 600;
}

/* forward files */
.forwardFilesT1 ul {
  display: inline-flex;
  list-style: none;
  justify-content: space-around;
  margin-bottom: 0px;
}

.forwardFilesT1 ul li span {
  font-weight: 500;
  font-size: var(--font-size-15);
  line-height: 1.8rem;
  color: var(--dark-gray);
  padding: 0.8rem 1rem;
  padding-bottom: 0.8rem;
  display: flex;
  cursor: pointer;
  border: 1px solid var(--dark-gray);
  border-radius: 0.4rem;
}

.forwardFilesT1 ul li {
  margin-right: 1.5rem;
}

.forwardFilesT1 ul li span:hover {
  background: var(--dark-gray) !important;
  border-color: var(--dark-gray) !important;
  color: var(--white);
}

.forwardFilesT1 ul li span.selected {
  background: var(--dark-gray) !important;
  border-color: var(--dark-gray) !important;
  color: var(--white);
}

.fileManagerT3 {
  position: inherit;
  width: 100%;
  box-shadow: none;

  padding-bottom: 0px;
  max-height: 23rem;
  padding-left: 0;
  padding-right: 0.3rem;

}

.forwardFilesT1 {
  margin-bottom: 2rem;
}

.fileManagerBtnT3 {
  margin-top: 2rem;
}

.file-box-icon {
  position: absolute;
  right: 1.2rem !important;
  top: 40%;
}

.file-check-default {
  background-image: url(../../images/filetypeicon/uncheckbox.svg);
  background-repeat: no-repeat;
  width: 2rem;
  background-position: 50%;
  background-size: 100%;
  height: 2rem;
  cursor: pointer;
}

.list-section .file-check-default {
  display: none;
}

.list-section:hover .file-check-default {
  display: block;
}

.list-section:hover {
  background: rgb(from var(--color-background) r g b / 60%);
}

.fileMoveFolder .form_custom_width {
  width: 100% !important;
}

.fileManagerT3 .list-section.contact {
  padding: 0 0.4rem;
}

.file-check-active {
  background-image: url(../../images/filetypeicon/checkbox.svg);
  background-repeat: no-repeat;
  width: 2rem;
  background-position: 50%;
  height: 2rem;
  cursor: pointer;
  background-size: 100%;
}

.fileIconHoverState {
  display: none;
  position: absolute;
  z-index: 99;
}

.fileTabsF6 ul li:hover .fileIconHoverState {
  display: none;
}

.fileIconHoverActiveState {
  display: block;
  position: absolute;
  z-index: 99;
}

.fileTabsF6 ul li:hover .fileIconHoverActiveState {
  display: block;
}

.fileCheckWrapF3 {
  display: flex;
  align-items: center;
  width: 5rem;
  padding-left: 1.3rem;
}

.fileTabF5 ul li {
  padding-right: 3.3rem;
}

.moveHoverStateF1 {
  display: none;
}

#fm-movepopup .fileTabsF6 ul li:hover .moveHoverStateF1 {
  display: flex;
  align-items: center;
  justify-content: end;
  position: absolute;
  right: 1rem;
}

#fm-movepopup .moveHoverStateF1 .show-insider {
  display: flex;
}

.createNewF1 {
  width: 80%;
  padding-left: 1%;
}

.breadcrumbs-container {
  align-items: center;
  display: flex;
  margin-right: auto;
}

.breadcrumbs-container ol {
  line-height: 1.2;
  padding-left: 0.5rem !important;
}

.breadcrumbs-container li:first-child, .breadcrumbs-container li:last-child {
  display: inline-flex;
  margin-right: 0.8rem;
}

.breadcrumbs-container li a:link, .breadcrumbs-container li a:visited {
  color: var(--color-text-primary);
}

.breadcrumbs-container li a {
  align-items: center;
  display: flex;
  background: none;
  padding: 0 0 0 0.2rem;
}

.breadcrumbs-container li [property=name] {
  display: inline-block;
  margin-right: 0.5rem;
}

.breadcrumbs-container li .breadcrumb:after {
  content: "";
  display: block;
  flex-shrink: 0;
  background-image: url(../../images/icons/leftarrowF1.svg);
  width: 1.2rem;
  height: 1.2rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.breadcrumbs-container li:last-child .breadcrumb:after {
  background: none;
}

.breadcrumbs-container li a span {
  color: var(--black);
  font-size: var(--font-size-15);
  font-weight: 500;
}

.breadcrumbActive {
  color: var(--dark-gray) !important;
}
.TabActive {
  background-color: var(--dark-white) !important;
}

.createAccountFileF3 {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  left: 0;
}

.createAccountFileF3:before {
  content: "";
  position: absolute;
  background-color: rgb(from var(--dark-black) r g b / 30%);
  height: 100%;
  width: 100%;
  left: 0;
}

.newFoldert2 {
  position: absolute;
  z-index: 999;
  background: var(--white);
  width: 100%;
  bottom: 0;
  border-radius: 1rem;
  padding: 1.5rem 2.0rem;
}

.newFoldert2 h3 {
  font-style: normal;
  font-weight: 600;
  font-size: var(--font-size-17);
  line-height: 2.1rem;
  /* identical to box height, or 131% */
  color: var(--black);
}

.createNewBtnF2 {
  justify-content: end;
  padding-bottom: 0rem;
  padding-top: 2.6rem;
  align-items: center;
}

.fileCloseBtn {
  position: absolute;
  right: 2.2rem;
  top: 2rem;
  cursor: pointer;
}

.fileCloseBtn img {
  width: 100%;
  max-width: 1.4rem;
  max-height: 1.4rem;
}

.fileCloseBtn.fileCloseBtnF2 {
  top: 2.8rem;
  right: 2.5rem;
}

.shareFileHeader {
  font-style: normal;
  font-weight: 600;
  font-size: var(--font-size-17);
  line-height: 21px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 80%;
}

.shareFileSearchF1 {
  border: 0.1rem solid var(--gray);
  border-radius: 3px;
  width: 100%;
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-15);
  line-height: 1.7rem;
  display: flex;
  align-items: center;
  color: var(--black);
  padding-left: 1.3rem;
  background: var(--dark-white);
  margin-bottom: 2.5rem;
  position: relative;
}

.FileCanView {
  color: var(--black);
  font-size: var(--font-size-15);
  font-weight: 600;
}

.shareFileSearchF2 {
  display: flex;
  align-items: center;
  position: relative;
  padding-right: 0.5rem;
}

.fileLink {
  font-size: var(--font-size-15);
  font-weight: 500;
  padding-right: 1.8%;
  padding-left: 1.8%;
}

.fileSearchF6 i img {
  vertical-align: text-top;
}

.fileLanguage {
  display: flex;
  align-items: center;
  max-width: initial;
  position: relative;
  cursor: pointer;
}

.fileT1 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.fileSearchF6 {
  width: 100%;
  max-width: 70%;
}

.FileCanViewt1 {
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--black);
  padding-right: 1.8%;
}

.fileSearchF4 {
  width: 100%;
  max-width: initial;
  text-align: right;
  padding-right: 2%;
}

.file-share_search-result {
  position: relative;
  width: 100%;
}

.fileSearchF3 {
  display: flex;
  align-items: start;
  gap: 1rem;
  max-width: initial;
  width: 100%;
  flex-wrap: nowrap;
  align-content: flex-start;
  margin-top: 1.5rem;
  position: relative;
}

.fileSearchF5 {
  align-items: center;
  width: 50%;
  padding-right: 1.2rem;
}

span.FileCanViewt2 {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-size: var(--font-size-15);
  font-weight: 500;
  color: var(--black);
  padding-right: 1.8%;
  padding-right: 1rem;
}

span.fileT2 {
  display: flex;
  position: relative;
  justify-content: end;
  cursor: pointer;
  padding-right: 1rem;
  align-items: center;
}

.fileEmailT3 {
  width: 100%;
  float: left;
}

.shareFileT2 {
  align-items: center;
  max-height: calc(100vh - 70rem);
  padding-right: 0.5%;
  padding-left: 0.3%;
  overflow: auto;
}

.fileAccessHaedingT1 {
  color: var(--black);
  font-size: var(--font-size-15);
  font-weight: 600;
}

.shareFilesAcces {
  padding-top: 1rem;
  position: relative;
}

.fileEamilT1 {
  color: var(--white);
  border-radius: 0.3rem;
  font-size: var(--font-size-15);
  font-weight: 600;
  margin-right: 1rem;
  width: 4.2rem;
  height: 4.2rem;
  text-align: center;
  line-height: 4.2rem;
}

.emailUserNameT2 {
  font-size: var(--font-size-15);
  font-weight: 400;
  color: var(--black);
  line-height: 2.1rem;
}

.emailUserName{
  font-weight: 600;
}

.fileEamilWrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.eamilFullNameT2 {
  display: flex;
  flex-direction: column;
  padding-left: 0.3rem;
}

.emailUserEamilT2 {
  font-size: var(--font-size-11);
  font-weight: 400;
  color: var(--brown);
}

.fileOwnerTf2 {
  font-size: var(--font-size-15);
  font-weight: 500;
  color: var(--black);
  line-height: 4rem;
  display: inline-block;
  float: right;
  cursor: pointer;
}

.fm-share-accessTrigger {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  border: none;
  background: transparent;
  padding: 0.4rem 0.2rem 0.4rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

.fm-share-accessTrigger .fileOwnerTf2 {
  float: none;
  line-height: 1.9rem;
  cursor: inherit;
}

.viewer-editor-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.viewer-editor-remove img {
  pointer-events: none;
}

.shareFileWrapF6 {
  display: flex;
  padding-bottom: 1rem;
  align-items: center;
  padding-top: 0.5rem;
}

.shareFileBtn {
  justify-content: space-between;
  padding-top: 2rem;
  padding-bottom: 0.3rem;
}

.fileCopyLink {
  vertical-align: unset;
  width: 1.8rem;
  margin-right: 0.5rem;
  height: 1.5rem;
  position: relative;
  top: 0.3rem;
}

.canViewDropDown ul {
  position: absolute;
  list-style: none;
  background: var(--white);
  padding: 0rem 0;
  box-shadow: 0px 4px 17px 0px rgb(from var(--color-text-primary) r g b / 15%);
  z-index: 9;
  border: 0.1rem solid var(--gray);
  border-radius: 0.3rem;

}

.canViewDropDown li {
  list-style: none;
  color: var(--brown);
  font-size: var(--font-size-15);

  font-weight: 550;
  line-height: 1.9rem;
  border-bottom: 0.1rem solid var(--gray);
  padding: 0 1rem;
  line-height: 4.8rem;
  cursor: pointer;
  padding-right: 2rem;
}

.canViewDropDown ul {
  margin-bottom: 0px;
}

.canViewDropDown li:last-child {
  border-bottom: navajowhite;
}

.canViewDropDown li:hover {
  background: var(--light-slate-gray);
}

.fileEmailOwnerf1 {
  float: right;
}

/* --- General access: scope on the left, its role on the right ---------------
   Mirrors the familiar Drive layout: an icon, the scope name with a plain-words
   description under it, and a separate role control that disappears for
   Restricted (which grants no role of its own). */
.fm-share-generalAccess {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  position: relative;
  width: 100%;
  padding: 0.8rem 0;
}

.fm-share-scopeIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  /* surface-alt (not --dark-white) so the chip stays readable in dark mode,
     where the icon itself is near-white. */
  background: var(--color-surface-alt);
  color: var(--color-text-primary);
}

.fm-share-scopeMain {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}

.fm-share-generalAccess .fm-share-currentShareByOption,
.fm-share-currentRoleOption {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 1.6rem;
  cursor: pointer;
  font-size: var(--font-size-15);
  font-weight: 500;
  color: var(--color-text-primary);
}

.fm-share-generalAccess .fm-share-currentShareByOption:hover,
.fm-share-currentRoleOption:hover {
  background: var(--light-slate-gray);
}

.fm-share-generalAccess .fm-share-dropdownIcon {
  width: 1.8rem;
  height: 1.8rem;
}

.fm-share-scopeDescription {
  display: block;
  padding-left: 0.8rem;
  font-size: var(--font-size-13);
  color: var(--color-text-secondary);
}

.fm-share-roleWrap {
  position: relative;
  flex: 0 0 auto;
}

.fm-share-roleOptions ul,
.fm-share-shareByOptions ul {
  max-height: 26rem;
  overflow-y: auto;
}

.fm-share-roleOptions ul {
  right: 0;
  left: auto;
}

.canViewDropDown li.fm-share-linkScopeGroup {
  color: var(--color-text-secondary);
  font-size: var(--font-size-13);
  font-weight: 600;
  line-height: 3rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  cursor: default;
  border-bottom: none;
}

.canViewDropDown li.fm-share-linkScopeGroup:hover {
  background: transparent;
}

.canViewDropDown li.fm-share-linkScopeOption,
.canViewDropDown li.fm-share-linkRoleOption {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  line-height: 1.9rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.fm-share-linkScopeText {
  display: flex;
  flex-direction: column;
}

.fm-share-linkScopeHint {
  font-size: var(--font-size-13);
  font-weight: 400;
  color: var(--color-text-secondary);
}

.canViewDropDown li.is-active {
  font-weight: 600;
}

/* Viewers can't change access — the backend refuses it, so the row reads as
   informational rather than actionable. */
.fm-share-shareByDisplay.is-readonly .fm-share-generalAccess {
  opacity: 0.6;
}

.fm-share-shareByDisplay.is-readonly .fm-share-currentShareByOption,
.fm-share-shareByDisplay.is-readonly .fm-share-currentRoleOption {
  cursor: default;
}

.fm-share-shareByDisplay.is-readonly .fm-share-currentShareByOption:hover,
.fm-share-shareByDisplay.is-readonly .fm-share-currentRoleOption:hover {
  background: transparent;
}

.shareFileSearchF2 .canViewDropDown ul {
    left: 100%;
    width: max-content;
    top: 0rem;
    left: 0;
    margin-left: auto;
    margin-top: 10rem;
    min-width: 15rem;
}

/* The legacy offset positioned a menu against the whole people-with-access
   block; the two General access menus anchor to their own trigger instead. */
.shareFileSearchF2 .fm-share-shareByOptions ul,
.shareFileSearchF2 .fm-share-roleOptions ul {
  margin-top: 0.4rem;
  top: 100%;
  min-width: 24rem;
}

.shareFileSearchF2 .fm-share-roleOptions ul {
  right: 0;
  left: auto;
  min-width: 26rem;
}


.fileAddedMemberT2 {
  width: 100%;
  overflow-x: scroll;
  position: absolute;
  left: 4rem;
  flex-wrap: wrap;
}

.fileaddMemberT1 {
  position: absolute;
  top: 9rem;
  left: 0;
  z-index: 9999;
  width: 100%;
  background: var(--white);
  max-height: calc(100vh - 69rem);
  padding: 1%;
  overflow: auto;
}

.fileAddedMemberT2 li {
  list-style: none;
  padding-right: 3%;
}

.addedT2 {
  position: relative;
}

.addClose {
  position: absolute;
  top: -2rem;
  right: -0.5rem;
}

.fileUserListT2 {
  margin-bottom: 0;
  padding-top: 1rem;
}

.fileUserListT2 li {
  list-style: none;
  padding-bottom: 1rem;
  padding-bottom: 0.8rem;
  padding-top: 0.8rem;
}

.userProfileTestT3 {
  display: block;
  color: var(--black);
  font-size: var(--font-size-15);

  font-weight: 600;
  line-height: 2.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  float: left;
}

.usreWrapt1 {
  display: block;
  width: 100%;
  overflow: hidden;
}

.userProfileT2 {
  padding-right: 2.5%;
  float: left;
  margin-top: 1.3rem;
}
.searchUserProfile{
width: 5.1rem;
height: 5.1rem;
}

.useraddT4 {
  color: var(--red);
  font-weight: 600;
}

.fileHeaderT2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 1.3rem 0rem 1.3rem 1.3rem;
  border-bottom: 1px solid var(--gray);
  justify-content: space-between;
}

.filelistT3 {
  color: var(--black);
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: 1.9rem;
  width: 100%;
  max-width: 36.5%;
}

.filelistT4 {
  width: 100%;
  color: var(--black);
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: 1.9rem;
  text-align: left;
  max-width: 22%;
}

.filelistT5 {
  width: 100%;
  color: var(--black);
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: 1.9rem;
  max-width: 15%;
}

.filelistT6 {
  width: 100%;
  color: var(--black);
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: 1.9rem;
  text-align: left;
  max-width: 20%;
}

.fileContainerF1 {
  display: flex;
  align-items: center;
  padding: 1.6rem 3rem 1.6rem 1.3rem;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--white);
  cursor: pointer;
  position: relative;
}

.fileItemF1 {
  width: 4%;
}

.fileItemF2 {
  color: var(--black);
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: 1.9rem;
}

.fileItemF3 {
  color: var(--brown);
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: 1.9rem;
  width: 100%;
  text-align: left;
  max-width: 23%;
}

.fileItemF4 {
  color: var(--black);
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: 1.9rem;
  width: 17%;
  text-align: center;
}

.fileItemF5 {
  color: var(--black);
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: 1.9rem;
  width: 24%;
  text-align: right;
  padding-right: 6%;
}

.fileItemF1 img {
  width: 100%;
  max-width: 2.8rem;
  max-height: 2.8rem;
  object-fit: cover;
  object-fit: cover;
}

.fileListingT1 {
  margin-right: 0rem;
  height: 100vh;
  overflow-y: scroll;
  max-height: calc(100vh - 26rem - var(--fm-trash-banner-space, 0rem));
  margin-bottom: 3rem;
}
.fileContainerF1:hover {
  background: var(--dark-white);
}

/* file manger global search */
.fileHeaderIcon {
  display: block;
  background: url(../../images/icons/filefilter.svg) no-repeat center center;
  text-decoration: none;
  position: absolute;
  top: 0rem;
  right: 0rem;
  width: 4rem;
  height: 4rem;
  z-index: 9999;
  cursor: pointer;
  background-size: 2rem;
}

.fileDataF1 {
  border-radius: 0.5rem;
  border: 1px solid var(--gray);
  background: var(--white);
  width: 100%;
  display: block;
  box-shadow: 0px 4px 8px 0px rgb(from var(--color-text-primary) r g b / 10%);
}

.fileLabelT2 {
  color: var(--black);
  font-size: var(--font-size-15);
  font-weight: 600;
  line-height: 1.7rem;
}

.fileSearchF1 {
  align-items: center;
  clear: both;
}


.fileLabelT3 {
  border-radius: 0.3rem;
  border: 1px solid var(--gray);
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 1.2rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  background: url(../../images/icons/fileDownCaret.svg) no-repeat right 0.5rem center;
  position: relative;
  cursor: pointer;
}

.fileLabelT1 {
  width: 50%;
}

.fileSearchOption {
  padding: 1.8rem 2rem;
}

.fileWrapT2 {
  display: flex;
  align-items: center;
}

.filelabelT4 {
  width: 100%;
  max-width: 26rem;
  float: right;
  padding-top: 1.5rem;
}

.fileCheckBoxt2 {
  color: var(--brown);
  font-size: var(--font-size-15);

  font-weight: 500;
  line-height: 1.7rem;
}

.fileCheckBoxt1 {
  background-image: url(../../images/filetypeicon/uncheckbox.svg);
  text-decoration: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0;
  /* file manger global search */
  padding: 8%;
  margin-right: 7%;
}

.empty-folder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70vh;
}
img.empytfoldericon{
  width: 28.4rem;
  height: 14.4rem;
  margin-bottom: 4rem;
}
.title-empty1 {

  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.53;
  text-align: center;
  color: var(--black);
  margin-bottom: 0rem;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0px 2.5rem;
}

.title-empty2 {

  font-size: var(--font-size-15);
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.53;
  text-align: center;
  color: var(--brown);
  margin-bottom: 0rem;
}

.filetrashT1 {
  display: flex;
  align-items: center;
  width: 100%;
}

.filelabelT5 {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.fileApprovalsT3 {
  border: none;
  flex-direction: column;
  margin-bottom: 0;
}

.fileApprovalsT3 .filelabelT5 {
  width: 100%;
  display: block;
  margin-bottom: 0;
}

.fileApprovalsT3 .filelabelT4 {
  max-width: 100%;
  padding-top: 0;
}

.fileApprovalsT3 .fileCheckBoxt1 {
  padding: 2.7%;
  margin-right: 1.2rem;
}

.fileApprovalsT3 .filetrashT1 {
  margin-bottom: 1rem;
}

.fileApprovalsT3 .fileLabelT3 {
  border: none;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  cursor: inherit;
  background-image: none;
}

.fileSearchDropT1 ul {
  position: absolute;
  top: 5rem;
  width: 100%;
  background: var(--white);
  left: 0;
  border-radius: 0.3rem;
  border: 1px solid var(--gray);
  background: var(--white);
  box-shadow: 0px 4px 10px 0px rgb(from var(--color-text-primary) r g b / 10%);
  z-index: 99;
  padding: 1rem 1rem;
  overflow: auto;
  max-height: calc(100vh - 64rem);

}

.fileSearchDropT1 ul li {
  list-style: none;
  line-height: 3.3rem;
}

.fileDropT2 {
  color: var(--brown);
  font-size: var(--font-size-15);

  font-weight: 500;
}

.fileIconT3 {
  margin-right: 0.5rem;
}

.fileDropT2.fileAnySaerch {
  background: var(--dark-white);
  width: 100%;
  display: block;
  padding-left: 2.5rem;
}

.fileLabelAnyT2 ul {
  padding-left: 0;
  padding-right: 0;
}

.fileLabelAnyT2 .fileDropT2 {
  padding-left: 0;
}

.fileLabelAnyT2 .fileDropT2 {
  padding-left: 1.3rem;
}

.fileLabelAnyT2 ul li:hover {
  background: var(--dark-white);
}

.filetypeInputT3 {
  border-radius: 0.3rem;
  border: 0.1rem solid var(--gray);
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 1.2rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  position: relative;
  color: var(--brown);
  font-size: var(--font-size-15);

  font-weight: 500;
  line-height: 1.7rem;
}

.fileLabelF1 {
  border: none;
  background-image: none;
  display: block;
  padding-left: 0;
}

.fileSearchBtnT1 {
  display: flex;
  justify-content: end;
  gap: 8px;
}

.fileSaerchTestT5 {
  color: var(--black);
  font-size: var(--font-size-15);

  font-weight: 500;
  line-height: 2.2rem;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}

.fileSearchResultT1 ul {
  display: flex;
  list-style: none;
  align-items: center;
  border-bottom: 0.1rem solid var(--gray);
  clear: both;
  padding-bottom: 1.5rem;
  width: 100vw;
}

.fileSerachT3 {
  border-radius: 0.2rem;
  background: var(--gray);
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  cursor: pointer;
}

.fileSearchResultT1 ul li {
  margin-right: 0.8rem;
  position: relative;
}

.fileSearchBgT1 {
  background: none;
}

.fileResultDropT1 ul {
  position: absolute;
  left: 0;
  z-index: 100;
  background: var(--white);
  width: 100%;
  border: 0.1rem solid var(--color-border);
  box-shadow: 0px 4px 8px rgb(from var(--color-text-primary) r g b / 10%);
  border-radius: 0.2rem;
  top: 3.3rem;

}

.fileResultDropT1 ul {
  border-bottom: none;
  display: block;
  width: 100vw;
  max-width: 12vw;
}

.fileResultDropT1 ul li .fileListT2 {
  color: var(--brown);
  font-size: var(--font-size-15);

  font-weight: 500;
  line-height: 3.8rem;
  padding: 1.5rem 1rem;
}

.fileResultDropT1 ul li {
  line-height: 3.3rem;
  border-bottom: 1px solid var(--gray);
  margin-right: 0;
  cursor: pointer;
}

.fileResultDropT1 ul li:hover {
  background: var(--gray);
}

.file-hide-fm {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 3rem;
  cursor: pointer;
  left: 0;
  padding: 0;
  z-index: 3;
  font-size: 0;
  border: none;
}

.fileFolderT3 {
  display: flex;
  align-items: center;
  margin-left: 3rem;
}

.folderCard .filecheckboxf1 {
  left: 1rem;
  top: 1.8rem;
}

.foliderCardT6 .option-card-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1rem;
}

.foliderCardT6 .folderIcon {
  padding-right: 0rem;
}

.foliderCardT6 {
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
}

.foliderCardT3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.8rem;
  padding-right: 0.3rem;
  cursor: pointer;
}

.card-file-manager:hover .folderIconF1 {
  display: block;
  visibility: visible;
  background-color: var(--dark-white);
}

.folderIconF1 {
  display: none;
  z-index: 998;
  visibility: hidden;
  left: 2.2rem;
  width: 2.7rem;
  margin-left: auto;
  margin-right: auto;
}

.fileMoreF3 {
  display: none;
}

.fileMoreF3 {
  display: block;
  cursor: pointer;
}

.cardFoterTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  width: 100%;
  max-width: 75%;
  max-width: 80%;
  color: var(--black);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 1.976rem;
  /* 152% */
  align-items: center;
}

.fileCardF4 {
  display: inline-block;
  text-align: center;
  cursor: pointer;
}

.fileCardF4 img {
  width: auto;
}

.fileFavourite {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.foliderCardT6 .folderIconF1 img {
  vertical-align: middle;
}

/* bread curm */
.fileMagerTopLeft .breadcrumb {
  padding: 0;
  margin-bottom: 0px;
  cursor: pointer;
  background: none;
}

.fileMagerTopLeft span.black-text {
  color: var(--black);
  font-size: var(--font-size-15);

  font-weight: 700;
  line-height: 22px;
}

.fileMagerTopLeft .breadcrumb-item.active {
  color: var(--color-text-primary);
}

.fileMagerTopLeft li.breadcrumb-item {
  cursor: pointer;

  color: var(--dark-gray);

  font-size: var(--font-size-17);
  font-style: normal;
  font-weight: 500;
  /* 111.765% */
  display: flex;
  justify-content: center;
  align-items: center;
}

.fileMagerTopLeft .breadcrumb-item+.breadcrumb-item::before {
  display: none;
}

/* multiple selection */
.fileMultiple ul {
  margin-bottom: 0;
  list-style: none;
  display: flex;
  align-items: center;
  padding-left: 2rem;
  background: var(--light-slate-gray);
  border-radius: 100rem;
  width: 98.5%;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.fileMultiple ul li {
  display: inline-block;
  cursor: pointer;
  text-align: center;
  position: relative;
}

.selectedF2 {
  line-height: 1.9;
  font-size: var(--font-size-15);
  color: var(--black);
  font-weight: 600;
}

.fileMultiple ul li .selectedF1 {
  width: 100%;
  max-width: 1.5rem;
  max-height: 1.5rem;
}

.fileMultiple ul li span {
  padding: 0.3rem 0.8rem;
}

.fileMultiple ul li .selectedF1 img {
  /* width: 100%; */
  /* max-width: 2rem;
max-height: 2rem; */
}

.fileMultiple ul li img {
  /* width: 100%; */
  /* min-width: 2.2rem;
min-height: 2.2rem; */
}

.fileMultiple ul li .selectedF4 img {
  /* width: 100%; */
  /* max-width: 1.8rem;
max-height: 1.8rem; */
}

.fileMultiple ul li .selectedF5 img {
  /* width: 100%; */
  /* max-width: 1.7rem;
max-height: 1.7rem; */
}

/* Multi-select "Share" action — filesShared.svg is authored at the same 20px as
   the neighbouring Move/Delete icons, so it needs no scaling; keep it vertically
   centred with the rest of the row. */
.fileMultiple ul li .selectedF8 img {
  vertical-align: middle;
}

.fileMultiple ul li .selectedF6 img {
  /* width: 100%; */
  /* max-width: 1.8rem;
max-height: 1.8rem; */
}

.fileMultiple ul li .selectedF6 img {
}

.fileMultiple ul li .selectedF7 img {
  /* width: 100%; */
  /* min-width: 0.3rem;
min-height: 0.3rem; */
}

.fileMultiple ul li:hover {
  /* background: var(--gray); */
  /* border-radius: 0.3rem; */
}

.selectedF1, .selectedF2, .selectedF3, .selectedF4, .selectedF5, .selectedF6, .selectedF7 {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 0px auto;
  justify-content: center;
}

.multiplePreviewF1 ul {
  align-items: baseline;
  display: block;
  left: 0;
  padding-left: 0;
  padding-top: 0;
}

.multiplePreviewF1 ul li {
  display: block;
  text-align: left;
}

/* share flow */
.fileViewPopup {
  position: fixed;
  right: 0;
  width: 100%;
  max-width: 43rem;
  height: 100vh;
  background: var(--white);
  z-index: 999;
  padding: 1rem 0 0rem 0rem;
  border: 0.1rem solid var(--gray);
  background: var(--white);
  box-shadow: -3px 0px 4px 0px rgb(from var(--color-text-primary) r g b / 50%);
}

.fileViewPopup-scroll {
  height: calc(100vh - 7.7rem) !important;
  overflow: auto;
}

.fileViewPopupTitle {
  color: var(--black);

  font-size: var(--font-size-17);
  font-style: normal;
  font-weight: 600;
  line-height: 1.9rem;
  display: inline-block;
}

.fileViewPopuRightS3 ul {
  display: flex;
  list-style: none;
  justify-content: space-around;
  margin-bottom: 0;
  align-items: center;
  justify-content: end;
}
.displayIcon {
  width: 5rem;
  display: inline-block;
}

.fileViewHeaderS2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 1.2rem 0 2rem;
  margin-bottom: 2rem;
}

.filePopupI1 img {
  width: 100%;
  max-width: 1.5rem;
  max-height: 1.8rem;
  object-fit: contain;
  margin-bottom: 1rem;
}

.filePopupI1 {
  width: 100%;
  align-items: center;
  cursor: pointer;
}

.fileViewPopuRightS3 ul li {
  display: flex;
  padding: 0.5rem;
  margin-left: 1.3rem;
}

.fileViewPopupS4 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 5rem;
  padding-bottom: 5rem;
  border-bottom: 0.1rem solid var(--gray);
  margin-bottom: 1rem;
  height: 14rem;
  border: 0.1rem solid var(--gray);
  margin: 0 2rem;
  border-radius: 0.5rem;
  padding: 3rem 2rem;
  margin-top: 0rem;
}

.fileViewPopupWrapS5{
  display: flex; /* Enables centering of the image */
    align-items: center;
    justify-content: center;
    width: 100%; /* Allow the wrap to take full width */
    height: auto; /* Adjust as necessary */
}
.fm-detail-pop-filoimg2 {
  width: 100%;
  max-width: 22rem;
  height: 100%;
  max-height: 13rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.filePropertiesTitle {
  color: var(--black);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 700;
  line-height: 1.9rem;
  padding-top: 1rem;
  padding-bottom: 0rem;
}

.fileViewContainerf4 {
  padding: 0 1.2rem 0 2rem;
}

.filePropertiesDetailsWrapS1 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  width: auto;
  max-width: 29rem;
  padding-bottom: 1.8rem;
}

.filePropertiesTitleS8 {
  color: var(--black);
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: 1.7rem;
  padding-bottom: 0.8rem;
}

.filePropertiesTitleS9 {
  color: var(--slate-gray);
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 1.7rem;
  width: 50%;
  float: right;
}

.filePropertiesDetailsS6 {
  padding-top: 1rem;
}

.fileViewSharedTitle {
  color: var(--black);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 700;
  line-height: 19px;
  padding-bottom: 1rem;
}

.fileSharedT1 img {
  max-width: 5.0rem;
  max-height: 5.0rem;
  width: 100%;
  height: 100%;
}

.fileSharedListF2 {
  display: block;
  align-items: center;
  display: inline-block;
  margin-bottom: 0.5rem;
  width: 15.5%;
}

.fileDescriptionT2 {
  display: flex;
  flex-direction: column;
  float: left;
}

.fileSharedT1 {
  margin: 0px 0 1rem 0rem;
  width: 100%;
  padding-top: 0.5rem;
  display: inline-block;
}

.fileSharedT1 img{
  border-radius: 0.5rem;
}
.fileDescriptionTitle {
  color: var(--slate-gray);
  text-align: center;

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem;
}

.fileAccessTilteS1 {
  color: var(--black);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 700;
  line-height: 19px;
  padding-bottom: 1rem !important;
}

.fileAccessWrapS1 {
  padding-top: 2rem;
}

.fileViewPropertiesS5 {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.fileAccesDetailF2 {
  background: var(--red);
  align-items: center;
  justify-content: center;
  flex-direction: row;
  border-radius: 0.3rem;
  background: var(--brown);
  color: var(--white);
  text-align: center;
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-right: 1rem;
  display: inline-block;
  padding: 1.5rem;
}

.fileAccessRowF1 {
  display: flex;
  padding-top: 1.2rem;
  width: auto;
  min-width: 90%;
  overflow-y: hidden;
  padding-bottom: 0.3rem;
}

::-webkit-scrollbar-thumb:horizontal {
  background: var(--dark-gray);
  border-radius: 10px;


}

.filedetailBtnA1 {
  padding-bottom: 1rem;
  border-bottom: 0.1rem solid var(--gray);
}

.btnA2 {
  background: var(--white);

  padding: 0.8rem 1.5rem;
  border-radius: 0.3rem;
  border: solid 0.1rem var(--dark-gray);
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.2rem;
  text-align: center;
  color: var(--dark-gray);
  cursor: pointer;
  min-height: 3.7rem;
}

.unitedFolder {
  border: 1px solid var(--gray);
  border-radius: 3px;
  width: 100%;
  height: 4.4rem;
  border-bottom: 1px solid var(--red);
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-15);
  line-height: 1.7rem;
  align-items: center;
  color: var(--black);
  padding-left: 1.3rem;
  background: none;
}

.list-Common {
  height: calc(100vh - 23rem - var(--fm-trash-banner-space, 0rem)) !important;
  overflow: auto;
  overflow-x: hidden;
  max-height: 100vh;
  padding-left: 2rem;
  padding-right: 1rem;
}

.fileItemF4n.fm-date {
  color: var(--brown);
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: 1.9rem;
  width: 100%;
  text-align: left;
  padding-left: 2.8rem;
  max-width: 14%;
}

.fileItemF5nfm-size {
  color: var(--brown);
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: 1.9rem;
  width: 100%;
  padding-left: 5.2%;
  max-width: 15%;
}

.fileGridColum {
  padding-right: 1.2rem;
}

/* file manger global search */
.fileSearchGlobalData {
  width: 100%;
}

.fileHeaderIcon {
  display: block;
  background: url(../../images/icons/filefilter.svg) no-repeat center center;
  text-decoration: none;
  position: absolute;
  top: 0rem;
  right: 0rem;
  width: 4rem;
  height: 4rem;
  z-index: 9999;
  cursor: pointer;
  background-size: 2rem;
}

.fileDataF1 {
  border-radius: 0.5rem;
  border: 0.1rem solid var(--color-border-light);
  background: var(--color-surface);
  width: 100%;
  display: block;
  box-shadow: 0px 4px 8px 0px rgb(from var(--color-text-primary) r g b / 10%);
  margin-top: 1rem;
  margin: 0.8rem auto;
  padding-bottom: 1rem;

}

.fileLabelT2 {
  color: var(--color-text-primary);
  font-size: var(--font-size-15);
  font-weight: 600;
  line-height: 1.7rem;
}

.fileSearchF1 {
  align-items: center;
  margin-bottom: 1.8rem;
  clear: both;
}

.filetypeT2 {
  color: var(--brown);
  font-size: var(--font-size-15);

  font-weight: 500;
  line-height: 1.7rem;
  width: 70%;
}

.fileLabelT3 {
  border-radius: 0.3rem;
  border: 1px solid var(--color-border-light);
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 1.2rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  background: url(../../images/filemanger/fileDownCaretExpand.svg) no-repeat right 0.5rem center;
  position: relative;
  cursor: pointer;
}

.fileLabelT1 {
  width: 37%;
}

.fileSearchOption {
  padding: 1.2rem 2rem;
  width: 100%;
}

.fileWrapT2 {
  display: flex;
  align-items: center;
}

.filelabelT4 {
  width: 100%;
  max-width: 26rem;
  float: right;
  padding-top: 1.5rem;
}

.fileCheckBoxt2 {
  color: var(--brown);
  font-size: var(--font-size-15);

  font-weight: 500;
  line-height: 1.7rem;
}

.fileCheckBoxt1 {
  background-image: url(../../images/filetypeicon/uncheckbox.svg);
  text-decoration: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0;
  /* file manger global search */
  padding: 8%;
  margin-right: 7%;
}

.filetrashT1 {
  display: flex;
  align-items: center;
  width: 100%;
}

.filelabelT5 {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.fileApprovalsT3 {
  border: none;
  flex-direction: column;
  margin-bottom: 0;
}

.fileApprovalsT3 .filelabelT5 {
  width: 100%;
  display: block;
  margin-bottom: 0;
}

.fileApprovalsT3 .filelabelT4 {
  max-width: 100%;
  padding-top: 0;
}

.fileApprovalsT3 .fileCheckBoxt1 {
  padding: 2.7%;
  margin-right: 1.2rem;
}

.fileApprovalsT3 .filetrashT1 {
  margin-bottom: 1rem;
}

.fileApprovalsT3 .fileLabelT3 {
  border: none;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  cursor: inherit;
  background-image: none;
}

.fileSearchDropT1 ul {
  position: absolute;
  top: 5rem;
  width: 100%;
  background: var(--color-surface);
  left: 0;
  border-radius: 0.3rem;
  border: 0.1rem solid var(--color-border-light);
  background: var(--color-surface);
  box-shadow: 0px 4px 10px 0px rgb(from var(--color-text-primary) r g b / 10%);
  z-index: 99;
  padding: 0;
  overflow: auto;
  max-height: calc(100vh - 64rem);

}

.fileSearchDropT1 ul li {
  list-style: none;
  line-height: 3.3rem;
}

.fileDropT2 {
  color: var(--brown);
  font-size: var(--font-size-15);

  font-weight: 500;
}

.fileIconT3 {
  margin-right: 1rem;
}

.fileDropT2.fileAnySaerch {
  background:var(--white);
  width: 100%;
  display: block;
  padding-left: 1.2rem;
}

.fileLabelAnyT2 ul {
  padding-left: 0;
  padding-right: 0;
}

.fileLabelAnyT2 .fileDropT2 {
  padding-left: 0;
}

.fileLabelAnyT2 .fileDropT2 {
  padding-left: 1.3rem;
}

.fileLabelAnyT2 ul li:hover {
  background: var(--color-background);
}

.filetypeInputT3 {
  border-radius: 0.3rem;
  border: 1px solid var(--color-border-light);
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 1.2rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  position: relative;
  color: var(--brown);
  font-size: var(--font-size-15);

  font-weight: 500;
  line-height: 1.7rem;
  padding-right: 1rem;
}

.fileLabelF1 {
  border: none;
  background-image: none;
  display: block;
  padding-left: 0;
  margin: 0px !important;
  padding: 0px;
}

/* .fileSearchBtnT1 {
  display: flex;
  justify-content: end;
} */

.fileSaerchTestT5 {
  color: var(--color-text-primary);
  font-size: var(--font-size-15);

  font-weight: 500;
  line-height: 2.2rem;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}

.fileSearchResultT1 ul {
  display: flex;
  list-style: none;
  align-items: center;
  border-bottom: 0.1rem solid var(--color-border-light);
  clear: both;
  padding-bottom: 1.5rem;
  width: 100vw;
}

.fileSerachT3 {
  display: inline-flex;
  align-items: center;
  border-radius: 0.2rem;
  background: var(--dark-white);
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  cursor: pointer;
}

.fileSerachT3 img {
  display: block;
}

.fileSearchResultT1 ul li {
  margin-right: 0.8rem;
  position: relative;
}

.fileSearchBgT1 {
  background: none;
}

.fileResultDropT1 ul {
  position: absolute;
  left: 0;
  z-index: 100;
  background: var(--color-surface);
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 0.2rem;
  top: 3.3rem;
}

.fileResultDropT1 ul {
  border-bottom: none;
  display: block;
  width: 100vw;
  max-width: 12vw;
  padding-bottom: 0;
}

.fileResultDropT1 ul li .fileListT2 {
  color: var(--brown);
  font-size: var(--font-size-15);

  font-weight: 500;
  line-height: 3.8rem;
  padding: 1.5rem 1rem;
}

.fileResultDropT1 ul li {
  line-height: 1.9rem;
  border-bottom: 1px solid var(--color-border-light);
  margin-right: 0;
  cursor: pointer;
  color: var(--black);
  padding: 1.3rem 0rem 1.3rem 1.2rem !important;
  font-size: var(--font-size-15);
}

.fileResultDropT1 ul li:hover {
  background: var(--dark-white);
}

/* loader */
/*team loader start*/
.NewFileMangerLoader {
  position: absolute;
  left: 50%;
  top: 50%;
}

@keyframes body-spinner-bar {
  0% {
      transform: rotate(0deg);
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(360deg);
      transform: rotate(360deg);
  }
}

#uploadStatus {
  position: fixed;
  display: block;
  bottom: 0;
  right: 2rem;
  width: 80%;
  max-width: 46.7rem;
  padding: 0rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgb(from var(--color-text-primary) r g b / 20%);
  z-index: 1000;
  text-align: center;
  height: 40%;
  overflow: hidden;
  overflow-y: auto;

}
#uploadStatus.collapsed {
  height: 8%;
}
#uploadStatus .uploadCaretBGTn img {
  transition: transform 0.3s ease;
}

#uploadStatus.collapsed .uploadCaretBGTn img {
  transform: rotate(180deg);
}
.uploadheightcollapse{
  height: 5%;
}
.uploadFilesHead {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  padding: 2rem;
  background-color: rgb(from var(--gray) r g b / 38%);
  position: sticky;
  top: 0;
  background: var(--color-background);
  z-index: 9999;
}

.uploadFilesHeading h2 {
  font-size: var(--font-size-17);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 !important;
}

/* Combined upload summary row: one ETA for the whole batch + a Cancel link. */
.uploadSummaryRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.6rem;
  background: var(--light-slate-gray);
}

.uploadSummaryEta {
  font-size: var(--font-size-15);
  color: var(--slate-gray);
}

.uploadCancelAllLink {
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--red);
  cursor: pointer;
}

.uploadCancelAllLink:hover {
  text-decoration: underline;
}

.uploadFilesHeading{
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
}

.uploadCaretBGTn, .uploadcloseBtn {
  height: 2rem;
  width: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}


.uploadCaretBGTn img  {
  width: 100%;
  height: 100%;
  max-width: 1.3rem;
  max-height: 1.3rem;
  VERTICAL-ALIGN: middle;
}
.uploadcloseBtn img {
  width: 100%;
  height: 100%;
  max-width: 1.3rem;
  max-height: 1.3rem;
}
.uploadFilesBtn {
  width: 100%;
  max-width: 5.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}




#fileUploadProgressContainer {
  margin-top: 20px;
}

.file-upload-info {
  margin-bottom: 15px;
}

.file-upload-info span {
  display: block;
  margin-bottom: 5px;
  font-size: var(--font-size-15);
  color: var(--color-text-primary);
}

.progress {
  cursor: default;
  transition: opacity 0.2s ease;
}

.fileUpladCancleBTn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
  line-height: 1;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 2;
}

.fileUpladCancleBTn img {
  width: 1.6rem;
  height: 1.6rem;
}

.fileUpladCancleBTn:hover {
  background-color: rgb(from var(--dark-black) r g b / 8%);
    opacity: 0.85;
}

.fileUpladCancleBTn.uploadCancelStateIcon {
  color: #c62828;
  font-size: 1.8rem;
  font-weight: 700;
}

/* On an ordinary row the cancel button occupies the same spot as the progress
   ring, so hovering swaps one for the other. A resumable row has permanent
   controls in their own slot, so there is nothing to swap: the ring must keep
   showing progress while the pointer is over the row. */
.uploadFileColum:not(.upload-complete):not(.upload-cancelled):not(.upload-unsupported):not(.upload-resumable) .uploadProgressBar:hover .fileUpladCancleBTn {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.uploadFileColum:not(.upload-complete):not(.upload-cancelled):not(.upload-unsupported):not(.upload-resumable) .uploadProgressBar:hover .progress {
  opacity: 0;
}
.uploadFileColum.upload-complete .fileUpladCancleBTn {
  display: none !important;
}

.uploadFileColum.upload-cancelled .uploadFileName,
.uploadCanceledFileName {
  text-decoration: none;
  color: #222020;
}

.uploadCanceledText {
  color: #c62828;
}

.uploadFileColum.upload-cancelled .progress {
  display: none !important;
}

.uploadFileColum.upload-cancelled .fileUpladCancleBTn {
  display: none !important;
}

.uploadFileColum.upload-failed .progress {
  display: none !important;
}

.uploadFailedText {
  color: #c62828;
}

.uploadFileColum.upload-failed .fileUpladCancleBTn {
  display: none !important;
}
.uploadUnsupportedText {
  color: #c62828;
}

.uploadUnsupportedFileName {
  text-decoration: none;
  text-decoration-thickness: 1px;
  color: #8b3a3a;
}

.uploadUnsupportedMark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #c62828;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}

.uploadUnsupportedMark:hover {
  background: transparent;
}

.uploadFileColum.upload-unsupported:hover .progress {
  opacity: 1;
}

/* --- Resumable (multipart) upload rows -----------------------------------
   Files past the 50 MB threshold upload as pausable chunks. Their transport
   controls are permanent affordances, not hover-revealed ones: a user who has
   paused an upload must be able to see that it can be resumed without having
   to discover the control by hovering. */

/* The name and the status share the left column, so they stack: a single line
   cannot hold "melpdrive-sorting.mp4" and "20 MB / 136.9 MB - 01:26 remaining"
   without the status running under the transport controls. */
.uploadFileColum.upload-resumable .UploadFolderName {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  row-gap: 0.2rem;
  min-width: 0;
  flex: 1 1 auto;
}

.uploadFileColum.upload-resumable .UploadFolderName > .uploadFileIcon:first-child {
  grid-row: 1 / span 2;
}

/* The grid cell is wider than the text, so both rows need an explicit start
   alignment - otherwise they inherit the panel's centring and the name floats
   away from the file icon, out of line with the ordinary upload rows. */
.uploadFileColum.upload-resumable .uploadFileName {
  grid-column: 2;
  max-width: 100%;
  line-height: 1.25;
  text-align: left;
}

.uploadFileColum.upload-resumable .uploadEta {
  grid-column: 2;
  margin-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  text-align: left;
}

/* Never let the controls be squeezed or overlapped by a long status string. */
.uploadFileColum.upload-resumable .uploadProgressBar {
  column-gap: 0.6rem;
  flex: 0 0 auto;
  margin-left: 1.2rem;
}

.uploadTransportActions {
  display: flex;
  align-items: center;
  column-gap: 0.4rem;
  order: -1;                    /* controls sit left of the progress ring */
}

.uploadTransportBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* A permanent, filled circle so the control reads as a button at rest --
     a bare glyph on the row background looked like part of the status text. */
  background-color: rgb(from var(--color-text-primary) r g b / 7%);
  color: var(--color-text-primary);
  box-shadow: none;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

/* Masked glyphs rather than <img>, so the icon takes the button's colour and
   follows the light/dark tokens instead of baking in a grey.
   Inlined as data URIs, not file URLs: a mask-image is only fetched when its
   rule first matches, so the retry glyph would request uploadRetry.svg at the
   exact moment the upload failed -- offline -- and render an empty button. */
.uploadTransportIcon {
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  pointer-events: none;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.uploadPauseResumeBtn .uploadTransportIcon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6.5' y='4.5' width='3.6' height='15' rx='1.8' fill='%23000'/%3E%3Crect x='13.9' y='4.5' width='3.6' height='15' rx='1.8' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6.5' y='4.5' width='3.6' height='15' rx='1.8' fill='%23000'/%3E%3Crect x='13.9' y='4.5' width='3.6' height='15' rx='1.8' fill='%23000'/%3E%3C/svg%3E");
}

.uploadPauseResumeBtn.isPaused .uploadTransportIcon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5.6a1.4 1.4 0 0 1 2.14-1.19l9.2 6.4a1.4 1.4 0 0 1 0 2.38l-9.2 6.4A1.4 1.4 0 0 1 7 18.4V5.6Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5.6a1.4 1.4 0 0 1 2.14-1.19l9.2 6.4a1.4 1.4 0 0 1 0 2.38l-9.2 6.4A1.4 1.4 0 0 1 7 18.4V5.6Z' fill='%23000'/%3E%3C/svg%3E");
}

.uploadPauseResumeBtn.isFailed .uploadTransportIcon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 1 0 7.65 10.35 1.25 1.25 0 0 0-2.39-.73A5.5 5.5 0 1 1 12 6.5c1.4 0 2.68.52 3.65 1.38L13.2 10.3H20V3.5l-2.53 2.53A7.97 7.97 0 0 0 12 4Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 1 0 7.65 10.35 1.25 1.25 0 0 0-2.39-.73A5.5 5.5 0 1 1 12 6.5c1.4 0 2.68.52 3.65 1.38L13.2 10.3H20V3.5l-2.53 2.53A7.97 7.97 0 0 0 12 4Z' fill='%23000'/%3E%3C/svg%3E");
}

.uploadStopBtn .uploadTransportIcon {
  width: 1.4rem;
  height: 1.4rem;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 7.11 16.89 5.7 12 10.59 7.11 5.7 5.7 7.11 10.59 12 5.7 16.89 7.11 18.3 12 13.41l4.89 4.89 1.41-1.41L13.41 12l4.89-4.89Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 7.11 16.89 5.7 12 10.59 7.11 5.7 5.7 7.11 10.59 12 5.7 16.89 7.11 18.3 12 13.41l4.89 4.89 1.41-1.41L13.41 12l4.89-4.89Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Retry is the one state worth colouring: it is an error the user must act on. */
.uploadPauseResumeBtn.isFailed {
  color: #c62828;
  background-color: rgb(from #c62828 r g b / 10%);
}

.uploadTransportBtn:hover {
  background-color: rgb(from var(--color-text-primary) r g b / 14%);
}

.uploadPauseResumeBtn.isFailed:hover {
  background-color: rgb(from #c62828 r g b / 18%);
}

.uploadTransportBtn:active {
  transform: scale(0.92);
}

.uploadTransportBtn:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
}

.uploadTransportBtn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Hold the resting fill on hover so a disabled control does not look clickable. */
.uploadTransportBtn:disabled:hover {
  background-color: rgb(from var(--color-text-primary) r g b / 7%);
}

/* The hover-only cancel button would overlap the permanent controls, and the
   hover rule that fades the ring out to reveal it must not apply here. */
.uploadFileColum.upload-resumable .fileUpladCancleBTn {
  display: none !important;
}


/* A paused ring reads as "stopped, not broken": muted, no spinner motion. */
.uploadFileColum.upload-paused .progress {
  opacity: 0.55;
}

.uploadFileColum.upload-paused .progress .left,
.uploadFileColum.upload-paused .progress .right {
  animation-play-state: paused;
}

.uploadEta {
  font-size: var(--font-size-13);
  color: var(--color-text-secondary);
  margin-left: 0.8rem;
  white-space: nowrap;
}

.uploadEtaPaused {
  color: var(--color-text-primary);
  font-weight: 500;
}

.uploadEtaFailed {
  color: #c62828;
}

@media (prefers-reduced-motion: reduce) {
  .uploadTransportBtn {
    transition: none;
  }

  .uploadTransportBtn:active {
    transform: none;
  }
}

.upload-progress-container {
  width: 100%;
  background-color: var(--color-surface-alt);
  border-radius: 4px;
  overflow: hidden;
}

.upload-progress-bar {
  width: 0%;
  height: 20px;
  background-color: var(--color-success);
  text-align: center;
  line-height: 20px;
  /* Same as height */
  color: var(--color-text-inverse);
  transition: width 0.4s ease;
}

.progress {
  width: 2.8rem;
  height: 2.8rem;
  font-size: 0.2rem;
  color: var(--dark-black);
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: var(--color-surface);
  text-align: center;
  float: right;
  align-items: center;
  justify-content: center;
}

.progress::after {
  content: "%";
}

.progress .title {
  position: relative;
  z-index: 100;
  font-size: var(--font-size-11);
}

.progress .overlay {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: var(--color-surface);
}

.progress .left, .progress .right {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0.5rem solid var(--color-success);
  border-radius: 100px 0px 0px 100px;
  border-right: 0;
  transform-origin: right;
}

.progress .left {
  animation: load1 1s linear forwards;
}

.progress:nth-of-type(2) .right, .progress:nth-of-type(3) .right {
  animation: load2 .5s linear forwards 1s;
}

.progress:last-of-type .right, .progress:first-of-type .right {
  animation: load3 .8s linear forwards 1s;
}

@keyframes load1 {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(180deg);
  }
}

@keyframes load2 {
  0% {
      z-index: 100;
      transform: rotate(180deg);
  }

  100% {
      z-index: 100;
      transform: rotate(270deg);
  }
}

@keyframes load3 {
  0% {
      z-index: 100;
      transform: rotate(180deg);
  }

  100% {
      z-index: 100;
      transform: rotate(315deg);
  }
}


.uploadFileColum {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  height:6rem;
  padding: 0 1.2rem 0 2.2rem;
  cursor: pointer;
}

.uploadFileColum:hover{
  background: rgb(from var(--color-background) r g b / 60%);
}

.uploadFileIcon {
  font-size: var(--font-size-17);
  font-weight: 500;
  color: var(--color-text-primary);
  padding-right: 0.6rem;
}

.UploadFolderName {
  display: flex;
  align-items: center;

}

.uploadFileName {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.uploadFileIconFolder {
  width: 100%;
  float: left;
  font-size: var(--font-size-15);
  font-weight: 500;
  color: var(--color-text-primary);
  max-width: 25%;
}

.uploadProgressBar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 1.2rem;
  min-width: 2.8rem;
  min-height: 2.8rem;
}


span.uploadFileNumber {
  font-size: var(--font-size-15);
  font-weight: 500;
  color: var(--color-text-secondary);
}



.upladCancletest {
  font-size: var(--font-size-15);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.alert-popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(from var(--dark-black) r g b / 50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.alert-content {
  background-color: var(--color-surface);
  padding: 20px;
  border-radius: 5px;
}

.manageDetails .fm-share-searchResults {
  height: max-content;
  max-height: 35rem;
  overflow: auto;
  overflow-x: hidden;
  margin-bottom: 1rem;
  background-color: var(--white);
  z-index: 1;
  box-shadow: 0 3px 5px -1px rgb(from var(--color-text-primary) r g b / 20%), 0 6px 10px 0 rgb(from var(--color-text-primary) r g b / 14%), 0 1px 18px 0 rgb(from var(--color-text-primary) r g b / 12%);
  border-radius: 0.9rem;
  padding: 0.5rem 0 0.5rem 0;

}

.list-noresults{
  padding: 1rem 2rem;
  font-size: var(--font-size-15);
}

.manageDetails li.list-section {
  padding: 0rem 0rem;
  border: none;
  overflow: hidden;
}

.manageDetails .fileaddMemberT1 {
  top: 12rem;
}

.manageDetails .useraddT4 {
  font-size: var(--font-size-15);
  padding-right: 1.5rem;
  float: right;
  position: absolute;
  right: 0;
  cursor: pointer;
  top: 1.1rem;
}

.manageDetails .canViewDropDown ul {
  z-index: 9999;
}

.addoptionWrap {
  width: 100%;
  clear: both;
  position: relative;
  float: left;
  clear: both;
}

.mangedetailsWrap .shareFileSearchF1.fm-share-searchWrap {
  display: inline-block;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.sahreMoreFileWrap {
  display: flex;
  align-items: center;
}

.filesMoveInput {
  border: 0.1rem solid var(--gray);
  border-radius: 0.4rem;
  width: 100%;
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-15);
  line-height: 1.7rem;
  display: flex;
  align-items: center;
  color: var(--black);
  position: relative;
  height: 100%;
  flex-wrap: wrap;
  padding: 1rem;
}

span.fm-share-selectedListWrap {
  width: 100%;
  position: absolute;
  z-index: 9;
  margin-top: 1rem;
}

span.navbar-shared-dropdown {
  width: 100%;
  position: absolute;
  top: 4rem;
  left: 0;
  z-index: 9;
  background: var(--white);
  box-shadow: 0px 1px 8px 0px rgb(from var(--color-text-primary) r g b / 20%);
}

.manageDetails .fm-share-shareModeOptions ul {
  top: 3rem;
}

.manageDetails .fileEamilWrap img {
  margin-right: 1rem !important;
}

.fm-share-accessHeading {
  display: inline-block;
  padding-bottom: 1.5rem;
}

.fileAccessDetailsAcces .fileAccesDetailF2 {
  background: none;
  align-items: flex-end;
  max-width: 20rem;
  padding: 0.5rem;
  float: left;
}

.fileAccessDetailsAcces {
  display: inherit;
}

.fileAccessDetailsAcces .fileSharedT1 {
  margin: 0px auto 0.5rem;
  display: flow-root;
  text-align: center;
  align-items: center;
}

.fileAccessDetailsAcces .fileDescriptionT2 {
  text-align: left;
  float: none;
}

.filterName {
  font-size: var(--font-size-15);
  color: var(--dark-gray);
}

.filterIconCaret {
  margin-right: 0.8rem;
  margin-left: 0.2rem;
  margin-top: 0;
}

.file-manager-dropdown {
  position: absolute;
  top: 4.8rem;
  width: 100%;
  right: 0rem;
  box-shadow: 0px 1px 8px 0px rgb(from var(--color-text-primary) r g b / 20%), 2px 4px 22px 0px rgb(from var(--color-text-primary) r g b / 10%); z-index: 9;
z-index: 9;
  min-width: 21rem;
  left: 0;
  right: 0;

}

.file-manager-dropdown .filter-manager-item {
  list-style-type: none;
  padding: 0rem;
  margin: 0rem;
  flex-direction: column;
  background: none;
}

.file-manager-dropdown .filter-manager-item li {
  background-color: var(--white);
  padding: 1.4rem 0rem 1.4rem 1.9rem;
  border-bottom: 0.1rem solid var(--gray);

  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  color: var(--black);
  font-size: var(--font-size-15);
  cursor: pointer;
  width: 100%;
}

.filterIconCaretWrap {
  width: 2rem;
  margin-left: 0rem;
  float: left;
  height: 2rem;
}

.filterIconCaretWrap img {
  transition: transform 0.2s ease;
}

.filterIconCaretWrap.sort-desc img {
  transform: rotate(180deg);
}

.file-manager-dropdown .filter-manager-item li:hover {
  background-color: var(--dark-white);
  color: var(--black);
  cursor: pointer;
}

.file-manager-dropdown .filter-manager-item li.filter-manager-active {
  background-color: var(--dark-white);
  color: var( --black);
  cursor: pointer;
}

.fileSortageName {
  font-size: var(--font-size-15);
  color: var(--black);
  font-weight: 500;
  display: flex;
  width: 15rem;
  justify-content: end;
  line-height: 1.9rem;
}

.fileSortageName img {
  margin-right: 2rem;
  margin-left: 0.5rem;
}

.fileContainertHover:hover .fileMangerUnCheckIcon {
  visibility: visible;
}

.fileManger-info {
  width: 100%;
  float: left;
  padding: 0 2rem 0 1rem;
  position: relative;
  max-width: 39.5%;
}

.fileMangerUnCheckIcon {
  background-image: url(../../images/filemanger/uncheckbox.svg);
  text-decoration: none;
  width: 2.8rem;
  height: 2rem;
  top: 0.2rem;
  cursor: pointer;
  visibility: hidden;
  background-repeat: no-repeat;
  background-size: 88%;
  background-position: 0;
  position: absolute;
  z-index: 99;
  bottom: 0;
  left: 0;
  right: 0;
}

.fileMangerCheckIcon {
  background-image: url(../../images/filemanger/checkbox.svg);
  text-decoration: none;
  width: 2.8rem;
  height: 100%;
  top: 0.2rem;
  left: 0;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 88%;
  background-position: 0;
  position: absolute;
  z-index: 99;
}

.fileManger-name {
  padding-left: 3rem;
  display: flex;
  align-items: center;
  max-width: 84rem;
}

.fileManger-name img {
  height: 100%;
  width: 100% !important;
  max-width: 2.45rem;
   height: 2.8rem;
  vertical-align: middle;
}

.fileMangerExtension {
  float: inherit !important;
}

.fileManger-name span {
  margin-left: 0;
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  cursor: pointer;
  padding-left: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
  padding-left: 1.2rem;
  max-width: 70%;
}

.filelistT3.h-name {
  padding-left: 4rem;
}

/* Sortable list-column headers (Name / Owner / Last opened / File size).
   Google-Drive style: a faint arrow appears on hover, and a solid arrow marks
   the active sort column with its direction. Uses fm-scoped class names so it
   does not collide with the global `.sortActive` chat class. */
.fileHeaderT2 .fmSortableHeader {
  cursor: pointer;
  user-select: none;
}

.fileHeaderT2 .fmSortableHeader::after {
  content: "";
  display: inline-block;
  margin-left: 0.6rem;
  font-size: var(--font-size-21);
  font-weight: 700;
  line-height: 1;
    width: 2.4rem;
  height: 2.4rem;
  vertical-align: middle;
  /* Inactive sortable column: neutral unfold-more (⇕), matching the sort dropdown. */
  background: url("../../images/filemanger/unfoldMore.svg") no-repeat center center;
  background-size: contain;
  opacity: 0.9; /* always visible on sortable columns */
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.fileHeaderT2 .fmSortableHeader:hover::after {
  opacity: 1;
}

/* Active sort column: single directional arrow (up = ascending). */
.fileHeaderT2 .fmSortActive::after {
  opacity: 1;
  background-image: url("../../images/filemanger/modify.svg");
}

/* Active + descending: rotate the up-arrow 180° → down arrow. */
.fileHeaderT2 .fmSortDesc::after {
  transform: rotate(180deg);
}

.fileTeamLinkeWrap {
  width: 8%;
  margin-left: 1.5rem;
}

.fileMangerLike img {
  width: 100%;
  max-width: 1.5rem;
  max-height: 1.5rem;
}

span.fileMangerTeam img {
  margin: 0px;
  margin-right: 0.5rem;
  max-width: 1.7rem;
}

.fileMangerTeam {
  float: left !important;
}

.fileMangerLike {
  display: inline-block;
}

.fileItemF6More-Option {
  width: 100%;
  position: relative;
  text-align: right;
  max-width: 8%;
}

.listViewfmpreview ul {
  width: 19rem;
  top: 5rem !important;
  left: auto;
  right: 1rem;
}

.shareFilesAccesPopup {
  width: 100%;
  display: inline-block;
}

.anyoneShareLink {
  padding-top: 2.5rem;
  max-width: 100%;
  padding-bottom: 2rem;
}

.linksSharingTitle {
  font-size: var(--font-size-15);
  color: var(--black);
  font-weight: 600;
  padding-bottom: 1.5rem;
}

.anyoneLinkIcon {
  background: var(--dark-white);
  padding: 0.5%;
  border-radius: 0.3rem;
}

.userWrapList {
  display: block;
  width: 100%;
  overflow: hidden;
}

.subTitleLocationWrap .userProfileTestT3 {
  color: var(--brown);
  line-height: 2.3rem;
  font-size: var(--font-size-15);
  font-weight: 500;
}

.checkEmail {
  width: 2rem;
  display: inline-block;
  padding-left: 1rem;
  padding-right: 2.5rem;
}

.fm-detail-pop-filoimg {
  width: 100%;
  min-width: 8rem;
  max-width: 8rem;
}

.fmdetailWrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 70%;
}

.fmdetalRightF4 ul li {
  padding: 0 0.5rem;
}

.sharedViewWrapBoxList {
  display: flex;
}
.sharedMoreOption{
  display: flex;
    border: 1px solid var(--color-border);
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-15);
    margin: 0.6rem 0px 1.5rem 0px;
    font-weight: 500;
}
.sharedViewWrapBoxList ul {
  display: flex;
  flex-wrap: wrap;
  width: 100rem;
}

.sharedViewWrapBoxList ul li {
  list-style: none;
  margin-right: 1rem;
}

.sharedViewWrapBoxList ul li img {
  height: 4.3rem;
  width: 4.3rem;
  border-radius: 0.5rem;
  padding: 0.1rem;
  margin: 0rem !important;
}

.sharedModreOption {
  background: rgb(from var(--dark-gray) r g b / 29%);
  width: 4.3rem;
  height: 4.3rem;
  display: flex;
  border-radius: 0.5rem;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-17);
  color: var(--slate-gray);
  font-weight: 500;
}

.sharedViewWrapBox {
  padding-top: 2.5rem;
}

.fileOwnerOpacity {
  opacity: 0.5;
  width: max-content;
  margin-right: 1rem;
}

.myFileMangerInfo ul {
  width: auto !important;
  flex-wrap: wrap;
  display: flex;
  height: 14rem;
  overflow: hidden scroll;
  background: var(--color-surface);
  position: absolute;
  bottom: 100%;
  max-width: 75%;
  z-index: 9;
  top: 33%;
  box-shadow: 0 0.4rem 1rem 0 rgb(from var(--color-text-primary) r g b / 54%);
  border-radius: 0.5rem;
  right: 1%;

}

.myFileMangerInfo li.list-section {
  width: 100rem;
  margin-right: 0;
  padding-left: 1rem;
  padding-right: 1rem;
}

.myFileMangerInfo {
  /* Position the dropdown above the container */
}

.myFileMangerInfo .common-user-icon {
  margin-right: 1rem;
}

.filePropertiesDetailsWrapS1:last-child {
  padding-bottom: 0;
}

.OwnedTittle, .NoAccessTitle {
  font-size: var(--font-size-15);
  color: var(--brown);
  padding-right: 2rem;
  font-weight: 500;
  margin-bottom: 0;
  padding-top: 1rem;
}

.moveHoverStateF1 i img {
  width: 100%;
  min-width: 1rem;
}

.mvfooter-fmbtn {
  padding-right: 2.3rem;
}

.selectLocation p {
  color: var(--black);
  font-size: var(--font-size-11);
  font-weight: 500;
  display: flex;
  align-items: center;
  line-height: 1.2rem;
  margin-bottom: 2rem;
}

.selectInfoIcon {
  margin-right: 0.8rem;
}

.fileTabsF6 ul li.moveActive {
  background: var(--dark-white);
  border-radius: 100rem;
}

.access-denied-container {
  text-align: center;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  padding: 20px;
  box-shadow: 0 0 10px rgb(from var(--color-text-primary) r g b / 10%);
}

#requestAccessBtn {
  background-color: var(--color-info);
  color: var(--color-text-inverse);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 20px;
}

#requestAccessBtn:hover {
  background-color: rgb(from var(--color-info) r g b / 85%);
}

.moveFolderEmtyWrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  align-items: center;
  padding: 5rem 0;
  position: relative;
  top: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  right: 0;
  left: 0;
  transform: translate(0%, 10%);
}

.moveFolderEmtyWrap p {
  color: var(--black);
  font-size: var(--font-size-15);
  padding-top: 2rem;
  font-weight: 500;
}

.fm-share-dropdownIcon {
  margin-top: 0.3rem;
}

.fileMultiple ul li:nth-child(3n+1) {
  padding-left: 0.5rem;
}

.fileMultiple ul li:nth-child(3n+2) {
  padding-left: 1.5rem;
}

.fileMultiple ul li:nth-child(3n+3) {
  padding-left: 1.5rem;
}

.fileMultiple ul li:nth-child(3n+4) {
  padding-left: 1.5rem;
}

.fileMultiple ul li:nth-child(3n+5) {
  padding-left: 1.5rem;
}

.fileMultiple ul li:nth-child(3n+6) {
  padding-left: 1.5rem;
}

.fileMultiple ul li:nth-child(3n+7) {
  padding-left: 1.5rem;
}

.emptyFontWeight {
  font-weight: 700;
  color: var(--black);
}

.selectedF7 {
  width: 100%;
  min-width: 1.3rem;
  min-height: 2.2rem !important;
}

span.filesMenuIconsCaret {
  padding-top: 0px !IMPORTANT;
  line-height: inherit !important;
  background-image: url(../../images/filemanger/menuCaret.svg);
  text-decoration: none;
  background-size: 51%;
  background-position: center center;
  background-repeat: no-repeat;
  padding-right: 0 !IMPORTANT;
  display: inline-block !important;
}
inviteUserWrap {
  border-radius: 16.3rem;
  border: solid 0.1rem var(--brown);
  display: flex;
  margin-right: 0.8rem;
  align-items: center;
  flex-direction: row;
  width: 100%;
  max-width: max-content;
  padding: 0.5rem 0.8rem 0.5rem 0.8rem;
}
.inviteUserNameWrap {
  padding-left: 0.5rem;
}
.inviteUserRemoveWrap {
  padding-left: 0.8rem;
}
.inviteUserIcon {
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
}
.shareFileNotifyTitle {

  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  color: var(--black);
  padding-bottom: 1.8rem;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2rem;
  width: fit-content;
}
.shareFileNotifyInput {
  padding: 1.2rem;
  width: 100%;
  height: 11rem;
  border: 0.1rem solid var(--gray);

  font-size: var(--font-size-15);
  color: var(--black);
  font-weight: 500;
  resize: inherit;
  border-radius: 0.3rem;
}
.shareNotifyLinkIcon{
  padding-top: 3rem;
  padding-bottom: 2.4rem;
  float: left;
}
.shareFileNotifyBtn{
  padding-top: 2rem;
  padding-bottom: 2.4rem;
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 1rem;
  justify-content: space-between;
}
.typeModifiedWrap {
  display: inline-flex;
  position: relative;
}

.fileTypeBtn path , .fileModifiedBtn path {
  fill: var(--brown);
}

.fileTypeBtn , .fileModifiedBtn {
  color: var(--brown);
  text-align: center;
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 2.0rem;
  /* 153.846% */
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  text-decoration: none;
  background-position: center right 1rem;
  background-repeat: no-repeat;
  padding: 0.8rem 1rem;
  cursor: pointer;
  /* height: 4.6rem; */
}

.filetype-filterApplied
{
  background: var(--dark-white);
}

.filetypebtn-cancel-filter .material-symbols-outlined {
  font-size: 1.8rem;
}

.filetype-dropdown-icon .material-symbols-outlined {
  font-size: 1.8rem;
}


.fileType {
  margin-right: 1.0rem;
}

.multipleFileWrap {
  height: 100%;
  min-height: 7rem;
}

.fileName {
  display: flex;
  align-items: center;
}

.dispalyIcon {
  width: 100%;
  max-width: 3rem;
  display: inline-block;
  padding-right: 3%;
}

.cardMoreOptionsClick2 {
  cursor: pointer;
}
.cardMoreOptionsClick {
  cursor: pointer;
}


.typeModifiedFilter {
  list-style-type: none;
  padding: 0rem;
  margin: 0rem;
  flex-direction: column;
  background: none;
}

.typeModifiedFilter .typeModifiedFilterActive {
  background-color: var(--dark-white);
  color: var(--black);
  cursor: pointer;
}

.typeModifiedFilter li {
  background-color: var(--white);
  padding: 1.4rem 1.9rem;
  /* Row is a flex line so the leading icon stays optically centred against the
     label instead of sitting on the text baseline. */
  display: flex;
  align-items: center;

  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  color: var(--black);
  font-size: var(--font-size-15);
  cursor: pointer;
  width: 100%;
}
.typeModifiedFilter li :hover{
  background-color: var(--dark-white) !important;
}
#modifeddropdown-list{
  left : 9rem;
}

/* --- Modified filter: custom date range (Drive-style side panel + footer) --- */
#modifeddropdown-list {
  /* The range panel sits beside the preset list, so the dropdown can no longer
     be clipped to the width of the button. */
  overflow: visible;
  /* Wider than the shared 21rem default: the footer holds three actions on one
     row, and "Clear all" wrapped to two lines at that width. */
  min-width: 27rem;
}

/* The selected row (preset or custom) reads as selected, the way Drive marks the
   active filter — until now only the button label changed. */
.typeModifiedFilter li.active {
  background-color: var(--color-surface-alt);
}

.fmModifiedCustomRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 1.4rem !important;
}

.fmModifiedCustomRow.is-open {
  background-color: var(--color-surface-alt, var(--dark-white));
}

.fmModifiedCustomCaret {
  font-size: var(--font-size-18);
  color: var(--color-text-secondary);
  line-height: 1;
}

.fmModifiedRangePanel {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 0.2rem;
  min-width: 29rem;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  background: var(--color-surface);
  border: 0.1rem solid var(--color-border);
  border-radius: 0.4rem;
  box-shadow: 0px 1px 8px 0px rgb(from var(--color-text-primary) r g b / 20%), 2px 4px 22px 0px rgb(from var(--color-text-primary) r g b / 10%);
  z-index: 10;
}

.fmModifiedRangeField {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
}

.fmModifiedRangeLabel {
  font-size: var(--font-size-13);
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* In-app calendar (SharedDatePicker). These rules mirror the chat-search
   picker, but live here because css/custom/chat.css is only loaded with the
   chat module — the Drive route must not depend on it. */
.fm-modified-datepicker {
  position: relative;
  width: 100%;
}

.fm-modified-datepicker .gs-datepicker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  min-height: 4rem;
  padding: 0 1rem;
  border: 0.1rem solid var(--color-border);
  border-radius: 0.4rem;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-15);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.fm-modified-datepicker .gs-datepicker-trigger:hover,
.fm-modified-datepicker.gs-datepicker-open .gs-datepicker-trigger {
  border-color: var(--color-text-secondary);
}

.fm-modified-datepicker .gs-datepicker-trigger:focus-visible {
  outline: 0.2rem solid var(--color-focus-ring, var(--brown));
  outline-offset: 0.1rem;
}

.fm-modified-datepicker.gs-datepicker-has-value .gs-datepicker-trigger {
  color: var(--color-text-primary);
}

.fm-modified-datepicker .gs-datepicker-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-modified-datepicker .gs-datepicker-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  min-width: 27rem;
  padding: 1.2rem;
  border: 0.1rem solid var(--color-border);
  border-radius: 0.8rem;
  box-shadow: 0 8px 24px rgb(from var(--color-text-primary) r g b / 14%);
  background: var(--color-surface);
  z-index: 20;
}

.fm-modified-datepicker.gs-datepicker-open .gs-datepicker-dropdown {
  display: block;
}

.fm-modified-datepicker .gs-datepicker-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.fm-modified-datepicker .gs-datepicker-month-year {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.fm-modified-datepicker .gs-custom-select {
  position: relative;
  width: auto;
  flex: none;
}

.fm-modified-datepicker .gs-custom-select-trigger {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border: 0.1rem solid var(--color-border);
  border-radius: 0.4rem;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--font-size-15);
  font-weight: 600;
  cursor: pointer;
}

.fm-modified-datepicker .gs-custom-select-arrow {
  transition: transform 0.2s ease;
}

.fm-modified-datepicker .gs-custom-select.open .gs-custom-select-arrow {
  transform: rotate(180deg);
}

.fm-modified-datepicker .gs-custom-select-list {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 12rem;
  max-height: 20rem;
  overflow-y: auto;
  padding: 0.4rem 0;
  margin: 0;
  list-style: none;
  border: 0.1rem solid var(--color-border);
  border-radius: 0.6rem;
  box-shadow: 0 8px 24px rgb(from var(--color-text-primary) r g b / 14%);
  background: var(--color-surface);
  z-index: 4;
}

.fm-modified-datepicker .gs-datepicker-year-select .gs-custom-select-list {
  min-width: 8rem;
}

.fm-modified-datepicker .gs-custom-select.open .gs-custom-select-list {
  display: block;
}

.fm-modified-datepicker .gs-custom-select-option {
  padding: 0.6rem 1rem;
  color: var(--color-text-primary);
  font-size: var(--font-size-15);
  cursor: pointer;
}

.fm-modified-datepicker .gs-custom-select-option:hover {
  background: var(--color-surface-alt);
}

.fm-modified-datepicker .gs-custom-select-option.gs-selected {
  color: var(--color-brand);
  font-weight: 600;
}

.fm-modified-datepicker .gs-custom-select-option.gs-custom-select-option-disabled {
  opacity: 0.45;
  color: var(--color-text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

.fm-modified-datepicker .gs-datepicker-prev,
.fm-modified-datepicker .gs-datepicker-next {
  width: 2.6rem;
  height: 2.6rem;
  border: 0.1rem solid var(--color-border);
  border-radius: 0.4rem;
  background: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-16);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.fm-modified-datepicker .gs-datepicker-prev:hover,
.fm-modified-datepicker .gs-datepicker-next:hover {
  background: var(--color-surface-alt);
}

.fm-modified-datepicker .gs-datepicker-prev:disabled,
.fm-modified-datepicker .gs-datepicker-next:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.fm-modified-datepicker .gs-datepicker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 0.4rem;
  text-align: center;
}

.fm-modified-datepicker .gs-datepicker-weekdays span {
  padding: 0.3rem 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-13);
  font-weight: 600;
}

.fm-modified-datepicker .gs-datepicker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
}

.fm-modified-datepicker .gs-datepicker-day {
  aspect-ratio: 1;
  border: none;
  border-radius: 0.4rem;
  background: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-13);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.fm-modified-datepicker .gs-datepicker-day:hover:not(:disabled) {
  background: var(--color-surface-alt);
}

.fm-modified-datepicker .gs-datepicker-day.gs-datepicker-today {
  color: var(--color-brand);
  font-weight: 700;
}

.fm-modified-datepicker .gs-datepicker-day.gs-datepicker-selected {
  background: var(--color-brand);
  color: var(--white);
  font-weight: 600;
}

/* The generic hover rule is more specific than the selected rule, so restate it
   here — otherwise hovering a selected day drops its fill and leaves white text. */
.fm-modified-datepicker .gs-datepicker-day.gs-datepicker-selected:hover:not(:disabled) {
  background: var(--color-brand-hover);
  color: var(--white);
}

.fm-modified-datepicker .gs-datepicker-day.gs-datepicker-day-empty {
  cursor: default;
  pointer-events: none;
}

.fm-modified-datepicker .gs-datepicker-day.gs-datepicker-day-disabled {
  opacity: 0.45;
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.fm-modified-datepicker .gs-datepicker-clear {
  width: 100%;
  margin-top: 1rem;
  padding: 0.6rem 0;
  border: 0.1rem solid var(--color-border);
  border-radius: 0.4rem;
  background: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-15);
  cursor: pointer;
}

.fm-modified-datepicker .gs-datepicker-clear:hover {
  background: var(--color-surface-alt);
  color: var(--color-text-primary);
}

.fmModifiedRangeError {
  margin: 0;
  font-size: var(--font-size-13);
  line-height: 1.6rem;
  color: var(--color-error, var(--red));
}

.fmModifiedFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.2rem 1.4rem;
  background: var(--color-surface);
  border-top: 0.1rem solid var(--color-border);
}

.fmModifiedFooterActions {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
}

.fmModifiedFooterBtn {
  /* Footer labels are single-line actions — never let them wrap. */
  white-space: nowrap;
  font-size: var(--font-size-15);
  font-weight: 500;
  /* Text-only footer buttons, so the label carries the contrast: primary text
     for the secondary actions and the darker brand tone for Apply (plain brand
     red on white lands under 4.5:1). */
  color: var(--color-text-primary);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0.4rem 0.2rem;
}

.fmModifiedFooterBtn.fmModifiedApply {
  color: var(--color-brand-hover);
  font-weight: 600;
}

.fmModifiedFooterBtn:hover {
  text-decoration: underline;
}

.fmModifiedFooterBtn.is-disabled {
  color: var(--color-text-muted, var(--dark-gray));
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  text-decoration: none;
}

/* --- Advance search: the same custom range on the "Date modified" filter ---
   The preset list here is an absolutely-positioned <ul> anchored to the field
   (.fileLabelT3, position:relative), so the range panel is anchored the same way
   and opens toward the label column — the field sits at the right edge of the
   search popup, and opening rightward would hang outside it. */
.fmSearchModifiedCustomRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  cursor: pointer;
}

.fmSearchModifiedCustomRow.is-open {
  background: var(--color-surface-alt);
}

.fmSearchModifiedRangePanel {
  top: 5rem;
  left: auto;
  right: calc(100% + 0.4rem);
  margin-left: 0;
  z-index: 100;
  cursor: default;
}

/* Below the popup's two-column width there is no side room at all — drop the
   panel under the field instead. */
@media (max-width: 991px) {
  .fmSearchModifiedRangePanel {
    top: 5rem;
    right: 0;
    left: auto;
  }
}

/* --- Results-strip chips: the same range, hosted inside the chip dropdown ---
   Those dropdown lists are capped at 12vw, which cannot hold two calendars, so
   the list widens only while it is hosting the panel and the panel itself sits
   in the flow underneath the presets. */
.fileResultDropT1 ul.fmHasRangePanel {
  width: 32rem;
  max-width: none;
}

.fmChipModifiedCustomRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0 1rem;
  cursor: pointer;
}

.fmChipModifiedCustomLabel {
  color: var(--brown);
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: 3.3rem;
}

.fmModifiedRangePanelChip {
  position: static;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 1.2rem 1rem;
  border: 0;
  border-top: 0.1rem solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
}

/* Narrow viewports have no room for a second column — stack the range panel
   under the preset list instead of letting it run off-screen. */
@media (max-width: 767px) {
  .fmModifiedRangePanel {
    position: static;
    margin-left: 0;
    min-width: 0;
    box-shadow: none;
    border: 0;
    border-top: 0.1rem solid var(--color-border);
  }
}
.navPillsList {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: start;
    margin-top: 2.0rem;
    margin-bottom: 1.0rem;
}

.navPillsList li span {
    display: inline-block;
    padding: 1.0rem 1.3rem;
    color: var(--color-text-primary);
    text-align: center;

    font-size: var(--font-size-15);
    font-style: normal;
    font-weight: 500;
    line-height: 1.82rem; /* 140% */
    border: 0.1rem solid var(--color-border);
    margin-right: 1.0rem;
    border-radius: 0.4rem;
    cursor: pointer;
}
.fm-share-searchInput input[type=text]:active, input[type=text]:focus{
  background-color: var(--white);
}
.shareResultImg img {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 100%;
}

.shareMainResult {
  height: 4rem;
  width: fit-content;
  border: 0.1rem solid var(--brown);
  border-radius: 10rem;
  padding: 0.8rem;
  max-width: 22rem;
  margin-bottom: 0.8rem;
  margin-right: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom:1rem;
}

.shareProfileSubTitel img {
    width: 100%;
    max-width: 1.1rem;
    margin-left: 1.1rem;
    cursor: pointer;
}

.shareProfileTitel {
    margin-left: 0.5rem;
}

.fm-share-copyLinkButton img {
  width: 2.4rem;
}

.shareProfileTitel {
    color: var(--color-text-primary);

    font-size: var(--font-size-15);
    font-style: normal;
    font-weight: 500;
    line-height: 17px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fm-share-shareByOptions ul {
    margin-top: 3rem !important;
}
.emailSubTitile, .emailLocation {
    color: var(--brown);
    line-height: 1.9rem;
}
.notify-check-box-icon {
    left: 0;
    top: 0;
}

.notiftContact {
    display: inline-block;
    margin-top: 0.1rem;
    font-size: var(--font-size-15);
    font-weight: 500;
    padding: 0.2rem;
}

.shareFileNotifyTitle_container {
  display: flex;
  justify-content: start;
  align-items: center;
}

.melpDriveUserWrap {
    width: 80%;
    display: flex;
}

.subTitleLocationWrap {
    display: flex;
    flex-direction: column;
}

/* Share-popup group/topic search rows: vertically centre the avatar with the
   name + Group/Topic badge. These rows have 0–1 subtitle lines (contacts have
   two), so the default float/top-aligned layout left the name floating above
   centre — this flex row re-centres it. Scoped to group/topic rows only. */
.fmShareResultRow {
    display: flex;
    align-items: center;
}
.fmShareResultRow .userProfileT2 {
    float: none;
    margin-top: 0;
}
.fmShareResultText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80%;
}
.fmShareResultText .melpDriveUserWrap {
    width: 100%;
    align-items: center;
}
.cancleandSendBtn {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.copyLinkBtn {
    display: inline-block;
}

.copyLinkBtnShare {

    padding: 0.8rem 1.5rem;
    border-radius: 0.3rem;
    border: solid 0.1rem var(--dark-gray);
    font-size: var(--font-size-15);
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    text-align: center;
    color: var(--dark-gray);
    margin-right: 1rem;
    background-color: var(--white);
    cursor: pointer;
    height: 3.7rem;
}
.copyLinkBtnShare img {
  width: 100%;
  max-width: 1.8rem;
  margin-right: 0.5rem;
}
.userListT3 {
    padding: 0.1rem 1.5rem;
    display: grid;
}


/* search check box */
.check-box-icon-Label {
    position: absolute;
    right: 0;
    top: 40%;
    margin-right: 2rem;
}

.contact-check-default-label {
    background-image: url(../../images/filetypeicon/uncheckbox.svg);
    background-repeat: no-repeat;
    width: 2rem;
    background-position: 50%;
    height: 2rem;
    cursor: pointer;
    background-size: 100%;
}

 /* search check box */

 .bgColorRed{
  background-color: var(--red);
  border: solid 0.1rem var(--red);
 }
 .copyLinkFileAttachement {
  border: none;
  position: relative;
  right: -1rem;
 }
.searchListingScroll li.list-section {
    border-bottom: 0.1rem solid var(--gray) !important;
    padding-bottom: 0.8rem;
    padding-top: 0.8rem;
}
.fileWrapBtn {
    padding-top: 2.5rem;
}

.breadcrumb-item
 i.breadcRumArrowf1 {
    padding-left: 1.3rem;
    position: relative;
    /* top: -0.1rem; */
    display: flex;
    align-items: center;
}
.fileWrapT2DropDwon {
    width: 100%;
    max-width: 10rem;
}
.peopleAccess {
    font-size: var(--font-size-15);
    color: var(--black);
    font-weight: 500;
    margin-bottom: 1.5rem;
}
.storage-option {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  margin-top: 20px;
}

.option {
  /* align-items: center; */
  padding: 10px;
  border-top: 0.1rem solid var(--color-border-light);
  border-bottom: 0.1rem solid var(--color-border-light);
  background-color: var(--color-surface);
  transition: box-shadow 0.3s ease;
  padding-left: 2rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.option-span{
  display: flex;
  justify-content: space-between;
}

.integdrive-text{
  font-size: var(--font-size-15);
  font-weight: 600;

  color: var(--black);
  padding-left: 1rem;


}
.option:hover {

  background-color: var(--gray);
}
.iconDriveWidth {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.iconsWrap {
  width: fit-content;
}
.driveTest p {
    font-size: var(--font-size-15);
    color: var(--brown);
    padding-right: 2rem;
    line-height: 1.5;
}
.iconsWrap img {
  width: 3.2rem;
  height: 3.2rem;
}
.icon img {
  width: 40px;
  height: 40px;
  margin-right: 15px;
}

.details {
  flex-grow: 1;
}

.details h3 {
  margin: 0;
  font-size: var(--font-size-17);
  color: var(--color-text-primary);
}

.details p {
  margin: 5px 0 0;
  font-size: var(--font-size-15);
  color: var(--color-text-secondary);
}

.add-button {
  font-size: var(--font-size-25);
  color: var(--color-text-primary);
  cursor: pointer;
}

.add-button span {
  display: inline-block;
  padding: 5px;
}
.button-container {
  display: inline-block; /* Allow the button to take width and height */
  padding: 8px; /* Increase the padding around the button */
  cursor: pointer; /* Change cursor to pointer for better UX */
}
.btn-add-drive{
  border: none;
  background: none;
}
.btn-add-drive img {
  width: 16px; /* Adjust icon size as needed */
  height: 16px;
}
.actions-container {
  display: flex;
  gap: 15px;
  padding-bottom: 2rem;
  align-items: center;
}

#loadable_content .fileMagerTopLeft.fm-navigation-list {
  flex: 1 1 auto;
  min-width: 0;
}

.actions-container.googleDriveTag,
.actions-container.OneDriveTag {
  min-width: 0;
  max-width: 100%;
}

.actions-container.googleDriveTag .icon-gdrive,
.actions-container.OneDriveTag .icon-gdrive {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  overflow: hidden;
  white-space: nowrap;
}

.actions-container.googleDriveTag .integdrive-text,
.actions-container.OneDriveTag .integdrive-text {
  flex: 0 0 auto;
}

.actions-container.googleDriveTag .integdrive-text.integration-drive-label--muted,
.actions-container.OneDriveTag .integdrive-text.integration-drive-label--muted {
  color: var(--dark-gray);
}

.integration-drive-breadcrumb {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 1.2rem;
  overflow: hidden;
  white-space: nowrap;
}

.integration-drive-breadcrumb .breadcrumb-item {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
  gap: 5px;
}

.integration-drive-breadcrumb .breadcrumb-item span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-drive-breadcrumb .breadcrumb-item:not(.active):not(.integration-drive-breadcrumb__ellipsis) span {
  max-width: 12rem;
}

.integration-drive-breadcrumb .breadcrumb-item.active {
  flex: 1 1 auto;
}

.integration-drive-breadcrumb .breadcrumb-item.active span {
  max-width: 100%;
}

.integration-drive-breadcrumb .integration-drive-breadcrumb__ellipsis {
  flex: 0 0 auto;
  cursor: default;
}

.integration-drive-folder-card .folderIconF1,
.integration-drive-folder-card:hover .folderIconF1 {
  display: none !important;
  visibility: hidden !important;
}

.integration-drive-list-row .fileMangerUnCheckIcon,
.integration-drive-list-row:hover .fileMangerUnCheckIcon {
  display: none !important;
  visibility: hidden !important;
}

.integration-drive-list-row .fileManger-name {
  padding-left: 0;
}

.action {
  display: flex;
  align-items: center;
  padding: 0.8rem 1.3rem;
  border: 0.1rem solid var(--color-border-light);
  background-color: var(--color-background);
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.action:hover {
  background-color: var(--light-white);
}

.icon img {
  width: 2.2rem;
  height: 2.4rem;
  margin-right: 1.0rem;
}

.text {
  font-size: var(--font-size-15);
  color: var(--black);
  font-weight: 500;
}
.fmRenamePopup-common .fileManagerCommonPopup {
  width: 57rem;
}
.fileMultipleBg ul {
  background-color: var(--light-slate-brown-v3) !important;
}

.toggle-checkbox {
  display: none; /* Hide the checkbox */
}
.Chevron-label {
  cursor: pointer; /* Change cursor for better UX */
  display: inline-flex;
  align-items: center;
}
.Chevron {
  transition: transform 0.3s ease; /* Smooth rotation */
}

.Chevron.rotate {
  transform: rotate(90deg); /* Rotates 90 degrees for the down arrow */
}
/* Initially hide the dropdown */
.fm-sharedFiles-subMenu {
  /* Hide dropdown by default */
}
.serchHeaderIcon2 {
  position: absolute;
  right: 0; /* Position on the right side */
  top: 50%;
  transform: translateY(-50%);
  width: 4rem;
    height: 4rem;/* Adjust height */
  cursor: pointer;
  z-index: 9999;
  background-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.typeicon{
  width: 2rem; /* Adjusted width */
  height: 2rem; /* Adjusted height */

}
.fileDropS2.fileAnySaerch.fm-searchByType-any{
  background-color: var(--dark-white);
}
.fileDropT2:hover {
  background-color: var(--dark-white) /* Highlight effect on hover */
}
.file-manager-dropdown2 ul li:hover{
  z-index: 1001;
  background: var(--dark-white);
}
.typeModifiedFilter-icons{
  /* margin, not padding: the fixed 2rem box must stay 2rem under Bootstrap's
     border-box reset. */
  margin-right: 1.5rem;
  /* Fixed square box keeps every label starting at the same x, whatever the
     source SVG's intrinsic size is. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  line-height: 0;
}

.typeModifiedFilter-icons img{
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}
.filterShorted-btn{
  margin-right: 2rem;
}
.hide-access-border li{
  border-bottom: none;
}
.cardWrap-2 {
  padding-bottom: 2.5rem;
}
.row-card-file-2 {
  flex-direction: row;
  flex-wrap: wrap;
  --auto-grid-min-size: 12rem;
  display: grid;
  grid-gap: 2rem;
  grid-gap: 2rem;
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--auto-grid-min-size), 1fr)
  );
}
.card-file-manager-2 {
  position: relative;
  padding: 1.2rem 1.2rem 1.2rem 1.2rem;
  height: 100%;
  border-radius: 0.8rem;
  border: 0.05rem solid var(--color-border-light);
  background: var(--color-surface);
}

.folderManger-2 {
  padding-bottom: 1rem;
  padding-top: 1rem;
  margin-bottom: 0px;
}

.foliderCardT3-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 0.3rem;
  cursor: pointer;
}
.foliderCardT6-2 {
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
}
.folderIconF1-2 {
  position: absolute;
  z-index: 998;
  background: var(--color-surface);
  visibility: hidden;
  left: 2.2rem;
  width: 2.5rem;
  margin-left: auto;
  margin-right: auto;
}
.foliderCardT6-2 .folderIcon-2 {
  padding-right: 0rem;
}

.folderLabel-2 {
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-15);
  line-height: 1.6rem;
  /* identical to box height, or 127% */
  color: var(--black);
  padding-left: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  width: 100%;
  max-width: 15rem;
  max-width: 12rem;
}
.list-view-shared{
  padding-left: 2rem;
}
.hide-access-border li{
  border-bottom: none;
}
.filesMoveInputScroll{
  max-height: 20rem;
  overflow: hidden scroll;
}

.fileMoreOptionPlus2 ul {
  height: 32rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.fileMoreOptionPlus3 ul {
  height: 32rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.filesNewTab:hover{
  background: var(--dark-white);
}
svg.plusicon{
  padding-right: 0.5rem;
}

.hideCheckbox{
  z-index: 1000 !important;
}

.file-manager-name-dropdown .filter-manager-item li{
  border-bottom: none;
}

.fm-sharedFiles-subMenu-2 span{
  margin-bottom: 0.125rem !important;
}

.sharedWithMe:hover{
  background-color: var(--dark-white);
  border-radius: 0.8rem;
}

.sharedByMe:hover{
  background-color: var(--dark-white);
  border-radius: 0.8rem;
}
.back-icon-container {
  display: flex;
  align-items: center; /* Align items in a row */
  padding-bottom: 0.5rem;
  padding-top: 1.5rem;
  font-size: var(--font-size-15);
  margin-bottom: 0;
}
.back-text {
  /* Style for the text next to the back icon */
  font-size: var(--font-size-17); /* Set a font size for the text */
  font-weight: 500; /* Set a font weight if needed */
  color: var(--black); /* Use your theme's text color */

  padding-left: 1rem;
  padding-top: 2rem;
}
.back-icon{
  cursor: pointer;
  width: 11px; /* Set your desired width */
  height: 11px;
}
.back-icon img {
  width: 100%; /* Make the image take up the full width of the div */
  height: auto; /* Maintain aspect ratio */
}
.driveBackArrow {
  width: 100%;
  max-width: 1.3rem;
  margin-top: 0.5rem;
  display: inline-block;
}
.NameFiltergap{
  display: block;
  margin-left: 2rem;
}

.fileMangerDropDown2 {
  position: absolute;
  top: 100%;
  background: var(--white);
  border: 0.1rem solid var(--color-border);
  border-radius: 0.4rem;
  box-shadow: 0px 1px 8px 0px rgb(from var(--color-text-primary) r g b / 20%), 2px 4px 22px 0px rgb(from var(--color-text-primary) r g b / 10%);
  width: 15.6rem;
  padding-top: 0 !important;
  margin-bottom: 0px;
  z-index: 999;
  left: 0;
  border-radius: 0.4rem;
  list-style: none;

}

.fileMangerDropDown2 li span {
  padding-left: 1.8rem !important;
  padding-top: 1.4rem !important;
  padding-bottom: 1.4rem !important;
  padding-right: 1.8rem !important;
  font-weight: 400;
  line-height: 2rem !important;
  display: flex;
}

.fileMangerDropDown2 li {
  margin-bottom: 0px !important;
}

.fileMangerDropDown2 li span img {
  width: 100%;
  max-width: 2rem;
  max-height: 2rem;
  margin-right: 0.6rem;
}

.fileMangerDropDown2 li:last-child {
  border-bottom: none;
}

.EmptyfilesNewTab {
  width: 10rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-radius: 0.8rem;
  background: var(--color-brand);
  margin-bottom: 2.0rem;
  color: var(--color-text-secondary);
  text-align: center;

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  align-items: center;
  cursor: pointer;
  margin-top: 2rem;
  position: relative;
}



.EmptyfilesNewTab .EmptyfilesMenuIcons {
  color: var(--color-text-inverse);
  text-align: center;

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 2.0rem;
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
}

.fm-search-scrollheight{
  height:20rem;
  overflow-y:auto ;
  overflow-x:hidden ;
}
.hideCLsIcon{
  width: 2rem;
  padding: 2px 0;
}
.hideCLsIcon img {
  display: none;
}
.ctabuttons{
  width: 92%;
  display: flex;
  justify-content: end;
  align-items: center;
  position: fixed;
  bottom: -3rem;
  background: var(--color-surface);
  padding: 0.5rem 2rem;
}

.manageaceess {
  width: max-content;
  min-width: 15rem;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--white);
  font-size: var(--font-size-15);
  z-index: 100000;
}
.manageaceess ul{
  list-style: none;
  box-shadow: 0px 4px 17px 0px rgb(from var(--color-text-primary) r g b / 15%);
  z-index: 999;
  border: 0.1rem solid var(--gray);
  border-radius: 0.3rem;
  margin: 0;
  padding: 0;
  background: var(--white);

}
.manageaceess li{
    list-style: none;
    color: var(--brown);
    font-size: var(--font-size-15);

    font-weight: 550;
    line-height: 1.9rem;
    border-bottom: 0.1rem solid var(--gray);
    padding: 0 1rem;
    line-height: 4.8rem;
    cursor: pointer;
    padding-right: 2rem;
    white-space: nowrap;
}
.manageaceess li:last-child {
  border-bottom: none;
}
.manageaceess li.is-active,
.manageaceess ul li:hover {
  background: var(--light-slate-gray);
}
.manageaccessIcon{
  width: 2rem;
  display: inline-block;
}
.access-manage-container{
  position: relative;
  height: 8rem;
}
.access-manage-btn {
  color: var(--brown);
  text-align: center;
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 2.0rem;
  /* 153.846% */
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  background-position: center right 1rem;
  background-repeat: no-repeat;
  padding: 1rem 1.5rem;
  cursor: pointer;
  /* Grows with the role name — "Commenter" doesn't fit the old fixed 9rem, and
     a wrapped label pushed the whole share row out of shape. Viewer/Editor
     still render at exactly the width they had. */
  gap: 0.8rem;
  white-space: nowrap;
  width: auto;
  min-width: 9rem;
  height: 100%;
}
.access-manage-dropdwon {
  list-style: none;
  box-shadow: 0px 4px 17px 0px rgb(from var(--color-text-primary) r g b / 15%);
  z-index: 999;
  border: 0.1rem solid var(--gray);
  border-radius: 0.3rem;
  position:absolute;
  /* Follows the trigger, so the longest role name is readable in the list. */
  width: 100%;
  min-width: 9rem;
  background: var(--white);

}
.access-manage-dropdwon li{
    list-style: none;
    color: var(--brown);
    font-size: var(--font-size-15);

    font-weight: 550;
    line-height: 1.9rem;
    border-bottom: 0.1rem solid var(--gray);
    padding: 0 1rem;
    line-height: 4.8rem;
    cursor: pointer;
    padding-right: 2rem;
    white-space: nowrap;
    width: 100%;
}
.access-manage-dropdwon li:hover {
  background: var(--light-slate-gray);
}
.sharedResultinput{
  border-radius: 0.3rem;
    border: 1px solid var(--color-border-light);
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 1.2rem;
    position: relative;
    color: var(--brown);
    font-size: var(--font-size-15);

    font-weight: 500;
    line-height: 1.7rem;
    padding-right: 1rem;
}

.relative {
  position: relative;
}

.breadcrumb-dropdown {
  max-height: 16.4rem;
  overflow-y: auto;
}

.dropdown_movelist {
  list-style: none;
  width: 25.1rem;
  height: 4.8rem;
  display: flex;
  justify-content: start;
  align-items: center;
  cursor: pointer;
}

.dropdown_movelist:hover {
  background: var(--color-background);
}
.disabledClass{
  cursor: not-allowed;
  opacity: 0.8;
}
.favourite-tag{
  float: inherit !important;
    width: 24px;
    height: 24px;
}
.favourite-tag svg {
    width: 100%;
    height: 100%;
}
.Meeting-disabledBtn {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events:none;
}
.folderIconF1.wrapper-hidden {
    display: none;
}

.folderIcon.hidden {
    display: none;
}

/* Hover unselected folder shows uncheck icon */
.folderManger:hover .folderIconF1:not(.folder-showcheckbox) {
    display: inline-block;
}

/* Checked state */
.folderIconF1.folder-showcheckbox {
    display: inline-block;
}

.ml-2 {
  margin-left: 2rem;
}
#favourite-openFolder {
    margin-left: 2rem;
}

.file-size-space {
  font-size: var(--font-size-21);
}
.fileMangerDropDown li.disabled {
    opacity: 0.5;           /* make it look disabled */
    cursor: not-allowed;    /* show forbidden cursor */
    pointer-events: none;   /* prevent any click */
}


.leftMenu-file-manager{
  height: calc(-7.7rem + 100vh) !important;
}

.leftMenu-file-manager:hover{
  overflow-y: auto;
}




.translation-file-snackbar {
            background: var(--color-surface);
            border-radius: 0.8rem;
            padding: 1.4rem 1.6rem 1.2rem;
            box-shadow: 0 8px 32px rgb(from var(--color-text-primary) r g b / 14%);
            max-width: 36rem;
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 0.8rem;
            position: fixed;
            animation: slideUp 0.4s ease-out;
            bottom: 2rem;
            left: 2rem;
            z-index: 99999;

        }

        .tf-body {
            display: flex;
            align-items: center;
            gap: 1.2rem;
            flex: 1;
            order: 1;
            min-width: 0;
        }

        .tf-icon-circle {
            width: 3.6rem;
            height: 3.6rem;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-hover) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .tf-text {
            flex: 1;
            overflow: hidden;
        }

        .tf-progress-track {
            width: 100%;
            height: 0.4rem;
            background: var(--color-surface-alt);
            border-radius: 99px;
            overflow: hidden;
            order: 3;
        }

        .tf-progress-bar {
            height: 100%;
            width: 0%;
            background: var(--color-brand);
            border-radius: 99px;
            transition: width 0.3s ease;
        }

        .tf-cancel-confirm {
            display: flex;
            gap: 0.8rem;
            justify-content: flex-end;
            margin-top: 0.4rem;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .translation-file-icon-wrapper {
            position: relative;
            width: 80px;
            height: 80px;
            margin-bottom: 24px;
        }

        .translation-file-icon {
            width: 64px;
            height: 64px;
            background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-hover) 100%);            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .translation-file-icon svg {
            width: 36px;
            height: 36px;
            fill: white;
        } */

        /* Circular loader around icon */












































































































#zipPreviewContainer {
  background: var(--color-background);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 12px 32px rgb(from var(--color-text-primary) r g b / 14%);
  max-height: 360px;
  overflow-y: auto;

}

#zipPreviewContainer h5 {
  margin: 0 0 12px;
  font-size: var(--font-size-17);
  font-weight: 600;
  color: var(--color-text-primary);
}

#zipFileList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#zipFileList .zip-row {
  display: grid;
  grid-template-columns: 1fr 140px 120px;
  align-items: center;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  color: var(--color-text-primary);
  font-size: var(--font-size-15);
  line-height: 1.4;
  word-break: break-word;
}

#zipFileList .zip-row:hover {
  background: var(--color-background);
  border-color: var(--color-border-light);
}

#zipFileList .zip-empty {
  text-align: center;
  color: var(--color-text-secondary);
  font-style: italic;
  border-style: dashed;
}

.zip-col {
  display: flex;
  align-items: center;
  gap: 8px;
}

.zip-name {
  min-width: 0;
}

.zip-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zip-meta,
.zip-size {
  color: var(--color-text-secondary);
  justify-content: flex-end;
}

.zip-pill {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.zip-type-video { background: var(--color-error); }
.zip-type-image { background: var(--color-info); }
.zip-type-archive { background: var(--color-warning); }
.zip-type-doc { background: var(--color-success); }
.zip-type-generic { background: var(--color-text-secondary); }


.icon-gdrive{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* FM02 notification tray - View on Drive button */
.file-access-view-drive {
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--color-brand);
  background: transparent;
  border: none;
  padding: 0.3rem 0;
  cursor: pointer;
  text-decoration: underline;
  display: block;
  margin-top: 0.4rem;
}

/* Pending access requests in share popup */
.fm-pending-requests-section {
  background: var(--light-slate-gray, var(--light-slate-gray));
  border: 0.1rem solid var(--gray, var(--color-border-light));
  border-radius: 0.8rem;
  padding: 1.2rem 1.4rem;
  margin: 1rem 0 1.4rem;
}

/* Collapsed summary bar shown when >1 pending requests */
.fm-pending-requests-summary {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: transparent;
  color: var(--black, var(--color-text-primary));
  border-radius: 0.8rem;
  padding: 0;
  cursor: pointer;
}

.fm-pending-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  color: var(--slate-gray, var(--color-text-secondary));
}

.fm-pending-summary-icon svg {
  width: 2rem;
  height: 2rem;
}

.fm-pending-summary-text {
  flex: 1;
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--black, var(--color-text-primary));
}

.fm-pending-summary-review {
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--light-slate-brown-v1, var(--light-slate-brown-v1));
  padding: 0.4rem 0.8rem;
  flex-shrink: 0;
}

.fm-pending-summary-review:hover {
  color: var(--black, var(--color-text-primary));
}

.fm-pending-requests-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

.fm-pending-requests-heading {
  display: block;
}

.fm-pending-review-all {
  font-size: var(--font-size-15);
  color: var(--light-slate-brown-v1, var(--light-slate-brown-v1));
  cursor: pointer;
  text-decoration: underline;
  font-weight: 600;
}

.fm-pending-review-all:hover {
  color: var(--black, var(--color-text-primary));
}

.fm-pending-request-row {
  display: flex;
  align-items: center;
  padding: 0.7rem 0;
  gap: 0.9rem;
}

.fm-pending-request-row + .fm-pending-request-row {
  border-top: 0.1rem solid var(--gray, var(--color-border-light));
}

.fm-pending-request-row .fileEamilT1 {
  flex-shrink: 0;
}

.fm-pending-request-info {
  flex: 1;
  min-width: 0;
}

.fm-pending-request-name {
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--black, var(--color-text-primary));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fm-pending-request-permission {
  font-size: var(--font-size-11);
  color: var(--slate-gray, var(--color-text-secondary));
}

.fm-pending-request-review {
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--light-slate-brown-v1, var(--light-slate-brown-v1));
  cursor: pointer;
  margin-left: auto;
  padding: 0.4rem 0.8rem;
}

.fm-pending-request-review:hover {
  color: var(--black, var(--color-text-primary));
}

.fm-pending-request-status {
  font-size: var(--font-size-13);
  color: var(--dark-gray, var(--color-text-secondary));
  font-style: italic;
}

/* --- Single Access Request Review Popup --- */
.fm-review-popup .fm-review-card,
.fm-review-bulk-popup .fm-review-bulk-card {
  width: 52rem;
  max-width: 92vw;
  max-height: 86vh;
  background: var(--white, var(--color-surface));
  border-radius: 1rem;
  padding: 0;
  box-shadow: 0 0.6rem 2.4rem rgb(from var(--color-text-primary) r g b / 18%);
  display: flex;
  flex-direction: column;
  overflow: hidden;

}

.fm-review-bulk-popup .fm-review-bulk-card {
  width: 56rem;
}

.fm-review-popup .fm-review-header,
.fm-review-bulk-popup .fm-review-header {
  flex-shrink: 0;
  padding: 2rem 2.2rem 1.2rem;
  margin: 0;
  border-bottom: 0.1rem solid var(--gray, var(--color-border-light));
  background: var(--white, var(--color-surface));
}

.fm-review-popup .fm-review-body,
.fm-review-bulk-popup .fm-review-bulk-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.6rem 2.2rem;
  min-height: 0;
}

.fm-review-popup .fm-review-footer {
  flex-shrink: 0;
  padding: 1.2rem 2.2rem 2rem;
  border-top: 0.1rem solid var(--gray, var(--color-border-light));
  background: var(--white, var(--color-surface));
}

.fm-review-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.fm-review-back,
.fm-review-bulk-back {
  cursor: pointer;
  display: inline-flex;
  width: 2.4rem;
  height: 2.4rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
}

.fm-review-back:hover,
.fm-review-bulk-back:hover {
  background: var(--light-slate-gray, var(--light-slate-gray));
}

.fm-review-back img,
.fm-review-bulk-back img {
  width: 1.6rem;
  height: 1.6rem;
}

.fm-review-title {
  font-size: var(--font-size-17);
  font-weight: 600;
  color: var(--black, var(--color-text-primary));
}

.fm-review-requester {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}

.fm-review-avatar {
  flex-shrink: 0;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 0.4rem;
  background: var(--dropdown, var(--dropdown));
  color: var(--white, var(--color-text-inverse));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-15);
  font-weight: 600;
}

.fm-review-requester-info {
  flex: 1;
  min-width: 0;
}

.fm-review-requester-name {
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--black, var(--color-text-primary));
}

.fm-review-requester-email {
  font-size: var(--font-size-15);
  color: var(--slate-gray, var(--color-text-secondary));
  margin-top: 0.2rem;
}

.fm-review-message-bubble {
  background: var(--light-slate-brown-v1, var(--light-slate-brown-v1));
  color: var(--white, var(--color-text-inverse));
  font-size: var(--font-size-15);
  padding: 1rem 1.4rem;
  border-radius: 1.4rem 1.4rem 1.4rem 0.4rem;
  margin: 0 0 1.6rem 0;
  display: inline-block;
  max-width: 80%;
}

.fm-review-permission {
  margin-bottom: 1.4rem;
  width: fit-content;
}

.fm-review-popup .access-manage-btn,
.fm-review-bulk-popup .access-manage-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: auto;
  min-width: 11rem;
  border: 0.1rem solid var(--gray, var(--color-border-light));
  border-radius: 0.4rem;
  padding: 0.8rem 1.2rem;
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--black, var(--color-text-primary));
  background: var(--white, var(--color-surface));
  cursor: pointer;
}

.fm-review-popup .access-manage-dropdwon,
.fm-review-bulk-popup .access-manage-dropdwon {
  z-index: 9;
}

.fm-review-notify-wrap,
.fm-review-bulk-notify-wrap,
.fm-review-bulk-card-notify-wrap {
  margin-top: 1rem;
}

.fm-review-popup .shareFileNotifyTitle_container,
.fm-review-bulk-popup .shareFileNotifyTitle_container {
  display: flex;
  align-items: center;
  margin-bottom: 1.4rem !important;
}

/* The single review popup has no message box, so the notify row is the last
   thing in the body - drop the gap that sat above that textarea. */
.fm-review-popup .fm-review-notify-wrap .shareFileNotifyTitle_container {
  margin-bottom: 0 !important;
}

.fm-review-popup .shareFileNotifyInput,
.fm-review-bulk-popup .shareFileNotifyInput {
  width: 100%;
  min-height: 7rem;
  border: 0.1rem solid var(--gray, var(--color-border-light));
  border-radius: 0.6rem;
  padding: 1rem 1.2rem;
  font-size: var(--font-size-15);
  resize: vertical;
  background: var(--white, var(--color-surface));
  color: var(--black, var(--color-text-primary));
}

.fm-review-footer,
.fm-review-bulk-actions,
.fm-review-bulk-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.8rem;
}

.fm-review-popup .cancelButtonGlobal,
.fm-review-bulk-popup .cancelButtonGlobal {
  background: transparent;
  color: var(--black, var(--color-text-primary));
  border: 0.1rem solid var(--gray, var(--color-border-light));
  border-radius: 0.4rem;
  padding: 0.8rem 2rem;
  font-size: var(--font-size-15);
  font-weight: 600;
  cursor: pointer;
}

.fm-review-popup .cancelButtonGlobal:hover,
.fm-review-bulk-popup .cancelButtonGlobal:hover {
  background: var(--light-slate-gray, var(--light-slate-gray));
}

.fm-review-popup .submitButtonGlobal,
.fm-review-bulk-popup .submitButtonGlobal {
  background: var(--red, var(--color-brand));
  color: var(--white, var(--color-text-inverse));
  border: none;
  border-radius: 0.4rem;
  padding: 0.8rem 2rem;
  font-size: var(--font-size-15);
  font-weight: 600;
  cursor: pointer;
}

.fm-review-popup .submitButtonGlobal:hover,
.fm-review-bulk-popup .submitButtonGlobal:hover {
  opacity: 0.9;
}

/* --- Bulk Review Popup --- */
.fm-review-bulk-all {
  background: var(--light-slate-gray, var(--light-slate-gray));
  border: 0.1rem solid var(--gray, var(--color-border-light));
  border-radius: 0.8rem;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.4rem;
}

.fm-review-bulk-all-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.fm-review-bulk-all-icon {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 0.4rem;
  color: var(--white, var(--color-text-inverse));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-15);
  font-weight: 600;
  flex-shrink: 0;
}

.fm-review-bulk-all-title {
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--black, var(--color-text-primary));
}

.fm-review-bulk-all-desc {
  font-size: var(--font-size-15);
  color: var(--slate-gray, var(--color-text-secondary));
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

.fm-review-bulk-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fm-review-bulk-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fm-review-bulk-card-row {
  border-top: 0.1rem solid var(--gray, var(--color-border-light));
  padding: 0;
}

.fm-review-bulk-card-row:first-child {
  border-top: none;
}

.fm-review-bulk-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0;
  cursor: pointer;
  user-select: none;
}

.fm-accordion-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.fm-accordion-caret img {
  width: 1.8rem;
  height: 1.8rem;
}

.fm-accordion-open .fm-accordion-caret {
  transform: rotate(180deg);
}

.fm-review-bulk-card-body {
  padding: 0 0 1.4rem 0;
}

.fm-review-bulk-card-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.8rem;
}

.fm-review-bulk-card-message {
  width: 100%;
  min-height: 6rem;
  border: 0.1rem solid var(--gray, var(--color-border-light));
  border-radius: 0.6rem;
  padding: 0.8rem 1rem;
  font-size: var(--font-size-15);
  resize: vertical;
  background: var(--white, var(--color-surface));
  color: var(--black, var(--color-text-primary));
}

.fm-review-bulk-card-notify-label,
.fm-review-notify-label,
.fm-review-bulk-notify-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 0.8rem;
  user-select: none;
}

input.fm-review-bulk-card-notify-checkbox,
input.fm-review-notify-checkbox,
input.fm-review-bulk-notify-checkbox {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--red, var(--color-brand));
}

.fm-review-bulk-card-notify-label .notiftContact,
.fm-review-notify-label .notiftContact,
.fm-review-bulk-notify-label .notiftContact {
  font-size: var(--font-size-15);
  color: var(--black, var(--color-text-primary));
}

/* ---- Send button loading spinner ---- */
.fm-btn-spinner {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  border: 0.2rem solid rgb(from var(--white) r g b / 40%);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: fm-btn-spin 0.6s linear infinite;
  vertical-align: middle;
}
@keyframes fm-btn-spin {
  to { transform: rotate(360deg); }
}
/* ── Dashboard Doc Translate Popup ─────────────────────── */

.ddt-modal {
  width: 48rem;
  max-width: 95vw;
  padding: 0;
  border-radius: 1rem;
  overflow: visible;
}

.ddt-modal .translator-body-section {
  padding: 2rem 0 1rem;
  position: relative;
}

.ddt-dropzone {
  margin: 1.2rem 2.5rem;
  border: 2px dashed var(--color-border-light);
  border-radius: 0.8rem;
  background: var(--color-background);
  padding: 2.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.ddt-dropzone.ddt-dragover {
  background: rgb(from var(--color-brand) r g b / 8%);
  border-color: var(--color-brand);
}

.ddt-icon-circle {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: rgb(from var(--color-brand) r g b / 8%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4rem;
}

.ddt-drop-text {
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  text-align: center;
}

.ddt-or-browse {
  font-size: var(--font-size-15);
  color: var(--color-text-secondary);
  margin: 0;
  text-align: center;
}

.ddt-browse-link {
  color: var(--color-brand);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.ddt-hint-text {
  font-size: var(--font-size-11);
  color: var(--color-text-muted);
  margin: 0;
  text-align: center;
}

.ddt-file-name {
  font-size: var(--font-size-15);
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0.4rem 0 0;
  text-align: center;
  word-break: break-all;
}

.ddt-modal .support-language-section {
  padding: 0 2.5rem;
  margin-top: 0.8rem;
}

.ddt-modal .language-title {
  margin-bottom: 0.4rem;
}

.ddt-modal .language-title .support-label {
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 0.2rem;
}

.ddt-modal .language-title .subtitle-label {
  font-size: var(--font-size-13);
  color: var(--color-text-secondary);
  margin: 0;
}

#ddt-file-languages {
  padding: 0 2.5rem;
  position: relative;
}

#ddt-file-languages .file-language-list-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem;
  margin-top: 1rem;
  border-radius: 0.4rem;
  cursor: pointer;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-light);
}

#ddt-file-languages .file-language-list-container:hover {
  border-color: var(--color-text-muted);
}

#ddt-file-languages .langDropdownTranslateFile {
  position: fixed;
  background: var(--color-surface);
  height: 20rem;
  overflow-y: auto;
  width: calc(100% - 5rem);
  top: auto;
  left: 2.5rem;
  border: 1px solid var(--color-border-light);
  border-radius: 0.4rem;
  z-index: 9999;
  box-shadow: 0 4px 12px rgb(from var(--color-text-primary) r g b / 10%);
}

#ddt-file-languages .language-search-li {
  position: sticky;
  top: 0;
  background-color: var(--color-surface);
  padding: 0.8rem !important;
  z-index: 1;
  border-bottom: 1px solid var(--color-border-light);
}

#ddt-file-languages .language-search-li:hover {
  background-color: var(--color-surface) !important;
}

#ddt-file-languages .language-search-input {
  width: 100%;
  padding: 0.8rem 1.2rem;
  border: 1px solid var(--color-border-light);
  border-radius: 0.4rem;
  font-size: var(--font-size-15);
  color: var(--color-text-secondary);
  outline: none;
  box-sizing: border-box;
}

#ddt-file-languages .language-search-input:focus {
  border-color: var(--color-brand);
}

#ddt-file-languages .ddt-language-status {
  padding: 1.4rem 1.2rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-13);
  text-align: center;
}

#ddt-file-languages .ddt-language-retry {
  cursor: pointer;
}

#ddt-file-languages .ddt-language-retry:hover,
#ddt-file-languages .ddt-language-retry:focus {
  color: var(--color-brand);
  outline: none;
}
/* ── End Dashboard Doc Translate Popup ──────────────────── */

/* ── Translator Sessions Panel ──────────────────────────── */
#doc-translate-sessions-panel {
  position: fixed;
  bottom: 0;
  left: 2rem;
  width: 80%;
  max-width: 46.7rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 2px 6px rgb(from var(--color-text-primary) r g b / 20%);
  z-index: 9000;
  overflow: hidden;
  max-height: 40vh;
  display: flex;
  flex-direction: column;

}

#doc-translate-sessions-panel .uploadFilesListContainer {
  overflow-y: auto;
  flex: 1;
}

#doc-translate-sessions-panel.collapsed .uploadFilesListContainer {
  display: none;
}

#doc-translate-sessions-panel .uploadCaretBGTn img {
  transition: transform 0.3s ease;
}

#doc-translate-sessions-panel.collapsed .uploadCaretBGTn img {
  transform: rotate(180deg);
}

#doc-translate-sessions-panel .uploadFileName { font-size: var(--font-size-13); }
.dt-row-active .dt-open-btn { color: var(--color-brand); font-weight: 600; }
/* ── End Translator Sessions Panel ─────────────────────── */

@keyframes fmNewItemPulse {
    0%   { background-color: rgb(from var(--color-info) r g b / 20%); }
    100% { background-color: transparent; }
}
.fm-new-item-highlight {
    animation: fmNewItemPulse 2s ease-out forwards;
    border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/* Group/Topic LIST view (Shared With/By Me → Group/Topic)            */
/* Task 2: show only the Name column and make the header non-sortable. */
/* ------------------------------------------------------------------ */
.fileListingT1.fmGroupTopicList .fileHeaderT2 .h-owner,
.fileListingT1.fmGroupTopicList .fileHeaderT2 .h-lastOpened,
.fileListingT1.fmGroupTopicList .fileHeaderT2 .h-fileSize,
.fileListingT1.fmGroupTopicList .list-all-contentbody .fm-fileOwner,
.fileListingT1.fmGroupTopicList .list-all-contentbody .fm-date,
.fileListingT1.fmGroupTopicList .list-all-contentbody .fileItemF5nfm-size {
    display: none;
}

.fileListingT1.fmGroupTopicList .fileHeaderT2 .h-name {
    max-width: 100%;
    cursor: default;
}

/* The rows here are groups and teams, not files or folders — they can't be
   shared, moved or deleted, so don't offer a multi-select checkbox on them.
   (Opening a group shows its real files, where selection applies again.) */
.fileListingT1.fmGroupTopicList .list-all-contentbody .checkbox {
    display: none !important;
}

/* Task 1: on the group/topic list view, disable the Type/Modified filters and  */
/* show a search box for that list at the end of the same row.                   */
.typeModifiedWrap.fmFiltersDisabled {
    display: flex;
    width: 100%;
}

.typeModifiedWrap.fmFiltersDisabled .fileType {
    opacity: 0.5;
    cursor: not-allowed; /* show the disabled cursor on hover */
}

/* Children are inert (no dropdown open / click), but the .fileType parent still
   receives hover so the not-allowed cursor shows. */
.typeModifiedWrap.fmFiltersDisabled .fileType > * {
    pointer-events: none;
}

/* Disable the sort ("Name") dropdown and the grid/list view toggle on the
   group/topic list view. Parent keeps hover for the not-allowed cursor; the
   clickable children are made inert. */
.fileMagerRighSideIcon.fmControlsDisabled .fileName,
.fileMagerRighSideIcon.fmControlsDisabled #fm-toggleView {
    opacity: 0.5;
    cursor: not-allowed;
}

.fileMagerRighSideIcon.fmControlsDisabled .fileName > *,
.fileMagerRighSideIcon.fmControlsDisabled #fm-toggleView > * {
    pointer-events: none;
}

.fmGroupTopicSearch {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    width: 100%;
    max-width: 28rem;
    height: 4.6rem;
    margin-right: 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: 0.4rem;
}

.fmGroupTopicSearchIcon {
    display: inline-flex;
    align-items: center;
}

.fmGroupTopicSearchIcon img {
    /* Darken the light-grey (#9C9696) magnifier so it doesn't read as disabled. */
    filter: brightness(0.35);
}

.fmGroupTopicSearchInput {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--popup);
    font-size: var(--font-size-15);
}

.fmGroupTopicSearchInput::placeholder {
    color: var(--color-text-secondary); /* darker, clearly-active placeholder (browser default is very light) */
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   Details panel — Details / Activity tabs and the file/folder activity log
   --------------------------------------------------------------------------- */

.fileDetailTabsWrap {
    padding: 0 1.2rem 0 2rem;
    margin-bottom: 1.5rem;
    border-bottom: 0.1rem solid var(--color-border-light);
}

.fileDetailTabsList {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2.4rem;
}

.fileDetailTabsList li span {
    display: inline-block;
    padding: 0.8rem 0.2rem;
    border-bottom: 0.2rem solid transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-15);
    font-weight: 600;
    line-height: 1.9rem;
    cursor: pointer;
}

.fileDetailTabsList li span:hover {
    color: var(--color-text-primary);
}

.fileDetailTabsList li span:focus-visible {
    outline: 0.2rem solid var(--color-focus-ring);
    outline-offset: 0.2rem;
}

.fileDetailTabsList li span.selected {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
}

.fileActivityWrap {
    padding: 0 1.2rem 2rem 2rem;
}

/* Loading / empty / error states share one centred block. */
.fileActivityState {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 4rem 1rem;
    text-align: center;
}

.fileActivityStateTitle {
    color: var(--color-text-primary);
    font-size: var(--font-size-15);
    font-weight: 600;
}

.fileActivityStateText {
    color: var(--color-text-secondary);
    font-size: var(--font-size-15);
    line-height: 2rem;
}

.fileActivitySpinner {
    width: 2.4rem;
    height: 2.4rem;
    border: 0.2rem solid var(--color-border-light);
    border-top-color: var(--color-brand);
    border-radius: 50%;
    animation: fm-activity-spin 0.8s linear infinite;
}

@keyframes fm-activity-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fileActivitySpinner {
        animation-duration: 3s;
    }
}

.fileActivityGroupTitle {
    color: var(--color-text-secondary);
    font-size: var(--font-size-13);
    font-weight: 600;
    letter-spacing: 0.02rem;
    line-height: 1.8rem;
    padding: 1.6rem 0.8rem 0.4rem 0.8rem;
}

.fileActivityGroupTitle:first-child {
    padding-top: 0.4rem;
}

/* One feed row. No divider rules: the feed reads as a list of cards separated
   by space, the way Drive's activity panel does, with the whole row as the
   hover/click target. */
.fileActivityItem {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1rem 0.8rem;
    border-radius: 0.8rem;
    transition: background-color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .fileActivityItem {
        transition: none;
    }
}

.fileActivityAvatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: var(--color-brand-light);
    color: var(--color-brand);
    font-size: var(--font-size-11);
    font-weight: 700;
    letter-spacing: 0.03rem;
    text-transform: uppercase;
}

.fileActivityBody {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.fileActivityDesc {
    color: var(--color-text-primary);
    font-size: var(--font-size-13);
    line-height: 1.9rem;
    word-break: break-word;
}

/* The object the entry is about, picked out of the server's sentence. */
.fileActivityName {
    font-weight: 600;
}

/* Icon of the object an entry is about, inline in front of its description so
   a rolled-up row says at a glance whether it was a file or a folder. */
.fileActivityObjIcon {
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.6rem;
    vertical-align: -0.3rem;
}

/* Chip row: where it happened, and what changed. */
.fileActivityMeta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-top: 0.2rem;
}

/* "in <folder> / <folder>" - only on rows about something nested below the item
   being viewed, so a rolled-up event is not read as having happened here. The
   chip is one line: it elides its own segments rather than wrapping. */
.fileActivityIn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.2rem 0.8rem 0.2rem 0.6rem;
    border-radius: 1.2rem;
    background: var(--color-background);
    color: var(--color-text-secondary);
    font-size: var(--font-size-11);
    line-height: 1.8rem;
    min-width: 0;
}

.fileActivityInIcon {
    width: 1.4rem;
    height: 1.4rem;
    flex: 0 0 auto;
    /* The shared folder glyph is a solid dark fill; at chip size it reads as a
       blob unless it is softened to sit with the muted label beside it. */
    opacity: 0.65;
}

/* The localized "in" around the path - deliberately quieter than the names. */
.fileActivityInLabel {
    flex: 0 0 auto;
    opacity: 0.85;
}

.fileActivityPath {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

/* Each folder name shrinks on its own, so a long name in the middle of a chain
   gives way before the chain loses a step. */
.fileActivityPathSeg {
    min-width: 0;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The folder the event actually happened in - the end of the chain is what the
   reader is looking for, so it carries the weight. */
.fileActivityPathLeaf {
    flex: 0 1 auto;
    color: var(--color-text-primary);
    font-weight: 600;
}

.fileActivityPathSep {
    flex: 0 0 auto;
    opacity: 0.5;
}

.fileActivityChange {
    align-self: center;
    padding: 0.2rem 0.8rem;
    border: 0.1rem solid var(--color-border-light);
    border-radius: 1.2rem;
    color: var(--color-text-secondary);
    font-size: var(--font-size-11);
    line-height: 1.8rem;
}

.fileActivityTarget {
    color: var(--color-text-secondary);
    font-size: var(--font-size-13);
    line-height: 1.8rem;
    word-break: break-word;
}

.fileActivityTime {
    color: var(--color-text-muted);
    font-size: var(--font-size-11);
    line-height: 1.8rem;
}

/* Rows that can be clicked through to where the event happened. */
.fileActivityItemLink {
    cursor: pointer;
}

.fileActivityItemLink:hover,
.fileActivityItemLink:focus-visible {
    background: var(--color-background);
}

.fileActivityItemLink:hover .fileActivityIn,
.fileActivityItemLink:focus-visible .fileActivityIn {
    background: var(--color-surface);
}

.fileActivityMoreWrap {
    display: flex;
    justify-content: center;
    padding-top: 1.6rem;
}

.fm-activity-more[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}


/* --- Trash banner ------------------------------------------------------- */
/* Retention notice with the whole-trash actions on the right, shown above the
   file/folder listing on the Trash root view (grid and list). */
.fmTrashBanner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    flex-wrap: wrap;
    margin: 0 2rem 1.2rem 2rem;
    padding: 1.2rem 1.8rem;
    background: var(--color-surface-alt);
    border-radius: 0.8rem;
}

.fmTrashBannerText {
    color: var(--color-text-primary);
    font-size: var(--font-size-15);
    line-height: 2rem;
}

.fmTrashBannerActions {
    display: inline-flex;
    align-items: center;
    gap: 1.6rem;
}

.fmTrashBannerBtn {
    cursor: pointer;
    color: var(--color-info);
    font-size: var(--font-size-15);
    font-weight: 600;
    line-height: 2rem;
    border-radius: 0.4rem;
    padding: 0.2rem 0.4rem;
}

.fmTrashBannerBtn:hover,
.fmTrashBannerBtn:focus-visible {
    text-decoration: underline;
}

.fmTrashBannerBtn:focus-visible {
    outline: 0.2rem solid var(--color-focus-ring);
    outline-offset: 0.2rem;
}

/* Empty trash is destructive and can't be undone — mark it as such. */
.fmTrashBannerDanger {
    color: var(--color-error);
}

/* The banner sits in normal flow above the listings, but those listings size
   themselves off the viewport (`.fileListingT1` / `.list-Common`), so on Trash
   everything shifted down by the banner's height and the last row ended up
   under the screen edge. Hand that height back to whichever scroller is on
   screen. Keyed off the banner's own `hideCls`, so every other section — and
   Trash itself with the banner hidden (empty trash, open folder, multi-select)
   — keeps exactly the height it has today. */
#fmTrashBanner:not(.hideCls) ~ #container-list-all .fileListingT1,
#fmTrashBanner:not(.hideCls) ~ #container-trash .list-Common {
    /* 1.2 + 2 + 1.2 padding/line-height, plus the 1.2 bottom margin. */
    --fm-trash-banner-space: 5.6rem;
}

/* Multi-select "Restore" action (Trash only) — sized like its neighbours. */
.fileMultiple ul li .selectedF9 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.fileMultiple ul li .selectedF9 img {
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
}

/* Access-denied dialog: "Request access as" role chooser (Viewer / Commenter /
   Editor). Shared by the MelpUI modal and the legacy #fm-access-denied-details
   popup, which both get the markup from filesystem_controller. */
.fm-access-request-roles {
    border: 0;
    margin: 1.6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.fm-access-request-roles-title {
    padding: 0;
    margin-bottom: 0.4rem;
    font-size: var(--font-size-13);
    color: var(--color-text-secondary);
}

.fm-access-request-role {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0;
    cursor: pointer;
    user-select: none;
    width: fit-content;
}

.fm-access-request-role input[type="radio"] {
    width: 1.8rem;
    height: 1.8rem;
    margin: 0;
    accent-color: var(--red);
    cursor: pointer;
    flex-shrink: 0;
}

.fm-access-request-role-text {
    font-size: var(--font-size-15);
    color: var(--color-text-primary);
}