@charset "utf-8";

html{}
body{font:12px/1.5 Roboto,Arial,sans-serif;font-weight:400;color:rgba(0,0,0,.75);-webkit-font-smoothing:antialiased;margin:0;}
input,textarea,select,button{font:12px/1.5 Roboto,Arial,sans-serif;color:rgba(0,0,0,.75);font-weight:normal;}
h1,h2,h3,h4,h5,h6,ul,ol{margin:0;}
ul,ol,menu{padding-left:0;}
li{list-style-type:none;}
form,dl,dd,menu{margin:0;}

a{color:var(--linkColor);text-decoration:underline;-webkit-tap-highlight-color:transparent;}
a img{border:0;}

/*iconfont*/
@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(../iconfont/MaterialIcons-Regular2.woff2) format('woff2'),url(../iconfont/MaterialIcons-Regular.woff) format('woff');}
.MI:before,
[icon]:before{font-family:'Material Icons';font-weight:normal;font-style:normal;display:inline-block;vertical-align:middle;width:1em;height:1em;line-height:1;overflow:hidden;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;/*Support for all WebKit browsers.*/-webkit-font-smoothing:antialiased;/*Support for Safari and Chrome.*/text-rendering:optimizeLegibility;/*Support for Firefox.*/-moz-osx-font-smoothing:grayscale;/*Support for IE.*/font-feature-settings:'liga';}
[icon]:before{content:attr(icon);}
[icon-after]:after{content:attr(icon-after);}

/*scrollbar*/
::-webkit-scrollbar{height:.75em;width:.75em;overflow:visible;}
::-webkit-scrollbar-button{height:0;width:0;}
::-webkit-scrollbar-corner{background:transparent;}
::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.25);background-clip:padding-box;border:1px solid transparent;min-height:2em;}
::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.5);}
::-webkit-scrollbar-track{background-clip:padding-box;border:0 solid transparent;}

