.webuploader-container {
	position: relative;
}
.layui-btn {
    width: 100%;
}
.webuploader-element-invisible {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}

#uploader .statusBar .updateTest {
    position: absolute;
    top: 10px;
    right: 135px;
    z-index: 9;
    line-height: 42px;
}
#uploader .statusBar .updateTest .updates {
    background: #00ce7a;
}
#uploader .statusBar .updateTest .updates, #uploader .statusBar .updateTestCon .containers {
    padding: 0 18px;
    display: inline-block;
    border-radius: 3px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
    float: left;
    background: #FF3959;
    color: #fff;
    border-color: transparent;
}
#uploader .statusBar .btns .uploadBtn, .resetBtn {
    background: #3c6cfe;
    color: #fff;
    border-color: transparent;
}
#uploader .statusBar .btns .webuploader-pick, #uploader .statusBar .btns .uploadBtn, .resetBtn, #uploader .statusBar .btns .uploadBtn.state-uploading, #uploader .statusBar .btns .uploadBtn.state-paused {
    background: #ffffff;
    border: 1px solid #cfcfcf;
    color: #565656;
    padding: 0 18px;
    display: inline-block;
    border-radius: 3px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
    float: left;
}



.webuploader-pick {
	position: relative;
	display: inline-block;
    vertical-align: top;
	cursor: pointer;
	background: #33cabb;
	padding: 10px 15px;
	color: #fff;
	text-align: center;
	border-radius: 3px;
	overflow: hidden;
}
.webuploader-pick-hover {
	background: #52d3c7;
}

.webuploader-pick-disable {
	opacity: 0.6;
	pointer-events:none;
}

.example {
    background-color: #fafafa;
}
#uploader .queueList {
    border: 5px dashed #d4d4d4;
}
#uploader .queueList.filled {
    padding: 2%;
    margin: 0;
    border: 5px dashed #d4d4d4;
}
#uploader .queueList.webuploader-dnd-over {
    border: 5px dashed #d4d4d4;
}
#uploader p {
    margin: 0;
}
.element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}
#uploader .placeholder {
    min-height: 350px;
    padding-top: 100px;
    text-align: center;
    color: #cccccc;
    position: relative;
}
#uploader .placeholder .webuploader-pick {
    font-size: 18px;
    line-height: 44px;
    padding: 0 30px;
    *width: 120px;
    color: #fff;
    margin: 0 auto 20px auto;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#uploader .placeholder .flashTip {
    color: #666666;
    font-size: 12px;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 20px;
}
#uploader .placeholder .flashTip a {
    color: #0785d1;
    text-decoration: none;
}
#uploader .placeholder .flashTip a:hover {
    text-decoration: underline;
}
#uploader .filelist {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
#uploader .filelist:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    clear: both; 
}

#uploader .filelist li{
    border: 1px #a0d6ff solid;
    box-sizing: border-box;
    width: 32%;
    text-align: center; 
    margin: 0 0 1% 1%;
    position: relative;
    display: inline;
    float: left;
    overflow: hidden;
    font-size: 12px;
}

#uploader .filelist li .nr {
    padding: 2px;
}

#uploader .filelist li .nr .fl{ width: 130px; margin-bottom: 8px; }
#uploader .filelist li .nr .fl .pic{ width: 130px; height: 130px; padding: 10px; overflow: hidden; }
#uploader .filelist li .nr .info{ padding-left: 150px; line-height: 25px; text-align: left;}

#uploader .filelist li p.log {
    position: relative;
    top: -45px;
}
#uploader .filelist li p.title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow : ellipsis;
    top: 5px;
    text-indent: 5px;
    text-align: left;
}
#uploader .filelist li p.progress {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	height: 10px;
	overflow: hidden;
	margin-bottom: 40px;
	z-index: 7;
}
#uploader .filelist li p.imgWrap {
    position: relative;
    z-index: 2;
    line-height: 110px;
    vertical-align: middle;
    overflow: hidden;
    width: 110px;
    height: 110px;

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webit-transition: 200ms ease-out;
    -moz-transition: 200ms ease-out;
    -o-transition: 200ms ease-out;
    -ms-transition: 200ms ease-out;
    transition: 200ms ease-out;
}
#uploader .filelist li img {
    width: 100%;
}
#uploader .filelist li p.error {
    background: #f43838;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 28px;
    line-height: 28px;
    width: 100%;
    z-index: 1;
}
#uploader .filelist li .success {
    display: block;
    border-top: 4px solid #f0efee;
    position: absolute;
    line-height: 45px;
    text-align: center;
    color: #22eb17;
    right: 0;
    bottom: 0;
    width: 0px;
    height: 0px;
    border-bottom: 40px solid #33cabb;
    border-left: 40px solid transparent;
}
#uploader .filelist li .success:after {
    font-family: "Material Design Icons";
    font-size: 22px;
    content: "\f12c";
    position: absolute;
    right: 0px;
    bottom: -43px;
    color: #fff;
}
#uploader .filelist div.file-panel {
    position: absolute;
    height: 0;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0;
    background: rgba( 0, 0, 0, 0.5 );
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 300;
}
#uploader .filelist div.file-panel span {
    width: 24px;
    height: 24px;
    display: inline;
    float: right;
    overflow: hidden;
    margin: 5px 1px 1px;
    cursor: pointer;
    font-family: "Material Design Icons";
    font-size: 14px;
    color: #33cabb;
	-webkit-transition: .2s linear;
	transition: .2s linear
}
#uploader .filelist div.file-panel span.rotateLeft:after {
    content: "\f465";
}
#uploader .filelist div.file-panel span.rotateRight:after {
    content: "\f467";
}
#uploader .filelist div.file-panel span.cancel:after {
    content: "\f1c0";
}
#uploader .filelist div.file-panel span.rotateLeft:hover,
#uploader .filelist div.file-panel span.rotateRight:hover,
#uploader .filelist div.file-panel span.cancel:hover {
    color: #fff;
}
#uploader .statusBar {
    height: 63px;
    border-top: 1px solid rgba(77,82,89,0.05);
    padding: 0 20px;
    line-height: 63px;
    vertical-align: middle;
    position: relative;
}
#uploader .statusBar .progress {
    width: 198px;
    display: inline-block;
    text-align: center;
    position: relative;
    margin: 0 10px 0 0;
}
#uploader .statusBar .info {
    display: inline-block;
}
#uploader .statusBar .btns {
    position: absolute;
    top: 10px;
    right: 20px;
    line-height: 36px;
}

