
.float-widget.transfer-progress *{
	font-family:var(--text-font-family)
}
.float-widget.transfer-progress{
	height:auto;
	margin-bottom:8px;
	position:relative;
	z-index:110
}
.banner.transfer,.transfer-progress-widget{
	border-radius:16px;
	box-shadow:var(--dialog-shadow);
	overflow:hidden;
	position:relative
}
.transfer-progress-widget.collapse{
	display:inline-block;
	max-width:446px;
	min-width:264px
}
.transfer-progress-widget.expand{
	background:var(--surface-main);
	width:536px
}
.transfer-progress-txt{
	display:inline-block;
	font:var(--text-body1-bold);
	margin-left:8px;
	overflow:hidden;
	padding:5px 0 4px;
	text-overflow:ellipsis;
	vertical-align:top
}
.transfer-panel-title .transfer-progress-txt,.transfer-progress-txt{
	color:var(--text-color-high)
}
.transfer-progress-type.error .transfer-progress-txt,.transfer-progress-type.overquota .transfer-progress-txt{
	color:var(--secondary-red);
	font-family:var(--text-font-family)
}
.transfer-progress-type.error.almost-overquota .transfer-progress-txt{
	color:var(--secondary-orange)
}
.transfer-progress-head{
	background:var(--surface-grey-1);
	border-radius:16px 16px 0 0;
	display:flex;
	font-size:0;
	max-width:inherit;
	min-width:264px;
	position:relative;
	width:auto
}
.transfer-progress-widget.expand .transfer-progress-head{
	min-width:536px
}
.transfer-progress-widget.collapse .transfer-progress-head{
	border-radius:8px
}
.transfer-progress-type{
	align-self:flex-start;
	display:flex;
	margin:10px 0;
	overflow:hidden;
	white-space:nowrap
}
.transfer-progress-spacing{
	flex-grow:1
}
.transfer-progress-widget.expand .transfer-progress-type.upload.hidden+.transfer-progress-type.download,.transfer-progress-widget.expand .transfer-progress-type.upload:not(.hidden){
	margin-left:24px
}
.transfer-progress-widget.collapse .transfer-progress-type.upload.hidden+.transfer-progress-type.download,.transfer-progress-widget.collapse .transfer-progress-type.upload:not(.hidden){
	margin-left:16px
}
.transfer-progress-type:first-child{
	margin-right:32px
}
.transfer-progress-type .progress-chart{
	background:var(--surface-progress-background);
	border-radius:100%;
	display:inline-block;
	float:none;
	height:28px;
	position:relative;
	transform:none;
	vertical-align:middle;
	width:28px
}
.transfer-progress-type .progress-chart .charts{
	border-radius:100%;
	height:100%;
	overflow:hidden;
	position:absolute;
	width:100%
}
.transfer-progress-type .progress-chart i{
	left:6px;
	position:absolute;
	top:6px;
	z-index:11
}
.transfer-progress-type.download .progress-chart i{
	--mask-color:var(--secondary-green)
}
.transfer-progress-type.upload .progress-chart i{
	--mask-color:var(--secondary-blue)
}
.transfer-progress-type.error .progress-chart i,.transfer-progress-type.overquota .progress-chart i{
	--mask-color:var(--stroke-error)
}
.transfer-progress-type .progress-chart:after{
	background:var(--surface-main);
	border-radius:100%;
	content:"";
	display:block;
	height:22px;
	margin:3px;
	padding:0;
	position:absolute;
	width:22px;
	z-index:10
}
.transfer-progress-head .transfer-progress-type .progress-chart:after{
	background:var(--surface-grey-1)
}
.transfer-progress-type .charts .left-chart,.transfer-progress-type .charts .right-chart{
	clip:rect(0, 50px, 100px, 0);
	height:100%;
	position:absolute;
	width:100%
}
.transfer-progress-type .charts .right-chart.low-percent-clip{
	clip:rect(0, 14px, 28px, 0)
}
.transfer-progress-type .charts .left-chart.low-percent-clip{
	clip:rect(0, 28px, 28px, 14px)
}
.transfer-progress-type .charts span{
	display:block;
	height:100%;
	position:absolute;
	transform:rotate(180deg);
	width:100%
}
.transfer-progress-type .charts span:before{
	content:"";
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:50%
}
.transfer-progress-type.upload .charts span:before{
	background:var(--secondary-blue)
}
.transfer-progress-type.download .charts span:before{
	background:var(--secondary-green)
}
.transfer-progress-type .charts .left-chart span:before{
	margin-left:50%
}
.transfer-progress-type.error .charts span:after,.transfer-progress-type.error .charts span:before,.transfer-progress-type.overquota .charts span:after,.transfer-progress-type.overquota .charts span:before{
	background:var(--stroke-error)
}
.transfer-panel-title .transfer-progress-type{
	margin:0 16px
}
.status-indicator{
	border-radius:12px;
	box-sizing:border-box;
	display:inline-block;
	height:28px;
	position:relative;
	vertical-align:top;
	width:auto
}
.transfer-progress-type.download .transfer-progress-pct:before,.transfer-progress-type.upload .transfer-progress-pct:before{
	--icon-size:16px;
	--mask-color:var(--secondary-white);
	display:block;
	left:4px;
	position:absolute;
	top:4px;
	z-index:11
}
.transfer-progress-type .transfer-progress-icon{
	display:none
}
.transfer-progress-type.complete .transfer-progress-icon,.transfer-progress-type.error .transfer-progress-icon,.transfer-progress-type.overquota .transfer-progress-icon{
	display:inline-block;
	vertical-align:top
}
.transfer-progress-pct{
	color:var(--text-color-white-high);
	display:inline-block;
	font:var(--text-body1);
	height:auto;
	line-height:16px;
	padding:4px 8px 4px 20px;
	position:relative;
	width:auto
}
.transfer-progress-widget .transfer-control-panel{
	align-self:flex-end;
	cursor:pointer;
	display:flex
}
.transfer-progress-widget.expand .transfer-control-panel{
	margin-right:16px
}
.transfer-progress-widget.collapse .transfer-control-panel{
	margin-left:32px;
	margin-right:8px
}
.transfer-control-panel .transfer-progress-icon i{
	--icon-size:24px;
	--mask-color:var(--icon-rest)
}
.transfer-control-panel .transfer-progress-icon i:hover{
	--mask-color:var(--icon-active)
}
.transfer-control-panel .transfer-progress-icon{
	display:inline-block;
	margin:12px 8px 12px 0;
	transition:.2s
}
.transfer-progress-widget.collapse .transfer-progress-icon.collapse,.transfer-progress-widget.expand .transfer-progress-icon.expand{
	display:none
}
.transfer-control-panel .transfer-progress-icon:hover{
	opacity:1
}
.transfer-progress-tabs-head{
	background:var(--surface-main);
	border-bottom:1px solid var(--stroke-grey-2);
	line-height:32px
}
.transfer-progress-tabs-head .transfer-tabs-panel{
	padding-left:24px
}
.transfer-progress-tabs-head .tab-lnk{
	background-color:initial;
	border:0;
	box-sizing:border-box;
	color:var(--text-color-high);
	cursor:pointer;
	font:var(--text-body2-bold);
	height:24px;
	margin:8px 36px 6px 0;
	outline:0;
	padding:0;
	position:relative
}
.transfer-progress-tabs-head .tab-lnk.active{
	color:var(--text-color-info);
	font:var(--text-body1-bold)
}
.transfer-progress-tabs-head .tab-lnk.inactive{
	color:var(--text-color-low);
	cursor:default;
	font:var(--text-body2)
}
.transfer-progress-widget.collapse .transfer-progress-widget-body{
	display:none
}
.transfer-progress-widget-body{
	background:var(--surface-main);
	max-height:248px;
	overflow:hidden;
	position:relative;
	z-index:40
}
.transfer-progress.tpw .widget-body-container{
	max-height:248px;
	min-height:56px;
	overflow:hidden;
	position:relative
}
.transfer-task-row{
	align-items:center;
	box-sizing:border-box;
	display:flex;
	height:48px;
	padding:12px 16px 12px 24px;
	position:relative;
	width:100%
}
.transfer-task-row:hover:after{
	background-color:var(--stroke-grey-3);
	border:1px solid var(--stroke-grey-2);
	border-radius:4px;
	content:"";
	height:40px;
	left:16px;
	position:absolute;
	top:4px;
	width:504px;
	z-index:-1
}
.transfer-task-row:before{
	content:"";
	display:block;
	height:16px;
	left:27px;
	top:16px;
	width:16px
}
.transfer-task-row .item-type-icon{
	margin:0 12px
}
.transfer-task-row .transfer-filetype-txt{
	color:var(--text-color-high);
	display:inline-block;
	font:var(--text-body1);
	line-height:24px;
	max-width:282px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}
