#app{
	-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;
	opacity:0;
}
.layout{
	display:flex;
	height:100%;
}
.layout-left{
	width:165px;
	border-right:1px solid #f1f2f4;
	flex-shrink:0;
	display:flex;
	flex-direction:column;
	position:relative;
	background:#fff;
	z-index:99;
}

.layout-left .minBig{
	position:absolute;
	top:50%;
	right:-18px;
	background:#d1dbe5;
	height:45px;
	width:18px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid #eee;
	border-left:none;
	border-radius:0 5px 5px 0;
	font-size:16px;
	cursor:pointer;
	z-index:999;
}
.layout-left .minBig:hover{
	color:#06a7ff;
}
.layout-left .minBig .iconfont{
	display:block;
}
.layout-left .minBig .iconfont{
	-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-o-transform: rotate(180deg);-ms-transform: rotate(180deg);transform:rotate(180deg);
}

.layout-left.min{
	position:absolute;
	height:100%;
	left:-165px;
}
.layout-left.min .minBig{
	color:#06a7ff;
	border-color:#a0cfff;
	background:#eef9fe;
}
.layout-left.min .minBig:hover{
	background:#fff;
}
.layout-left.min .minBig .iconfont{
	-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-ms-transform: rotate(0deg);transform:rotate(0deg);
}

.layout-left .space{
	margin-top:auto;
	padding:15px;
}
.layout-left .space .bar{
	height: 6px;
    border-radius: 4px;
    background-color: #eeeff4;
    position: relative;
	margin-bottom:5px;
	overflow:hidden;
	border-radius: 4px;
}
.layout-left .space .bar .full{
	content:'';
	position:absolute;
	left:0px;
	top:0px;
	height:6px;
	width:0%;
	background-color: #06a7ff;
    max-width: 100%;
	border-radius: 4px;
}
.layout-left .space .text{
	color:#afb3bf;
	font-size:12px;
}
.layout-left .space .text span{
	font-size:12px;
}
.layout-left .space .text .red{
	color:#f56c6c;
}
.layout-left .space .text .refresh{
	float:right;
	font-size:16px;
	display:inline-block;
	position:relative;
	top:1px;
}
.layout-left .space .text .refresh:hover{
	color:#06a7ff;
}

.layout-left .logo{
	display:flex;
	align-items:flex-end;
	justify-content:center;
	padding:8px 5px;
}
.layout-left .logo img{
	display:block;
	max-height:50px;
	margin-right:6px;
	max-width:105px;
}
.layout-left .logo .name{
	display:block;
	font-size:11px !important;
	background:#06a7ff;
	color:#fff;
	padding:2px 4px;
	border-radius:6px 6px 6px 0;
}



.layout-right{
	width:100%;
	height:100%;
	position:relative;
	display:flex;
	flex-direction:column;
}
.layout-top{
	height:120px;
	width:100%;
	background:#fff;
	z-index:999;
}
.layout-top .tool-list{
	display:flex;
	align-items:center;
	padding:15px 20px;
}
.layout-top .tool-list .link{
	margin-left:auto;
	display:flex;
	align-items:center;
}
.layout-top .tool-list .link a{
	color:#818999;
	font-size:14px;
	margin-left:15px;
	display:inline-block;
	display:flex;
	align-items:center;
}
.layout-top .tool-list .link a .name{
	font-size:14px;
	padding-left:5px;
	line-height:14px;
}
.layout-top .tool-list .link a:hover{
	color:#06a7ff;
}

.layout-top .tool-list .user{
	margin-left:auto;
	position: relative;
}
.layout-top .tool-list .user .info{
	display: flex;
	align-items: center;
	padding:3px 0;
}
.layout-top .tool-list .user .info img{
	width:20px;
	height: 20px;
	border-radius: 24px;
	margin-right: 5px;
}
.layout-top .tool-list .user .info .iconfont{
	display: block;
	font-size:14px;
	line-height: 14px;
	margin-left:3px;
	margin-top:1px;
	transform: rotate(0deg);
	-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;
}
.layout-top .tool-list .user .list{
	position: absolute;
	top:50px;
	right:0px;
	opacity: 0;
	border:1px solid #eee;
	padding:5px 15px;
	border-radius: 3px;
	background-color: #fff;
	-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;
	visibility: hidden;
	min-width: 88px;
}
.layout-top .tool-list .user .list a{
	display: block;
	padding:9px 0;
	text-align: center;
	font-size:14px;
	line-height: 14px;
}
.layout-top .tool-list .user .list a:hover{
	color:#06a7ff;
}
.layout-top .tool-list .user .list a.logout{
	/* border-top:1px solid #eee;*/
}

