/*Speech bubble*/
.bubble{ border-radius:6px; /*border: 1px lightgray solid;*/ padding:6px; position: relative; text-align:left; word-wrap:break-word; background-color:white; line-height: 1.25em;}
.tail{ position:absolute; height:18px; width:18px; overflow: hidden; }
.tail:before{ /*border:1px lightgray solid;*/ background-color:white; content:"\00a0"; display:block; position:absolute; top:0px; height:12px; width:12px; }

.myui-feedbubble{ background-color:white; text-align:left; word-wrap:break-word; margin:6px; overflow:hidden; border-radius:2px; }
.myui-feedbubble-text{ padding:3px 3px 12px 3px; display:inline-block; }
.bubble.bmid{ margin: 6px; }
.bubble.bleft{ float:left; margin: 0px 0px 12px 12px; }
.bubble.bright{ float:right; margin: 0px 12px 12px 0px; background-color:#c8f8c4 !important; border: 0!important; }
.bubble.bcontinue{ margin-top: -8px!important; }

.bubble.bleft .tail{ top:12px; left:-12px; width: 0;height: 0;border-style: solid;border-width: 6px 12px 6px 0;border-color: transparent white transparent transparent;}
.bubble.bleft .tail:before{  }
.bubble.bright .tail{ top:12px; right:-12px;width: 0;height: 0;border-style: solid;border-width: 6px 0 6px 12px;border-color: transparent transparent transparent #c8f8c4; }
.bubble.bright .tail:before{  }

/*By Size control*/
/*@media screen and (max-width: 73.999em){ */
	.myui-mobile-hide{ display:none !important; }
	.myui-whole-right{ }

	.myui-scroll-div{ overflow-y: scroll; overflow-x: hidden !important; position: fixed; width: 100%; height: calc(100% - 5.25em) !important; margin: 0px; top:2.5em; -webkit-overflow-scrolling: touch; width: 100%;}
	.dragend { position: fixed; left: 0; width: 100%; visibility: hidden; overflow:hidden; bottom:2.75em;}
	.dragend-feed{ height: calc( 100% - 7.25em ); }
	/*Replace above for single page narrow wide*/
	/*@media screen and (max-width: 39.999em){
	.myui-scroll-div{ overflow-y: scroll; overflow-x: hidden !important; position: fixed; height: calc(100% - 5.25em) !important; margin: 0px; top:2.5em; -webkit-overflow-scrolling: touch; width: 100%;}
	.dragend { position: fixed; left: 0; width: 100%; visibility: hidden; overflow:hidden; bottom:2.75em;}
	.dragend-feed{ height: calc( 100% - 7.25em ); }
	}
	@media screen and (min-width: 40em){
	.myui-scroll-div{ overflow-y: scroll; overflow-x: hidden !important; position: fixed; width: 100%; height: calc(100% - 5.25em) !important; margin: 0px; margin-left:  calc(50% - 20em) !important; top:2.5em; -webkit-overflow-scrolling: touch; width: 40em;}
	.dragend { position: fixed; left: 0; width: 40em; visibility: hidden; overflow:hidden; bottom:2.75em; margin-left:  calc(50% - 20em) !important;}
	.dragend-feed{ height: calc( 100% - 7.25em ); }
	}*/
/*}*/

/*@media screen and (min-width: 74em){ 
	.myui-desktop-hide{ display:none !important; }
	.myui-whole-right{ margin-left:calc(50% - 17em) !important; width: 34em !important; }
	.myui-scroll-div{ overflow-y: scroll; overflow-x: hidden !important; position: fixed; width: 100%; height: calc(100% - 2.5em) !important; margin: 0px; top:2.5em; -webkit-overflow-scrolling: touch; }
	.dragend { position: fixed; left: 0; width: 100%; visibility: hidden; overflow:hidden;}
	.dragend-feed{ height: calc( 100% - 4.5em ); bottom:0; }
}*/

.wrapper{ position:relative; max-width:40em; width:100%; background-repeat:no-repeat; background-position:50% 30%; background-size:cover; transform:translate3d(0,0,0); margin: auto;}
.fourbythree { padding-bottom:56.25%; }
.myui-main-header{ background-repeat:no-repeat; background-position: 0.5em 50%; background-image:url(../img/logo_e.png); background-size: auto 2.25em; }
.onebyone { padding-bottom:100%; display:inline-block; }
.myui-sm{ width:2em !important; height:2em !important; border:0; vertical-align: middle; } /*Important to override smalltxt*/
.myui-div-feedimage-youtube{ background-repeat:no-repeat; background-position:50%; background-size:25%; background-image:url(../img/youtube.png); }
/*Common*/
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
a{ cursor:pointer; }
p{ margin:0; }
textarea{ padding:1px !important; margin:0 !important; font-size:1em !important; resize:none !important; }
table{ padding:0; border-spacing:0px !important; }
td{ padding:0; font-weight:bold; text-align:center; }
iframe{ border:0; }
.right{ min-width:2.5em; float:right; margin-right:0.1em; line-height:2.5em; }
.right div{ float:right; }
.left{ min-width:2.5em; min-height:2.5em; float:left; margin-left:0.1em; line-height:2.5em; }
.left div{ float:left; }
.hr{ height:1px; border:0px; background-color:lightgray; margin-top:0.1em; }
.myui-titletxt-o{ font-weight:bold; font-size:1em; text-align:center; color:#FF583D; line-height:2em; border-bottom:#FF583D 1px solid !important; }
.myui-list-title{ text-overflow: ellipsis; overflow: hidden; font-weight: bold; /*white-space: nowrap;*/ }
.myui-list-text{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; }
.myui-list-paddingtext{ padding:6px; cursor:pointer; }
.myui-list-paddingtext-bigword{ padding:0.75em 6px;/*too adjust padding*/ cursor:pointer; font-size:1.25em;line-height: 1.25em;}
.myui-list-paddingtext-bigword .smalltxt{ padding-top:2px;font-size:0.68em !important;line-height: 0.68em;/*0.68=0.85/1.25*//*too week to make it into one line...*/}
.myui-list-paddingtext-bigword .smalltxt-b{ padding-top:2px;font-size:0.68em !important;line-height: 0.68em; font-weight:bold;/*0.68=0.85/1.25*//*too week to make it into one line...*/}
.myui-list-adj{ padding-bottom:6px; }
.smalltxt{ font-size:0.85em; color:gray; font-weight:normal; }
.smalltxt-b{ font-size:0.85em; color:gray; font-weight:bold; }
.smalltxt img{ height:1em; width:1em; }
.smallimg{ height:1em; width:1em; }
.smallimg_span{ padding-left:1.25em;background-position:0;background-repeat:no-repeat;background-size:1em;}
.smallimg_span.c{ background-image:url(../img/icon/comment_s.png);}
.smallimg_span.t{ background-image:url(../img/icon/clock_s.png);}
.loading-btn{ text-align:center; height:2.4em; }
#notice-div{ background-color:pink; position:fixed; left: 50%; transform: translateX(-50%); bottom:5em; max-width:85%; margin:auto; padding:5px; display:none; border-radius:4px; text-align:center; z-index:9999; opacity:0.8; font-weight:bold; }

.myui-loading{ height: 2em; width: 2em; margin: auto; -webkit-animation: rotation .6s infinite linear; animation: rotation .6s infinite linear; border-left: 6px solid rgba(202,202,202,.15); border-right: 6px solid rgba(202,202,202,.15); border-bottom: 6px solid rgba(202,202,202,.15); border-top: 6px solid rgba(202,202,202,.9); border-radius: 100%;}
@-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } }
@keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } }
.myui-dummyblock{ height: 2em; width: 100%; display: inline-block;}
.myui-noload{ height:2.4em; display:none; text-align:center; color: gray; font-weight: bold; font-size: 0.85em; line-height: 2.4em;}
.myui-noload:after{ content: "已經到達最底"; }
.myui-nocontent{ height:12em; width:12em; background-image:url(../img/icon/empty.png); background-repeat:no-repeat; background-position:50%; background-size:9em; margin:auto; }
.myui-nocontent-p{ font-size:0.9em; color:gray; text-align:center; }
.myui-bg{ width:100%; height:100%; position:fixed; top:2.5em; background-repeat:no-repeat; background-position:50%; background-size:cover; }