.transfer-task-row.complete .transfer-filetype-txt{
	max-width:282px
}
.transfer-task-row .transfer-file-size{
	color:var(--text-color-low);
	display:inline-block;
	font:var(--text-body2);
	line-height:24px;
	margin:0 8px;
	padding-left:12px;
	position:relative;
	vertical-align:top;
	white-space:nowrap
}
.transfer-task-row .transfer-file-size:before{
	background-color:var(--stroke-grey-2);
	content:"";
	display:block;
	height:16px;
	left:0;
	position:absolute;
	top:4px;
	width:1px
}
.transfer-task-status{
	color:var(--text-color-high);
	cursor:pointer;
	flex-shrink:0;
	font:var(--text-body1);
	line-height:24px;
	margin-left:auto;
	margin-right:8px;
	min-height:24px;
	min-width:28px;
	overflow:hidden;
	position:relative;
	text-overflow:ellipsis;
	white-space:nowrap
}
.transfer-task-row.paused .transfer-task-status i{
	--icon-size:24px;
	--mask-color:var(--icon-rest);
	display:inline-block;
	margin-right:8px;
	vertical-align:middle
}
.transfer-task-status span{
	box-sizing:border-box;
	display:inline-block;
	height:24px;
	vertical-align:middle
}
.transfer-task-actions{
	display:none;
	z-index:25
}
.transfer-task-row:hover .transfer-task-actions{
	display:inline-block;
	position:absolute;
	right:24px;
	top:9px
}
.transfer-task-row:hover .transfer-task-status{
	display:none
}
.transfer-task-actions button{
	cursor:pointer;
	display:inline-block;
	outline:none;
	position:relative
}
.transfer-task-actions i{
	--mask-color:var(--icon-rest)
}
.transfer-task-actions i:hover{
	--mask-color:var(--icon-active)
}
.transfer-progress-bar,.transfer-progress-bar-pct{
	background:var(--surface-progress-background);
	border-radius:1.5px;
	bottom:0;
	display:block;
	height:2px;
	left:24px;
	position:absolute;
	width:488px;
	z-index:8
}
.transfer-task-row.upload .transfer-progress-bar-pct{
	background:var(--secondary-blue);
	left:0;
	width:200px;
	z-index:9
}
.transfer-task-row.download .transfer-progress-bar-pct{
	background:var(--secondary-green);
	left:0;
	width:200px;
	z-index:9
}
.transfer-task-row.complete .transfer-task-status{
	color:var(--stroke-success)
}
.transfer-complete-actions{
	display:none;
	position:absolute;
	right:48px;
	z-index:25
}
.transfer-task-row:hover .transfer-complete-actions{
	display:inline-block
}
.transfer-complete-actions button{
	cursor:pointer;
	display:inline-block;
	margin-right:8px;
	outline:none;
	position:relative
}
.transfer-complete-actions i{
	--mask-color:var(--icon-rest)
}
.transfer-complete-actions i:hover{
	--mask-color:var(--icon-active)
}
.transfer-task-row.complete .transfer-progress-bar{
	display:none
}
.transfer-task-row.error .transfer-progress-bar-pct,.transfer-task-row.overquota .transfer-progress-bar-pct{
	background-color:var(--secondary-red);
	left:0;
	width:200px;
	z-index:9
}
.transfer-task-row.error .transfer-task-status,.transfer-task-row.overquota .transfer-task-status{
	color:var(--secondary-red)
}
.transfer-task-row .transfer-task-status+i{
	display:none
}
.transfer-task-row.inqueue .transfer-task-status+i{
	--icon-size:22px;
	animation:rotate 1s linear infinite;
	animation-timing-function:steps(8);
	display:block;
	margin:4px 12px 0 0;
	opacity:.6
}
.transfer-task-row.paused .transfer-task-status:before{
	background-position:-2px -37px;
	display:block
}
.transfer-progress-icon.collapse{
	height:auto
}
.transfer-progress-icon.wait{
	background-position:-195px -342px
}
.transfer-progress-icon.complete{
	background-position:-160px -1697px;
	display:block
}
.btn-icon.transfer-progress-btn:hover:after{
	background:var(--button-hover);
	border-radius:4px;
	content:"";
	height:24px;
	left:0;
	position:absolute;
	right:0;
	width:24px;
	z-index:-1
}
button.btn-icon .transfer-progress-icon{
	--icon-size:24px;
	display:inline-block
}
.transfer-progress-type.upload .status-indicator:before{
	background-position:-8px -1804px
}
.transfer-task-row.download:before{
	--mask-color:var(--secondary-green)
}
.transfer-task-row.upload:before{
	--mask-color:var(--secondary-blue)
}
.transfer-task-row.complete .transfer-task-status:before{
	background-position:-160px -1696px;
	display:block
}
.transfer-task-row.error .transfer-task-status:before,.transfer-task-row.overquota .transfer-task-status:before{
	background-position:-159px -1804px;
	display:block
}
.transfer-widget-footer{
	background-color:var(--stroke-grey-2);
	display:flex;
	height:24px;
	justify-content:flex-end;
	padding:6px 0;
	width:100%
}
.transfer-widget-footer button{
	--height:24px;
	height:24px
}
.transfer-widget-footer .transfer-clear-all-icon{
	margin-left:8px;
	margin-right:18px
}
.transfer-widget-footer button.action span{
	display:block;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}
