/*
REVISION DATE: 20240726
material icon cheatsheet:
https://shanfan.github.io/material-icons-cheatsheet/
*/

@font-face{src:url(ma.ttf);font-family:ma}
@font-face{src:url(bo.ttf);font-family:bo}
@font-face{src:url(re.ttf);font-family:re}

*{background:0;margin:0;padding:0;border:0;border-radius:0;outline:0;appearance:none;text-decoration:none;list-style:none;resize:none;box-sizing:border-box;vertical-align:middle;-webkit-tap-highlight-color:transparent}
html,body{background:#f7f7f7;width:100%;height:100%;overflow:hidden}
table{width:100%;border-collapse:collapse;border-spacing:0}
select{background:url(arrow.svg)top right no-repeat;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}
input:-moz-placeholder,select:-moz-placeholder,textarea:-moz-placeholder{box-shadow:none!important}
input:invalid,select:invalid,textarea:invalid{box-shadow:none!important}
input:-webkit-autofill,
input:-internal-autofill-selected{-webkit-animation-name:autofill;-webkit-animation-fill-mode:both}
@-webkit-keyframes autofill{to{background:0;color:#3c4043}}
[type=submit]:active,[type=reset]:active{transform:scale3d(.95,.95,.95);transition:transform .1s ease}
[placeholder]{text-overflow:ellipsis}

/*HEADER*/
#header{padding:17px 25px;width:100%;box-shadow:0 0 3px 0 rgba(0,0,0,.4);position:relative;z-index:2}
#menu{width:38px;height:38px;font:20px/38px ma,fantasy;color:#ef825a;float:left;display:none;cursor:pointer}
#logo{margin:0 54px 0 0;float:left}
#logo img{height:34.5px}
#searchInput{background:url(search.svg)13px 10px no-repeat #e8e8e8;padding:10px 15px 10px 38px;width:calc(100% - 496px);font:13px/13px re,sans-serif;color:#3c4043;border-radius:17.5px;float:left}
#menuToggle{padding:8px;font:18px/18px ma,fantasy;color:#3c4043;position:absolute;top:9px;left:25px;cursor:pointer;display:none}

#viewGrid.act{opacity:.2;pointer-events:none;cursor:default}
#viewGrid a{margin:0 0 0 18px;padding:8.5px 0;font:13px/13px re,sans-serif;color:#3c4043;position:relative;float:left;cursor:pointer}
#viewGrid a:before{content:'';width:100%;height:2px;position:absolute;bottom:0}
#viewGrid a.act:before{background:#ef825a}
#viewGrid strong{margin:0 10px 0 0;font:18px/18px ma,fantasy;color:#ef825a}
#accountToggle{margin:0 0 0 18px;font:35px/35px ma,fantasy;color:rgba(0,0,0,.4);cursor:pointer}

#accountBox{background:#f7f7f7;padding:20px;width:100%;max-width:200px;text-align:center;color:#3c4043;border:1px solid #e8e8e8;box-shadow:inset 0 0 0 1px #fff;position:absolute;right:25px;top:69px;display:none}
#accountBox.act{display:block}
#accountBox .icon{padding:0 0 20px;font:45px/45px ma,fantasy;color:#ef825a}
#accountBox .notLogin{font:16px/16px bo,sans-serif}
#accountBox .infoLogin{padding:6px 0 10px;font:12px/20px re,sans-serif}
#accountBox a{background:#e8e8e8;margin:10px 0 0;padding:12px;font:13px/13px re,sans-serif;color:#3c4043;border:1px solid #e8e8e8;border-radius:4px;display:block}
#accountBox a:hover{background:0;border-color:#ef825a;color:#ef825a}
#userNameTop{font:12px/12px bo,sans-serif}
#userMailTop{padding:6px 0 10px;font:12px/16px re,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/*POPULAR*/
#popular{margin:0 auto;text-align:center;white-space:nowrap;overflow-x:auto}
#popular a{background-position:center;background-size:cover;margin:0 8px 30px 0;font:13px/13px bo,sans-serif;color:#fff;border-radius:8px;display:inline-table;overflow:hidden;cursor:pointer}
#popular a:hover{text-decoration:underline}
#popular a:last-child{margin:0 0 30px}
#popular u{background:rgba(0,0,0,.4);padding:17px 25px; display:block}

/*ARTICLE*/
#article{padding:25px;position:absolute;top:70px;left:220px;bottom:0;right:0;overflow-y:auto;visibility:hidden}
#article:hover,#article:focus,#articleWrap{visibility:visible}

/*POSTGRID*/
#postGrid{margin:auto;max-width:964px}
#postGrid li{background:#fff;margin:0 12.5px 25px;width:calc(25% - 28px);height:233px;position:relative;border-radius:12px;overflow:hidden;display:inline-block;cursor:zoom-in}
#postGrid li:hover > .postAction,#postGrid li:hover > .postInfo{display:block}
#postGrid li:hover:before{content:'';background:rgba(0,0,0,.4);width:100%;height:100%;position:absolute;z-index:1}
#postGrid li:hover > .imgMain{transform: scale3d(1.1,1.1,1.1)}
#postGrid #postHeader,
#postGrid .postList{display:none}
#postGrid .imgMain{width:100%;height:100%;object-fit:cover;transition:transform .2s ease;will-change:transform}
#postGrid.gFull{columns:4;column-gap:25px}
#postGrid.gFull li{margin:0 0 25px;width:100%;height:auto}
#noResult{font:13px/13px re,sans-serif;text-align:center;color:rgba(0,0,0,.4)}

#postGrid #postHeader,
#postGrid.gList li{background:0;margin:0;width:100%;height:auto;display:table-row-group;border-radius:0;cursor:auto}
#postGrid.gList li:first-child .postList div{padding:0 12px 16px;font-family:bo,sans-serif;border-bottom:1px solid #e8e8e8}
#postGrid.gList li:not(:first-child):hover > .postList,
#postGrid.gList li:not(:first-child):active > .postList{background:#e8e8e8}
#postGrid.gList li:hover > .postAction,
#postGrid.gList li:hover > .postInfo,
#postGrid.gList li:hover:before,
#postGrid.gList li:hover > .imgMain,
#postGrid.gList .imgMain{display:none}
#postGrid.gList .postList{display:table-row}
#postGrid.gList{width:100%;display:table}

#bulkAction{position:fixed;right:25px;bottom:25px;z-index:1;display:none}
#bulkAction.act{display:block}
#bulkAction a{background:#3c4043;margin:0 0 15px;width:45px;height:45px;font:22px/45px ma,fantasy;color:#f7f7f7;text-align:center;border-radius:50%;box-shadow:0 12px 18px -10px #3c4043;float:left;clear:both;cursor:pointer}

#postGrid li:last-child .actionPop{top:auto;bottom:40px}
.actionPop{background:#f7f7f7;padding:8px 0;border:1px solid #e8e8e8;box-shadow:inset 0 0 0 1px #fff,0 24px 30px -34px rgba(0,0,0,.4);border-radius:8px;position:absolute;top:40px;right:12px;z-index:1}
.actionPop p{margin:0 0 8px;padding:8px 16px 16px;width:152px;font:11px/16px re,sans-serif;text-align:left;border-bottom:1px solid #e8e8e8}
.actionPop u{font-family:bo,sans-serif;color:#3c4043!important;vertical-align:bottom}
.actionPop a{padding:8px 16px;text-align:left;color:#3c4043;display:block;cursor:pointer}
.actionPop a:hover,.actionPop a:hover:before{color:#ef825a}
.actionPop a:before{margin:0 8px 0 0;font:14px/18px ma,fantasy;color:rgba(0,0,0,.4);vertical-align:bottom}
.actionPop .popView:before{content:'\e8f4'}
.actionPop .popEmbed:before{content:'\e3c4'}
.actionPop .popEdit:before{content:'\e254'}
.actionPop .popDownload:before{content:'\e2c4'}
.actionPop .popDelete:before{content:'\e872'}
.actionPop .popPrivate:before{content:'\e88d'}
.actionPop .popRestore:before{content:'\e889'}

.postList div{padding:16px 12px;font:13px/18px re,sans-serif;color:#3c4043;display:table-cell}
.postList div:first-child,
.postList div:nth-child(2){width:30px}
.postList div:last-child{width:125px;text-align:right;position:relative}
.postList div:last-child strong{margin:0 0 0 8px}
.postList div:last-child u{color:rgba(0,0,0,.4);vertical-align:baseline}
.postList div:last-child .N:before{content:'\e7fb';font:18px/18px ma,fantasy;vertical-align:bottom}
.postList div:last-child .Y:before{content:'\e88d';font:18px/18px ma,fantasy;vertical-align:bottom}
.postList div:last-child .mod-N:before{content:'\e86c';font:18px/18px ma,fantasy;vertical-align:bottom}
.postList div:last-child .mod-Y:before{content:'\e612';font:18px/18px ma,fantasy;color:#ef825a;vertical-align:bottom}
.postList div.admAction{width:131px}

.postList img{background:#fff;width:30px;height:30px;object-fit:cover}
.postList strong{font:18px/18px ma,fantasy;vertical-align:bottom;cursor:pointer}
.postList .chk{display:none}
.postList .lbl:before{content:'\e835';font:18px/18px ma,fantasy;vertical-align:bottom;cursor:pointer}
.postList .lbl.act:before{content:'\e834'}
.postList dt{display:block}
#chkAll{cursor:default;pointer-events:none;color:#e8e8e8;user-select:none}
#chkAll.act{cursor:pointer;pointer-events:auto;color:#3c4043}
#popImgId{background:rgba(0,0,0,.4);padding:6px 8px;font:11px/11px re,sans-serif;color:#fff;border-radius:4px 0 4px;position:absolute}

.postInfo{max-width:calc(100% - 30px);position:absolute;bottom:15px;left:15px;display:none;z-index:1}
.postUser{background:#ef825a;margin:0 0 0 26px;padding:4px 8px;font:13px/13px bo,sans-serif;color:#f7f7f7;text-align:left;word-break:break-all;border-radius:10px;cursor:pointer;float:left}
.postUser:before{content:'\e853';font:23px/18px ma,fantasy;color:#ef825a;position:absolute;left:0;top:2px}

.postAction{position:absolute;top:15px;right:15px;display:none;z-index:1}
.postAction a{margin:0 0 0 8px;font:18px/18px ma,fantasy;color:#fff;cursor:pointer}
.postUrl:before{content:'\e250'}
.postFavorite,.buttonFavorite{display:none}
.postFavorite:before,.buttonFavorite:before{content:'\e87e'}
.postFavorite.act:before,.buttonFavorite.act:before{content:'\e87d';color:#ef825a}
.postMore:before{content:'\e5d4'}

.postPop{background:#fff;padding:5px 0;text-align:left;position:absolute;top:45px;right:15px;border-radius:8px;display:none;z-index:1}
.postPop.act{display:block}
.postPop a{padding:10px 14px;font:13px/13px re,sans-serif;color:#3c4043;display:block;cursor:pointer}
.postPop a:hover,.postPop a:hover:before{color:#ef825a}
.postPop a:before{margin:0 5px 0 0;font:13px/13px ma,fantasy;color:rgba(0,0,0,.4);vertical-align:bottom}
.postEmbed:before{content:'\e3c4'}
.postDownload:before{content:'\e2c4'}

/*POSTPREVIEW*/
#postPreview{background:#f7f7f7;position:absolute;top:70px;bottom:0;right:0;left:220px;z-index:1;opacity:0;transform:scale3d(0,0,0);transition:opacity .1s ease,transform .1s ease;will-change:transform,opacity}
#postPreview.act{opacity:1;transform:none}
#imgPreview{width:100%;height:100%;text-align:center;display:table}
#imgPreview div{padding:25px;display:table-cell;vertical-align:middle}
#imgSrc{background:#fff;width:100%;max-width:700px;border-radius:4px;transition:max-width .2s ease;will-change:max-width}
#imgSrc.act{max-width:100%}
#leftPreview{width:calc(100% - 300px);position:absolute;top:0;bottom:0;left:0;overflow-x:auto}
#leftPreview.act{width:100%}
#leftPreview:hover > #actionPreview{opacity:1}
.zoomImg{background:#fff}

#actionPreview{background:rgba(0,0,0,.4);padding:10px 15px;border-radius:24px;position:fixed;left:25px;bottom:25px;opacity:0;transition:opacity .2s ease;will-change:opacity}
#actionPreview a{margin:14px 0;font:18px/18px ma,fantasy;color:#fff;float:left;clear:both;cursor:pointer}
#actionPreview a.act,#actionPreview a:hover{color:#ef825a}

#closePreview{background:#f7f7f7;font:22px/22px ma,fantasy;color:#3c4043;position:absolute;right:15px;top:15px;border-radius:50%;cursor:pointer}
#rightPreview{padding:25px;width:300px;color:#3c4043;position:absolute;top:0;bottom:0;right:0;overflow-x:auto}
#rightPreview.act{display:none}
.infoPreview{margin:0 0 25px;padding:25px;box-shadow:9px 9px 16px #e8e8e8,-9px -9px 16px #fff;border-radius:12px}

#downPreview{margin:0}
#downPreview h1{margin:0 0 25px;font:16px/16px bo,sans-serif}
#downPreview h1:before{content:'\e3f4';margin:0 5px 0 0;font:16px/16px ma,fantasy;color:rgba(0,0,0,.4);vertical-align:bottom}
#downPreview strong{margin:0 0 25px;font:13px/13px bo,sans-serif;display:block}
#downPreview strong:last-child{margin:0}
#downPreview u{margin:5px 0 0;min-height:18px;font:13px/18px re,sans-serif;display:block}
#downPreview .urlCopy{background:#e8e8e8;margin:8px 0 0;padding:10px;width:calc(100% - 38px);font:13px/13px re,sans-serif;color:#3c4043;border-radius:8px 0 0 8px;float:left}
#downPreview [type=button]{background:rgba(0,0,0,.4);margin:8px 0 0;width:38px;height:38px;font:16px/16px ma,fantasy;color:#fff;border-radius:0 8px 8px 0;cursor:pointer}

#userPreview{padding:0 0 0 28px;font:13px/20px bo,sans-serif;color:#ef825a;cursor:pointer;overflow:hidden;white-space:nowrap;position:relative;text-overflow:ellipsis}
#userPreview:before{content:'\e853';font:23px/18px ma,fantasy;color:#ef825a;position:absolute;left:0;top:2px}
#userPreview:hover{text-decoration:underline}
#remarkPreview{padding:15px 0 0;font:13px/20px re,sans-serif;word-break:break-word}
#remarkPreview a{color:#ef825a;vertical-align:baseline;cursor:pointer}
#remarkPreview a:hover{text-decoration:underline}
#editPost{background:#e8e8e8;margin:0 8px 0 0;padding:2px 4px;color:rgba(0,0,0,.4);border-radius:3px;vertical-align:bottom;display:inline;cursor:pointer}
#editPost:before{content:'\e150';margin:0 2px 0 0;font:14px/20px ma,fantasy;vertical-align:bottom}

#midPreview h1{font:normal 16px/16px bo,sans-serif}
#midPreview h1:before{content:'\e253';margin:0 5px 0 0;font:16px/16px ma,fantasy;color:rgba(0,0,0,.4);vertical-align:bottom}
#inputComment{background:#e8e8e8;margin:25px 0 15px;padding:10px;width:100%;font:13px/20px re,sans-serif;color:#3c4043;border-radius:8px}
#submitComment{background:rgba(0,0,0,.4);padding:15px 0;width:100%;font:13px/13px re,sans-serif;color:#fff;border-radius:8px;cursor:pointer}
#loginFirst{background:#e8e8e8;margin:15px 0 0;padding:15px 15px 15px 53px;font:12px/18px re,sans-serif;position:relative;border-radius:8px}
#loginFirst:before{content:'\e898';font:40px/40px ma,fantasy;color:#f7f7f7;position:absolute;left:8px;top:13px}
#loginFirst a{color:#3c4043;font-family:bo,sans-serif;vertical-align:baseline}
#loginFirst a:hover{text-decoration:underline}

#commentList li{margin:15px 0 0;padding:15px;font:13px/20px re,sans-serif;word-break:break-all;border:1px solid #e8e8e8;border-radius:8px;box-shadow:inset 0 0 0 1px #fff}
#commentList li#noComment{font:normal 13px/20px re,sans-serif;text-align:center;color:rgba(0,0,0,.4);word-break:normal}
#commentList .userComment{margin:0 5px 0 0;font:13px/3px bo,sans-serif;color:#ef825a;vertical-align:baseline;cursor:pointer}
#commentList .userComment:hover{text-decoration:underline}
#commentList p{display:inline;vertical-align:bottom}

/*POSTEDIT*/
#postEdit{background:rgba(247,247,247,.9);width:calc(100% - 220px);height:calc(100% - 70px);color:#3c4043;position:absolute;bottom:0;left:220px;z-index:1;display:none}
#postEdit.act{display:table}
#postEditOut{display:table-cell;vertical-align:middle}
#postEditIn{margin:auto;max-width:550px;height:350px;position:relative}

#leftEdit:after{content:'';border:4px dashed #fff;position:absolute;top:30px;bottom:30px;left:30px;right:30px}
#leftEdit{background:#3c4043;position:absolute;top:0;bottom:0;left:0;right:50%;border-radius:8px 0 0 8px;overflow:hidden}
#replaceEdit{font:normal 13px/18px bo,sans-serif;color:#fff;text-align:center;word-break:break-all;position:absolute;top:calc(50% - 8px);left:45px;right:45px}
#uplEdit{width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;cursor:pointer;z-index:1}
#imgEdit{background:#fff;width:100%;height:100%;opacity:.2;object-fit:contain}

#rightEdit{background:#f7f7f7;border:1px solid #e8e8e8;border-radius:0 8px 8px 0;box-shadow:inset 0 0 0 1px #fff;position:absolute;top:0;bottom:0;left:50%;right:0}
#rightEdit h1{padding:15px;font:normal 13px/13px bo,sans-serif}
#rightEdit h1:before{content:'\e86d';margin:0 8px 0 0;font:13px/13px ma,fantasy;color:rgba(0,0,0,.4);vertical-align:bottom}
#titEdit{padding:15px;width:100%;height:50px;font:13px/20px re,sans-serif;color:#3c4043;border-top:1px solid #e8e8e8}
#descEdit{padding:15px;width:100%;height:calc(100% - 162px);font:13px/20px re,sans-serif;color:#3c4043;border:1px solid #e8e8e8;border-width:1px 0}
#submitEdit{background:#e8e8e8;margin:15px;padding:12px;width:calc(100% - 30px);font:13px/13px re,sans-serif;color:#3c4043;border:1px solid #e8e8e8;border-radius:4px;cursor:pointer}
#submitEdit:hover{background:0;border-color:#ef825a;color:#ef825a}
#submitEdit.act,#submitEdit.act:hover{cursor:default;pointer-events:none}
#closeEdit{font:22px/22px ma,fantasy;position:absolute;top:10px;right:15px;cursor:pointer}

/*BULK REPLACE*/
#bulkReplace{background:#f7f7f7;padding:20px;width:calc(100% - 220px);height:calc(100% - 70px);color:#3c4043;position:absolute;bottom:0;left:220px;z-index:1;display:none}
#bulkReplace.act{display:block}

.bulkReplaceOut{margin:0 auto 15px;width: 100%;max-width:964px;height:calc(100% - 59px);overflow:hidden;overflow-y:auto}
.bulkReplaceOut thead{position:sticky;top:0;z-index:1}
.bulkReplaceOut th{background:#f7f7f7;padding:6px 12px 16px;font:13px/18px bo,sans-serif;text-align:left;box-shadow:inset 0 -1px 0 0 #e8e8e8}
.bulkReplaceOut th:first-child{font:18px/18px ma,fantasy}
.bulkReplaceOut th:last-child{width:84px}
.bulkReplaceOut th:last-child,
.bulkReplaceOut td:last-child{text-align:right}
.bulkReplaceOut td{padding:16px 12px;font:13px/18px re,sans-serif}
.bulkReplaceOut td dt{display:block}
.bulkReplaceOut td img{width:30px;height:30px;display:table;object-fit:cover}
.bulkReplaceOut a{display:inline-table;position:relative}
.bulkReplaceOut a em{background:#3c4043;padding:0 7px;max-width:60px;height:25px;font:normal normal 11px/25px re,sans-serif;color:#fff;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;overflow:hidden;display:inline-block}
.bulkReplaceOut a input{width:100%;height:100%;font-size:0;position:absolute;left:0;opacity:0;cursor:pointer}
.bulkReplaceOut caption{margin:0 0 10px;padding:0 0 20px;font:15px/15px re,sans-serif;text-align:center;color:rgba(0,0,0,.4);border-bottom:1px solid #e8e8e8}

.bulkReplaceBtn{margin:auto;width:100%;max-width:964px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:15px}
.bulkReplaceBtn input{background:#ef825a;height:44px;color:#fff;font:12px/44px re,sans-serif;letter-spacing:1px; text-transform:uppercase;border-radius:6px;cursor:pointer}
.bulkReplaceBtn input[type=reset]{background:0;color:#ef825a;box-shadow:inset 0 0 0 1px #ef825a}

/*HEADRESULT*/
#headResult{margin:0 auto 25px;max-width:964px;text-align:center;position:relative}
#headResult:before{content:'';background:linear-gradient(to right,#e8e8e8,#f7f7f7,#e8e8e8);height:1px;position:absolute;right:0;left:0;top:calc(50% - 1px)}
#headResult strong{font:normal 13px/13px re,sans-serif;color:#3c4043;position:relative;z-index:1}
#headResult u{padding:0 0 8px;font:18px/18px bo,sans-serif;display:block}

/*USERPAGE*/
#userPageWrap{position:relative;z-index:1}
#userPage{margin:auto;width:100%;max-width:964px;color:#3c4043;text-align:center;overflow:hidden;position:relative;border-radius:12px;display:none}
#userPage.act{display:table}
#userPage hr{background:linear-gradient(to right,#f7f7f7,#e8e8e8,#f7f7f7);margin:20px 0 0;height:1px}
#userBg{background-color:#f7f7f7;background-size:cover;background-position:center;height:50%;position:absolute;left:-10px;right:-10px;top:-10px;filter:blur(30px);opacity:.8}
#userAva{background-color:#f7f7f7;background-size:cover;background-position:center;margin:50px auto 0;width:100px;height:100px;border:4px solid #f7f7f7;border-radius:50%}
#userBioPro p{padding:15px 25px 10px;font:10px/18px bo,sans-serif;text-transform:uppercase;letter-spacing:1px}
#userSite a{padding:2px 6px;font:11px/11px re,sans-serif;color:#ef825a;letter-spacing:1px;border:1px solid #ef825a;border-radius:9.5px}
#userSite a:before{content:'\e80b';margin:0 5px 0 0;font:14px/14px ma,fantasy;vertical-align:text-bottom}
.userName strong{margin:8px 0 3px;font:normal 12px/12px bo,sans-serif;letter-spacing:1px;display:block}
.userName u{font:normal 13px/13px re,sans-serif}
.userCount{padding:20px 25px 25px;font:11px/11px re,sans-serif;display:inline-table}
.userCount strong{margin:0 0 4px;font:normal 25px/25px re,sans-serif;display:block}

/*WRAPSUMMARY*/
#wrapSummary{margin:0 auto 25px;width:100%;max-width:964px;color:#3c4043;display:table}
#textSummary{font:13px/13px re,sans-serif;float:left}
#textSummary:before{content:'\e87f';margin:0 5px 0 0;font:13px/13px ma,fantasy;color:rgba(0,0,0,.4);vertical-align:bottom}
#toogleSummary{font:13px/13px re,sans-serif;text-decoration:underline;float:right;cursor:pointer}
#wrapSummary hr{background:#e8e8e8;margin:20px 0 0;width:100%;height:1px;float:left;clear:both}
#infoSummary{margin:20px 0 0;width:100%;font:15px/25px re,sans-serif;text-align:center;color:rgba(0,0,0,.4);float:left}
#infoSummary.act{display:none}
#infoSummary strong{font:normal 15px/25px re,sans-serif;display:block}
#infoSummary a{color:rgba(0,0,0,.4);text-decoration:underline;vertical-align:bottom}

/*UPLOADPAGE*/
#uploadPage{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}
#leftUpload{background:rgba(0,0,0,.4);padding:0;width:calc(100% - 300px);height:100%;position:relative;float:left}
#leftUpload:after{content:'';border:4px dashed #fff;position:absolute;top:30px;bottom:30px;left:30px;right:30px}
#leftUpload h1{font:normal 13px/18px bo,sans-serif;color:#fff;text-align:center;word-break:break-all;position:absolute;top:calc(50% - 54.5px);left:45px;right:45px}
#leftUpload h1:before{content:'\e2c3';font:100px/100px ma,fantasy;color:rgba(247,247,247,.9);display:block}
#previewUpload{background:#fff;width:100%;height:100%;opacity:.5;object-fit:contain}
#previewUpload.act{display:none}
#imgUpload{width:100%;height:100%;position:absolute;left:0;opacity:0;cursor:pointer;z-index:1}

#rightUpload{width:300px;height:100%;position:relative;float:left}
#topUpload{padding:25px;color:#3c4043;position:absolute;top:0;left:0;right:0;bottom:70px;overflow-y:auto}
#topWrapper{padding:25px;box-shadow:9px 9px 16px #e8e8e8,-9px -9px 16px #fff;border-radius:12px}
#topUpload h1{margin:0 0 25px;font:16px/16px bo,sans-serif}
#topUpload h1:before{content:'\e3f4';margin:0 5px 0 0;font:16px/16px ma,fantasy;color:rgba(0,0,0,.4);vertical-align:bottom}
#topUpload u{margin:5px 0 0;font:13px/18px re,sans-serif;word-break:break-all;display:block}
#topUpload strong{margin:0 0 25px;font:13px/14px bo,sans-serif;display:block}
#topUpload strong:last-child{margin:0}
#topUpload [type=text],#topUpload textarea{background:#e8e8e8;margin:8px 0 0;padding:10px;width:100%;font:13px/13px re,sans-serif;color:#3c4043;border-radius:8px}

#downUpload{padding:15px 25px;border-top:1px solid #e8e8e8;position:absolute;bottom:0;left:0;right:0}
#submitUpload{background:#e8e8e8;padding:12px;width:100%;font:13px/13px re,sans-serif;color:#3c4043;border:1px solid #e8e8e8;border-radius:4px;cursor:pointer}
#submitUpload:hover{background:0;border-color:#ef825a;color:#ef825a}
#submitUpload.act{cursor:default;pointer-events:none}

/*MULTIUPLOAD*/
#mUplPage{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}
#mLeftUpl{background:rgba(0,0,0,.4);width:300px;height:100%;display:grid;align-items:center;padding:25px;position:relative;float:left}
#mLeftUpl:before{content:'';border:4px dashed #fff;position:absolute;top:30px;bottom:30px;left:30px;right:30px}
#mLeftUpl h1{font:normal 13px/18px bo,sans-serif;color:#fff;text-align:center;word-break:break-all}
#mLeftUpl h1:before{content:'\e2c3';font:100px/100px ma,fantasy;color:rgba(247,247,247,.9);display:block}
#mLeftUpl input{width:100%;height:100%;position:absolute;opacity:0;cursor:pointer}
#mLeftUpl.act:after{content:'UPLOADING IN PROGRESS …';background:rgba(247,247,247,.9);width:100%;height:100%;font:12px/12px bo,sans-serif;color:#3c4043;text-align:center;display:grid;align-content:center;position:absolute}
#mRightUpl{width:calc(100% - 300px);height:100%;position:relative;float:right}

.mTblWrp{padding:0 25px 15px;width:100%;max-width:964px;height:calc(100% - 69px);color:#3c4043;overflow:hidden;overflow-y:auto}
.mTblWrp th{position:sticky;top:0}
.mTblWrp th{background:#f7f7f7;padding:16px 12px;font:12px/18px bo,sans-serif;text-align:left;box-shadow:inset 0 -1px 0 0 #e8e8e8}
.mTblWrp th:first-child{font:18px/18px ma,fantasy;vertical-align:bottom}
.mTblWrp th:last-child,
.mTblWrp td:last-child{text-align:right}
.mTblWrp td{padding:16px 12px;font:12px/18px re,sans-serif;word-break:break-word}
.mTblWrp tr:last-child td{padding:16px 12px 0}
.mTblWrp img{background:#fff;width:30px;height:30px;object-fit:contain}
.mTblWrp caption{padding:20px 0;font:15px/15px re,sans-serif;text-align:center;color:rgba(0,0,0,.4);border-bottom:1px solid #e8e8e8}

.mBtnWrp{padding:15px 25px;text-align:center;box-shadow:inset 0 1px 0 0 #e8e8e8}
.mUplBtn{background:#e8e8e8;padding:12px;width:100%;max-width:180px;font:13px/13px re,sans-serif;color:#3c4043;box-shadow:inset 0 0 0 1px #e8e8e8;border-radius:4px;cursor:pointer}
.mUplBtn.act{pointer-events:none}
.mUplBtn:hover{background:0;color:#ef825a;box-shadow:inset 0 0 0 1px #ef825a}

/*CROP*/
#cropUpload,#cropDone{background:#3c4043;padding:6px;font:13px/16px re,sans-serif;color:#fff;border-radius:4px;position:absolute;top:18px;right:18px;z-index:1;display:none;cursor:pointer}
#cropUpload.act{display:block}
#cropUpload:before,#cropDone:before{content:'\e428';margin:0 5px 0 0;font:16px/16px ma,fantasy;vertical-align:bottom}
#cropDone.act{background:#ef825a;display:block;z-index:2}
#cropDone:before{content:'\e86c'}

.croppie-container{background:#fff;width:100%;height:100%}
.croppie-container .cr-image{z-index:-1;position:absolute;top:0;left:0;transform-origin:0 0;max-height:none;max-width:none}
.croppie-container .cr-boundary{position:relative;overflow:hidden;margin:0 auto;z-index:1;width:100%;height:100%}
.croppie-container .cr-resizer,.croppie-container .cr-viewport{position:absolute;border:2px solid #fff;margin:auto;top:0;bottom:0;right:0;left:0;box-shadow:0 0 2000px 2000px rgba(0,0,0,.4);z-index:0}
.croppie-container .cr-resizer{z-index:2;box-shadow:none;pointer-events:none}
.croppie-container .cr-resizer-horisontal,.croppie-container .cr-resizer-vertical{position:absolute;pointer-events:all}
.croppie-container .cr-resizer-horisontal::after,.croppie-container .cr-resizer-vertical::after{display:block;position:absolute;box-sizing:border-box;border:1px solid #3c4043;background:#fff;width:10px;height:10px;content:''}
.croppie-container .cr-resizer-vertical{bottom:-5px;cursor:row-resize;width:100%;height:10px}.croppie-container .cr-resizer-vertical::after{left:50%;margin-left:-5px}
.croppie-container .cr-resizer-horisontal{right:-5px;cursor:col-resize;width:10px;height:100%}
.croppie-container .cr-resizer-horisontal::after{top:50%;margin-top:-5px}
.croppie-container .cr-original-image{display:none}
.croppie-container .cr-vp-circle{border-radius:50%}
.croppie-container .cr-overlay{z-index:1;position:absolute;cursor:move;touch-action:none}
.croppie-container .cr-slider-wrap{width:75%;margin:15px auto;text-align:center}
.croppie-result{position:relative;overflow:hidden}.croppie-result img{position:absolute}
.croppie-container .cr-image,.croppie-container .cr-overlay,.croppie-container .cr-viewport{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}
.cr-slider{-webkit-appearance:none;width:300px;max-width:100%;padding-top:8px;padding-bottom:8px;background-color:transparent}
.cr-slider::-webkit-slider-runnable-track{width:100%;height:3px;background:rgba(0,0,0,.4);border:0;border-radius:3px}
.cr-slider::-webkit-slider-thumb{-webkit-appearance:none;border:none;height:16px;width:16px;border-radius:50%;background:#e8e8e8;margin-top:-6px}
.cr-slider:focus{outline:0}.cr-slider::-moz-range-track{width:100%;height:3px;background:rgba(0,0,0,.4);border:0;border-radius:3px}
.cr-slider::-moz-range-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#e8e8e8;margin-top:-6px}
.cr-slider:-moz-focusring{outline:1px solid #fff;outline-offset:-1px}
.cr-slider::-ms-track{width:100%;height:5px;background:0 0;border-color:transparent;border-width:6px 0;color:transparent}
.cr-slider::-ms-fill-lower{background:rgba(0,0,0,.4);border-radius:10px}
.cr-slider::-ms-fill-upper{background:rgba(0,0,0,.4);border-radius:10px}
.cr-slider::-ms-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#e8e8e8;margin-top:1px}
.cr-slider:focus::-ms-fill-lower{background:rgba(0,0,0,.4)}
.cr-slider:focus::-ms-fill-upper{background:rgba(0,0,0,.4)}
.cr-rotate-controls{position:absolute;bottom:5px;left:5px;z-index:1}
.cr-rotate-controls button{border:0;background:0 0}
.cr-rotate-controls i:before{display:inline-block;font-style:normal;font-weight:900;font-size:22px}
.cr-rotate-l i:before{content:'↺'}
.cr-rotate-r i:before{content:'↻'}

/*SUCCESS*/
#successPop{background:rgba(247,247,247,.9);width:100%;height:100%;position:absolute;z-index:1;transform:scale3d(0,0,0);opacity:0;transition:transform .1s ease,opacity .1s ease;will-change:transform,opacity}
#successPop.act{display:table;transform:none;opacity:1}
#successWrap{display:table-cell;text-align:center}
#successWrap p{margin:auto;border-radius:8px;box-shadow:0 24px 30px -34px rgba(0,0,0,.4);overflow:hidden;display:table}
#successWrap img{max-width:250px;width:100%;display:table}
#successWrap strong{background:#77b43f;padding:15px 0;font:normal 11px/15px bo,sans-serif;color:#fff;text-transform:uppercase;display:block}

/*NOTE*/
#note{position:absolute;top:95px;right:25px;z-index:1}
#note p{background:#77b43f;margin:0 0 10px;padding:9px 12px 9px 9px;font:13px/22px bo,sans-serif;color:#f7f7f7;border-radius:4px;float:right;clear:both;box-shadow:0 5px 10px -6px #3c4043;transform:translate3d(200%,0,0);transition:.2s ease;will-change:transform;cursor:pointer}
#note p:before{content:'\e86c';margin:0 8px 0 0;font:22px/22px ma,fantasy;float:left}
#note p.e{background:#ef825a}
#note p.e:before{content:'\e002'}
#note p.act{transform:none}

/*TERMS*/
#termsWarp{margin:auto;width:100%;max-width:600px;color:#3c4043}
#termsTitle{margin:0 0 35px;font:24px/24px bo,sans-serif;text-align:center;position:relative}
#termsTitle:before{content:'';background:linear-gradient(to right,#e8e8e8,#f7f7f7,#e8e8e8);height:1px;position:absolute;right:0;left:0;top:calc(50% - 1px)}
#termsTitle em{font-style:normal;position:relative}
#termsTitle strong{margin:8px auto 0;font:normal 11px/11px bo,sans-serif;color:rgba(0,0,0,.4);position:relative;display:block}

#termsContent li{margin:0 0 25px 20px;font:13px/25px re,sans-serif;display:block}
#termsContent li:before{content:'\25cf';margin:0 0 0 -20px;width:20px;color:#ef825a;display:inline-block}
#termsContent a{font-family:bo,sans-serif;color:#3c4043;text-decoration:underline;vertical-align:bottom}

/*POLICY*/
#policyWrap{margin:auto;width:100%;max-width:600px;color:#3c4043}
#policyWrap p{margin:0 0 25px;font:13px/25px re,sans-serif;display:block}
#policyTitle{margin:0 0 35px;font:24px/24px bo,sans-serif;text-align:center;position:relative}
#policyTitle:before{content:'';background:linear-gradient(to right,#e8e8e8,#f7f7f7,#e8e8e8);height:1px;position:absolute;right:0;left:0;top:calc(50% - 1px)}
#policyTitle em{font-style:normal;position:relative}
#policyTitle strong{margin:8px auto 0;font:normal 11px/11px bo,sans-serif;color:rgba(0,0,0,.4);position:relative;display:block}

.policySub{padding:25px 0 20px;font:13px/24px bo,sans-serif;text-transform:uppercase;letter-spacing:2px}
.policyList li{margin:0 0 25px 20px;font:13px/25px re,sans-serif;display:block}
.policyList li:before{content:'\25cf';margin:0 0 0 -20px;width:20px;color:#ef825a;display:inline-block}
.policyList li{margin:0 0 25px 20px;font:13px/25px re,sans-serif;display:block}
.policyList li ul{margin:25px 0}
.policyList a{font-family:bo,sans-serif;color:#3c4043;text-decoration:underline;vertical-align:bottom}

/*ACCOUNT*/
#package{margin:0 0 25px;width:calc(50% - 15px);padding:25px;color:#3c4043;border-radius:12px;box-shadow:9px 9px 16px #e8e8e8,-9px -9px 16px #fff;float:left}
#packageTitle{font:17px/37px re,sans-serif;display:block}
#packageTitle strong{padding:25px 0 0;font:13px/13px re,sans-serif;display:block}
#packageTitle span{vertical-align:bottom}
#packagePercent{background:#e8e8e8;margin:15px 0;width:100%;height:15px;border-radius:7.5px;overflow:hidden}
#packageStatus{background:linear-gradient(to right,#e8e8e8,#ef825a);width:0;height:100%;border-radius:7.5px;display:block}

#bonusInfo{padding:0 0 25px;font:13px/13px re,sans-serif}
#bonusInfo span{float:right}
#bonusTable{width:100%;display:table}
#bonusHeader{display:table-header-group}
#bonusHeader strong{padding:0 0 20px;font:13px/13px bo,sans-serif;border-bottom:1px solid #e8e8e8;display:table-cell}
#bonusHeader strong:last-child{text-align:right}
#bonusTable div:last-child p{padding:15px 0 0}
.bonusRow{display:table-row-group}
.bonusRow p{padding:15px 0;font:13px/18px re,sans-serif;display:table-cell}
.bonusRow p:last-child{text-align:right}
.bonusRow strong{font-family:bo,sans-serif;font-weight:normal;display:block}

/*ACCOUNTEDIT*/
#accountEdit{margin:0 0 25px;padding:25px;width:calc(50% - 15px);color:#3c4043;border-radius:12px;box-shadow:9px 9px 16px #e8e8e8,-9px -9px 16px #fff;float:right}
#accountTitle{padding:0 0 25px;font:17px/37px re,sans-serif}
#accountSubmit{background:#e8e8e8;padding:12px;min-width:120px;font:13px/13px re,sans-serif;color:#3c4043;border:1px solid #e8e8e8;border-radius:4px;float:right;cursor:pointer}
#accountSubmit:hover{background:0;border-color:#ef825a;color:#ef825a}
.accountFull{width:100%;float:left}
.accountHalf{width:50%;float:left}
.accountHalf:nth-child(odd){padding:0 10px 0 0}
.accountHalf:nth-child(even){padding:0 0 0 10px}

#accountName,#accountId,#accountEmail,#accountWebsite,#accountPhone,#accountGender,#accountZone,#accountBio{margin:0 0 25px;padding:10px 0 15px;width:100%;height:46px;font:13px/20px re,sans-serif;color:#3c4043;border-bottom:1px solid #e8e8e8}
#accountEdit select{padding:10px 15px 15px 0}
#accountEdit label{font:13px/13px bo,sans-serif;display:block}
#accountEdit label:before{margin:0 5px 0 0;font:13px/13px ma,fantasy;color:rgba(0,0,0,.4);vertical-align:bottom}
#accountEdit [for=accountName]:before{content:'\e7fd'}
#accountEdit [for=accountId]:before{content:'\e157'}
#accountEdit [for=accountEmail]:before{content:'\e554'}
#accountEdit [for=accountWebsite]:before{content:'\e80b'}
#accountEdit [for=accountPhone]:before{content:'\e0cd'}
#accountEdit [for=accountGender]:before{content:'\e63d'}
#accountEdit [for=accountZone]:before{content:'\e192'}
#accountEdit [for=accountBio]:before{content:'\e86d'}

/*PASSRESET*/
#passReset{padding:25px;width:calc(50% - 15px);color:#3c4043;border-radius:12px;box-shadow:9px 9px 16px #e8e8e8,-9px -9px 16px #fff;float:right}
#passReset label{font:13px/13px bo,sans-serif;display:block}
#passReset label:before{content:'\e88d';padding:0 5px 0 0;font:13px/13px ma,fantasy;color:rgba(0,0,0,.4);vertical-align:bottom}
#passOld,#passNew,#passConfirm{margin:0 0 25px;padding:10px 0 15px;width:calc(100% - 14px);height:46px;font:13px/20px re,sans-serif;color:#3c4043;border-bottom:1px solid #e8e8e8}
#passReset .passEye{margin:0 0 25px;padding:10px 0 15px;width:14px;height:46px;font:13px/20px ma,fantasy;color:#3c4043;border-bottom:1px solid #e8e8e8;cursor:pointer}
#passSubmit{background:#e8e8e8;padding:12px;min-width:120px;font:13px/13px re,sans-serif;color:#3c4043;border:1px solid #e8e8e8;border-radius:4px;float:right;cursor:pointer}
#passSubmit.act,#passSubmit.act:hover{background:rgba(0,0,0,.4);border-color:transparent;color:#fff;pointer-events:none}
#passSubmit:hover{background:0;border-color:#ef825a;color:#ef825a}
#passTitle{padding:0 0 25px;font:17px/37px re,sans-serif}

/*LOGIN*/
#loginForm,#forgotForm{margin:auto;max-width:600px;width:100%;color:#3c4043;border-radius:12px;box-shadow:9px 9px 16px #e8e8e8,-9px -9px 16px #fff}
#loginTitle{padding:20px 0;font:15px/15px bo,sans-serif;text-align:center;border-bottom:1px solid #e8e8e8}

#loginLeft{padding:25px;width:100%;display:inline-table}
#loginLeft label{font:13px/13px bo,sans-serif;display:block}
#loginLeft label:before{margin:0 5px 0 0;font:13px/13px ma,fantasy;color:rgba(0,0,0,.4);vertical-align:bottom}
#loginLeft [for=loginEmail]:before{content:'\e554'}
#loginLeft [for=loginPassword]:before{content:'\e88d'}

#loginEmail,#loginPassword,#loginLeft .passEye{margin:0 0 25px;padding:10px 0 15px;height:46px;font:13px/20px re,sans-serif;color:#3c4043;border-bottom:1px solid #e8e8e8}
#loginEmail{width:100%}
#loginPassword{width:calc(100% - 14px)}
#loginSubmit{background:#e8e8e8;padding:12px;font:13px/13px re,sans-serif;min-width:100px;color:#3c4043;border:1px solid #e8e8e8;border-radius:4px;float:right;cursor:pointer}
#loginSubmit:hover{background:0;color:#ef825a;border-color:#ef825a}
#loginSubmit.act{background:0;color:#ef825a;border-color:#ef825a;cursor:default;pointer-events:none}
#loginLeft .passEye{width:14px;font:13px/13px ma,fantasy;color:rgba(0,0,0,.4);cursor:pointer}
#loginLeft p{font:13px/39px re,sans-serif;text-align:center;float:left}
#loginLeft a{font-family:bo,sans-serif;color:#3c4043;text-decoration:underline;vertical-align:bottom;cursor:pointer}

/*REGISTRATION*/
#regisForm{margin:auto;max-width:600px;width:100%;color:#3c4043;border-radius:12px;box-shadow:9px 9px 16px #e8e8e8,-9px -9px 16px #fff}
#regisTitle{padding:20px 0;font:15px/15px bo,sans-serif;text-align:center;border-bottom:1px solid #e8e8e8}

#regisName,#regisEmail,#regisDomain,#regisZone,#regisPass,#regisConfirm,#regisWrap .passEye{margin:0 0 25px;padding:10px 0 15px;height:46px;font:13px/20px re,sans-serif;color:#3c4043;border-bottom:1px solid #e8e8e8}
#regisName,#regisEmail{width:100%}
#regisZone{padding:10px 15px 15px 0;width:100%}
#regisPass,#regisConfirm{width:calc(100% - 14px)}

#regisWrap .passEye{width:14px;font:13px/13px ma,fantasy;color:rgba(0,0,0,.4);cursor:pointer}
#regisWrap{padding:25px;width:100%;display:table}
#regisWrap label{font:13px/13px bo,sans-serif;display:block}
#regisWrap label:before{margin:0 5px 0 0;font:13px/13px ma,fantasy;color:rgba(0,0,0,.4);vertical-align:bottom}
#regisWrap [for=regisName]:before{content:'\e7fd'}
#regisWrap [for=regisEmail]:before{content:'\e554'}
#regisWrap [for=regisZone]:before{content:'\e192'}
#regisWrap [for=regisPass]:before{content:'\e88d'}
#regisWrap [for=regisConfirm]:before{content:'\e88d'}
#regisWrap p{font:13px/39px re,sans-serif;text-align:center;float:left}
#regisWrap a{font-family:bo,sans-serif;color:#3c4043;text-decoration:underline;vertical-align:bottom;cursor:pointer}

#regisSubmit{background:#e8e8e8;padding:12px;font:13px/13px re,sans-serif;min-width:100px;color:#3c4043;border:1px solid #e8e8e8;border-radius:4px;float:right;cursor:pointer}
#regisSubmit.act,#regisSubmit.act:hover{background:rgba(0,0,0,.4);border-color:transparent;color:#fff;pointer-events:none}
#regisSubmit:hover{background:0;color:#ef825a;border-color:#ef825a}

/*RESET PASSWORD*/
.resetForm{margin:auto;max-width:400px;width:100%;color:#3c4043;border-radius:12px;box-shadow:9px 9px 16px #e8e8e8,-9px -9px 16px #fff;display:table}
.resetTit{padding:20px 0;font:15px/15px bo,sans-serif;text-align:center;border-bottom:1px solid #e8e8e8}
.resetSub{background:#e8e8e8;padding:12px;font:13px/13px re,sans-serif;width:100%;color:#3c4043;border:1px solid #e8e8e8;border-radius:4px;float:right;cursor:pointer}
.resetSub:active,.resetSub:hover,.resetSub.act{background:0;color:#ef825a;border-color:#ef825a}
.resetSub.act{cursor:default;pointer-events:none}

.resetWrp{padding:25px;width:100%;display:table}
.resetWrp label{font:13px/13px bo,sans-serif;display:block}
.resetWrp label:before{content:'\e88d';margin:0 5px 0 0;font:13px/13px ma,fantasy;color:rgba(0,0,0,.4);vertical-align:bottom}
.resetWrp [name=newPass],.resetWrp [name=confirmPass]{margin:0 0 25px;padding:10px 0 15px;width:calc(100% - 14px);height:46px;font:13px/20px re,sans-serif;color:#3c4043;border-bottom:1px solid #e8e8e8}
.revealPass{margin:0 0 25px;padding:10px 0 15px;width:14px;height:46px;font:13px/13px ma,fantasy;color:rgba(0,0,0,.4);border-bottom:1px solid #e8e8e8;cursor:pointer}

/*ADMIN*/
#adminPage{margin:auto;width:100%;max-width:964px;color:#3c4043;display:table}
#adminHeader{display:table-header-group}
#adminHeader div{padding:0 12px 22px;font:normal 13px/13px bo,sans-serif;border-bottom:1px solid #e8e8e8;display:table-cell}
#adminHeader div:first-child{width:30px;text-align:left}
#adminHeader div:last-child{text-align:right}

.adminRow{display:table-row-group}
.adminRow div{padding:22px 12px;font:13px/13px re,sans-serif;display:table-cell}
.adminRow div:first-child{width:30px;text-align:left}
.adminRow div:last-child{text-align:right}

/*ADMIN CONFIG*/
.cfgFrm{background:rgba(247,247,247,.9);padding:25px;position:fixed;left:220px;right:0;top:69px;bottom:0;overflow-y:auto;z-index:1;display:none}
.cfgFrm.act{display:grid}
.cfgFrm div{background:#f7f7f7;margin:auto;max-width:500px;width:100%;color:#3c4043;box-shadow:inset 0 0 0 1px #e8e8e8,inset 0 0 0 2px #fff;border-radius:12px}
.cfgFrm p{padding:20px 25px 0}
.cfgFrm p.subFrm{padding:20px 25px;grid-template-columns:repeat(2,1fr);grid-gap:20px;display:grid}
.cfgFrm h1{padding:20px 25px;font:17px/17px re,sans-serif;border-bottom:1px solid #e8e8e8}
.cfgFrm label{font:13px/13px bo,sans-serif;display:block}
.cfgFrm [type=text],.cfgFrm select{padding: 10px 0 15px;width:100%;height:46px;font:13px/20px re,sans-serif;color:#3c4043;border-bottom:1px solid #e8e8e8}
.cfgFrm [type=reset],.cfgFrm [type=submit]{background:#e8e8e8;padding:12px;font:13px/13px re,sans-serif;color:#3c4043;border:1px solid #e8e8e8;border-radius:4px;cursor:pointer}
.cfgFrm [type=reset]:hover,.cfgFrm [type=submit]:hover{background:0;border-color:#ef825a;color:#ef825a}

.cfgAdd{background:#3c4043;width:45px;height:45px;font:22px/45px ma,fantasy;color:#f7f7f7;text-align:center;border-radius:50%;box-shadow:0 12px 18px -10px #3c4043;position:fixed;right:25px;bottom:25px;cursor:pointer}
.cfgBtn:before{content:'\e150'}
.cfgWrp{display:table-row-group}
.cfgWrp div.adminRow{display:table-row}

/*ADMINFORM*/
#adminForm{background:rgba(247,247,247,.9);padding:25px;color:#3c4043;position:fixed;left:220px;right:0;top:69px;bottom:0;overflow:auto;display:none}
#adminForm.act{display:block}
#adminWrap{width:100%;height:100%;display:table}
#adminOut{display:table-cell;vertical-align:middle}

#adminIn{background:#f7f7f7;margin:auto;max-width:500px;color:#3c4043;border:1px solid #e8e8e8;box-shadow:inset 0 0 0 1px #fff;border-radius:12px;display:table}
#adminIn label{font:13px/13px bo,sans-serif;display:block}
#adminIn label:before{margin:0 5px 0 0;font:13px/13px ma,fantasy;color:rgba(0,0,0,.4);vertical-align:bottom}
#adminIn [for=userName]:before{content:'\e7fd'}
#adminIn [for=userLogId]:before{content:'\e157'}
#adminIn [for=userEmail]:before{content:'\e554'}
#adminIn [for=userWeb]:before{content:'\e80b'}
#adminIn [for=userPhone]:before{content:'\e0cd'}
#adminIn [for=userGender]:before{content:'\e63d'}
#adminIn [for=userZone]:before{content:'\e192'}
#adminIn [for=userBio]:before{content:'\e86d'}
#adminIn [for=userStatus]:before{content:'\e8e8'}

#userEdit{margin:0 0 25px;padding:20px 25px;font:17px/17px re,sans-serif;border-bottom:1px solid #e8e8e8;position:relative}
#userEdit a{font:20px/20px ma,fantasy;position:absolute;right:25px;top:18px;cursor:pointer}
#userName,#userLogId,#userEmail,#userWeb,#userPhone,#userGender,#userZone,#userBio,#userStatus{margin:0 0 25px;padding:10px 0 15px;width:100%;height:46px;font:13px/20px re,sans-serif;color:#3c4043;border-bottom:1px solid #e8e8e8}
#userGender,#userZone,#userStatus{padding:10px 15px 15px 0}
#userSubmit{background:#e8e8e8;margin:0 25px 25px;padding:12px;min-width:120px;font:13px/13px re,sans-serif;color:#3c4043;border:1px solid #e8e8e8;border-radius:4px;float:right;cursor:pointer}
#userSubmit:hover{background:0;border-color:#ef825a;color:#ef825a}

.userFull{padding:0 25px;width:100%;float:left}
.userHalf{width:50%;float:left}
.userHalf:nth-child(odd){padding:0 10px 0 25px}
.userHalf:nth-child(even){padding:0 25px 0 10px}

.adminRow:hover div{background:#e8e8e8}
.adminRow .userId{text-decoration:underline;cursor:pointer}
.adminRow div:last-child a{margin:0 0 0 8px;font:18px/18px ma,fantasy;color:#3c4043;cursor:pointer}
.adminRow .userLibrary:before{content:'\e251'}
.adminRow .userEdit:before{content:'\e853'}

.adminRow .W:before{content:'Wimgal'}
.adminRow .G:before{content:'Google'}
.adminRow .F:before{content:'Facebook'}

/*NAVIGATION*/
#navigation{width:220px;position:absolute;top:70px;bottom:54px;overflow-y:auto;visibility:hidden;z-index:1}
#navigation:hover,#navigation:focus,#sideNav{visibility:visible}

#remainQuota{margin:25px 0 0 24px;padding:10px;width:calc(100% - 48px);color:#3c4043;border-radius:12px;box-shadow:9px 9px 16px #e8e8e8,-9px -9px 16px #fff;display:table}
#remainQuota h1{font:normal 11px/11px re,sans-serif;text-align:center}
#remainQuota dd{background:#e8e8e8;margin:10px 0;height:10px;border-radius:7.5px}
#remainQuota em{background:linear-gradient(to right,#e8e8e8,#ef825a);width:0;height:100%;border-radius:7.5px;display:block}
#usedQuota{font:11px/11px re,sans-serif;float:left}
#totalQuota{font:11px/11px re,sans-serif;float:right}

#navLi{margin:13px 0 25px;display:table}
#navLi a{padding:13px 0 13px 48px;width:100%;font:13px/18px re,sans-serif;color:#3c4043;float:left;border-radius:0 22px 22px 0;position:relative}
#navLi a:hover,#navLi a:hover strong{color:#ef825a}
#navLi a.act{background:#e8e8e8;width:calc(100% - 24px)}
#navLi strong{margin:0 10px 0 0;font:18px/18px ma,fantasy;color:rgba(0,0,0,.4);vertical-align:bottom}
#navLi hr{background:linear-gradient(to right,#e8e8e8,#f7f7f7);margin:12px 0;width:100%;height:1px;float:right}
#navLi #uplLi{background:#ef825a;margin:0 0 13px 24px;padding:13px 0 13px 24px;width:calc(100% - 48px);color:#fff;border-radius:22px;box-shadow:0 13px 16px -13px #ef825a}
#navLi #uplLi strong{color:#fff}

#faveCapture img{width:35px;height:35px;object-fit:cover;position:absolute;top:0;right:0;border-radius:4px;box-shadow:0 5px 5px -3px #3c4043;transform:scale3d(0,0,0);transition:transform .1s ease;will-change:transform}
#faveCapture img.act{transform:none}
#faveCapture img.left{transform:translate3d(-180px,0,0)}

/*FOOTER*/
#footer{padding:20px;width:220px;font:9px/14px re,sans-serif;color:#3c4043;letter-spacing:1px;position:absolute;left:0;bottom:0;z-index:1}

/*MOBILE*/
@media(max-width:900px){
#navigation{background:#f7f7f7;border:1px solid #e8e8e8;border-width:0 1px 1px 0;visibility:visible;transform:translate3d(-100%,0,0)}
#footer{background:#f7f7f7;border-right:1px solid #e8e8e8;transform:translate3d(-100%,0,0)}
#navigation.act,#footer.act{transform:none}
#article,#postPreview,#postEdit,#package,#accountEdit,#passReset,#loginLeft{width:100%;border:0;left:0}
#article{visibility:visible}
#searchInput{width:calc(100% - 313px)}
#menu{display:block}
#logo{display:none}
#adminForm,.cfgFrm{left:0}
#bulkReplace{width:100%;left:0}
}

@media(max-width:700px){
#postGrid li{width:calc(33.3% - 28px)}
#postGrid.gFull{columns:3}
.mTblWrp th:nth-child(3),
.mTblWrp td:nth-child(3){display:none}
}

@media(max-width:615px){
#postGrid li{width:calc(50% - 28px)}
#postGrid.gFull{columns:2}
#postPreview{overflow:auto}
#leftPreview,#rightPreview{width:auto;position:relative}
#actionPreview{display:none}

#adminHeader{display:block}
#adminHeader div{display:none}
#adminHeader div:first-child{display:block;float:left}
#adminHeader div:nth-child(2){width:calc(100% - 30px);display:block;float:left}

#postEditIn{max-width:100%;height:100%}
#leftEdit{border-radius:0;right:0;bottom:50%}
#rightEdit{border:0;border-radius:0;left:0;top:50%}
#imgEdit{position:absolute}

#leftUpload,#rightUpload{width:100%;height:50%}
#viewGrid strong{margin:0}
#viewGrid span{display:none}
#viewGrid a{margin:0 0 0 32px}
#searchInput{width:calc(100% - 241px)}

#postGrid.gList li:not(:first-child):hover > .postList,
#postGrid.gList li:not(:first-child):active > .postList{background:0}
#postGrid.gList li{padding:12px 0;width:100%;border-bottom:1px solid #e8e8e8;display:table}
#postGrid.gList li:last-child{padding:12px 0 0;border:0}
#postGrid.gList .postList div{padding:2px 12px;width:calc(100% - 30px);display:block;float:right}
#postGrid.gList .postList div:first-child{width:30px;float:left}
#postGrid.gList .postList div:last-child{padding:2px 0;width:100%}
.postList dt{font:13px/18px re,sans-serif}

#postGrid #postHeader .postList div{display:none}
#postGrid #postHeader .postList div:first-child{display:block;float:left}
#postGrid #postHeader .postList div:nth-child(2){width:calc(100% - 30px);display:block;float:left}
#postGrid li:last-child .actionPop,
.actionPop{border:0;border-radius:0;box-shadow:none;position:fixed;left:0;right:0;bottom:0;top:auto}
.actionPop:before{content:'';background:rgba(0,0,0,.4);position:fixed;top:69px;bottom:256px;left:0;right:0}
.actionPop.mini:before{bottom:159px}
.actionPop a{padding:15px 25px}
.actionPop p{padding:7px 25px 15px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.postPop.act{display:block;border-radius:0;position:fixed;left:0;right:0;bottom:0;top:auto}
.postPop:before{content:'';background:rgba(0,0,0,.4);position:fixed;top:69px;bottom:96px;left:0;right:0}
.postPop a{padding:15px 25px}

.cfgWrp div.adminRow,.adminRow{padding:12px 0;width:100%;border-bottom:1px solid #e8e8e8;display:table}
.adminRow:last-child{padding:12px 0 0;border:0}
.adminRow:hover div{background:0}
.adminRow div{padding:5px 12px;width:calc(100% - 30px);display:block;float:right}
.adminRow div:first-child{float:left}
.adminRow div:last-child{padding:5px 0;width:100%}
.bulkReplaceOut td:nth-child(3),.bulkReplaceOut th:nth-child(3){display:none}

#mLeftUpl,#mRightUpl{width:100vw;height:50%}
.mTblWrp caption{display:none}
}

@media(max-width:430px){
#searchInput{opacity:0;visibility:hidden;pointer-events:none}
#postGrid.gFull{columns:1}
#postGrid li{margin:0 0 25px;width:100%}
#postGrid li:last-child{margin:0}

.accountHalf:nth-child(even),.accountHalf:nth-child(odd){padding:0;width:100%}
.userHalf:nth-child(even),.userHalf:nth-child(odd){padding:0 25px;width:100%}

#bonusInfo span{padding:10px 0 0;float:none;display:block}
#bonusHeader strong{display:none}
#bonusHeader,#bonusHeader strong:first-child,.bonusRow{width:100%;display:table}
.bonusRow{padding:20px 0;border-bottom:1px solid #e8e8e8}
.bonusRow:last-child{padding:20px 0 0;border:0}
.bonusRow p,.bonusRow p:last-child{padding:0!important;text-align:left;display:block}

#regisEmail,#loginEmail{width:100%;margin:0 0 10px}
#loginLeft p{width:100%}
#loginSubmit{margin:15px 0 0;width:100%}

.postList div:last-child strong,.adminRow div:last-child a{background:rgba(0,0,0,.4);padding:10px;min-width:40px;color:#fff;text-align:center;border-radius:4px;display:inline-block}
.postList div:last-child .mod-Y:before{color:#fff}
.postList div:last-child u{display:none}
.postList div:last-child .actionPop u{display:inline}
.bulkReplaceOut td:nth-child(5),.bulkReplaceOut th:nth-child(5){display:none}
.mTblWrp th:nth-child(4),
.mTblWrp td:nth-child(4){display:none}
}

@media(max-width:343px){
#searchInput{display:none}
#viewGrid{display:inline-table}
#accountToggle{float:right}
.bulkReplaceOut td:nth-child(4),.bulkReplaceOut th:nth-child(4){display:none}
.mTblWrp th:nth-child(5),
.mTblWrp td:nth-child(5){display:none}
}