﻿.header {position:sticky;left:0px;top:0px;right:0px;  z-index:10; display: flex; align-items: center;background-color:var(--bg-color);  color: #999; padding:  10px; }
.header div{display:flex;justify-content:flex-start; align-items:center;cursor:pointer;}
.header div img{height:18px;margin-left:8px;}
.header_tool{display:none;}

.FileListBox1 .file-item {position:relative;  display: flex; align-items: center; padding: 10px; box-sizing:border-box; border-bottom: 1px solid var(--border-color); color: #666; }

.FileListBox1 .file-item a { text-decoration: none; color: #666; }
.FileListBox1 .file-item:hover{background-color:var(--btn-hover-color2);}
.FileListBox1 .file-item:hover a { text-decoration: none; color: var(--text-primary); }
.FileListBox1 .ThumbnailPic{overflow:hidden;display:flex;justify-content:center;align-items:center; }
.FileListBox1 .ThumbnailPic img{max-width:50px;max-height:50px;object-fit:contain; }

.FileListBox1 .file-item .file_info{display:none;}
.FileListBox1 .file-item .btn_menu_list{display:none;}
.w140 { width: 140px; padding: 10px;overflow:hidden;white-space:nowrap; }
.w200 { width: 200px; padding: 10px;overflow:hidden;text-align:left; }
.w80{width: 80px;padding:0px 10px;}
.btns_manage { position: relative; height: 100%; }

.FileListBox1 .file-item .btns_manage .btns { display: none; }
.FileListBox1 .file-item .btns_manage .btns img { display: block; width: 22px; height: 22px; cursor: pointer; margin: 0 5px; }
.FileListBox1 .file-item:hover .btns_manage .btns {   padding: 0 20px; display: flex; position: absolute; top: 0px; right: 0px; height: 100%; z-index: 999; align-items: center;   }
.btns_manage input{padding:5px 8px;border-radius:8px;border:1px solid #00A0E9;flex:1;}
.btns_manage .btn_sure{cursor:pointer; background:#00a0e9;color:white;padding:5px 10px;font-size:14px; border-radius:8px;margin-left:10px;}
.btns_manage .btn_cancel{cursor:pointer;background:#d2d2d2;color:#999;padding:5px 10px;font-size:14px;border-radius:8px;margin-left:10px;}
 
.FileListBox2{display:grid;  align-content: start; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
 
.FileListBox2 .file-item {position:relative; border-bottom:0px;   text-align:center;margin:10px 0px 0px 10px; border-radius:8px; display: flex;justify-content:center;flex-direction:column; align-items: center; padding: 10px; box-sizing:border-box;   color: #666; }
.FileListBox2 .file-item .input_checkebox{position:absolute;left:10px;top:10px;}
.FileListBox2 .file-item .btn_menu_list{position:absolute;right:10px;top:10px;width:20px;height:20px;display:block;}
.FileListBox2 .file-item .btn_menu_list img{width:100%;cursor:pointer;}
.FileListBox2 .file-item .btn_menu_list ul{display:none;}

.FileListBox2 .file-item .btn_menu_list:hover{position:absolute; z-index:99999; right:10px;top:10px;width:130px;height:200px;display:flex; align-items:flex-end; flex-direction:column;}
.FileListBox2 .file-item .btn_menu_list:hover img{width:20px;height:20px;cursor:pointer;}
.FileListBox2 .file-item .btn_menu_list:hover ul{display:block;border-radius:8px;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168); background:#fff;padding:10px;margin-top:5px;}
.FileListBox2 .file-item .btn_menu_list:hover ul li{display:flex;align-items:center; cursor:pointer; text-align:left;padding:5px 10px 5px 10px;font-size:12px;border-radius:5px;}
.FileListBox2 .file-item .btn_menu_list:hover ul li img{margin-right:8px;width:15px;height:auto;}
.FileListBox2 .file-item .btn_menu_list:hover ul li:hover{background:#f2f2f2;}

 
/*拖拽上传*/
.box_drop_bg{position:absolute;left:0px;top:0px;right:0px;bottom:0px; text-align:center;z-index:998; background:#fff;opacity:0.9;
    pointer-events: none;
}
.box_drop{position:absolute;left:0px;top:0px;right:0px;bottom:0px;display:flex;justify-content:center;flex-direction:column; align-items:center; text-align:center;z-index:999;
    pointer-events: none;
}
.box_drop img{height:60px;}
.box_drop div{font-size:14px;color:#666;margin-top:20px;}

.box-top-tools #result { font-size: 14px; color: #666; margin-left: 20px; }

.list-container {position:relative;   height:100%; box-sizing:border-box;   border-radius: 4px;}
 
.list-container  .video_convert{}
.list-container  .video_convert img{}

.list-container .video_converting{}
.list-container   .video_converting img{animation: rotate-center 2s linear infinite;}

.list-container   .video_convert:hover img{animation: rotate-center 2s linear infinite;}
@keyframes rotate-center {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.list-container .FileListBox2  .li_title{  /* 设置容器宽度，确保换行生效 */
            width: 100%;
            text-align:center;
            /* 自动换行相关设置 */
            white-space: normal;       /* 允许自动换行 */
            word-wrap: break-word;     /* 长单词拆分换行 */
            
            /* 控制只显示两行 */
            display: -webkit-box;      /* 使用弹性盒模型 */
            -webkit-line-clamp: 2;     /* 限制显示的行数 */
            -webkit-box-orient: vertical; /* 设置盒子的排列方向 */
            
            /* 超出部分隐藏 */
            overflow: hidden;}
/*form*/
 
.list-container .FileListBox2 .box_rename{width:100%;}
.list-container .FileListBox2 .box_rename .input_rename{width:80%;}
 
.list-container .FileListBox2 .file-item a { text-decoration: none; color: #666; }
.list-container .FileListBox2 .file-item:hover{background-color:var(--btn-hover-color2);}
.list-container .FileListBox2 .file-item:hover a { text-decoration: none; color: var(--text-primary); }
.list-container .FileListBox2 .w140 { width: 140px; padding: 10px;white-space:nowrap; }
 
.list-container .FileListBox2 .w80{width: 80px;padding: 10px;}
.list-container .FileListBox2 .ThumbnailPic{overflow:hidden;display:flex;justify-content:center;align-items:center;}
.list-container .FileListBox2 .ThumbnailPic img{max-width:80px;max-height:80px;object-fit:contain;}
.list-container .FileListBox2 .file-item .btns_manage { position: relative;width:100%;overflow:hidden; height: 100%; box-sizing:border-box;overflow-wrap: break-word; }
.list-container .FileListBox2 .file-item .btns_manage input{padding:5px 8px;border-radius:8px;border:1px solid #00A0E9;flex:1;}
.list-container .FileListBox2 .file-item .btns_manage .btn_sure{cursor:pointer; background:#00a0e9;color:white;padding:5px 8px;font-size:12px; border-radius:8px;margin-left:5px;}
.list-container .FileListBox2 .file-item .btns_manage .btn_cancel{cursor:pointer;background:#d2d2d2;color:#999;padding:5px 8px;font-size:12px;border-radius:8px;margin-left:5px;}
.list-container .FileListBox2 .file-item .btns_manage .btns { display: none; }
.list-container .FileListBox2 .file-item .btns_manage .btns img { display: block; width: 20px; height: 20px; cursor: pointer; margin: 0 5px; }
.list-container .FileListBox2 .file-item:hover .btns_manage .btns { position: absolute; top: 0px;left:0px; right: 0px;   background: #f2f2f2; padding:0px 20px; display: flex;justify-content:space-between; align-items: center;height: 100%; z-index: 999;  }
.list-container .FileListBox2 .hide_info{display:none;}
.list-container .FileListBox2 .file_size{color:#ccc;}
.list-container .FileListBox2 .file-item .file_info{display:none;}

.box_floder_list{width:100%; }
.box_floder_list .box_floder_li{display:flex;justify-content:flex-start;padding:15px 0px; align-items:center;border-bottom: 1px solid #313131; }
.box_floder_list .box_floder_li img{display:block;width:30px;height:30px;}
.box_floder_list .box_floder_li div{font-size:14px;color:#fff;padding-left:20px;}
.box_no_folder{display:flex;flex-direction:column;align-items:center; justify-content:center;padding:50px 0px;}
.box_no_folder img{width:100px;height:100px;opacity:0.5;}
.box_no_folder div{color:#999;font-size:14px;}

.box_dialog_btns{display:flex;justify-content:flex-end;align-items:center;margin-top:20px;}
.box_dialog_btns .btn_dialog_cancel{background:#f2faff;padding:10px 20px;height:38px;border-radius:8px;color:#00a0e9;border:0px;}
.box_dialog_btns .btn_dialog_basic{background:#00a0e9;padding:0px 20px; text-decoration:none; line-height:38px;display:block; height:38px;border-radius:8px;color:#fff;border:0px;}


@media (min-width: 100px) and (max-width: 1024px) {
 

 
.list-container .header_tool .type_tab_list{margin-top:5px;display:flex;justify-content:start;}
.list-container .header_tool .type_tab_list .tag_type{ margin-right:10px; background:#f2f2f2;padding:5px 10px;cursor:pointer; font-size:12px;color:#666;border-radius:8px;}
.list-container .header_tool .type_tab_list .tag_type.cs{background:#666;color:#fff;cursor:default; }
.list-container .w140{display:none;}
.list-container .file-item:hover .btns_manage .btns{display:none;}
.list-container .file-item:hover .btns_manage a{display:block;}
.list-container .file_info{display:block; padding-top:5px;font-size:12px;color:#999;display:block;}

 
.list-container .FileListBox2 .file-item .file_info{display:block; padding-top:5px;font-size:12px;color:#999;display:block;}
}
.box_right .box_path{position:relative;color:var(--text-primary); display:flex;height:52px;align-items:center;padding:0px 10px;font-size:14px;padding-right:60px;box-sizing:border-box;}
.box_right .box_path span{padding:0px 5px; align-items:center;color:#999;font-size:12px;}
.box_right .box_path a{ text-decoration:none;color:#00a0e9;}
#path_move{font-size:14px;display:flex;justify-content:flex-start;align-items:center;}
#path_move div{text-decoration:none;color:#00a0e9;padding-right:5px;cursor:pointer;}
#path_move span{margin-right:5px;color:#999;}

.box_right .box_path .btn_menu_list{position:absolute; width:22px;height:52px; top:0px;right:0px;z-index:999;text-align:right;margin-right:20px;}
.box_right .box_path .btn_menu_list:hover{width:120px;}
.box_right .box_path .btn_menu_list .btn_menu_list_out{ overflow-y:hidden;text-align:center;display:flex;align-items:end; justify-content:flex-end;flex-direction:column;}
.box_right .box_path .btn_menu_list .btn_menu_list_out img{width:22px;height:22px;display:block;margin-top:15px;}
 
.box_right .box_path .btn_menu_list .btn_menu_list_out .btn_menu_list_in{display:none;width:120px;padding:var(--margin) 0; box-sizing:border-box; border-radius:10px; background:#fff;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2), 0px 2px 3px rgba(0, 0, 0, 0.03);}

.box_right .box_path .btn_menu_list .btn_menu_list_out:hover{overflow-y:inherit;width:120px;}
.box_right .box_path .btn_menu_list .btn_menu_list_out:hover .btn_menu_list_in{display:block;margin-top:10px;}

.box_right .box_path .btn_menu_list .btn_menu_list_out:hover .btn_menu_list_in div {padding:10px 8px;margin:0px 10px 0px 10px;  color:#000;text-align:center;}
.box_right .box_path .btn_menu_list .btn_menu_list_out .btn_menu_list_in div.cs{background:#f2f2f2;}
.box_right .box_path .btn_menu_list .btn_menu_list_out:hover .btn_menu_list_in div:hover{background:#f2f2f2;cursor:pointer;}

 .col { padding: 5px; flex: 1;min-width:200px; }
 

.box_move_detail{font-size:14px;color:#666;}


.no_data{padding:20px;text-align:center;font-size:12px;color:#999;}

 