.myui-footer{ position:fixed; bottom:0; width:100%; min-height:2.75em; margin: 0; padding: 0; list-style: none; z-index:998; display: flex; }
.myui-content{ padding:2.5em 0 0 0 !important; overflow-x: hidden !important; }
.myui-click{ cursor:pointer; }
.myui-copyright { position: absolute; bottom: 0.5em; text-align: center; width: 100%; }
.myui-feedlist-wide{ text-align:left; word-wrap:break-word; cursor:pointer; overflow:hidden; padding: 6px 0;background-color: white; line-height: 1.25em;}
.myui-feedlist-wide-blue{ text-align:left; word-wrap:break-word; cursor:pointer; overflow:hidden; padding: 6px 0;background-color: aliceblue !important; }
.myui-feedlist-wide-lightyellow{ text-align:left; word-wrap:break-word; cursor:pointer; overflow:hidden; padding: 6px 0;background-color: lightyellow !important; }
/*.myui-feedlist-wide-blue{ text-align:left; word-wrap:break-word; cursor:pointer; overflow:hidden; background-color: aliceblue !important; padding: 4px;margin:5px;border-radius:5px;border: lightgray 1px solid;}
.myui-feedlist-wide-lightyellow{ text-align:left; word-wrap:break-word; cursor:pointer; overflow:hidden; background-color: lightyellow !important;  padding: 4px;margin:5px;border-radius:5px;border: lightgray 1px solid;}*/
.myui-feedlist-wide li{ display:inline-block;}
.myui-ul-right li{ float:right; }
.myui-ul-left li{ float:left; }
.myui-ul-nopad li{ float:left; line-height: 2.25em; }
.myui-ul-avatarwidth{ width:2.5em; text-align:center; }
.myui-ul-midavatarwidth{ width:calc( 100% - 6em); }
.myui-ul-rightavatarwidth{ width:calc( 100% - 3em); }
.myui-ul-fullwidth{ width:100% ;}
.myui-div-fullwidth{width:100%;background-color:white;}
.myui-ul-underline{ border-bottom: lightgray 1px solid; }
.myjs-login{ display:none; font-weight:bold; cursor:pointer; margin-left:0.5em; }

