/*---------------------------------------- 
  Available Layout type names
-----------------------------------------*/
/*
 1. vertical-modern-menu-template
 2. vertical-menu-nav-dark-template
 3. vertical-gradient-menu-template
 4. vertical-dark-menu-template
 5. horizontal-menu-template

/* Need to change Layout name as per your requirement on below mentioned line.*/
/*
1. @import "../themes/vertical-gradient-menu-template/variables"; 
2. @import "../themes/vertical-gradient-menu-template/theme-variables";
*/
/* File manager application css */
/*------------------------------*/
.section {
  background: #fff;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin: 2rem 0;
  padding: 0;
  position: relative;
  /* Content area overlay */
  /* sidebar left */
  /*-------------*/
  /*App file sidebar info (right sidebar)*/
  /*------------------------------------*/
  /* Content right */
  /*--------------*/
}
.section .app-file-overlay {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: 7;
  visibility: hidden;
  opacity: 0;
  border-radius: 4px;
}
.section .app-file-overlay.show {
  visibility: visible;
  transition: all 0.3s ease;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.2);
}
.section i {
  vertical-align: middle;
  cursor: pointer;
  font-size: 22px;
}
.section .app-file-label {
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #bdbdbd;
  margin-left: 3px;
}
.section .sidebar-toggle {
  display: none;
  padding-top: 0.55rem;
}
.section .sidebar-left {
  float: left;
  width: 260px;
  padding: 1rem;
  position: relative;
}
.section .sidebar-left .app-file-sidebar .app-file-sidebar-left {
  width: 100%;
}
.section .sidebar-left .app-file-sidebar .app-file-sidebar-left .app-file-sidebar-close {
  position: absolute;
  right: 5px;
  top: 2px;
}
.section .sidebar-left .app-file-sidebar .app-file-sidebar-left .app-file-sidebar-close i {
  font-size: 1.3rem;
}
.section .sidebar-left .app-file-sidebar .app-file-sidebar-left .getfileInput {
  width: 0;
  height: 0;
  overflow: hidden;
}
.section .sidebar-left .app-file-sidebar .app-file-sidebar-left .file-manager-drive {
  border: none;
  margin: 1rem 0;
}
.section .sidebar-left .app-file-sidebar .app-file-sidebar-left .file-manager-drive .file-item-action {
  padding: 10px 0;
  border-bottom: none;
  color: #6B6F82;
}
.section .sidebar-left .app-file-sidebar .app-file-sidebar-left .file-manager-drive .file-item-action.active {
  background: transparent;
  color: #3f51b5;
}
.section .sidebar-left .app-file-sidebar .app-file-sidebar-left .file-manager-drive .file-item-action .chip {
  height: 22px;
  line-height: 22px;
  padding: 0px 8px;
  border-radius: 50%;
}
.section .sidebar-left .storage-icon {
  position: relative;
  top: 5px;
}
.section .app-file-sidebar-info {
  position: absolute;
  right: 32px;
  top: -1px;
  z-index: 8;
  transition: all 0.3s ease;
  box-shadow: -8px 0 18px 0 rgba(25, 42, 70, 0.13);
  height: 100%;
  width: 357px;
  border-radius: 0 0.25rem 0.25rem 0;
  transform: translateX(110%);
  opacity: 0;
}
.section .app-file-sidebar-info.show {
  opacity: 1;
  transform: translateX(9%) translateY(1px);
  background-color: #fff;
}
.section .app-file-sidebar-info .card-header {
  border-bottom: 1px solid #e0e0e0;
  padding: 1rem 1.6rem;
}
.section .content-right {
  width: calc(100% - 260px);
  float: right;
}
.section .content-right .app-file-area {
  border-left: 1px solid #e0e0e0;
}
.section .content-right .app-file-area .app-file-header {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  padding: 0.2rem 1rem;
}
.section .content-right .app-file-area .app-file-header .app-file-header-search {
  flex-grow: 1;
}
.section .content-right .app-file-area .app-file-header .app-file-header-search .input-field .prefix {
  font-size: 1.6rem;
  top: 0.7rem;
}
.section .content-right .app-file-area .app-file-header .app-file-header-search input {
  margin-bottom: 0;
  margin-left: 2.5rem;
  border-bottom: none;
  box-shadow: none;
}
.section .content-right .app-file-area .app-file-header .app-file-header-icons .fonticon-wrap {
  margin-left: 0.7rem;
}
.section .content-right .app-file-area .app-file-content {
  padding: 1.6rem;
}
.section .content-right .app-file-area .app-file-content .app-file-recent-access .card,
.section .content-right .app-file-area .app-file-content .app-file-files .card,
.section .content-right .app-file-area .app-file-content .app-file-folder .card {
  border: 1px solid #e0e0e0;
  margin-top: 0.5rem;
  border-radius: 4px;
}
.section .content-right .app-file-area .app-file-content .app-file-recent-access .card .app-file-content-logo,
.section .content-right .app-file-area .app-file-content .app-file-files .card .app-file-content-logo,
.section .content-right .app-file-area .app-file-content .app-file-folder .card .app-file-content-logo {
  overflow: hidden;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.section .content-right .app-file-area .app-file-content .app-file-recent-access .card .recent-file,
.section .content-right .app-file-area .app-file-content .app-file-files .card .recent-file,
.section .content-right .app-file-area .app-file-content .app-file-folder .card .recent-file {
  margin: 25px auto;
  display: block;
}
.section .content-right .app-file-area .app-file-content .app-file-recent-access .card .app-file-name,
.section .content-right .app-file-area .app-file-content .app-file-recent-access .card .app-file-size,
.section .content-right .app-file-area .app-file-content .app-file-recent-access .card .app-file-last-access,
.section .content-right .app-file-area .app-file-content .app-file-files .card .app-file-name,
.section .content-right .app-file-area .app-file-content .app-file-files .card .app-file-size,
.section .content-right .app-file-area .app-file-content .app-file-files .card .app-file-last-access,
.section .content-right .app-file-area .app-file-content .app-file-folder .card .app-file-name,
.section .content-right .app-file-area .app-file-content .app-file-folder .card .app-file-size,
.section .content-right .app-file-area .app-file-content .app-file-folder .card .app-file-last-access {
  font-size: 0.9rem;
  margin-top: 0.3rem;
  word-break: break-all;
}
.section .content-right .app-file-area .app-file-content .app-file-recent-access .card .fonticon,
.section .content-right .app-file-area .app-file-content .app-file-files .card .fonticon,
.section .content-right .app-file-area .app-file-content .app-file-folder .card .fonticon {
  position: absolute;
  right: 5px;
}
.section .content-right .app-file-area .app-file-content .app-file-recent-access .card .app-file-folder-name,
.section .content-right .app-file-area .app-file-content .app-file-recent-access .card .app-file-folder-size,
.section .content-right .app-file-area .app-file-content .app-file-files .card .app-file-folder-name,
.section .content-right .app-file-area .app-file-content .app-file-files .card .app-file-folder-size,
.section .content-right .app-file-area .app-file-content .app-file-folder .card .app-file-folder-name,
.section .content-right .app-file-area .app-file-content .app-file-folder .card .app-file-folder-size {
  font-size: 0.9rem;
}
.section .content-right .app-file-area .app-file-content .app-file-recent-access .card .card-content,
.section .content-right .app-file-area .app-file-content .app-file-files .card .card-content,
.section .content-right .app-file-area .app-file-content .app-file-folder .card .card-content {
  padding: 0.5rem;
}

@media (max-width: 992px) {
  .sidebar-left {
    width: 260px !important;
    height: 100% !important;
    position: absolute !important;
    transform: translateX(-110%);
    z-index: 8;
    left: -34px;
    transition: transform 0.25s;
    background-color: #fff;
  }
  .sidebar-left.show {
    transform: translateX(13%) translateY(-1px);
  }

  .content-right {
    width: 100% !important;
  }
  .content-right .app-file-area {
    border-left: none !important;
  }
}
@media (max-width: 600px) {
  .app-file-manager-wrapper .sidebar-left .app-file-sidebar .add-new-file {
    padding-top: 1rem;
  }
}
@media (max-width: 450px) {
  .app-file-sidebar-info {
    width: 300px !important;
  }
  .app-file-sidebar-info.show {
    transform: translateX(11%) translateY(1px) !important;
  }
}