/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.3.1
*/
/*body{color:#000;background:#FFF;}*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup,sub{line-height:-1px;vertical-align:text-top;}sub{vertical-align:text-bottom;}input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}

/* color scheme of navbar */
/* New Style of footer */
footer {
  text-align: center;
}
#footer {
  color: #999;
  font-size: 12px;
  padding: 90px 8% 40px;
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
#footer ul {
  text-align: center;
  margin: 0 auto;
}
#footer ul li {
  display: inline;
  white-space: nowrap;
}
#footer a {
  margin-left: 5px;
  padding: 0px 3px;
  color: #999;
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline;
}
#footer .fa {
  font-size: 16px;
  opacity: 0.8;
  margin: 0 3px;
}
#footer #languge_selector {
  text-align: center;
  margin-top: 15px;
}
#footer #languge_selector select {
  background: rgba(255, 255, 255, 0.78);
}
#footer .copyright {
  display: block;
  margin-bottom: 4px;
}
@media screen and (max-width: 1024px) {
  #footer {
    text-align: center;
  }
  #footer ul {
    float: none;
    margin: 0 auto;
  }
  #footer #languge_selector {
    margin: 10px;
    float: none;
  }
}
@media screen and (max-width: 480px) {
  #footer li.clearfix:after {
    clear: none;
    display: inline-block;
  }
}
html,
body {
  font: 12px/18px 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans Regular', Tahoma, Verdana, sans-serif;
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  overflow-y: scroll;
}
body.language-large-font {
  font-size: 13px;
}
body,
#layout_content_html,
#layout_content {
  overflow-x: hidden;
}
iframe {
  position: relative;
}
textarea {
  font-family: inherit;
}
a {
  color: #FF574D;
  text-decoration: none;
  cursor: pointer;
}
a img {
  border: none;
}
table {
  border-collapse: collapse;
}
ul {
  list-style: none;
}
em {
  font-style: italic;
}
pre {
  background: #eee;
}
p {
  margin-bottom: 18px;
}
h2 {
  font-family: Arial, Verdana, sans-serif;
}
.small {
  font-size: 11px;
}
.language-large-font .small {
  font-size: 12px;
}
.clearfix {
  clear: both;
  *zoom: 1;
}
.clearfix::after {
  content: '';
  clear: both;
  width: 0px;
  height: 0px;
  display: block;
  line-height: 0px;
  font-size: 0px;
}
.clearafter:after {
  clear: both;
}
.hide {
  display: none !important;
}
.user-nick {
  font-weight: bold;
}
.nick_name {
  font-size: 12px;
  opacity: 0.85;
}
#top_header {
  min-width: 300px;
  background-color: #eeebf0;
}
#top_header h1 {
  position: absolute;
  top: 25px;
}
#header_inbox {
  height: 112px;
  margin: 0 auto;
  max-width: 960px;
  min-width: 875px;
  position: relative;
  text-align: left;
}
#dashboard_holder {
  width: 98%;
  max-width: 980px;
  min-width: 580px;
  position: relative;
  margin: 0 auto 21px;
  padding: 35px 0 20px;
}
.error {
  color: #d82654;
}
#dashboard_holder a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 638px) {
  .hideMobile {
    display: none !important;
  }
}
.premOnlyTip,
.prem-only-tip {
  max-width: 200px;
  text-align: center;
  white-space: normal;
}
.premOnlyTip .msg,
.prem-only-tip .msg {
  text-align: left;
  line-height: 20px;
}
.premOnlyTip .button,
.prem-only-tip .button {
  background: #E8AE37;
  color: #FFF;
  margin: 5px 0 3px;
}
.premOnlyTip .button:hover,
.prem-only-tip .button:hover {
  background: #D89E27;
  color: #FFF;
}
.js-loading {
  text-align: center;
}
.js-loading img {
  height: 64px;
}
.noti-msg {
  border-radius: 20px;
  color: #FFF;
  padding: 8px 40px 9px 15px;
  margin-bottom: 10px;
  position: relative;
  background: #AFB8CC;
}
.noti-msg .close {
  position: absolute;
  padding: 4px 8px;
  right: 7px;
  top: 50%;
  margin-top: -14px;
  cursor: pointer;
}
.noti-msg.success {
  background: #33b31c;
}
.noti-msg.error {
  background: #fa3140;
}
input,
textarea,
select {
  margin: 2px 4px 2px 0;
  font-size: 13px;
  border-radius: 5px;
  border: 1px solid #DDD;
  padding: 2px 4px;
  background: #FFF;
  outline: none;
  color: #333340;
}
input:hover,
textarea:hover,
select:hover,
input:focus,
textarea:focus,
select:focus {
  border-color: #CCC;
}
input[type=button],
input[type="submit"],
button,
.button,
.orange-but {
  border: 0;
  width: auto;
  vertical-align: middle;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  border-radius: 999px;
  display: inline-block;
  font-weight: bold;
  background: #FF574D;
  color: #fff;
  padding: 9px 13px;
  font-size: 13px;
  line-height: 1;
}
input[type=button]:hover,
input[type="submit"]:hover,
button:hover,
.button:hover,
.orange-but:hover,
input[type=button]:focus,
input[type="submit"]:focus,
button:focus,
.button:focus,
.orange-but:focus,
input[type=button]:active,
input[type="submit"]:active,
button:active,
.button:active,
.orange-but:active {
  background: #FF675D;
}
input[type=button].small-button,
input[type="submit"].small-button,
button.small-button,
.button.small-button,
.orange-but.small-button {
  font-size: 12px;
  padding: 6px 10px;
}
input[type=button].large-button,
input[type="submit"].large-button,
button.large-button,
.button.large-button,
.orange-but.large-button {
  font-size: 19px;
  padding: 14px 20px;
}
input[type=button].inverted-button,
input[type="submit"].inverted-button,
button.inverted-button,
.button.inverted-button,
.orange-but.inverted-button,
input[type=button].inverted-orange-but,
input[type="submit"].inverted-orange-but,
button.inverted-orange-but,
.button.inverted-orange-but,
.orange-but.inverted-orange-but {
  background: #EEE;
  color: #FF574D;
}
input[type=button].inverted-button:hover,
input[type="submit"].inverted-button:hover,
button.inverted-button:hover,
.button.inverted-button:hover,
.orange-but.inverted-button:hover,
input[type=button].inverted-orange-but:hover,
input[type="submit"].inverted-orange-but:hover,
button.inverted-orange-but:hover,
.button.inverted-orange-but:hover,
.orange-but.inverted-orange-but:hover,
input[type=button].inverted-button:focus,
input[type="submit"].inverted-button:focus,
button.inverted-button:focus,
.button.inverted-button:focus,
.orange-but.inverted-button:focus,
input[type=button].inverted-orange-but:focus,
input[type="submit"].inverted-orange-but:focus,
button.inverted-orange-but:focus,
.button.inverted-orange-but:focus,
.orange-but.inverted-orange-but:focus,
input[type=button].inverted-button:active,
input[type="submit"].inverted-button:active,
button.inverted-button:active,
.button.inverted-button:active,
.orange-but.inverted-button:active,
input[type=button].inverted-orange-but:active,
input[type="submit"].inverted-orange-but:active,
button.inverted-orange-but:active,
.button.inverted-orange-but:active,
.orange-but.inverted-orange-but:active {
  background: #e0e0e0;
}
input[type=button].secondary-button,
input[type="submit"].secondary-button,
button.secondary-button,
.button.secondary-button,
.orange-but.secondary-button,
input[type=button].secondary-orange-but,
input[type="submit"].secondary-orange-but,
button.secondary-orange-but,
.button.secondary-orange-but,
.orange-but.secondary-orange-but {
  background: #fff;
  color: #FF574D;
  box-shadow: inset 0 0 0 1px #ff574D;
}
input[type=button].secondary-button:hover,
input[type="submit"].secondary-button:hover,
button.secondary-button:hover,
.button.secondary-button:hover,
.orange-but.secondary-button:hover,
input[type=button].secondary-orange-but:hover,
input[type="submit"].secondary-orange-but:hover,
button.secondary-orange-but:hover,
.button.secondary-orange-but:hover,
.orange-but.secondary-orange-but:hover,
input[type=button].secondary-button:focus,
input[type="submit"].secondary-button:focus,
button.secondary-button:focus,
.button.secondary-button:focus,
.orange-but.secondary-button:focus,
input[type=button].secondary-orange-but:focus,
input[type="submit"].secondary-orange-but:focus,
button.secondary-orange-but:focus,
.button.secondary-orange-but:focus,
.orange-but.secondary-orange-but:focus,
input[type=button].secondary-button:active,
input[type="submit"].secondary-button:active,
button.secondary-button:active,
.button.secondary-button:active,
.orange-but.secondary-button:active,
input[type=button].secondary-orange-but:active,
input[type="submit"].secondary-orange-but:active,
button.secondary-orange-but:active,
.button.secondary-orange-but:active,
.orange-but.secondary-orange-but:active {
  color: #FF675D;
  box-shadow: inset 0 0 0 1px #FF675D;
}
input[type=button].secondary-button:disabled,
input[type="submit"].secondary-button:disabled,
button.secondary-button:disabled,
.button.secondary-button:disabled,
.orange-but.secondary-button:disabled,
input[type=button].secondary-orange-but:disabled,
input[type="submit"].secondary-orange-but:disabled,
button.secondary-orange-but:disabled,
.button.secondary-orange-but:disabled,
.orange-but.secondary-orange-but:disabled {
  color: #ccc;
  box-shadow: inset 0 0 0 1px #ccc;
}
input[type=button].icon-button,
input[type="submit"].icon-button,
button.icon-button,
.button.icon-button,
.orange-but.icon-button {
  padding: 0;
  display: inline-flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: none;
  color: #ff574d;
}
input[type=button].icon-button::before,
input[type="submit"].icon-button::before,
button.icon-button::before,
.button.icon-button::before,
.orange-but.icon-button::before {
  line-height: 1 !important;
  margin-right: 0 !important;
}
input[type=button].icon-button:hover,
input[type="submit"].icon-button:hover,
button.icon-button:hover,
.button.icon-button:hover,
.orange-but.icon-button:hover,
input[type=button].icon-button:focus,
input[type="submit"].icon-button:focus,
button.icon-button:focus,
.button.icon-button:focus,
.orange-but.icon-button:focus,
input[type=button].icon-button:active,
input[type="submit"].icon-button:active,
button.icon-button:active,
.button.icon-button:active,
.orange-but.icon-button:active {
  color: #FF675D;
}
input[type=button]:disabled,
input[type="submit"]:disabled,
button:disabled,
.button:disabled,
.orange-but:disabled {
  color: #FFF;
  background: #999;
  cursor: default;
}
input[type=button].border-button,
input[type="submit"].border-button,
button.border-button,
.button.border-button,
.orange-but.border-button {
  background: transparent;
  color: #FF574D;
  box-shadow: inset 0 0 0 1px #ff574D;
}
input[type=button].border-button:hover,
input[type="submit"].border-button:hover,
button.border-button:hover,
.button.border-button:hover,
.orange-but.border-button:hover,
input[type=button].border-button:focus,
input[type="submit"].border-button:focus,
button.border-button:focus,
.button.border-button:focus,
.orange-but.border-button:focus,
input[type=button].border-button:active,
input[type="submit"].border-button:active,
button.border-button:active,
.button.border-button:active,
.orange-but.border-button:active {
  color: #FF675D;
  box-shadow: inset 0 0 0 1px #FF675D;
}
input[type=button].border-button:disabled,
input[type="submit"].border-button:disabled,
button.border-button:disabled,
.button.border-button:disabled,
.orange-but.border-button:disabled {
  color: #ccc;
  box-shadow: inset 0 0 0 1px #ccc;
}
input[type=button][class^="pif-"]:before,
input[type="submit"][class^="pif-"]:before,
button[class^="pif-"]:before,
.button[class^="pif-"]:before,
.orange-but[class^="pif-"]:before,
input[type=button][class*=" pif-"]:before,
input[type="submit"][class*=" pif-"]:before,
button[class*=" pif-"]:before,
.button[class*=" pif-"]:before,
.orange-but[class*=" pif-"]:before {
  margin-right: 0.3em;
  top: -0.08em;
  line-height: 1px;
}
input[type=button][class^="pif-"]:before,
input[type="submit"][class^="pif-"]:before,
button[class^="pif-"]:before,
.button[class^="pif-"]:before,
.orange-but[class^="pif-"]:before,
input[type=button][class*=" pif-"]:before,
input[type="submit"][class*=" pif-"]:before,
button[class*=" pif-"]:before,
.button[class*=" pif-"]:before,
.orange-but[class*=" pif-"]:before {
  vertical-align: middle;
}
.form-holder {
  background: #eeebf0;
  padding: 9px 10px;
}
.form-holder .form:nth-of-type(n+2) {
  margin-top: 30px;
}
.form .loading-img {
  height: 37px;
}
.form-title {
  font-size: 1em;
  color: #666;
  font-weight: bold;
  margin: 8px 0;
}
.form-table {
  position: relative;
  padding: 13px 23px;
  background: #FFF;
  color: #333;
  border-radius: 10px;
}
.form-table .desc {
  padding: 2px 0 4px;
}
.form-table .help,
.form-table .form-text {
  font-size: 0.85em;
  color: #666;
  line-height: 1.2;
  margin: 3px 0;
}
.form-table .form-text {
  margin-top: 8px;
}
.form-item {
  padding: 7px 0;
  clear: both;
}
.form-item:after {
  display: block;
  content: '';
  height: 0;
  clear: both;
}
.form-label {
  width: 110px;
  float: left;
  margin-right: 10px;
  text-align: right;
  padding: 5px 0;
}
.form-control {
  overflow: hidden;
}
.form-control input[type="text"],
.form-control input[type="password"],
.form-control input[type="radio"],
.form-control input[type="checkbox"],
.form-control select,
.form-control textarea,
.form-control .info-holder {
  font-size: 0.93em;
  line-height: 1.3;
  padding: 4px 6px;
  margin: 2px 4px 2px 0;
  color: #000;
  vertical-align: middle;
}
.form-control label {
  vertical-align: middle;
}
.form-control .info-holder {
  display: inline-block;
  padding: 5px 0;
}
.form-control .input-holder,
.form-control .select-holder {
  display: inline-block;
  width: 200px;
}
.form-control .input-holder input {
  display: block;
  width: 100%;
}
.form-control .select-holder select {
  display: block;
  width: 100%;
  overflow: hidden;
  height: 28px;
  line-height: 28px;
}
.form-control .radio-holder {
  display: inline-block;
  padding: 4px 1px;
  margin-right: 20px;
}
.form-control .radio-holder input {
  float: left;
  margin: 5px 0 0 1px;
}
.form-control .radio-holder label {
  display: block;
  margin-left: 20px;
}
.form-control .radio-holder .help {
  display: block;
  margin: 4px 0 0 20px;
}
.form-control .checkbox-holder {
  display: inline-block;
  padding: 4px 1px;
  margin-right: 20px;
}
.form-control .checkbox-holder.disabled :not(.disabled-info) {
  opacity: 0.5;
}
.form-control .checkbox-holder input {
  float: left;
  margin: 5px 0 0 1px;
}
.form-control .checkbox-holder label {
  display: block;
  margin-left: 20px;
}
.form-control .checkbox-holder .help {
  display: block;
  margin: 4px 0 0 20px;
}
.form-control .checkbox-holder .help.disabled-info {
  color: #333;
}
.form-control .textarea-holder {
  width: 100%;
}
.form-control .textarea-holder textarea {
  width: 100%;
  min-height: 250px;
  resize: vertical;
}
.form-control .button-holder {
  display: inline-block;
}
.form-control .submit-holder input[type=button],
.form-control .submit-holder input[type="submit"],
.form-control .submit-holder button,
.form-control .submit-holder .button {
  font-size: 15px;
  padding: 11px 16px;
}
.form-msg {
  border-radius: 20px;
  color: #FFF;
  padding: 8px 40px 9px 15px;
  margin-bottom: 10px;
  position: relative;
}
.form-msg .close {
  position: absolute;
  padding: 4px 8px;
  right: 7px;
  top: 50%;
  margin-top: -14px;
  cursor: pointer;
}
.form-msg.success {
  background: #33b31c;
}
.form-msg.error {
  background: #fa3140;
}
@media screen and (max-width: 640px) {
  .form-holder.auto-mobile {
    padding: 0;
  }
  .form-holder.auto-mobile .form-title {
    margin: 0 20px 6px;
  }
  .form-holder.auto-mobile .form-table {
    padding: 0;
  }
  .form-holder.auto-mobile .form-item {
    background: #FFF;
    border-bottom: #eeebf0 1px solid;
    padding: 12px 20px;
  }
  .form-holder.auto-mobile .form-label {
    padding: 2px 0;
    font-size: 0.8em;
    width: auto;
    float: none;
    text-align: left;
  }
  .form-holder.auto-mobile .form-control {
    display: block;
    width: 100%;
  }
  .form-holder.auto-mobile .form-control input[type="text"],
  .form-holder.auto-mobile .form-control input[type="password"],
  .form-holder.auto-mobile .form-control input[type="radio"],
  .form-holder.auto-mobile .form-control input[type="checkbox"],
  .form-holder.auto-mobile .form-control select,
  .form-holder.auto-mobile .form-control textarea,
  .form-holder.auto-mobile .form-control .info-holder {
    font-size: 1em;
    line-height: 1.4;
  }
  .form-holder.auto-mobile .form-control .input-holder,
  .form-holder.auto-mobile .form-control .select-holder {
    width: auto;
    max-width: 100%;
  }
  .form-holder.auto-mobile .form-control .select-holder select {
    height: 33px;
    line-height: 33px;
  }
  .form-holder.auto-mobile .noti-msg {
    position: relative;
    border-radius: 0;
  }
}
.pop-form .pop-window-content {
  width: 640px;
  background: #eeebf0;
  padding: 0;
}
.pop-alert .pop-window-content {
  display: flex;
  background: #eeebf0;
  padding: 24px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
.pop-alert .pop-window-content .pop-alert-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex: 1 0 0;
}
.pop-alert .pop-window-content .pop-alert-content .pop-alert-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex: 1 0 0;
}
.pop-alert .pop-window-content .pop-alert-content .pop-alert-body .pop-alert-bottons {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.swal-overlay {
  z-index: 980001;
}
.swal-title {
  font-size: 16px;
}
.swal-text {
  text-align: center;
  font-size: 14px;
}
.swal-text-left {
  max-width: 360px;
  width: 100%;
  text-align: left;
  font-size: 14px;
}
.swal-button--confirm {
  background-color: #ff675d;
}
.swal-button--confirm:not([disabled]):hover {
  background-color: #ff675d;
}
.swal-button--cancel {
  background-color: #efefef;
}
.swal-button--cancel:focus {
  background-color: #efefef;
}
.swal-modal {
  position: relative;
}
.swal-close {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 40px;
  height: 40px;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  line-height: 40px;
  color: #AAA;
}
.swal-close:hover {
  color: #394648;
}
.info_menu {
  min-width: 200px;
}
.info_menu .user_info {
  font-size: 12px;
  line-height: 15px;
  min-height: 45px;
  white-space: nowrap;
  position: relative;
}
.info_menu .profile_pic {
  border-radius: 5px;
  position: absolute;
  width: 45px;
  height: 45px;
}
.info_menu .full_name {
  margin-left: 54px;
}
.info_menu .display_name {
  font-size: 15px;
  line-height: 16px;
  padding-right: 5px;
}
.info_menu .display_name img {
  margin: 1px 0px -1px 4px;
}
.info_menu .nick_name {
  margin-top: 6px;
}
.info_menu .alias {
  cursor: pointer;
  opacity: 0.65;
  transition: 0.1s;
}
.info_menu .alias .input-alias {
  margin: 0;
  padding: 0 2px;
  font-size: 12px;
  line-height: 15px;
  border-bottom: solid 2px transparent;
  outline: none;
  transition: 0.1s;
  transform: translate3d(0, 0, 0);
}
.info_menu .alias .input-alias:focus {
  opacity: 0.85;
  border-bottom: solid 2px #FF574D;
}
.info_menu .alias .input-alias[contenteditable="true"] {
  cursor: text;
}
.info_menu .alias:hover {
  opacity: 0.85;
}
.info_menu .alias:hover .input-alias {
  border-bottom: solid 2px #FF574D;
}
.info_menu .edit-alias,
.info_menu .remove-alias {
  display: inline-block;
  margin: 0px 4px;
  color: #888;
  cursor: pointer;
  opacity: 0;
}
.info_menu .edit-alias:hover,
.info_menu .remove-alias:hover {
  opacity: 0.85;
  color: #C00;
}
.info_menu .info {
  opacity: 0.85;
  margin-top: 16px;
  padding: 0;
  display: inline-flex;
  width: 100%;
}
.info_menu .info .info-holder {
  display: inline-block;
}
.info_menu .info .follow-holder {
  display: inline-block;
  flex-grow: 1;
  text-align: right;
}
.info_menu .info span {
  margin-right: 4px;
}
.info_menu .info .follow-editor {
  margin-left: 20px;
}
.info_menu .menu {
  border-top: #DDD 1px solid;
  margin-top: 10px;
  padding-top: 6px;
  text-align: left;
  padding-right: 50px;
}
.info_menu .menu li {
  padding: 4px 6px;
  font-size: 13px;
  cursor: pointer;
  margin: 3px 0 0px 0px;
}
.info_menu .menu li:before {
  margin-right: 5px;
  font-size: 12px;
  opacity: 0.9;
}
.info_menu .menu li:hover {
  color: #FFF;
  background: #FF574D;
  border-radius: 4px;
}
.info_menu .more_option {
  position: absolute;
  right: 8px;
  bottom: 10px;
}
.info_menu .more_option span {
  margin-right: 4px;
  color: #888;
  cursor: pointer;
}
.info_menu .more_option span:hover {
  color: #C00;
}
.info_menu .friendfan {
  position: absolute;
  right: 0;
  bottom: 0;
}
.info_menu:hover .edit-alias,
.info_menu:hover .remove-alias {
  opacity: 0.65;
}
.friendfan .friend_man {
  padding: 4px 6px 5px;
}
.friendfan .friend_man.is_fan {
  padding: 4px 1px 5px 5px;
}

.friend_man {
  padding: 6px 10px;
  margin: 0 2px;
  color: white!important;
  font-size: 12px;
  text-decoration: none!important;
  line-height: 15px;
  border-radius: 5px;
  cursor: pointer !important;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  transition: background-color 300ms;
}
.friend_man:before {
  font-size: 14px;
  margin-right: 5px;
  margin-left: -1px;
  width: 16px;
  text-align: center;
  vertical-align: top;
  line-height: 14px;
}
.friend_man.icon_only {
  font-size: 0 !important;
}
.friend_man.icon_only:before {
  margin: 0;
}
.friend_man.add_friend,
.friend_man.accpet {
  background-color: #7aa716;
}
.friend_man.add_friend:hover,
.friend_man.accpet:hover {
  background-color: #6a9706;
}
.friend_man.pending {
  background-color: #a59615;
}
.friend_man.pending:hover {
  background-color: #958605;
}
.friend_man.unfollow,
.friend_man.add_follow,
.friend_man.add-as-fan {
  background-color: #207298;
}
.friend_man.unfollow:hover,
.friend_man.add_follow:hover,
.friend_man.add-as-fan:hover {
  background-color: #106288;
}
.friend_man.cancel {
  background-color: #999;
}
.friend_man.cancel:before {
  font-size: 12px;
}
.friend_man.remove {
  background-color: #bb1d30;
}
.friend_man.remove:before {
  font-size: 12px;
}
.friend_man.is_fan {
  background: #EEE;
  color: #207298 !important;
  padding: 6px 8px;
}
.friend_man.is_fan:before {
  font-size: 18px;
  width: 18px;
}
.friend_man.has_block {
  background-color: #000;
}
.friend_man.has_block:hover {
  background-color: #692;
}
.friend-editor-popview .pop-view-content,
.request-editor-popview .pop-view-content,
.respond-editor-popview .pop-view-content,
.follow-editor-popview .pop-view-content {
  padding: 0;
}
.friend-editor-popview .friend_man,
.request-editor-popview .friend_man,
.respond-editor-popview .friend_man,
.follow-editor-popview .friend_man {
  background: #FFF !important;
  color: #999 !important;
  display: block;
  border-bottom: #EEE 1px solid;
  padding: 14px 16px;
  border-radius: 0;
  margin: 0;
}
.friend-editor-popview .friend_man:hover,
.request-editor-popview .friend_man:hover,
.respond-editor-popview .friend_man:hover,
.follow-editor-popview .friend_man:hover {
  color: #888 !important;
  background: #F5F5FA !important;
}

.friends-select-list {
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  color: #666;
  max-height: 314px;
  min-width: 300px;
}
.friends-select-list .loading {
  margin: 12px auto;
  width: 32px;
}
.friends-select-list .loading img {
  height: 32px;
}
.friends-select-list li {
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  height: 45px;
  border-bottom: #EEE 1px solid;
  padding: 6px 8px 6px 50px;
}
.friends-select-list li .avatar {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  margin: 0 0 0 -40px;
  float: none;
}
.friends-select-list li .display_name {
  font-size: 13px;
}
.friends-select-list li .display_name .alias {
  margin: 0 0 0 4px;
}
.friends-select-list li .nick_name {
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.6;
}
.friends-select-list li.clique .avatar {
  font-size: 14px;
  line-height: 32px;
  text-align: center;
  overflow: hidden;
  font-family: sans-serif;
  background: #7daf23;
  color: #FFF;
}
.friends-select-list li.clique .nick_name > img {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  margin-right: 2px;
}
.friends-select-list li.clique .nick_name > span {
  display: inline-block;
  width: auto;
  height: 16px;
  border-radius: 3px;
  background: #999;
  color: #FFF;
  font-size: 12px;
  line-height: 16px;
  padding: 0px 3px 0px 1px;
  vertical-align: top;
}
.friends-select-list li.sel {
  background: #f0f0f5;
  color: #e88d43;
}
.friends-select-list li.sel.clique .nick_name {
  opacity: 1;
}
.user-complete-list {
  margin: 0px 8px !important;
}
.user-complete-list .pop-view-content {
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
}
.user-complete-list .pop-view-content ul {
  border-radius: 3px;
  overflow: hidden;
}
.user-complete-list .pop-view-arrow {
  display: none !important;
}
/* color scheme of navbar */
/* Height of navbar*/
/* Width of top left bar buttons */
/* Width of top right buttons, exclude account button*/
/* background color of the hovered top_bar elemets. */
/*
  z-index should be:
  #top_bar: 2000
  ----------------------
  #layout_content_html:0
  ----------------------
  .bar-color: -2000
 */
body.overlay #layout_content {
  padding-top: 0;
}
body #layout_body #top_bar {
  z-index: 2000 !important;
}
body #layout_body #layout_content_html {
  z-index: 0 !important;
}
#layout_body,
#layout_content_html,
#layout_content {
  position: relative;
  width: 100%;
}
#layout_body {
  height: 100%;
  z-index: 0;
}
#layout_content_html,
#layout_content {
  margin: 0 !important;
  top: auto !important;
  bottom: auto !important;
  min-height: 100%;
}
#layout_content {
  padding-top: 42px;
}
/* .bar-color is a div element with the same height & position to #top_bar
 */