#filePickerBtn {
    display: inline-block;
    float: left;
}
#uploader .statusBar .btns .webuploader-pick,
#uploader .statusBar .btns .uploadBtn,
#uploader .statusBar .btns .uploadBtn.state-uploading,
#uploader .statusBar .btns .uploadBtn.state-paused {
    background: #fcfdfe;
    border: 1px solid #ebebeb;
    color: #8b95a5;
    padding: 0px 12px;
    display: inline-block;
    border-radius: 2px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
    float: left;
}
#uploader .statusBar .btns .webuploader-pick-hover,
#uploader .statusBar .btns .uploadBtn.state-uploading:hover,
#uploader .statusBar .btns .uploadBtn.state-paused:hover {
	background-color: #f9fafb;
	border-color: #ebebeb;
	color: #4d5259
}
#uploader .statusBar .btns .uploadBtn {
    background: #33cabb;
    color: #fff;
    border-color: #33cabb;
}
#uploader .statusBar .btns .uploadBtn:hover {
    background: #52d3c7;
    border-color: #52d3c7;
    color: #fff;
}
#uploader .statusBar .btns .uploadBtn.disabled {
    pointer-events: none;
    opacity: 0.6;
}
.mgbt20 {
    margin-bottom: 20px;
}
.mgbt20 {
    margin-top: -30px;
    margin-bottom: 40px;
}
.mobileFormeWrap .layui-input-inline {
    width: 170px;
}
.layui-form-label {
    width: auto;
    font-size: 14px;
}
.layui-form-select dl dd.layui-this {
    /*background-color: #2980b9;*/
    background-color: #3c6cfe;
}
.layui-form-item .layui-inline {
    margin-right: 0;
}
.layui-input {
    background-color: #f0f0f0;
    font-size: 14px;
}

