body {display:grid; padding: 0px; margin: 0px; font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif; }
blockquote, body, button, caption, dd, div, dl, dt, fieldset, figure, form, h1, h2, h3, h4, h5, h6, hr, html, input, legend, li, menu, ol, p, pre, table, td, textarea, th, ul {
    margin: 0;
    padding: 0;
}
.bg_container {position:fixed;left:0px;top:0px;right:0px;bottom:0px;background-image:url("/images/share_bg4.jpg");background-color:#313131;background-size:cover;box-sizing:border-box;overflow:hidden;z-index:0;}
/*.bg_homepage {position:fixed;left:0px;top:0px;right:0px;bottom:0px;background-image:url("/images/bg.png");background-color:#313131;background-size:cover;box-sizing:border-box;overflow:hidden;}
*/
 
.mt10{margin-top:10px; }
.ml10{margin-left:10px;}
.mt20{margin-top:20px;}
.mt5{margin-top:5px;}
.color_basic{color:#00a0e9; }
.color_red{color:#cc0000;}
.err_box{padding:20px; text-align:center;color:#999;font-size:12px;}
.w{font-weight:700;}
.container {z-index:1; padding-bottom:100px; background-color: transparent; box-sizing: border-box; overflow-y:auto; overflow-x:hidden; }
.ct_top {position:fixed;top:0px;  width:100%;  display: flex; justify-content: space-between; box-sizing: border-box; padding: 0 30px; height: 60px; background: #000; opacity: 0.7; z-index: 1000; }
.ct_top .t_left { display: flex; width: 100%; justify-content: flex-start; }
.ct_top .t_left .logo { width: 38px; height: 38px; margin-top: 11px; }
.ct_top .t_left .logo img { width: 38px; height: 38px; }
.ct_top .t_left .menu { position: relative; display: flex; justify-content: start; align-items: start; margin: 11px 0 0 30px; width: 100%; }
.ct_top .t_left .menu .in_box { position: absolute; left: 0px; top: 0px; display: flex; justify-content: flex-start; width:100%; }
.ct_top .t_left .menu .in_box .m_li { margin: 0 15px; font-size: 15px; height: auto;white-space: nowrap;   text-align:center; }
.ct_top .t_left .menu .m_li a { color: #666; padding: 0px; text-decoration: none; display: block; height: 38px; line-height: 38px; display: block; }
.ct_top .t_left .menu .m_li a.cs { color: #FFE100; border-bottom: 2px solid #FFE100; display: block; }
.ct_top .t_left .menu .m_li .li { display: none; }
.ct_top .t_left .menu .m_li:hover { background: #00A0E9; border-radius: 10px; padding: 0 0 10px 0; color: #fff; }
.ct_top .t_left .menu .m_li:hover .li { display: block; padding: 0px 10px; z-index: 999; height: 32px; line-height: 32px; z-index: 999; color: #fff; }
.ct_top .t_left .menu .m_li:hover .li a { color: #fff; text-decoration: none; height: 32px; line-height: 32px; border-top: 1px solid #000; }
.ct_top .t_left .menu .m_li:hover .li a:hover { line-height: 32px; border-radius: 16px; border-top: none; color: #000; height: 32px; background: #fff; text-decoration: none; font-size: 15px; }

.ct_top .t_right { display:flex;justify-content:flex-end; }
.ct_top .t_right .btn_android{display:flex; padding:0 10px;cursor:pointer;  justify-content:flex-start;align-items:center;height:38px;margin-top:11px;background:#021336;border-radius:8px;}
.ct_top .t_right .btn_android a{color:#fff;text-decoration:none;margin-left:5px;}

.ct_top .t_right  .box_setting {width:100px;margin-top: 11px; height:auto; height:38px; border-radius: 5px; background:#021336;border-radius:8px; }
.ct_top .t_right  .box_setting .btn_setting { display: flex; justify-content: center; align-items: center; padding: 6px 12px; gap: 5px; height: 26px; border: none; background: none; border-radius: 8px; cursor: pointer; }
.ct_top .t_right  .box_setting .box_menu{display:none;}
.ct_top .t_right  .box_setting:hover {  background: #00A0E9;height:290px;   }
.ct_top .t_right  .box_setting:hover .box_menu{display:block; padding:0px;margin:0px; }
.ct_top .t_right  .box_setting:hover .box_menu div{ padding: 7px 7px 7px 0px;margin-right:10px; font-size: 14px; color: #fff; border-bottom: 1px solid #0087cb; cursor: pointer; }

.ct_top .t_right .box_user_info{  color:#fff;font-size:14px;white-space: nowrap; display:flex;justify-content:center;align-items:center; height:100%;margin-left:10px; } 
.ct_top .t_right .box_user_info .login_out{color:#fff;cursor:pointer;font-weight:700;margin-left:8px;}
.ct_top .t_right  .btn_upgrade {width:80px;color:#000;cursor:pointer; display:block;text-decoration:none; margin-right:10px; margin-top: 11px; height: 38px; display: flex;  justify-content: center; align-items: center; border-radius: 5px; overflow: hidden; z-index: 999; background:#fff000;text-align:center; }
.ct_top .t_right  .btn_login {width:80px;color:#fff;cursor:pointer; margin-top: 11px; height: 38px; display: flex;  justify-content: center; align-items: center; border-radius: 5px; overflow: hidden; z-index: 999; background:#00a0e9;text-align:center; }
.ct_top .t_right  .btn_reg {width:80px;color:#000;cursor:pointer; margin-top: 11px; height: 38px; display: flex;  justify-content: center; align-items: center; border-radius: 5px; overflow: hidden; z-index: 999; background:#FFE100;text-align:center; }
.btn_android{margin-left:10px;font-size:12px;margin-left:10px;font-size:14px;white-space: nowrap;display:flex;justify-content:center;align-items:center; height:100%; } 

@media (min-width: 100px) and (max-width: 1024px) {
.ct_top { position: absolute; left: 0px; top: 0px; right: 0px; display: flex; justify-content: space-between; box-sizing: border-box; padding: 0 1rem; height: 60px; background: #000; opacity: 0.7; z-index: 1000; }
.ct_top .t_left { display: flex; width: 100%; justify-content: flex-start; }
.ct_top .t_left .logo { width: 38px; height: 38px; margin-top: 11px; }
.ct_top .t_left .logo img { width: 38px; height: 38px; }
.ct_top .t_left .menu { display:none; }
.ct_top .t_left .menu .in_box { position: absolute; left: 0px; top: 0px; display: flex; justify-content: flex-start; width: 10000px; }
.ct_top .t_left .menu .in_box .m_li { margin: 0 0.5rem; font-size: 15px; height: auto; }
.ct_top .t_left .menu .m_li a { color: #999; padding: 0 10px; text-decoration: none; display: block; height: 38px; line-height: 38px; display: block; }
.ct_top .t_left .menu .m_li a.cs { color: #FFE100; border-bottom: 2px solid #FFE100; display: block; }
.ct_top .t_left .menu .m_li .li { display: none; }
.ct_top .t_left .menu .m_li:hover { background: #00A0E9; border-radius: 10px; padding: 0 0 10px 0; color: #fff; }
.ct_top .t_left .menu .m_li:hover .li { display: block; padding: 0px 10px; z-index: 999; height: 32px; line-height: 32px; z-index: 999; color: #fff; }
.ct_top .t_left .menu .m_li:hover .li a { color: #fff; text-decoration: none; height: 32px; line-height: 32px; border-top: 1px solid #000; }
.ct_top .t_left .menu .m_li:hover .li a:hover { line-height: 32px; border-radius: 16px; border-top: none; color: #000; height: 32px; background: #fff; text-decoration: none; font-size: 15px; }
.ct_top .t_right { display:flex;justify-content:flex-end; }
/*.ct_top .t_right  .box_setting { width: 100px; margin-top: 11px; height: 38px; border-radius: 5px; overflow: hidden; z-index: 999; }
.ct_top .t_right  .box_setting:hover { height: 150px; background: #00A0E9; overflow: inherit; }
.ct_top .t_right  .box_setting .li { padding: 7px 7px 7px 0px; font-size: 14px; color: #fff; border-bottom: 1px solid #d2d2d2; cursor: pointer; }
.ct_top .t_right  .box_setting .btn_setting { display: flex; justify-content: center; align-items: center; padding: 6px 12px; gap: 5px; height: 26px; border: none; background: none; border-radius: 8px; cursor: pointer; }
*/
.ct_top .t_right .box_user_info{  color:#fff;font-size:14px;white-space: nowrap; display:flex;justify-content:center;align-items:center; height:100%;margin-left:10px; } 
 
.ct_top .t_right  .btn_login {width:80px;color:#fff;cursor:pointer; margin-top: 11px; height: 38px; display: flex;  justify-content: center; align-items: center; border-radius: 5px; overflow: hidden; z-index: 999; background:#00a0e9;text-align:center; }
.ct_top .t_right  .btn_reg {width:80px;color:#000;cursor:pointer; margin-top: 11px; height: 38px; display: flex;  justify-content: center; align-items: center; border-radius: 5px; overflow: hidden; z-index: 999; background:#FFE100;text-align:center; }
 
}
.lable { line-height: 20px; font-size: 14px; color: #fff; font-family: sans-serif; letter-spacing: 1px; }
.ct_top .t_right .btn_login:hover .svg-icon { animation: spin 2s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.footer { position: fixed; opacity:0.8; height:80px;padding-top:20px;  box-sizing:border-box; left: 0px;   bottom: 0px;line-height:18px; right: 0px; text-align: center; color: #ccc; font-size: 12px; }
.footer a { color: #fff; font-weight: 700; text-decoration:none;}
.footer span{color:#666;cursor:pointer;font-weight: 700; }


.add-btn { background-color: #00a0e9; color: #fff; border: none; padding: 0 20px; height: 36px; border-radius: 8px; cursor: pointer; }


.input_group { margin-bottom: 16px; }

/*.input_ct input { width: 100%; padding: 12px 16px; box-sizing:border-box; border: none; border-bottom: 1px solid #dfe1e5; border-radius: 4px; font-size: 1rem; transition: border-color 0.3s ease; }
.input_ct input:focus { outline: none; border-color: #00a0e9; box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.15); }
*/
.input_ct{position:relative;}
.input_ct input { width: 100%;box-sizing:border-box; padding: 13px 15px;border:none; border-radius: 8px;  background-color: #f3f4f6; font-size: 16px; outline: none; transition: all 0.2s ease; }
.input_ct input:focus { border:1px solid #00a0e9;  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.input_ct .input_btn { position: absolute;left:0px; right: 0; top: 0; height: 100%;  padding: 0 15px; background: none; border: none; color: #3B82F6; cursor: pointer; transition: color 0.2s ease; }

/*time selector*/
.modal-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
.modal-title { font-size: 18px; font-weight: 600; color: #1f2937; }
.close-btn { background: none; border: none; color: #6b7280; cursor: pointer; font-size: 18px; transition: color 0.2s ease; }
.close-btn:hover {color: #1f2937;}
 /* 时间选择区域*/
.time-selection { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.day-selection { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
.time-column { display: flex; flex-direction: column; }
.options { max-height: 240px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; }
.hour-option, .minute-option { padding: 8px 12px; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; margin-bottom: 4px; }
.hour-option:last-child, .minute-option:last-child { margin-bottom: 0; }
.hour-option:hover, .minute-option:hover { background-color: rgba(59, 130, 246, 0.1); color: #3B82F6; }
.hour-option.selected, .minute-option.selected { background-color: rgba(59, 130, 246, 0.1); color: #3B82F6; font-weight: 500; }
.minute-option.major { font-weight: 600; }
/* 时段选择*/
.period-selector { display: none; margin-bottom: 20px; }
.period-buttons { display: flex; gap: 12px; }
.period-btn { flex: 1; padding: 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: none; cursor: pointer; transition: all 0.2s ease; }
.period-btn:hover { background-color: #f3f4f6; }
.period-btn.selected { background-color: rgba(59, 130, 246, 0.1); color: #3B82F6; border-color: #3B82F6; }
/*确认按钮*/
.confirm-btn { width: 100%; background-color: #3B82F6; color: white; border: none; border-radius: 8px; padding: 12px; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease; display: flex; align-items: center; justify-content: center; }
.confirm-btn:hover { background-color: #2563eb; }
.confirm-btn .icon { margin-right: 8px; }
/*说明文字*/
.instructions {text-align: center; color: #6b7280; font-size: 14px; margin-top: 15px;}

.box_tag { display: flex; gap: 8px; margin-top: 16px; }
.tag {margin-right:10px; background:#f2f2f2;padding:5px 10px;cursor:pointer; font-size:12px;color:#666;border-radius:8px;}
.tag.cs{background:#666;color:#fff;cursor:default; }

.submit_btn { width: 100%; padding: 12px 24px; background: #00a0e9; color: #fff; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; margin-top: 10px; }
.submit_btn:hover { background: linear-gradient(135deg, #1557b0 0%, #204a86 100%); }
.submit_btn:active { transform: scale(0.98); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 80%; max-width: 600px; padding: 20px; }
h1 { font-size: 24px; margin-bottom: 20px; color: #333; }
h2 { font-size: 20px; margin-top: 20px; margin-bottom: 10px; color: #555; }
h3 { font-size: 16px; margin-top: 10px; margin-bottom: 5px; color: #777; }
ul { list-style-type: none; padding: 0; margin: 0; }
li { margin-bottom: 5px; color: #999; }

/*左右布局 左侧是菜单 右侧是内容*/
.box_left { position: fixed; left: 10px; top: 70px;bottom:0px;  width: 220px; padding: 10px; background: #fff; border-radius: 8px; overflow: hidden; }

#progressInfo { position: fixed; z-index: 999; right: 20px; bottom:80px; padding: 20px; border-radius: 10px; background: #000; display: none;max-height:500px;overflow-y:auto;overflow-x:hidden; }
.box_right { position: fixed;  left: 260px; top: 130px; right: 10px; bottom:0px;  border-radius:8px; overflow:hidden; background:#ffffff; }

.box_left .section { margin-bottom: 20px;  }
.folder-header { display: flex; align-items: center; padding: 10px; font-size: 1.2em; }
.folder-header .arrow { margin-right: 10px; }
.file-type { display: flex; align-items: center; padding: 10px; font-size: 1em; cursor: pointer; }
.file-type.cs { background: #f0f5ff; border-radius: 15px; margin: 10px 0; }
.file-type img { width: 12px; height: 12px; display: block; }
.file-type div { margin-left: 10px; color: #666; }
.file-type a { margin-left: 10px; color: #666; text-decoration:none;display:block;}
.file-type:hover { align-items: center; padding: 10px; font-size: 1em; cursor: pointer; border-radius: 15px; background: #f2f2f2; }
.file-type .icon { width: 24px; height: 24px; margin-right: 15px; }
.special-section { padding: 10px; font-size: 1.1em; margin-top: 10px; }
.upload-btn-container { position: absolute; top: 70px; left: 260px; right: 10px; height: 50px; border-radius:8px; background-color: #fff; padding: 0 10px; display: flex; justify-content: space-between; align-items: center; }
.upload-btn-container .box_basic_btns{display:flex;justify-content:start;}
.upload-btn-container .box_basic_btns .upload-btn { background-color: #00a0e9; color: #fff; border: none; padding: 0 20px; height: 36px; border-radius: 8px; cursor: pointer; }
.upload-btn-container .box_basic_btns .yellow_btn { background-color: #00A0E9; color: #fff; border: none; padding: 0 20px; height: 36px; border-radius: 8px; cursor: pointer; }
.upload-btn-container  .button-container { display: flex; justify-content: start; align-items: center; height: 36px; border-radius: 18px; background: #deeeff; overflow: hidden; }
.upload-btn-container   .button-container button { display: flex; align-items: center; border: none; padding: 0 15px; color: #00a0e9; background-color: transparent; cursor: pointer; font-size: 14px; }
.upload-btn-container   .button-container img { width: 13px; display: block; }

.upload-btn-container .box_search{width:220px;height:36px; background-color: white;   }
.upload-btn-container .box_search .search{display:flex; overflow:hidden; justify-content:space-between; width:100%;height:32px;border-radius:20px;background:#fff;opacity:0.7;border:2px solid #00a0e9;}
.upload-btn-container .box_search .search input{width:140px; padding-left:20px; height:100%;border:0px;outline: none; font-size:15px; background-color:transparent; }
.upload-btn-container .box_search .search .btn_search{width:60px;height:100%;cursor:pointer; line-height:36px;font-size:15px; background:#00a0e9;color:#fff;text-align:center;}

.line_mid { width: 1px; height: 15px; background: #aed5ff; }
.icon { font-size: 12px; }
.text { font-weight: normal; margin-left: 5px; }
.upload-btn-container #result { font-size: 14px; color: #666; margin-left: 20px; }

.file-list-container {position:relative;  height:100%; box-sizing:border-box;padding:0px 0px 100px 0px;  background-color: white; border-radius: 4px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); overflow-y:auto;}
.file-list-container .header {position:sticky;left:0px;top:0px;right:0px; background:#fff; z-index:10; display: flex; align-items: center;  color: #999; padding:  10px; }
.file-list-container .header div{display:flex;justify-content:flex-start; align-items:center;cursor:pointer;}
.file-list-container .header div img{height:18px;margin-left:8px;}
.file-list-container .header_tool{display:none;}
.file-list-container .file-item { display: flex; align-items: center; padding: 10px; box-sizing:border-box; border-bottom: 1px solid #e0e0e0; color: #666; }
.file-list-container .FileListBox1 .file-item a { text-decoration: none; color: #666; }
.file-list-container .FileListBox1 .file-item:hover{background:#f2f2f2;}
.file-list-container .FileListBox1 .file-item:hover a { text-decoration: none; color: #00a0e9; }
.file-list-container .w140 { width: 100px; padding: 10px;overflow:hidden; }
.file-list-container .w200 { width: 200px; padding: 10px;overflow:hidden;text-align:left; }
.file-list-container .w80{width: 50px;padding:0px 10px;}
.file-list-container .FileListBox1 .ThumbnailPic{overflow:hidden;display:flex;justify-content:center;align-items:center;}
.file-list-container .FileListBox1 .ThumbnailPic img{max-width:50px;max-height:50px;object-fit:contain;}

.file-list-container .btns_manage { position: relative; height: 100%;  }
.file-list-container .btns_manage input{padding:5px 8px;border-radius:8px;border:1px solid #00A0E9;flex:1;}
.file-list-container  .btns_manage .btn_sure{cursor:pointer; background:#00a0e9;color:white;padding:5px 10px;font-size:14px; border-radius:8px;margin-left:10px;}
.file-list-container  .btns_manage .btn_cancel{cursor:pointer;background:#d2d2d2;color:#999;padding:5px 10px;font-size:14px;border-radius:8px;margin-left:10px;}

.file-list-container .FileListBox1 .file-item .btns_manage .btns { display: none; }
.file-list-container .FileListBox1 .file-item .btns_manage .btns img { display: block; width: 22px; height: 22px; cursor: pointer; margin: 0 5px; }
.file-list-container .FileListBox1 .file-item:hover .btns_manage .btns { background: #f2f2f2; padding: 0 20px; display: flex; position: absolute; top: 0px; right: 0px; height: 100%; z-index: 999; align-items: center; }
.file-list-container .FileListBox1 .file-item .file_info{display:none;}
.file-list-container .FileListBox1 .file-item .btn_menu_list{display:none;}
 

.file-list-container .FileListBox2{display:flex;flex-wrap:wrap;justify-content:flex-start;flex-direction:row;}
.file-list-container .FileListBox2 .file-item {position:relative; border-bottom:0px; width:260px; 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; }

.file-list-container .FileListBox2 .file-item .btn_menu_list{position:absolute;right:10px;top:10px;width:20px;height:20px;display:block;}
.file-list-container .FileListBox2 .file-item .btn_menu_list img{width:100%;cursor:pointer;}
.file-list-container .FileListBox2 .file-item .btn_menu_list ul{display:none;}

.file-list-container .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;}
.file-list-container .FileListBox2 .file-item .btn_menu_list:hover img{width:20px;height:20px;cursor:pointer;}
.file-list-container .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;}
.file-list-container .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;}
.file-list-container .FileListBox2 .file-item .btn_menu_list:hover ul li img{margin-right:8px;width:15px;height:auto;}
.file-list-container .FileListBox2 .file-item .btn_menu_list:hover ul li:hover{background:#f2f2f2;}

.file-list-container  .video_convert{}
.file-list-container  .video_convert img{}

.file-list-container .video_converting{}
.file-list-container   .video_converting img{animation: rotate-center 2s linear infinite;}

.file-list-container   .video_convert:hover img{animation: rotate-center 2s linear infinite;}
@keyframes rotate-center {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.file-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*/

#popup {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 10px 20px;
    border-radius: 8px;
    text-align: center;
    width: 350px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    opacity: 0; /* 初始透明 */
    top: 300px; /* 初始位置 */
    transition: all 0.5s ease; /* 过渡动画 */
    z-index: 1000;
}

.file-list-container .FileListBox2 .file-item .file-icon {left:10px;top:10px;  z-index:9; width: 20px; height: 20px; margin-right: 10px; display: block; position: absolute; cursor: pointer; font-size: 15px; user-select: none; }
.file-list-container .FileListBox2 .file-item .file-icon input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.file-list-container .FileListBox2 .file-item .checkmark { position: relative; top: 0; left: 0; height: 1.3em; width: 1.3em; background: #cccccc; border-radius: 5px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.30), 0px 1px 1px rgba(0,5); }
.file-list-container .FileListBox2 .file-item .file-icon input:checked ~ .checkmark { background-image: linear-gradient(#00a0e9,#00A0E9) }
.file-list-container .FileListBox2 .file-item .checkmark:after { content: ""; position: absolute; }
.file-list-container .FileListBox2 .file-item .file-icon input:checked ~ .checkmark:after { display: block; }
.file-list-container .FileListBox2 .file-item .file-icon .checkmark:after { left: 0.45em; top: 0.25em; width: 0.25em; height: 0.5em; border: solid white; border-width: 0 0.15em 0.15em 0; transform: rotate(45deg); }
/*form*/
.file-list-container .FileListBox2 .box_rename{width:100%;}
.file-list-container .FileListBox2 .box_rename .input_rename{width:80%;}
 
.file-list-container .FileListBox2 .file-item a { text-decoration: none; color: #666; }
.file-list-container .FileListBox2 .file-item:hover{background:#f2f2f2;}
.file-list-container .FileListBox2 .file-item:hover a { text-decoration: none; color: #00a0e9; }
.file-list-container .FileListBox2 .w140 { width: 100px; padding: 10px; }
.file-list-container .FileListBox2 .w80{width: 80px;padding: 10px;}
.file-list-container .FileListBox2 .ThumbnailPic{overflow:hidden;display:flex;justify-content:center;align-items:center;}
.file-list-container .FileListBox2 .ThumbnailPic img{max-width:80px;max-height:80px;object-fit:contain;}
.file-list-container .FileListBox2 .file-item .btns_manage { position: relative; width:100%;overflow:hidden; height: 100%; box-sizing:border-box;overflow-wrap: break-word; }
.file-list-container .FileListBox2 .file-item .btns_manage input{padding:5px 8px;border-radius:8px;border:1px solid #00A0E9;flex:1;}
.file-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;}
.file-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;}
.file-list-container .FileListBox2 .file-item .btns_manage .btns { display: none; }
.file-list-container .FileListBox2 .file-item .btns_manage .btns img { display: block; width: 20px; height: 20px; cursor: pointer; margin: 0 5px; }
.file-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;  }
.file-list-container .FileListBox2 .hide_info{display:none;}
.file-list-container .FileListBox2 .file_size{color:#ccc;}
.file-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 #e0e0e0; }
.box_floder_list .box_floder_li img{display:block;width:30px;height:30px;}
.box_floder_list .box_floder_li div{font-size:14px;color:#000;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) {
.box_left { display:none; }
.box_right { position: fixed; left: 10px; top: 130px; right: 10px; bottom: 0px; border-radius:8px; overflow:hidden; background:#ffffff; }
    
.upload-btn-container { position: fixed; top: 70px; left: 10px; right: 10px; height: 50px; border-radius:8px; background-color: #fff; padding: 0 10px; display: flex; justify-content: space-between; align-items: center; }
.upload-btn-container .box_basic_btns{display:flex;justify-content:start;}
.upload-btn-container .box_basic_btns .upload-btn { background-color: #00a0e9; color: #fff; border: none; padding: 0 20px; height: 36px; border-radius: 8px; cursor: pointer; }
.upload-btn-container .box_search{display:none;}
 
.file-list-container .header_tool{display:block; padding:10px;box-sizing:border-box;}
.file-list-container .header_tool .search_tool{position:relative; display:flex;justify-content:flex-start; align-items:center;border-radius:8px;background:#f2f2f2;height:38px;padding:0px 10px}
.file-list-container .header_tool .search_tool img{height:22px;width:auto;display:block;}
.file-list-container .header_tool .search_tool input{height:30px;outline: none;border:0px;padding:0px 10px;margin-left:0px; width:100%; background-color:transparent; }
.file-list-container .header_tool .search_tool .btn_search{position:absolute;right:5px; width:60px; height:32px;display:flex;align-items:center;justify-content:center;font-size:12px; cursor:pointer; border-radius:8px;  background:#00a0e9;color:#fff;text-align:center;}
.file-list-container .header_tool .box_file_type{margin-top:5px;display:flex;justify-content:start;}
.file-list-container .header_tool .box_file_type .tag_type{ margin-right:10px; background:#f2f2f2;padding:5px 10px;cursor:pointer; font-size:12px;color:#666;border-radius:8px;}
.file-list-container .header_tool .box_file_type .tag_type.cs{background:#666;color:#fff;cursor:default; }
.file-list-container .w140{display:none;}
.file-list-container .file-item:hover .btns_manage .btns{display:none;}
.file-list-container .file-item:hover .btns_manage a{display:block;}
.file-list-container .file_info{display:block; padding-top:5px;font-size:12px;color:#999;display:block;}

.file-list-container .FileListBox2 .file-item {position:relative; width:45%;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; }

.file-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; 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-bottom:10px;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:10px 10px 0px 10px; height:22px;line-height:22px;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; }
 
.progress-container { width: 200px; display: flex; justify-content: flex-end; padding-left: 10px; align-items: center; }
.progress-container .bar { width: 130px; background-color: #ccc; height: 10px; border-radius: 5px; overflow: hidden; }
.progress-container .bar .progress { width: 0%; height: 10px; border-radius: 5px; background-color: #FFE100; text-align: center; line-height: 10px; color: white; }
.progress-container .progress_num { width: 50px; padding-left: 10px; font-size: 12px; color: #999; }

.progress-ct { width: 100%; max-width: 600px; margin: 15px 0; }
.progress-ct  .progress-label { display: flex; justify-content: space-between; margin-bottom: 8px; color: #333; font-size: 18px; }
.progress-ct  .progress-bar { height: 8px; background-color: #f2f2f2; border-radius: 4px; overflow: hidden;   }
.progress-ct  .progress-fill { height: 100%; border-radius: 4px; background: #00a0e9;   }

.box_move_detail{font-size:14px;color:#666;}

.UploadInfo { display: flex; justify-content: flex-start; align-items: center; }
.UploadInfo .UploadIndex {width:100px;overflow:hidden; color: #666; font-size: 12px; color: #999;white-space:nowrap; }
.UploadInfo .UploadProcess { margin-left: 20px; background: #00a0e9; width: 100px; height: 22px; }
 
.no_data{padding:20px;text-align:center;font-size:12px;color:#999;}

/*form*/
.file-icon { width: 20px; height: 20px; margin-right: 10px; display: block; position: relative; cursor: pointer; font-size: 15px; user-select: none; }
.file-icon input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: relative; top: 0; left: 0; height: 1.3em; width: 1.3em; background: #cccccc; border-radius: 5px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.30), 0px 1px 1px rgba(0,5); }
.file-icon input:checked ~ .checkmark { background-image: linear-gradient(#00a0e9,#00A0E9) }
.checkmark:after { content: ""; position: absolute; }
.file-icon input:checked ~ .checkmark:after { display: block; }
.file-icon .checkmark:after { left: 0.45em; top: 0.25em; width: 0.25em; height: 0.5em; border: solid white; border-width: 0 0.15em 0.15em 0; transform: rotate(45deg); }
/*form*/

.box_form_out { justify-content: center; align-items: center; display: flex; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; align-items: center; justify-content: center; padding: 20px; }
.box_form_in {position:relative;  background-color: white; border-radius: 12px;  max-width: 400px; padding:0px 25px 25px 25px; transform: scale(0.95); transition: all 0.3s ease; }
.box_form_in .box_tt {padding:25px 0px 10px 0px; font-size: 20px; font-weight: 700; color:#000; text-align:center; margin-bottom: 16px; }
 
.box_form_in .btn_form_close{ position: absolute;text-align:center;  align-items:center;justify-content:center; right: 10px; top: 10px; width: 22px; height: 22px; line-height:22px; font-size:10px; cursor: pointer;   border-radius: 50%; background: #d2d2d2; color: #fff; }

.box_form_in .data-list{display:flex;flex-direction:column;max-height:360px;overflow-y:auto;margin-top:20px; }
.box_form_in .data-list .li{display:flex;justify-content:space-between;background:#f2f2f2; padding:10px;border-radius:8px; margin-bottom:10px;}
.box_form_in.data-list .li label{font-size:15px;font-weight:700;}
.box_form_in .data-list .li span:first-child{color:#00a0e9;cursor:pointer;}
.box_form_in .data-list .li span:nth-child(2){color:#999;margin-left:10px;cursor:pointer;}
.box_form_in .form_tip{text-align:left;padding-top:20px;}

.box_form_in button:active { scale: 0.95; }
.box_form_in .form { display: flex; flex-direction: column; }
 
.box_form_in .form-submit-btn { 
    width: 100%;
            background-color: #00a0e9;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;

}
.box_form_in .form-submit-btn:hover { background-color: #006ee9; }
.box_form_in .signup-link { font-size: 14px; height: 32px;padding:10px; text-align:center;cursor:pointer; align-self: center; font-weight: 500; }
.box_form_in .signup-link .link { font-weight: 400; color:#00a0e9;}
.box_form_in .link:hover { text-decoration: underline; }

.error-msg{margin:10px 0 0 0;font-size:12px;color:#cc0000;text-align:right;}

.loading-spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.form-submit-btn.loading { opacity: 0.7; cursor: not-allowed; }

 
.btm_toos{position:fixed;background:#fff;z-index:1000; left:0px;right:0px;bottom:0px;height:100px;display:flex;justify-content:center;align-items:center;}
.btm_toos .btm_btn{width:80px;}
.btm_toos .btm_btn .img{width:80px;}
.btm_toos .btm_btn .img img{width:30px;}
.btm_toos .btm_btn .tt{height:20px;font-size:12px;}

.opctityto0 {
animation: fadeOut 0.5s ease-in-out forwards;
}

@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0;}
}
.opctityto1 {
animation: fadeInt 0.5s ease-in-out forwards;
}

@keyframes fadeInt {
from { opacity: 0; }
to { opacity: 1;}
}