.layout-top .tool-list .user:hover .iconfont{
	-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-o-transform: rotate(180deg);-ms-transform: rotate(180deg);transform:rotate(180deg);
}
.layout-top .tool-list .user:hover .list{
	visibility: visible;
	opacity: 1;
	top:30px;
}
.layout-top .tool{
	display:flex;
	background-color:#eef9fe;
	border-radius:16px;
	padding:0 15px;
	margin-left:15px;
}
.layout-top .tools{
	display:flex;
	background-color: rgba(47,52,55,.95);
	border-radius:16px;
	padding:0 15px;
	margin-left:15px;
}
.layout-top .tools .e{
	height:32px;
	line-height:32px;
	color:#ecb665;
	cursor:pointer;
	display:flex;
	align-items:center;
}
.layout-top .tools .e img{
	width: 20px;
  height: 20px;
  border-radius: 24px;
  margin-right: 5px;
}
.layout-top .tools .e .name{
	font-weight:700;
	padding-left:4px;
	font-size:14px;
}
.layout-top .tool .e{
	height:32px;
	line-height:32px;
	color:#06a7ff;
	cursor:pointer;
	display:flex;
	align-items:center;
}
.layout-top .tool .e .name{
	font-weight:700;
	padding-left:4px;
	font-size:14px;
}
.layout-top .tool .e:after{
	content:'';
	display:inline-block;
	width:1px;
	height:12px;
	background:#06a7ff;
	position:relative;
	top:2px;
	margin:0 12px;
	opacity:0.3;
}

.layout-top .tool-list .user .info:after{
	content:'';
	display:inline-block;
	width:1px;
	height:12px;
	background:#06a7ff;
	position:relative;
	top:2px;
	margin:0 12px;
	opacity:0.3;
}


.layout-top .tool .e:last-child:after{
	display:none;
}

.layout-top .map{
	padding:0 20px;
	display:flex;
	align-items:center;
}
.layout-top .map .c_name{
	color:#03081a !important;
    font-weight: 700;
}
.layout-top .map .c_name .res{
	font-weight: 300px;
}
.layout-top .map .c_name .res strong{
	color:#06a7ff;
}
.layout-top .map .c_name i{
	font-weight:500;
}
.layout-top .map a{
	color:#06a7ff;
	cursor:pointer;
	font-size:12px;
}
.layout-top .map a:last-child{
	color:#818999
}
.layout-top .map span.line{
	margin: 0 4px;
    color: #c4d8f4;
    display: inline-block;
}
.layout-top .map span.arrow{
	margin: 0 4px;
    color:#06a7ff;
	font-size:12px;
    display: block;
	position:relative;
	top:1px;
}

.fileTips{
	display: flex;
	justify-content: space-between;
	padding:10px 20px 0 20px;
}
.fileTips .sleAll{
	display:flex;
}
.fileTips .sleAll label{
	display:flex;
	align-items:center;
}
.fileTips .sleAll .tt{
	color: #818999;
    padding-left: 10px;
    position: relative;
    font-size: 12px;
}
.fileTips .sleAll .tt.active{
	color: #06a7ff;
}
.fileTips .sleAll .sle-tips{
	color: #06a7ff;
    padding-left: 10px;
    position: relative;
    font-size: 12px;
}

.listStyle-item{
	padding:5px 10px;
	cursor: pointer;
	border-radius: 3px;
}
.listStyle-item:hover{
	background-color: #f1f3f8;
}
.listStyle-item .iconfont{
	opacity: 0;
}
.listStyle-item.active{
	color:#06a7ff;
}
.listStyle-item.active .iconfont{
	opacity: 1;
}

/* 文件 */
.layout-main{
	width:100%;
	height:100%;
	box-sizing:border-box;
	overflow:hidden;
	overflow-y:auto;
}
.layout-main-content{
	display:flex;
	flex-wrap:wrap;
}
.layout-main-bg{
	position:absolute;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
	background:red;
	z-index:-1;
}
.layout-main::-webkit-scrollbar {
    width: 8px;
}
.layout-main::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #c0c0c0;
}
.layout-main::-webkit-scrollbar-thumb:hover{
	background-color: #ccc;
}
/* 列表样式1 */
.layout-main .item{
	width:128px;
	height:150px;
	margin:15px;
	box-sizing:border-box;
	padding:10px;
	border-radius:5px;
}
.layout-main .item:hover{
	background-color: #f7f9fc;
}
.layout-main .item:hover .top .con,.layout-main .item:hover .top .sel{
	display:flex;
}
.layout-main .item.on .top .sel{
	display:block;
}
.layout-main .item.on{
	background-color: #f2faff;
}
.layout-main .item .top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:18px;
}
.layout-main .item .top .con{
	display:none;
}
.layout-main .item .top .more{
	position:relative;
}
.layout-main .item .top .con .more:hover .list{
	display:block;
}
.layout-main .item .top .sel{
	display:none;
}

