* {
	margin: 0;
	padding: 0;
	-webkit-user-select:none;
}
body {
    overflow: hidden;
}
.content_body {
    width: -webkit-calc(100% - 15px);
    height: -webkit-calc(100% - 89px);
    background-color: white;
    overflow: hidden;
    flex: 1;
    padding-top: 12px;
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 12px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.content_tab {
    position: relative;
    width: -webkit-calc(100% - 3px);
    height: -webkit-calc(100% - 29px); /*padding-top:12px,selectAllDi-height:17px*/
    float: left;
    padding-right: 3px;
}
.content {
    width: -webkit-calc(100% - 26px); 
    height: -webkit-calc(100% - 14px); 
    background-color: white;
    overflow: auto;
    position: absolute;
    top: 10px;
    padding-left: 22px;
    z-index: 2;
}
.content::-webkit-scrollbar {
    width: 6px;
}

.content::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #dfe6ed;
}

.content::-webkit-scrollbar-track {
    border-radius: 3px;
    background-color: white;
}
.main {
    height: 100%;
    width: 100%;
    overflow: hidden;
    -webkit-animation-duration: 0.667s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: cubic-bezier(0.33,0.00,0.67,1.00);
}
.preview {
    position: absolute;
    left: 0px;
    top: 0px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3;
}
.mbody {
    position: absolute;
    left: -100%;
    top: 0px;
    background-color: #101630;
}
.previewBtn {
    margin-top: -47px; /*36px-89px-->header height*/
    margin-right: 24px;
    float: right;
    min-width: 134px;
    height: 40px;
}
.previewBtn_button {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    background-image: linear-gradient(to top, #090b15,#2c345e);
    border:solid 1px #101630;
}
.previewBtn_container {
    position: relative;
    left: 0px;
    top: -100%;
    display: flex;
    width: 130px;
    height: 36px;
    background-color: #101630;
    border-radius: 18px;
}
.previewBtn_container:hover {
    background-color: #161e42;
}
.previewBtn_container:active {
    background-color: #0a0f21;
}
.previewBtn_container h1 {
    height: 17px;
    font-weight: 600;
    color: #ffffff;
    margin-top: 8px;
}
.previewBtn_container div {
    flex: 1;
}
.previewBtn_container img {
    width: 24px;
    height: 24px;
    margin-top: 6px;
}
.selectAllDiv {
    left: 12px;
    height: 17px;
    display: flex;
    padding-top: 1px;
    padding-left: 1px;
}
.selectAllTxt {
    color: #2c385a;
}
.svg-blur {
    width: 0px;
    height: 0px;
}
.progress {
    width: -webkit-calc(100% + 10px);
    height: 4px;
    border-radius: 100px;
    background-color: #edeef2;
    position: relative;
    top: -webkit-calc(100% - 5px);
    left: -9px;
    z-index:10;
}
.progress_bar {
    height: 4px;
    border-radius: 100px;
    background-image: linear-gradient(to right,#89beff,#3992ff);
}
.cover {
    width: 100%;
    float: left;
    -webkit-animation-duration: 0.416s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(1.00,0.00,0.67,1.00);
}
.before {
    -webkit-animation-name: before;
    height: 0px;
}
.before.album {
    background-color: rgba(255,255,255,1);
}
.before.photo {
    background-color: rgba(255,255,255,0);
}

.mask {
    width: 100%;
    height: 100px;
    float: left;
    background-color: white;
}
.mask.album {
    -webkit-mask: -webkit-gradient(linear, 100% 11%, 100% 36%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
.mask.photo {
    -webkit-mask: -webkit-gradient(linear, 100% 11%, 100% 36%, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
}

.after {
    -webkit-animation-name: after;
    height: -webkit-calc(100% - 100px);
}
.after.album {
    background-color: rgba(255,255,255,0);
}

.after.photo {
    background-color: rgba(255,255,255,1);
}
.mask_container {
    pointer-events: none;
    width: 0px;
    height: 0px;
    position: absolute;
    display: flex;
    left: 0px;
    top: 97px;
    background-color: rgba(255,255,255,0);
    flex-direction: column;
    z-index: 5;
}