.myui-btn{ background-color:white; border-radius:6px; border:1px solid lightgray; color:#FF583D; font-weight:bold; cursor:pointer; text-align:center; display:inline-block; padding:6px 12px; margin:6px; line-height: 1.2em; }
.myui-btn-solid{ background-color:#FF583D; border-radius:6px; border:1px solid #FF583D; color:white; font-weight:bold; cursor:pointer; text-align:center; display:inline-block; padding:6px 12px; margin:0.5em; line-height: 1.2em; }
.myui-btn-min{ background-color:white; border-radius:6px; border:1px solid lightgray; color:#FF583D; font-weight:bold; cursor:pointer; text-align:center; display:inline-block; padding:6px 6px; margin:0.2em; line-height: 1em; }
.myui-btn-solid-min{ background-color:#00B4FF; border-radius:6px; border:1px solid #00B4FF; color:white; font-weight:bold; cursor:pointer; text-align:center; display:inline-block; padding:6px 6px; margin:0.2em; line-height: 1em; }

h1{ font-size:1em; margin: 0px; text-overflow :ellipsis; overflow: hidden; white-space: nowrap; text-align: center; width: 80%; position: absolute; left: 10%; color:white; line-height:2.5em; }


/*Search*/
.ui-input-clear{ visibility: hidden; }
label{ border:none !important; }

/*#recommend-loader{ margin-bottom: 1em; }*/

/*Login*/
#register-div{ display: none; }
#fb-reg-div, #logged-div, #login-div{ text-align: center; }
.loging-select{ width:30%; max-width:7em; background-position:50%; background-size: cover; background-repeat:no-repeat; opacity:0.5; display:inline-block; margin:1px; color:white; font-weight:bold; text-align:left; padding: 2px; }
.loging-selected{ opacity:1 !important; border:2px blue solid; }
.loging-selected span{ width:2em; height:2em; background-image:url(../img/reg/tick.png); display:inline-block; background-repeat:no-repeat; background-position:50%; background-size:cover; }
.loging-content{ padding:0.1em!important; overflow-x: hidden !important; }

/*CP*/
#cp-chat-bg{ height: 20em; width: 15em; margin: auto; position: relative; background-repeat:no-repeat; background-position:50%; background-size:cover; text-align: center; }
.footer-nav { background-color:white; border-top:lightgray 1px solid; width: 100%; }
.footer-nav li { width: 33.3%; height: 2.75em; float: left; color: white; text-align: center; line-height: 2.75em; box-sizing: border-box; background-repeat: no-repeat; background-position: 50%; background-size: auto 2.4em; cursor: pointer; }

/*icon*/
.myicon{ height:2.5em; width:2.5em; background-repeat:no-repeat; background-position:50%; background-size:1.8em; margin:auto; cursor:pointer; }
.myicon-big{ height:3.75em; width:3.75em; background-repeat:no-repeat; background-position:50%; background-size:3em; margin:auto; display:inline-block; cursor:pointer; }
.myicon-inline{ height:1.8em; background-repeat:no-repeat; background-position:0 0.15em; background-size:1.5em; padding-left: 2em; display: inline-block; line-height: 1.8em; font-weight:bold; cursor:pointer; }
.myicon-edit{ height:2em; width:2em; background-repeat:no-repeat; background-position:50%; background-size:1.8em; background-image:url(../img/icon/edit.png); position: absolute; }

/*Panel*/
.panel-name{ font-weight:bold; display: inline-block; width: 100%; }
#pss{ width:20em; height:calc(100% - 2.75em); overflow-y:auto; overflow-x:hidden; position:fixed; left:calc(50% - 37em); top:2.75em; }
#panel-right{ width:20em; height:100%; overflow:hidden; position:fixed; right:calc(50% - 37em); top:2.75em; }
.panel-ads{ background-repeat:no-repeat; background-image:url(../img/icon/edit.png); position: absolute; }
#printpanel-loader{ display: inline-block; width: 100%; }
/*Modify Header*/
html { }/*To hide scroll @ desktop mode*/
body{ overflow:hidden; -webkit-user-select: none; user-select: none; padding:0px; margin:0px; }
ul{ padding: 0; margin: 0; border: 0; list-style-type:none; }
.ui-list{ float:left; width:100%; }
.ui-page { overflow: hidden !important; }
.ui-panel{ z-index:9999; }

/*Custom*/
.myui-header{ height:2.5em; position:absolute; width:100%; top:0px; z-index:998; }
.myui-bg{ background-repeat:no-repeat; background-position:50%; background-size:cover; }
.myui-body{ background: #ededed; }

/*ColorCode*/
.myui-color-white{ background-color:#fefefe !important; color:#FF583D !important; }
.myui-color-main{ background-color:#FF583D !important; color:white !important; border-color:#FF583D !important; }
.myui-color-black{ background-color:black !important; color:white !important; border-color:black !important; }
.myui-hidden{ margin-left:100%; overflow:hidden; height:0px; }

.myui-text-orange{ color:#FF583D; }
.myui-text-blue{ color:#00587A; }
.myui-text-lightblue{ color:#328BD2; }

.txtcolor-0{ color:#6fc1b7; }
.txtcolor-1{ color:#2e7ad9; }
.txtcolor-2{ color:#98d7ff; }
.txtcolor-3{ color:#f57a85; }
.txtcolor-4{ color:#b8c965; }
.txtcolor-5{ color:#ff7d14; }

/*Swipe*/
.dragend li{ -webkit-overflow-scrolling: touch; }

/*Image Div*/
.avatar-div{ background-repeat:no-repeat; background-position:50%; background-size:cover; width:2.5em; height:2.5em; border-radius:50%; background-color:white; border:1px solid #ededed;margin:auto; }
#chat-loader .avatar-div{ border:0px solid #ededed; }/*only show border in feedlist*/
.avatar-div-large{ background-repeat:no-repeat; background-position:50%; background-size:cover; width:6em; height:6em; border-radius:50%; background-color:white; border:1px solid #ededed; margin:auto; }
.avatar-div-mid{ background-repeat:no-repeat; background-position:50%; background-size:cover; width:4em; height:4em; border-radius:50%; background-color:white; border:1px solid #ededed;margin:auto; }
.newhome-box .avatar-div-mid{border:0px solid #ededed;}
.avatar-adj{ padding-top: 0.2em; }
.logo-div-large{ background-repeat:no-repeat; background-position:50%; background-size:cover; background-color:white; width:5em; height:5em; border-radius:16px; border:3px solid lightgray; }
.avatar-fb{ float: right; background-image: url(../img/fb.gif); background-size: 100%; width: 30%; height: 30%; margin: 70% -0.2em 0 0; }
.avatar-wechat{ float: right; background-image: url(../img/qq.png); background-size: 100%; width: 30%; height: 30%; margin: 70% -0.2em 0 0; }
.logo-div{ background-repeat:no-repeat; background-position:50%; background-size:cover; width:2.25em; height:2.25em; margin:auto; border-radius:6px;}

/*.ps-container .ps-scrollbar-x-rail{ position:absolute; bottom:3px; height:8px; -webkit-border-radius:4px; border-radius:4px; opacity:0; -webkit-transition:background-color .2s linear,opacity .2s linear; transition:background-color .2s linear,opacity .2s linear}.ps-container:hover .ps-scrollbar-x-rail,.ps-container.hover .ps-scrollbar-x-rail{ opacity:.6;}.ps-container .ps-scrollbar-x-rail:hover,.ps-container .ps-scrollbar-x-rail.hover{ background-color:#eee; opacity:.9;}.ps-container .ps-scrollbar-x-rail.in-scrolling{ background-color:#eee; opacity:.9; }.ps-container .ps-scrollbar-y-rail{ position:absolute; right:3px; width:8px; -webkit-border-radius:4px; border-radius:4px; opacity:0; -webkit-transition:background-color .2s linear,opacity .2s linear; transition:background-color .2s linear,opacity .2s linear}.ps-container:hover .ps-scrollbar-y-rail,.ps-container.hover .ps-scrollbar-y-rail{ opacity:.6;}.ps-container .ps-scrollbar-y-rail:hover,.ps-container .ps-scrollbar-y-rail.hover{ background-color:#eee; opacity:.9;}.ps-container .ps-scrollbar-y-rail.in-scrolling{ background-color:#eee; opacity:.9;}.ps-container .ps-scrollbar-x{ position:absolute; bottom:0; height:8px; background-color:#aaa; -webkit-border-radius:4px; border-radius:4px; -webkit-transition:background-color.2s linear; transition:background-color .2s linear}.ps-container.ie6 .ps-scrollbar-x{ font-size:0}.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x,.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x{ background-color:#999}.ps-container .ps-scrollbar-y{ position:absolute; right:0; width:8px; background-color:#aaa; -webkit-border-radius:4px; border-radius:4px;  -webkit-transition:background-color.2s linear; transition:background-color .2s linear}.ps-container.ie6 .ps-scrollbar-y{ font-size:0}.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y{ background-color:#999}.ps-container.ie .ps-scrollbar-x,.ps-container.ie .ps-scrollbar-y{ visibility:hidden}.ps-container.ie:hover .ps-scrollbar-x,.ps-container.ie:hover .ps-scrollbar-y,.ps-container.ie.hover .ps-scrollbar-x,.ps-container.ie.hover .ps-scrollbar-y{ visibility:visible}*/