.layout-main .item .top .con .icon{
	font-size:16px;
	height:18px;
	line-height:18px;
	background:#fff;
	padding:0 8px;
	height:18px;
	line-height:18px;
	display:block;
	cursor:pointer;
	color:#06a7ff;
	margin-left:5px;
	font-weight:500;
}
.layout-main .item .top .con .t .list{
	position:absolute;
	top:18px;
	right:-70px;
	background:#fff;
	width:120px;
	border-radius:5px;
	padding:5px 0;
	box-shadow:0 0 10px rgba(0,0,0,0.1);
	display:none;
	z-index:999;
}

.layout-main .item .top .con .list .e{
	padding:8px 15px;
	display:flex;
	align-items:center;
	color:#03081a;
	cursor:pointer;
}
.layout-main .item .top .con .list .e:hover{
	background:#f5f6fa;
}
.layout-main .item .top .con .list .e .iconfont{
	font-size:16px;
	margin-right:5px;
}
.layout-main .item .top .con .list .e .name{
	font-size:12px;
}
.layout-main .item .file-icon{
	margin:8px 0;
	display:block;
	position:relative;
	
}
.layout-main .item .file-icon .videoIcon{
	z-index:99;
	opacity:0.9;
	position:absolute;
	left:50%;
	top:50%;
	color:#fff;
	font-size:24px;
	margin-left:-12px;
	margin-top:-12px;
	pointer-events:none;
	cursor: default;
	transform:scale(1);
	display:inline-block;
	-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .3s ease;transition: all .2s ease;
}
.layout-main .item .file-icon:hover .videoIcon{
	opacity:1;
	transform:scale(1.1); 
}
.layout-main .item .file-icon .storageTypeIcon{
	opacity:0.5;
	position:absolute;
	bottom:-5px;
	right: 8px;
}
.layout-main .item .file-icon .thumbBox{
	display:flex;
	justify-content:center;
	align-items:center;
	height:65px;
	width:65px;
	margin:0 auto;
}
.layout-main .item .file-icon .thumb{
	max-width:100%;
	max-height:100%;
	display:block;
	margin:0px auto;
	border-radius:5px;
	cursor:pointer;
}
.layout-main .item .title{
	text-align:center;
	font-size:12px;
    color: #03081a;
	word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* 列表样式2 */
.layout-main .item2{
	width:100%;
	display: flex;
	align-items: center;
	height: auto;
	justify-content: space-around;
	border-bottom: 1px solid #eee;
	flex-wrap: wrap;
	margin: 0 15px;
}
.layout-main .item2 .sel{
	margin-right: 10px;;
}
.layout-main .item2 .file-icon{
	width:40px;
	height: 40px;
	margin:0px;
}
.layout-main .item2 .title{
	margin-right:auto !important;
	padding-left:15px;
	width: 35%;
	text-align: left;
	word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.layout-main .item2 .size{
	text-align: left;
	padding:0 10px;
	margin-right:auto !important;
	font-size: 13px;
	width:70px;
	text-align: center;
}
.layout-main .item2 .addtime{
	margin-right:auto !important;
	font-size: 13px;
	padding:0 10px;
}
.layout-main .item2 .con .list{
	display: flex;
}
.layout-main .item2 .con .list .e{
	margin:0 10px;
	cursor: pointer;
}
.layout-main .item2 .con .list .e:hover{
	color:#06a7ff;
}
.layout-main .item2 .con .list .e.del:hover{
	color:#F56C6C;
}

.layout-main .item2 .thumbBox{
	height: 40px !important;
    width: 40px !important;
}
.layout-main .item2 .thumbBox .thumb{
	display: block;
	max-width:40px;
	max-height: 40px;
}
.layout-main .item2 .file-icon .storageTypeIcon{
	left:auto;
	right:-5px;
	bottom:-5px;
}


.layout-main .nofile{
	width:100%;
	padding:50px;
	display:flex;
	justify-content:center;
}


/* 侧栏分类 */
.category{
	
}
.category .parent{
	padding-left:0px !important;
}
.category .parent .iconfont{
	height:40px;
	width:35px;
	line-height:40px;
	text-align:center;
	margin-left:0px !important;
	font-size:12px !important;
	flex-shrink:1;
	padding:0px !important;
}
.category .parent .name{
	font-size:14px !important;
	font-weight:700;
}
.category .parent .iconfont{
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform:rotate(90deg);
}
.category .parent .iconfont.active{
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform:rotate(0deg);
}
.category .item{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	cursor:pointer;
	margin:5px 10px;
	height: 40px;
    line-height: 40px;
	padding:0 15px;
	border-radius:10px;
}
.category .item:hover{
	 background-color: #fafafc;
}
.category .item.on,.category .item.on a{
	color: #06a7ff;
    background-color: #eef9fe;
}
.category .item .iconfont{
	font-size:16px;
	padding-right:10px;
	margin-left:15px;
}
.category .item .name{
	font-size:13px;
}

.category .fastLink .item{
	flex-wrap:nowrap;
	height:32px;
}
.category .fastLink .item a{
	width:100%;
	word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.category .fastLink .item .edit{
	width:26px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.category .fastLink .item .edit .iconfont{
	opacity:0;
}
.category .fastLink .item .edit .iconfont:hover{
	color:#06a7ff;
}
.category .fastLink .item:hover .edit .iconfont{
	opacity:1;
}
.category .addLink{
	margin:15px 20px;
	border:1px dashed #999;
	height:30px;
	line-height:28px;
	text-align:center;
	cursor:pointer;
	border-radius:3px;
	opacity:0.8;
}
.category .addLink:hover{
	opacity:1;
}

/* 文件上传列表 */
.f-list{
	max-height:50%;
	overflow:auto;
}
/* 滚动条及选择背景 */
.f-list::-webkit-scrollbar {
    width: 6px;
}
.f-list::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #eee;
}

.f-list .f-row{
	display:flex;
	justify-content:space-between;
	align-items:center;
	height:40px;
	border-bottom:1px solid #ebeef5;
	flex-wrap:wrap;
	position:relative;
}
.f-list .f-row .item{
	font-size:14px;
	position:relative;
	z-index:1;
	padding:0 5px;
}
.f-list .f-row .f-name{
	width:45%;
	word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.f-list .f-row .f-size{
	width:25%;
	padding:0 10px;
}
.f-list .f-row .f-msg{
	width:20%;
	padding:0 10px;
}
.f-list .f-row .f-del{
	width:10%;
}

.f-list .f-row .f-msg .progress{
	color:#409EFF;
}
.f-list .f-row .f-msg .success{
	color:#67C23A;
}
.f-list .f-row .f-msg .failed{
	color:#F56C6C;
}
.f-list .f-title{
	position: sticky;
	top:0;
	background:#fff;
	z-index:99;
}
.f-list .f-title .item{
	font-weight:700;
	color:#909399;
}
.f-list .f-row .f-del{
	text-align:center;
	cursor:pointer;
}
.f-list .f-row .f-del:hover{
	color:#f56c6c;
}
.f-list .f-row .f-progress{
	position:absolute;
	height:40px;
	width:0%;
	background-color:#ecf5ff;
	z-index:0;
	opacity:1;
	-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease;
}
.f-list .f-row .f-progress.success{
	opacity:0;
}

.f-empty .main{
	height:30%;
	border:2px dashed #eee;
	display:flex;
	align-items:center;
	justify-content:center;
}
.f-empty .main .tips{
	font-size:24px;
	color:#909399;
}

/* 拖动图片样式 */
#dropZone{
	margin:-15px 0;
}
#dropZone.on .main{
	border-color:#409eff;
}
#dropZone .el-alert{
	margin-bottom:10px;
}


/* 文件重名确认 */
.reNameCehck{
	display:flex;
	padding-top:10px;
}
.reNameCehck input{
	margin-right:5px;
}

/* 添加分类 */
.layout-main .item.addClass{
	background-color: #f7f9fc;
}
.layout-main .item.addClass .top{
	justify-content:flex-end;
	
}
.layout-main .item.addClass .bts{
	background:#fff;
	box-shadow:0 0 5px rgba(0,0,0,0.1);
	display:flex;
	border-radius:3px;
	position:relative;
	right:-4px;
	top:-1px;
}
.layout-main .item.addClass .bt{
	height:25px;
	width:25px;
	line-height:25px;
	font-size:16px;
	font-weight:700;
	text-align:center;
	color:#06a7ff;
	cursor:pointer;
}
.layout-main .item.addClass .bt:hover{
	background:#eef9fe;
}


/* 加载更多 */
#add_more{
	font-size:14px;
	height:30px;
	height:30px;
	text-indent:20px;
	pointer-events: none;
	color:#666;
}