#top_bar,
.bar-color {
  z-index: -2000;
  position: absolute;
  width: 100%;
  height: 42px;
  top: 0;
  left: 0;
}
/* XXX: Due to priority of user CSS customizer is low. (ex. body .bar-color)
 */
.bar-color {
  background: #FF574D;
  opacity: 0.9 !important;
}
#top_bar {
  /* Gap between top_bar & top_bar elements */
  /* top_bar content height */
  font: 15px 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
  color: white;
  box-sizing: border-box;
  padding: 4px 1.2%;
  /* alignment */
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  /* navbar item */
  /* reversed color of navbar item */
}
#top_bar * {
  vertical-align: middle;
  text-align: center;
  color: inherit;
}
#top_bar .bar-icon {
  display: block;
  font-style: normal;
  font-size: 18px;
  color: white;
  margin: 0 3px;
}
#top_bar #top-bar-main {
  flex: 1 0;
  height: 100%;
  min-width: 0;
}
#top_bar #top-bar-main .item-container {
  justify-content: flex-start;
}
#top_bar #top-bar-main .tab {
  width: 46px;
  position: relative;
}
#top_bar #top-bar-main .tab.current:after {
  content: '';
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: white;
  top: 34px;
  left: 0;
}
#top_bar #top-bar-main #navbar-search > div {
  position: relative;
  color: gray;
  width: 30px;
  /* NOTE: class `focus` added by js */
}
#top_bar #top-bar-main #navbar-search > div i {
  transition: color 300ms, transform 300ms;
}
#top_bar #top-bar-main #navbar-search > div input {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  margin: 2px 0;
  padding-left: 30px;
  text-align: left;
  border-radius: 15px;
  /* hide input*/
  opacity: 0;
  transition: opacity 300ms;
}
#top_bar #top-bar-main #navbar-search > div:hover i,
#top_bar #top-bar-main #navbar-search > div i.focus {
  color: #AAA;
  transform: scale(0.8);
}
#top_bar #top-bar-main #navbar-search > div:hover input,
#top_bar #top-bar-main #navbar-search > div input:focus {
  opacity: 1;
}
#top_bar #top-bar-title {
  flex: 1 2;
  display: inline-block;
  /* Put element to central */
  margin: 0 auto;
  /* element size */
  height: 34px;
}
#top_bar #top-bar-title > div {
  margin: auto;
  height: 100%;
}
#top_bar #top-bar-title #plurk_logo {
  width: 90px;
  font-size: 24px;
}
#top_bar #top-bar-title #page_title {
  padding: 0 1em;
  display: inline-block;
  line-height: 34px;
  height: 34px;
  width: 100%;
  max-width: -moz-fit-content;
  max-width: fit-content;
  border-radius: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  /* hover */
}
#top_bar #top-bar-title #page_title:hover {
  background-color: rgba(32, 32, 32, 0.1) !important;
  cursor: pointer !important;
}
#top_bar #top-bar-title #page_title.nohover:hover {
  background: unset !important;
  cursor: default !important;
}
#top_bar #top-bar-title #page_title span {
  padding: 0;
  margin: 0;
}
#top_bar #top-bar-title #page_title i {
  padding: 0 0 0 1em;
  margin: 0;
}
#top_bar #top-bar-title #user_title {
  padding: 0 1em;
  display: inline-block;
  line-height: 34px;
  height: 34px;
  border-radius: 5px;
  white-space: nowrap;
  /* hover */
}
#top_bar #top-bar-title #user_title:hover {
  background-color: rgba(32, 32, 32, 0.1) !important;
  cursor: pointer !important;
}
#top_bar #top-bar-title #user_title.nohover:hover {
  background: unset !important;
  cursor: default !important;
}
#top_bar #top-bar-title #user_title span {
  margin: 0 0.5em;
}
#top_bar #top-bar-user {
  flex: 1 0;
  display: inline-block;
  height: 34px;
  min-width: 0;
}
#top_bar #top-bar-user .item-container {
  justify-content: flex-end;
}
#top_bar #top-bar-user .item {
  min-width: 36px;
  position: relative;
}
#top_bar #top-bar-user #navbar-account {
  padding: 0 1rem;
}
#top_bar #top-bar-user #navbar-account > #nav-account {
  display: flex;
  align-items: center;
}
#top_bar #top-bar-user #navbar-account img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  margin-right: 0.25em;
}
#top_bar #top-bar-user #navbar-login {
  flex-shrink: 0;
}
#top_bar #top-bar-user #navbar-register {
  flex-shrink: 0;
}
#top_bar #top-bar-user #navbar-notify,
#top_bar #top-bar-user #navbar-premium {
  /* red dot beside coin icon & bell icon */
}
#top_bar #top-bar-user #navbar-notify .item a,
#top_bar #top-bar-user #navbar-premium .item a {
  position: relative;
}
#top_bar #top-bar-user #navbar-notify .alert,
#top_bar #top-bar-user #navbar-premium .alert {
  display: block;
  position: absolute;
  background: red;
  line-height: 0;
  font-size: 0;
  border-radius: 50%;
  /* small dots are rendered bizarre in Chrome, so we scale down a 2x circle */
  width: 12px;
  height: 12px;
  transform: scale(0.5);
  transform-origin: top right;
  right: 3px;
  top: 3px;
}
#top_bar #top-bar-user #navbar-notify .alert.alert-disable,
#top_bar #top-bar-user #navbar-premium .alert.alert-disable {
  display: none;
}
#top_bar .item,
#top_bar .item-reversed {
  display: block;
  height: 34px;
  line-height: 34px;
  margin-left: 1px;
  margin-right: 1px;
  border-radius: 5px;
  /* hover */
}
#top_bar .item:hover {
  background-color: rgba(32, 32, 32, 0.1) !important;
  cursor: pointer !important;
}
#top_bar .item.nohover:hover {
  background: unset !important;
  cursor: default !important;
}
#top_bar .item > * {
  padding: 0 6px;
  margin: 0;
  display: block;
  height: 100%;
}
#top_bar .item-reversed {
  color: #FF574D;
  background-color: white;
  /* hover */
}
#top_bar .item-reversed:hover {
  background-color: #f0f0f0 !important;
  cursor: pointer !important;
}
#top_bar .item-reversed.nohover:hover {
  background: unset !important;
  cursor: default !important;
}
#top_bar .item-round {
  height: 34px;
  border-radius: 17px;
  padding: 0 1em;
}
#top_bar .item-container {
  display: flex;
}
.pop-menu #language-selector {
  padding-right: 10px;
}
.pop-menu #language-selector select {
  display: inline-block;
  margin: -2px 20px 0 0;
  padding: 0;
}
#language-selector select {
  font-size: 12px;
}
.search-bar-complete {
  border-radius: 10px !important;
}
.search-bar-complete .pop-view-content {
  border-radius: 9px !important;
}
@media screen and (max-width: 540px) {
  #top_bar .item:not(.showMobile) .fa,
  #top_bar .item:not(.showMobile) img {
    display: none;
  }
  #top_bar #page_title {
    display: none;
  }
  #top_bar #plurk_logo {
    display: inherit;
  }
}
#noti-list .pop-view-content {
  padding: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #F9F9FD;
}
#noti-list .loading {
  text-align: center;
}
#noti-list .loading img {
  height: 100%;
}
#noti-list .header {
  font-size: 12px;
  color: #AAA;
  border-bottom: #EEE 1px solid;
  line-height: 13px;
  padding: 13px 10px 8px;
  margin: 0;
  position: relative;
}
#noti-list .header .loading {
  height: 16px;
  top: 10px;
  width: 20px;
  display: inline-block;
  position: absolute;
  margin-left: 3px;
}
#noti-list .header .noti-alert-switch {
  position: absolute;
  height: 16px;
  width: 28px;
  background: #FFF;
  top: 12px;
  right: 7px;
  border-radius: 3px;
  background: #9CE03E;
  cursor: pointer;
}
#noti-list .header .noti-alert-switch .pusher {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  top: 2px;
  right: 2px;
  background: #FFF;
  transition: right 200ms;
}
#noti-list .header .noti-alert-switch.off {
  background: #DDDDE5;
}
#noti-list .header .noti-alert-switch.off .pusher {
  right: 14px;
}
#noti-list .header .noti-alert-switch .tip {
  color: #AAA;
  font-size: 12px;
  position: absolute;
  right: 28px;
  white-space: nowrap;
  top: 1px;
  transform: scale(0.9);
  display: none;
}
#noti-list .header .noti-alert-switch:hover .tip {
  display: block;
}
#noti-list .system-notice {
  overflow-y: scroll;
  width: 380px;
}
#noti-list .noti-holder {
  min-height: 260px;
  overflow-y: scroll;
  width: 380px;
}
#noti-list .noti-holder .load-more {
  padding: 4px;
  height: 40px;
}
#noti-list .noti-holder .load-more .loading {
  height: 32px;
}
#noti-list .noti-holder .load-end {
  text-align: center;
  color: #AAA;
  line-height: 32px;
}
#noti-list .requests .all-actions {
  transform: scale(0.9);
  position: absolute;
  right: -8px;
  top: 9px;
}
#noti-list .requests .all-actions a {
  font-size: 12px;
  display: inline-block;
  overflow: visible;
  background: #FF574D;
  padding: 3px 5px;
  border-radius: 4px;
  background: #C9C9CD;
}
#noti-list .requests .all-actions .all-accpet:hover {
  background: #7aa716 !important;
}
#noti-list .requests .all-actions .all-add-as-fan:hover {
  background: #207298 !important;
}
#noti-list .requests .all-actions .all-deny:hover {
  background: #bb1d30 !important;
}
#noti-list .requests .load-more {
  text-align: center;
  line-height: 36px;
  padding: 0;
  height: auto;
  color: #666;
  background: #FFF;
  cursor: pointer;
  transition: background-color 200ms;
}
#noti-list .requests .load-more:hover {
  background: #F3F3FA;
}
#noti-list ul {
  display: block;
  background: #FFF;
}
#noti-list li {
  display: block;
  color: #666;
  border-bottom: #EEE 1px solid;
  cursor: pointer;
  transition: background-color 200ms;
}
#noti-list li a {
  color: #333;
  font-weight: bold;
}
#noti-list li a:hover {
  color: #FF574D;
  text-decoration: none;
}
#noti-list li:after {
  display: block;
  font-size: 0;
  content: '';
  clear: both;
  height: 0;
}
#noti-list li:hover {
  background: #F5F5FA;
}
#noti-list li.new-noti {
  background: #F6F6EA;
}
#noti-list li.new-noti:hover {
  background: #F3F3DD;
}
#noti-list li .avatar {
  float: left;
  padding: 14px 12px;
  margin: 0;
  width: 60px;
  height: 64px;
}
#noti-list li .avatar img {
  width: 36px;
  height: 36px;
  border-radius: 20px;
}
#noti-list li .info {
  height: 64px;
  width: auto;
  display: table-cell;
  vertical-align: middle;
  float: none;
  padding-right: 12px;
  font-size: 12px;
  word-wrap: anywhere;
  word-break: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
}
#noti-list li .info .time {
  display: block;
  font-size: 12px;
  color: #999;
  transform: scale(0.9);
  transform-origin: left;
  margin-top: 5px;
  line-height: 11px;
}
#noti-list li .info .time time {
  display: inline-block;
  position: relative;
}
#noti-list li .actions {
  float: right;
  height: 64px;
  white-space: nowrap;
  padding: 18px 10px 0 0;
}
#noti-list li .actions .friend_man {
  padding: 6px;
}
#noti-list li.anno {
  background: #AAAAAA;
  border-bottom: 0;
  position: relative;
  background-position: top right;
  background-size: 1000%;
  min-height: 74px;
}
#noti-list li.anno .image {
  position: absolute;
  left: 8px;
  bottom: 0;
}
#noti-list li.anno .image img {
  max-width: 64px;
  max-height: 64px;
  display: block;
}
#noti-list li.anno .info {
  height: auto;
  min-height: 64px;
  display: block;
  padding: 14px 36px 14px 84px;
}
#noti-list li.anno .info a {
  font-size: 13px;
  line-height: 1.3;
  color: #FFF;
}
#noti-list li.anno .close {
  position: absolute;
  right: 0;
  top: 4px;
  width: 36px;
  height: 36px;
  color: #FFF;
  opacity: 0.6;
  text-align: center;
  line-height: 36px;
}