/*basic*/
:root{
	/*gen*/
	/*--linkColor:dodgerblue;--themeColor:deepskyblue;--themeBG:#333;--themeGradient:gold;*/
	/*admin*/
	--linkColor:dodgerblue;--themeColor:deepskyblue;--themeBG:#4A148C;--themeGradient:#000000;
	/*reseller*/
	/*--linkColor:dodgerblue;--themeColor:deepskyblue;--themeBG:darkgreen;--themeGradient:yellowgreen;*/
	/*merchant*/
	/*--linkColor:dodgerblue;--themeColor:deepskyblue;--themeBG:midnightblue;--themeGradient:lavenderblush;*/
	--ffGS:'Google Sans','Roboto','Arial',sans-serif;
}
html{position:relative;height:100%;}
body{position:relative;height:100%;width:100%;overflow:hidden;
	background-color:var(--themeBG,#333);
	background-image:linear-gradient(to right bottom,var(--themeBG),var(--themeGradient));
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}

h1,h2,h3{font-family:var(--ffGS);font-weight:500;}
h1{font-size:2em;}
h2{font-size:1.75em;}
h3{font-size:1.5em;}
h4,h5,h6{font-size:1em;}

#menu{position:absolute;top:0;left:0;bottom:0;/* z-index:1; */width: 25em;color:white;}
#header{position:absolute;top:0;left:0;right:0;/* z-index:1; */margin-left: 25em;color:white;transition:.3s;}
#content_base{position:absolute;top:0;left:0;right:0;bottom:0;/* z-index:1; */margin: 5em 0 0 25em;background:white;overflow:auto;transition:.3s;}

/*menu collapse*/
body.page_menu_collapsed #header{height:4em;}
body.page_menu_collapsed #content_base{margin:4em 0 0;}
body.page_menu_collapsed #site_head{height:4em;}

/*menu*/
#menu{display:flex;flex-direction:column;overflow:hidden;}
#site_head{flex:none;display:flex;align-items:center;height:5em;padding:0 1.5em;transition:.3s;}
#site_head .logo{flex:auto;}
#site_head .logo img{max-height:3em;vertical-align:top;max-width:100%;}
#site_head .logo span{display:none;}
#site_head .menu_ctrl{display:block;width:3em;height:3em;color:currentColor;text-decoration:none;cursor:pointer;opacity:.5;transform:rotate(180deg);transition:.3s;}
#site_head .menu_ctrl:hover{opacity:1;}
#site_head .menu_ctrl span{display:block;width:2em;height:2em;padding:.5em;}
#site_head .menu_ctrl span:before{content:'vertical_align_top';display:block;font-size:2em;width:1em;height:1em;line-height:1;overflow:hidden;transform:rotate(90deg);}
#site_head .menu_ctrl.on span:before{content:'menu';transform:none;}

#user_panel{flex:none;position:relative;max-height:3em;padding:1.5em 2em;overflow:hidden;background:rgba(0,0,0,.1);box-shadow:inset rgba(255,255,255,.1) 0 1px 0,inset rgba(255,255,255,.1) 0 -1px 0;transition:.3s;}
#user_panel.expand{background:rgba(0,0,0,.25);max-height:40em;}
#user_panel .user_info{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;height:3em;}
#user_panel .user_info a.more{display:block;position:absolute;top:50%;right:0;margin:-2em -1em;padding:1em;color:currentColor;text-decoration:none;cursor:pointer;opacity:.5;transition:.3s;}
#user_panel .user_info a.more:hover{opacity:1;}
#user_panel .user_info a.more span{display:block;width:2em;height:2em;overflow:hidden;}
#user_panel .user_info a.more span:before{content:'unfold_more';display:block;font-size:2em;width:1em;height:1em;line-height:1;overflow:hidden;}
#user_panel .user_info a.more.on span:before{content:'unfold_less';}
#user_panel .user_info span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--ffGS);font-weight:500;}
#user_panel .user_info .name span{font-weight:700;font-size:1.25em;}
#user_panel .user_info .group span{opacity:.5;}
#user_panel .user_overview{margin-top:1.5em;padding-top:1.5em;box-shadow:inset rgba(255,255,255,.1) 0 1px 0;}
#user_panel .user_overview ul{}
#user_panel .user_overview li{display:flex;justify-content:space-between;margin:.25em 0;}
#user_panel .user_overview li>div{white-space:nowrap;}
#user_panel .user_overview .T{margin-right:1em;}
#user_panel .user_overview .C{}
#user_panel .user_function{margin-top:1.5em;padding-top:1.5em;box-shadow:inset rgba(255,255,255,.1) 0 1px 0;}
#user_panel .user_function a{display:flex;color:currentColor;text-decoration:none;cursor:pointer;opacity:.75;padding:.5em 0;line-height:2;}
#user_panel .user_function a:before{display:block;font-size:2em;width:1em;height:1em;line-height:1;overflow:hidden;margin-right:.75em;}
#user_panel .user_function a:hover{opacity:1;}
#user_panel .user_function a span{display:block;text-align:center;white-space:nowrap;}

#navigation{flex:auto;overflow:hidden;overflow-y:auto;}
#navigation ul{margin:0;padding:1em 0;}
#navigation ul>li{}
#navigation ul>li>a{display:block;color:currentColor;font-family:var(--ffGS);padding:.75em 2em;text-decoration:none;cursor:pointer;font-weight:500;transition:.3s;}
#navigation ul>li>a span{display:block;font-size:1.333334em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#navigation ul>li>a span:before{font-family:'Material Icons';font-weight:normal;font-size:1.5em;width:1em;height:1em;line-height:1;overflow:hidden;display:inline-block;vertical-align:top;margin-right:.75em;}

#navigation ol{background:rgba(0,0,0,.1);box-sizing:border-box;padding:0 2em 0 4em;margin:0;max-height:0;overflow:hidden;visibility:hidden;opacity:0;transition:.3s;}
#navigation ol>li{list-style:disc outside;}
#navigation ol>li>a{display:block;font-size:1.166667em;padding:.5em 0;color:currentColor;text-decoration:none;cursor:pointer;transition:.3s;}

#navigation a.current{color:var(--themeColor);}
#navigation ul>li>a.current~ol{background:rgba(0,0,0,.1);padding: 1em 2em 1em 4em;margin: 1em 0;max-height:calc(100vh - 10em);visibility:visible;opacity:1;}

#notification{}
#notification a{display:block;position:relative;color:currentColor;background:rgba(0,0,0,.1);transition:.3s;}
#notification a span{display:flex;align-items:center;height:4em;padding:0 2em;font-weight:bold;}
#notification a span:before{display:block;font-size:2em;width:1em;height:1em;line-height:1;overflow:hidden;margin-right:.75em;animation:msg 1s linear infinite;}
#notification a[data-msg="0"]{margin-bottom:-4em;}
#notification a[data-msg]:not(data-msg="0"){margin-bottom:0;}
#notification a[data-msg]:after{content:attr(data-msg);display:block;width:2em;height:2em;position:absolute;top:50%;right:0;padding:0 .333334em;margin:-1em 1.5em;line-height:2;text-align:center;font-weight:bold;background:orangered;border-radius:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
@keyframes msg{
	0%,10%,20%,30%,40%{transform:translateX(2px);content:'notifications_active';}
	5%,15%,25%,35%,45%{transform:translateX(-2px);content:'notifications_active';}
	45.1%,100%{transform:translateX(0);content:'notifications';}
}

/*header*/
#header{display:flex;align-items:flex-end;height:5em;}
#main_tab_wrapper{overflow:hidden;position:relative;flex:auto;}
#main_tab{display:flex;}
#main_tab li{position:relative;}
#main_tab a.tab{display:block;color:currentColor;padding:0 1.5em;line-height:4;text-decoration:none;cursor:pointer;font-weight:500;transition:.3s;}
#main_tab a.tab span{font-family:var(--ffGS);line-height:1;white-space:nowrap;font-size:1.25em;}
#main_tab a.x{display:none;font-size:1em;width:1.5em;height:1.5em;line-height:1.5;overflow:hidden;text-align:center;position:absolute;top:0;right:0;z-index:1;margin:.25em;color:currentColor;border-radius:100%;text-decoration:none;cursor:pointer;}
#main_tab a.x:before{content:'close';}
#main_tab a.x:hover{background:rgba(0,0,0,.1);}
#main_tab li:hover a.tab{background:rgba(255,255,255,.25);}
#main_tab li:hover a.x{display:block;}
#main_tab li.current{}
#main_tab li.current a.tab{background:#fff;}
#main_tab li.current a.tab span{color:#000;}
#main_tab li.current a.x{color:#000;}

#function_tab{display:flex;padding:.5em 1em;}
#function_tab a{display:block;width:3em;height:3em;overflow:hidden;text-decoration:none;color:currentColor;cursor:pointer;border-radius:100%;}
#function_tab a:before{display:block;font-size:2em;width:1em;height:1em;line-height:1;overflow:hidden;margin:.25em;opacity:.5;}
#function_tab a:hover{background:rgba(255,255,255,.25);}
#function_tab a:hover:before{opacity:1;}

/*content*/
#content_base>*{padding:1.5em;}
#content_base>*>.filter{display:flex;flex-wrap:wrap;align-items:center;margin:-1.5em -1.5em 0;padding:1em;/*background:#fff;position:-webkit-sticky;position:sticky;left:0;top:0;right:0;z-index:1;box-shadow:inset rgba(0,0,0,.1) 0 -1px 0;*/}
/*#content_base>*>.filter:after{content:'';display:block;height:1px;position:absolute;left:1.5em;right:1.5em;bottom:0;box-shadow:inset rgba(0,0,0,.1) 0 1px 0;}*/
#content_base>*>.filter>*{margin:.5em;}
.function_table{background:#fff;}

/*login*/
#login_box{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;background:rgba(0,0,0,.5);}
#login_box>.inner{width:25em;padding:2em 4em;background:#fff;box-shadow:rgba(0,0,0,.25) 0 0 5em}
#login_box .logo{margin:1em 0;text-align:center;}
#login_box .logo img{vertical-align:top;height:4em;}
#login_box .logo span{display:none;}
#login_box ul.form{}
#login_box ul.form li{margin:1em 0;text-align:center;}
#login_box ul.form .text_wrp{display:flex;}
#login_box ul.form .text_wrp>input{height:3.5em;}


.file_drag_zone,.file_drag_zone2{padding:2em;cursor:default;margin:1em;font-size:2em;font-family:var(--ffGS);font-weight:500;text-align:center;background:#fff;border:.125em rgba(0,0,0,.1) dotted;border-radius:.5em;}
.file_drag_zone_hover{border-style:solid;background:#ffc;}

/*tukitip*/
#tukitip{display:flex;flex-direction:column;align-items:center;position:fixed;top:10em;left:0;right:0;bottom:0;z-index:995;height:0;}
#tukitip>div{min-width:15em;max-width:30em;padding:2em;margin:1em;text-align:center;background:#fff;box-shadow:rgba(0,0,0,.25) 0 0 2.5em;position:relative;box-sizing:border-box;font-weight:bold;visibility:hidden;opacity:0;transform:scale(.75);transition:cubic-bezier(0,0,.5,1.5) .2s;}
#tukitip.show{}
#tukitip.show>div{visibility:visible;opacity:1;transform:scale(1);}
#tukitip p{margin:1em 0 0 0;}

#tukitip .loading{display:flex;justify-content:space-between;align-items:center;font-family:var(--ffGS);}
#tukitip .loading:before{content:""!important;display:block;width:1.5em;height:1.5em;border:.166667em rgba(0,0,0,.1) solid;border-top-color:rgba(0,0,0,.25);border-radius:100%;-webkit-box-sizing:-moz-border-box;box-sizing:border-box;box-sizing:border-box;-webkit-animation:loading 1s infinite;-moz-animation:loading 1s infinite;animation:loading 1s infinite;}
#tukitip>div:not(.loading):before{display:block;font-size:3em;margin:.166667em auto;}
#tukitip .tips{}
#tukitip .success{background:yellowgreen;color:#fff;}
#tukitip .alert{background:orangered;color:#fff;}

/*tukibox*/
#tukibox{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;bottom:0;z-index:990;background:rgba(0,0,0,0);visibility:hidden;opacity:0;transition:.3s;}
#tukibox>.inner{min-width:25em;max-width:50em;padding:2em;background:#fff;box-shadow:rgba(0,0,0,.25) 0 0 5em;position:relative;box-sizing:border-box;transform:scale(.75);transition:opacity .2s,transform cubic-bezier(0,0,.5,1.5) .2s;}
#tukibox.show{background:rgba(0,0,0,.5);visibility:visible;opacity:1;}
#tukibox.show>.inner{transform:none;}

#tukibox>.inner>.popup_loading_placeholder{display:flex;justify-content:space-between;align-items:center;font-family:var(--ffGS);font-weight:500;color:rgba(0,0,0,.5);}
#tukibox>.inner>.popup_loading_placeholder:before{content:""!important;display:block;width:1.5em;height:1.5em;border:.166667em rgba(0,0,0,.1) solid;border-top-color:rgba(0,0,0,.25);border-radius:100%;-webkit-box-sizing:-moz-border-box;box-sizing:border-box;box-sizing:border-box;-webkit-animation:loading 1s infinite;-moz-animation:loading 1s infinite;animation:loading 1s infinite;}
@-webkit-keyframes loading{100%{-webkit-transform:rotate(360deg)}}
@-moz-keyframes loading{100%{-moz-transform:rotate(360deg)}}
@keyframes loading{100%{transform:rotate(360deg)}}

#tukibox>.inner>a.close{display:block;position:absolute;top:0;right:0;z-index:1;padding:.5em;margin:.25em;color:rgba(0,0,0,.5);border-radius:100%;text-decoration:none;cursor:pointer;transition:.3s;}
#tukibox>.inner>a.close:hover{color:#000;background:rgba(0,0,0,.1);}
#tukibox>.inner>a.close>span{display:block;width:1.5em;height:1.5em;overflow:hidden;}
#tukibox>.inner>a.close>span:before{font-size:1.5em;display:block;}

#tukibox h3{font-size:1.5em;margin-bottom:.75em;font-family:var(--ffGS);font-weight:500;}
#tukibox .btc{text-align:center;margin:1em 0;}
#tukibox .btc:last-child{margin-bottom:0}
#tukibox .btc>.btw~.btw{margin-left:.5em;}

#tukibox .advanced_menu{max-width:30em;}

/*popup box*/
.popup_box{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;bottom:0;z-index:990;background:rgba(0,0,0,0);visibility:hidden;opacity:0;transition:.3s;}
.popup_box>.inner{min-width:25em;max-width:50em;padding:2em;background:#fff;box-shadow:rgba(0,0,0,.25) 0 0 5em;position:relative;box-sizing:border-box;transform:scale(.75);transition:opacity .2s,transform cubic-bezier(0,0,.5,1.5) .2s;white-space:normal;text-align:left;color:initial;word-break:break-word;}
.popup_box.show{background:rgba(0,0,0,.5);visibility:visible;opacity:1;}
.popup_box.show>.inner{transform:none;}
.popup_box>.inner>a.close{display:block;position:absolute;top:0;right:0;z-index:1;padding:.5em;margin:.25em;color:rgba(0,0,0,.5);border-radius:100%;text-decoration:none;cursor:pointer;transition:.3s;}
.popup_box>.inner>a.close:hover{color:#000;background:rgba(0,0,0,.1);}
.popup_box>.inner>a.close>span{display:block;width:1.5em;height:1.5em;overflow:hidden;}
.popup_box>.inner>a.close>span:before{font-size:1.5em;display:block;}

.popup_box h3{font-size:1.5em;margin-bottom:.75em;font-family:var(--ffGS);font-weight:500;}
.popup_box .btc{text-align:center;margin:1em 0;}
.popup_box .btc:last-child{margin-bottom:0}
.popup_box .btc>.btw~.btw{margin-left:.5em;}

.popup_box .advanced_menu{max-width:30em;}

/*link data tips*/
a[data-tips]{position:relative;}
a[data-tips]:hover:after{content:attr(data-tips);}
a[data-tips]:after{display:block;position:absolute;left:0;bottom:100%;z-index:1;padding:.75em 1.5em;margin:1em 0;background:rgba(0,0,0,.5);color:#fff;border-radius:.5em;font-weight:bold;text-align:center;}


/*msg*/
.log_wrp{text-align:left;max-width:30em;max-height:3em;margin:0 auto;overflow:hidden;position:relative;padding-right:1.5em;cursor:pointer;box-sizing:border-box;}
.log_wrp:after{content:'more_horiz';font-family:'material icons';font-size:1em;display:block;width:1.5em;height:1.5em;line-height:1.5;overflow:hidden;position:absolute;right:0;top:1.5em;z-index:1;text-align:center;}
.log_wrp.expand{max-height:inherit;padding:0;}
.log_wrp.expand:after{display:none;}


/*dashboard*/
#home_title{background-color:var(--themeBG);background-image:linear-gradient(to right,var(--themeBG),var(--themeGradient));color:#fff;padding:2em 3em;margin:0 0 1.5em;display:flex;justify-content:space-between;align-items:center;}
#home_title hgroup{text-align: center;}
#home_title h1{font-size:2em;}
#home_title h3{font-size:1.5em;opacity:.5;}
#home_title .balance{text-align: center;}
#home_title .balance b{display:block;font-family:var(--ffGS);font-size:2em;}
#home_title .balance span{font-size:1.25em;opacity:.5;}

#home_function{display:flex;flex-wrap:wrap;margin:-.75em;}
#home_function>.wrp{flex:1 1 30em;padding:2em;margin:.75em;background:#fff;border:1px rgba(0,0,0,.1) solid;}
#home_function p{font-size:1.166667em;margin:0;}























/*developer guide*/
#dev_page{display:flex;}
#dev_page .dev_menu{}
#dev_page .dev_menu ul{position:-webkit-sticky;position:sticky;top:1.5em;left:0;}
#dev_page .dev_menu a{display:block;padding:.75em 1.25em .5em;color:currentColor;border-radius:.25em;}
#dev_page .dev_menu a:hover{color:var(--linkColor);background:rgba(0,0,0,.05);}
#dev_page .dev_menu span{white-space:nowrap;display:block;text-align:center;}
#dev_page .dev_menu span:before{display:block;font-size:2em;width:1em;height:1em;line-height:1;overflow:hidden;margin:0 auto .125em;}
#dev_page .dev_article{/*margin-left:1.5em;*/}
#dev_page .dev_article article{padding:1.5em 0;}
#dev_page .dev_article article h3{font-size:1.25em;margin-bottom:1em;}
#dev_page .formT{background:#fff;border:1px #ddd solid;border-collapse:collapse;margin:1em 0;width:100%;}
#dev_page .formT tbody{border-top:1px #ddd solid;}
#dev_page .formT tbody>tr:first-child>td{padding-top:1.5em;}
#dev_page .formT tbody>tr:last-child>td{padding-bottom:1.5em;}
#dev_page .formT th{background:#f8f8f8;border-right:1px #eee solid;padding:.5em 2em;}
#dev_page .formT th h3{text-transform:capitalize;font:1.25em/1.5 'Google sans',arial,sans-serif;font-weight:500;}
#dev_page .formT td{padding:.5em 1.5em;}
#dev_page .formT .btw_group{margin:-.25em;}
#dev_page .formT .btw_group>.btw{display:inline-block;vertical-align:top;margin:.25em;}
#dev_page .formT code{display:block;margin:1em 0;padding:1em 1.5em;background:#f8f8f8;border:1px rgba(0,0,0,.1) solid;border-radius:.25em;}
/*developer guide*/