/* 文件移动 */
.classTree{
	
}
.classTree .map{
	background-color: #fafafc;
    height: 40px;
    color: #afb3bf;
	padding:0 15px;
	display:flex;
	align-items:center;
}
.classTree .map .class span{
	font-size:13px;
	color:#06a7ff;
	display:inline-block;
	height:13px;
	line-height:13px;
	cursor:pointer;
}
.classTree .map .class span:after{
	content:"\eb8a";
	font-size:3px;
	display:inline-block;
	margin:0 4px;
}
.classTree .map .class:last-child span{
	 color: #afb3bf;
}
.classTree .map .class:last-child span:after{
	display:none;
}
.classTree .map .class.prev span{
	border-right:1px solid #06a7ff;
	padding-right:6px;
	margin-right:6px;
}
.classTree .map .class.prev span:after{
	display:none;
}


.classTree-dialog .el-dialog__body{
	padding:0px;
}
.classTree .item{
	display:flex;
	align-items:center;
	padding:8px 15px;
	cursor:pointer;
}
.classTree .item:hover{
	background:#f7f9fc;
}
.classTree .item:hover .cname{
	color:#06a7ff;
}
.classTree .item .icon img{
	display:block;
	width:35px;
	height:35px;
}

/* 文件分享 */
.shareBox.el-message-box{
	--el-messagebox-width: 500px;
}
.shareBox .el-message-box__message p{
	word-wrap:break-word; 
	word-break:break-all;
}