.pop-view {
  position: absolute;
  border: #E5E5E5 1px solid;
  border-radius: 5px;
  background: #FFF;
  color: #333;
}
.pop-view-content {
  position: relative;
  font-size: 12px;
  padding: 9px 10px;
  line-height: 15px;
}
.pop-view-content .header {
  margin-bottom: 7px;
  border-bottom: #E5E5E5 1px solid;
  padding-bottom: 7px;
  font-size: 13px;
  color: #888;
}
.pop-view-content .content:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
}
.pop-view-arrow {
  position: absolute;
  pointer-events: none;
  width: 0;
  height: 0;
  clip: rect(0px, 14px, 7px, 0px);
  background: inherit;
  border-color: inherit;
}
.pop-view-arrow:after {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  transform: rotateZ(45deg);
  margin: 3px 0px 0px 1px;
  background: inherit;
  border: 1px solid;
  border-color: inherit;
}
.pop-view[direction=top] {
  margin-bottom: 4px;
}
.pop-view[direction=top] .pop-view-arrow {
  margin-left: 14px;
  bottom: -7px;
  transform: rotateZ(180deg);
}
.pop-view[direction=bottom] {
  margin-top: 4px;
}
.pop-view[direction=bottom] .pop-view-arrow {
  top: -7px;
}
.pop-view[direction=left] {
  margin-right: 7px;
}
.pop-view[direction=left] .pop-view-arrow {
  top: -7px;
  transform: rotateZ(90deg);
}
.pop-view[direction=right] {
  margin-left: 7px;
}
.pop-view[direction=right] .pop-view-arrow {
  left: -7px;
  transform: rotateZ(-90deg);
}
.pop-view-new {
  border-radius: 6px;
  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.1), 0px 4px 16px 8px rgba(0, 0, 0, 0.05);
}
.pop-view-new .pop-view-content {
  padding: 0;
}
.pop-view-new .pop-view-content .tooltip-area {
  display: flex;
  width: 240px;
  max-width: 240px;
  padding: 12px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
}
.pop-view-new .pop-view-content .tooltip-area .tooltip-title {
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
.pop-view-new .pop-view-content .tooltip-area .tooltip-content {
  color: #595959;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}
.pop-view-new .pop-view-content .tooltip-area a {
  color: #ff574d;
  font-size: 14px;
  font-weight: 700;
}
.pop-tooltip {
  background: #333;
  border-color: #111;
  color: #FFF;
  opacity: 0.95;
}
.pop-tooltip .pop-view-content {
  padding: 4px 8px;
}
.pop-tooltip a {
  color: #ea8e45;
}
.pop-tooltip a:hover {
  color: #ffae65;
}
.pop-window {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 980000;
  display: none !important;
}
.pop-window-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #000;
  opacity: 0;
  z-index: 5;
  transition: opacity 550ms;
}
.pop-window-view {
  position: absolute;
  border-radius: 10px;
  background: #FFF;
  color: #333;
  overflow: hidden;
  z-index: 10;
}
.pop-window.show {
  display: block !important;
}
.pop-window.show .pop-window-overlay {
  opacity: 0.4;
}
.pop-window-content {
  position: relative;
  padding: 9px 10px;
  overflow-x: hidden;
  overflow-y: auto;
}
.pop-window-content .js-loading {
  padding: 80px 0;
}
.pop-window-header {
  width: 100%;
  height: 50px;
  background: #FFF;
  border-bottom: #E0E0E0 1px solid;
  color: #888;
  font-size: 16px;
  line-height: 50px;
  padding: 0 18px;
}
.pop-window-back {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  height: 40px;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  line-height: 40px;
  color: #AAA;
}
.pop-window-back:hover {
  color: red;
}
.pop-window-close {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 40px;
  height: 40px;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  line-height: 40px;
  color: #AAA;
}
.pop-window-close.hide {
  display: none;
}
.pop-window-close:hover {
  color: red;
}
.pop-window-frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.pop-window-loading {
  position: absolute;
  width: 80px;
  height: 80px;
  left: 50%;
  top: 50%;
  margin: -70px 0 0 -40px;
}
.pop-window-loading img {
  width: 80px;
  height: 80px;
}
#pop-window-header {
  width: 100%;
  height: 50px;
  background: #FFF;
  border-bottom: #E0E0E0 1px solid;
  color: #888;
  font-size: 16px;
  line-height: 50px;
}
#pop-window-header .pop-window-title {
  display: inline-block;
  padding: 0 18px;
}
#pop-window-tabs {
  position: relative;
  width: 100%;
}
#pop-window-tabs > ul {
  display: block;
  height: 36px;
  padding: 0 12px;
  background: #fff;
  border-bottom: #EEE 1px solid;
}
#pop-window-tabs > ul li {
  float: left;
}
#pop-window-tabs > ul li a {
  display: block;
  background: none !important;
  height: 36px;
  line-height: 36px;
  padding: 2px 15px 0;
  font-size: 13px;
  color: #999;
  border: none;
  border-bottom: transparent 2px solid;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none !important;
}
#pop-window-tabs > ul li a:hover {
  color: #FF574D;
}
#pop-window-tabs > ul li.current a {
  color: #FF574D !important;
  border-color: #FF574D !important;
}
#pop-window-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}
#pop-window-inner-content {
  position: absolute;
  width: 100%;
}
.pop-window.emo-manager-popwindow .pop-window-view,
.pop-window.pcm-popwindow .pop-window-view {
  line-height: 0;
}