@media screen and (max-width: 470px) {
	#uploader .filelist li{
		width: 100%;
	}
	#uploader .statusBar{
		line-height: 40px;
		margin-bottom: 20px;
		padding: 0;
	}
	#uploader .statusBar.geshi_statusBar{
		margin-bottom: 0px;
		height: auto;
	}
	#uploader .statusBar .btns{
		position: static;
	}
	#uploader .queueList.filled{
		padding: 2%;
	}
	#uploader .filelist li{
		margin: 0 0 1% 0;
	}
	#uploader .filelist li .nr .info{
		padding-left: 140px;
	}
	#uploader .statusBar .btns .webuploader-pick{
		margin-left: 0;
	}
}
.layui-layer-btn .layui-layer-btn1 {
	border-color: #1E9FFF;
	color: #1E9FFF;
}
.layui-layer-btn .layui-layer-btn1:hover {
	border-color: #1E9FFF;
	background-color: #1E9FFF;
	color: #fff;
}
.fl{ float: left;}
.fr{ float: right;}
.text-c{ text-align: center;}
.text-l{ text-align: left;}
.text-r{ text-align: right;}
.colwhite{ color: #fff;}
.colty{ color: #01b6ee;}
.colh{ color: #FFAC2D;}
.colv{ color: #14c400;}
.bgwhite{ background-color: #fff;}
.bg-f9{ background-color: #f9f9f9;}
.ft60{ font-size: 60px;}
.ft38{ font-size: 38px;}
.ft32{ font-size: 32px;}
.ft30{ font-size: 30px;}
.ft28{ font-size: 28px;}
.ft26{ font-size: 26px;}
.ft24{ font-size: 24px;}
.ft22{ font-size: 22px;}
.ft20{ font-size: 20px;}
.ft18{ font-size: 18px;}
.ft16{ font-size: 16px;}
.ft15{ font-size: 15px;}
.ft14{ font-size: 14px;}
.ft13{ font-size: 13px;}
.ft12{ font-size: 12px;}
.col9{ color: #999;}
.lg22{ line-height: 22px;}
.lg24{ line-height: 24px;}
.lg26{ line-height: 26px;}
.lg28{ line-height: 28px;}
.lg30{ line-height: 30px;}
.lg36{ line-height: 36px;}
.lg38{ line-height: 38px;}
.lg50{ line-height: 50px;}
.pdall30{ padding: 30px;}
.pdall20{ padding: 20px;}
.pdall15{ padding: 15px;}
.colred{ color: #DC1010;}
.col6{ color: #666;}
.colsuccess{ color: #48C977}
.mgbt60{ margin-bottom: 60px;}
.mgbt50{ margin-bottom: 50px;}
.mgbt30{ margin-bottom: 30px;}
.mgbt20{ margin-bottom: 20px;}
.mgbt15{ margin-bottom: 15px;}
.mgbt10{ margin-bottom: 10px;}
.mgtp20{ margin-top: 20px;}
.mgtp15{ margin-top: 15px;}
.mgtp10{ margin-top: 10px;}
.mgbt6{ margin-bottom: 6px;}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
@media screen and (max-width: 470px) {


    .container {
        width: 100%;
        position: relative;
    }
    .queueList {
		width: 99.6%;
		margin: 0 auto;
	}

    #yasuoType.mobileFormeWrap {
        /* display: flex; */
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        background: #fff;
        z-index: 9;
        padding: 1.5rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #yasuoType.mobileFormeWrap #formid .layui-form-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .mobileFormeWrap .layui-form-item .layui-inline {
        width: 46%;
    }
    
    .mobileFormeWrap .layui-form-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .mobileFormeWrap .layui-form-item .layui-form-label {
        display: none;
    }
    
    .mobileFormeWrap .layui-form-item .layui-inline .layui-input-inline {
        margin: 0;
    }
    
    
    .mobileFormeWrap .btns {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .t-22 {
		position: relative;
		top: -22rem;
	}

	.t-25 {
		position: relative;
		top: -25rem;
	}

	.t-30 {
		position: relative;
		top: -30rem;
	}

	.t-31 {
		position: relative;
		top: -31rem;
	}
	.t-37 {
		position: relative;
		top: -37rem;
	}
	.mb20 {
		margin-bottom: 20px !important;
	}

    .mobileFormeWrap .resetBtn,
    #download_all {
        width: 48%;
        text-align: center;
        line-height: 4rem;
        padding: 0 18px;
        display: inline-block;
        border-radius: 3px;
        cursor: pointer;
        font-size: 14px;
        margin-left: 0;
    }
    .downloadBtn #download_all,
    .download_allWrap #download_all{
        width: 100%;
        border-color: transparent;
    }
    #download_all {
        background: #00ce7a;
        color: #fff;
    }
    
    .layui-form-item .layui-input-inline {
        margin-left: 90px;
        width: auto !important;
    }
    
    .mobileFormItem .layui-input-inline {
        margin-left: 0 !important;
    }
    
    .layui-form-item .layui-input-inline>div {
        width: auto !important;
    }
    
    .mobileFormItem .layui-input-inline .layui-btn {
        background: #3c6cfe;
        border-radius: 0.5rem;
    }
    
    .layui-form-item .layui-input-inline>div.slider-container.theme-green {
        width: 100%;
        margin: 1.5rem 0 4rem;
    }
    
    .yasuoBtnWrap.layui-inline {
        width: 100% !important;
        margin-bottom: 0;
    }
    
    button.layui-btn.yasuoBtn.layui-btn-normal {
        width: 100% !important;
        background: #3c6cfe;
        height: 4rem;
        border-radius: 0.5rem;
    }
    
    }
@media screen and (max-width:470px){
#yasuoType{
height:24rem !important;
}
#yasuoType #formid .layui-form-item{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
}
.yasuoType-sticky{
position:sticky !important;
top:calc(100% - 24rem) !important;
}
.mobileFormeWrap {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: #fff;
    z-index: 199;
    padding: 1.5rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.h22r{height:24rem !important;}
#download_all {
    background: #00ce7a;
    color: #fff;
}
.mobileFormeWrap .resetBtn, #download_all {
    width: 48%;
    text-align: center;
    line-height: 4rem;
    padding: 0 18px;
    display: inline-block;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 0;
}
.mobileFormeWrap .resetBtn, #download_all {
    width: 48%;
    text-align: center;
    line-height: 4rem;
    padding: 0 18px;
    display: inline-block;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 0;
}
.layui-inline, img {
    display: inline-block;
    vertical-align: middle;
}
}
#uploader .statusBar .btns .uploadBtn, .resetBtn {
    background: #3c6cfe;
    color: #fff;
    border-color: transparent;
}
.static {
    position: static;
}
.layui-input {
    background: #fff;
}
#uploader .filelist li .nr .info a.yulan {
    margin-right: 40px;
    margin-top: 6px;
}
#uploader .filelist li p a {
    float: left;
    margin-right: 5px;
}