.shareDialog .el-dialog__body{
	padding-bottom:10px;
	padding-top:10px;
}

/* 共享文件 */
.enjoyDialog .el-dialog__body{
	padding:15px;
}
.enjoyDialog .el-dialog__body{
	padding-bottom:10px;
	padding-top:10px;
}
.enjoyDialog .el-alert__close-btn{
	background:#f56c6c;
	color:#fff !important;
	padding:5px;
	font-size:11px !important;
	border-radius:5px;
	margin-top:10px;
}
.enjoyDialog .el-alert__description{
	padding-right:65px;
}
.showEnjoy{
	margin:2% 2% 0 2%;
}
.showEnjoy .el-dialog__body{
	padding:0px;
}
.showEnjoy iframe{
	width:100%;
	height:85%;
}
.showEnjoy .el-dialog__header{
	margin-right: 0px;
	border-bottom: 1px solid #eee;
	padding:10px 15px;
}
.enjoy-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.enjoy-header .title{
	font-size:15px;
	font-weight: 500;
}
.enjoy-header .right span{
	font-size:20px;
	display: inline-block;
	margin-left: 13px;
	cursor: pointer;
}
.enjoy-header .right span:hover{
	color:#06a7ff;
}

/* 文件属性 */
.fileInfo .el-dialog__body{
	padding:10px;
}
.fileInfo .item{
	padding:8px 10px;
	border-bottom: 1px solid #fafafa;
	word-wrap:break-word; word-break:normal; 
}


@media screen and (min-width:0px) and (max-width:1400px){
	.layout-main .item2 .addtime{display: none;}
}
@media screen and (min-width:0px) and (max-width:1160px){
	.layout-main .item2 .size{display: none;}
}
@media screen and (min-width:0px) and (max-width:1085px){
	.layout-main .item2 .con .list .e .name{display: none;}
	.layout-top .tool .e .name {display: none;}
	.layout-top .tools .e .name {display: none;}
	.layout-top .tool-list .user .info .name {display: none;}
	.layout-top .tool-list .user .info .names {display: none !important;}
	.el-dialog {--el-dialog-width: 90% !important;}
	.layout-main .item2 .title {width: auto !important;}
}

.layout-top .tool-list .user .info .name {
  color: rgb(162, 158, 152);
  font-weight: 700;
  border-radius: 16px; /* 修改为16px */
  background-color: #eef9fe; /* 保留背景颜色 */
  padding: 5px 15px; /* 修正padding的格式 */
  margin-left: 15px;
}

.layout-top .tool-list .user .info .names {
  color: #ecb665;
  font-weight: 700;
  border-radius: 16px; /* 修改为16px */
  background-color: rgba(47,52,55,.95);
  padding: 5px 15px; /* 修正padding的格式 */
  margin-left: 15px;
  display: flex;
  align-items: center;
}