.transfer-widget-footer button i{
	--mask-color:var(--icon-rest)
}
.transfer-widget-footer button:hover i{
	--mask-color:var(--icon-active)
}
.transfer-progress-widget.collapse .transfer-section-button{
	display:none
}
.float-widget.transfer-progress .banner{
	background-color:var(--stroke-main);
	box-sizing:border-box;
	margin-bottom:4px;
	max-width:536px;
	min-width:148px;
	overflow:hidden;
	padding:24px;
	width:100%
}
.float-widget.transfer-progress .banner .close-over{
	cursor:pointer;
	height:24px;
	position:absolute;
	right:16px;
	top:16px;
	transition:.2s;
	width:24px;
	z-index:19
}
.float-widget.transfer-progress .banner .close-over:hover{
	opacity:.8
}
.float-widget.transfer-progress .banner .close-over .sprite-fm-mono{
	--mask-color:var(--icon-rest);
	--icon-size:24px;
	height:24px;
	width:24px
}
.left-section.circle-dashboard{
	background:var(--surface-progress-background);
	border-radius:100%;
	box-sizing:border-box;
	display:inline-block;
	height:64px;
	margin:12px 40px 0 16px;
	position:relative;
	text-align:center;
	vertical-align:top;
	width:64px
}
.quota-info-pct-txt{
	font:var(--text-h3-bold);
	margin-top:20px;
	position:relative;
	z-index:11
}
.float-widget.transfer-progress .banner.almost-overquota .quota-info-pct-txt,.float-widget.transfer-progress .banner.almost-overquota .quota-info-pr-txt .quota-info-pr-txt-used{
	color:var(--secondary-orange)
}
.float-widget.transfer-progress .banner.overquota .quota-info-pct-txt,.float-widget.transfer-progress .banner.overquota .quota-info-pr-txt .quota-info-pr-txt-used{
	color:var(--secondary-red)
}
.quota-info-pr-txt{
	color:var(--text-color-high);
	font:var(--text-body2);
	margin:-24px -16px 0;
	position:relative
}
.quota-info-pr-txt .quota-info-pr-txt-used{
	font:var(--text-body1)
}
.quota-info-pr-txt.small-font{
	color:var(--text-color-medium)
}
.quota-info-pr-txt.small-font .quota-info-pr-txt-used{
	font:var(--text-body1)
}
.right-section.upgrade-block{
	display:inline-block;
	width:calc(100% - 136px)
}
.right-section.upgrade-block .head-title{
	color:var(--text-color-high);
	font:var(--text-h3-bold);
	left:0;
	padding:0;
	top:0
}
.right-section.upgrade-block .head-title span.pct-used{
	color:var(--text-color-error);
	font:var(--text-h1-bold)
}
.almost-overquota .right-section.upgrade-block .head-title span.pct-used{
	color:var(--text-color-warning)
}
.right-section.upgrade-block .head-title:hover{
	background-color:initial
}
.right-section.upgrade-block .head-title:before{
	display:none
}
.right-section.upgrade-block .content-txt{
	color:var(--text-color-medium);
	padding-top:4px
}
.right-section.upgrade-block button{
	display:inline-block;
	margin-top:16px;
	z-index:14
}
.quota-info-pct-circle li,.quota-info-pct-circle p,.quota-info-pct-circle span,.quota-info-pct-circle ul{
	height:64px;
	list-style-type:none;
	margin:0;
	padding:0;
	width:64px
}
.quota-info-pct-circle .overlay{
	background-color:var(--stroke-main);
	border-radius:100%;
	display:block;
	height:54px;
	left:5px;
	position:absolute;
	top:5px;
	width:54px;
	z-index:10
}
.affiliate .quota-info-pct-circle li,.blog-new-full .quota-info-pct-circle ul li,.pro .quota-info-pct-circle li:not(.no-red-dot),.quota-info-pct-circle ul li,.sync .quota-info-pct-circle li{
	background:none;
	left:0;
	padding:0;
	position:absolute;
	top:0
}
.quota-info-pct-circle ul .right-c{
	clip:rect(0, 64px, 64px, 32px)
}
.quota-info-pct-circle ul .left-c{
	clip:rect(0, 32px, 64px, 0)
}
.quota-info-pct-circle ul .left-c p{
	transform:rotate(-180deg)
}
.quota-info-pct-circle ul .right-c p{
	transform:rotate(-30deg)
}
.quota-info-pct-circle ul li span{
	display:block;
	height:64px;
	width:32px
}
.quota-info-pct-circle ul li.right-c span{
	border-bottom-left-radius:32px;
	border-top-left-radius:32px
}
.quota-info-pct-circle ul li.left-c span{
	border-bottom-right-radius:32px;
	border-top-right-radius:32px;
	margin-left:32px
}
.float-widget.transfer-progress .banner.almost-overquota .quota-info-pct-circle ul span{
	background-color:var(--secondary-orange)
}
.float-widget.transfer-progress .banner.overquota .quota-info-pct-circle ul span{
	background-color:var(--secondary-red)
}
.float-widget.transfer-progress .transfer-task-row hr{
	display:none
}
.float-widget.transfer-progress .transfer-task-row.complete hr{
	background:var(--surface-grey-2);
	border:none;
	bottom:-8px;
	display:block;
	height:1px;
	position:absolute;
	right:24px;
	width:488px
}
.float-widget.transfer-progress .btn-icon{
	background:none;
	border:none;
	cursor:pointer;
	outline:none;
	padding:0
}
