@charset 'UTF-8';

#moments-page {
  overflow: auto;
  height: calc(100% - 180px);
  top: 100px !important;

  box-sizing: border-box;
}
#moments-page .container {
  max-width: 860px;
  margin: auto;
}

#moments-page .btnShowMomentCreate {
  display: none;
}

#moments-page .momentContainer {
  background: rgba(27, 94, 161, 0.6);
  border: 2px rgba(43, 139, 220, 0.4) solid;
  padding: 12px 48px;
}

#moments-page textarea {
  display: block;
  width: 100%;
  border: none;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 8px;
  resize: none;
}

#moments-page textarea:focus {
  box-shadow: 0 0 6px rgba(24, 144, 255, 1);
}

#moments-page .momentCreateBox {
  background: rgba(27, 94, 161, 0.6);
  border: 2px rgba(43, 139, 220, 0.4) solid;
  padding: 12px;
  margin-bottom: 16px;
}
#moments-page .momentCreateBox textarea {
  height: 82px;
}

#moments-page .momentCreateBox .actionsRow {
  text-align: right;
}

.moment-friends {
  display: flex;
  flex: 0 1 64px;
}

.moment-friends .left {
}

.moment-friends .left .friendBox {
  margin-left: 0;
}

.moment-friends .right {
  width: 100%;
	overflow: auto;
}

.moment-friends .header {
}

.moment-friends-list {
  overflow: hidden;
  height: 80px;
}

.moment-friends .friendBox {
  display: inline-block;
  margin: 10px;
  width: 80px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  color: #d0e5f7;
}
.moment-friends .right .friendBox:hover {
  color: #1fb9ec;
}
.moment-friends .right .friendBox:hover .avatar {
  box-shadow: 0 0 0 2px rgba(31, 185, 236, 0.6);
}

.moment-friends .friendBox .name {
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  padding: 4px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.moment-channel-container {
  margin-bottom: 16px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 10px 20px;
}

.moment-channel .channelList {
}

.moment-channel .channel {
  display: inline-block;
  cursor: pointer;
  line-height: 22px;
  padding: 2px 12px;
  text-align: center;
  border-radius: 12px;
  transition: all 0.2s;
  /* box-shadow: 0 0px 0 4px transparent; */
}
.moment-channel .channel:hover {
  color: #fff;
  background-color: rgba(43, 138, 218, 0.6);
}
.moment-channel .channel.active {
  color: #fff;
  background: #2b8ada;
}

.moment-list {
  margin: auto;
  /* background-color: rgba(255, 255, 255, 0.3); */
}
.moment-list .item {
  margin-bottom: 16px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.1);
}

.moment-list .item .momentComment {
  display: none;
  padding: 0px 20px 20px 20px;
  margin-left: 64px;
}

.moment-list .item.expand .momentComment {
  display: block;
}
.moment-list .item .momentComment .empty {
  text-align: center;
}
.moment-list .item.expand .btnComment {
  color: #9cfeff;
}

.moment-list .momentBox {
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}
.moment-list .rightSection {
  display: flex;
  align-items: center;
  position: absolute;
  right: 20px;
  top: 20px;
}

.moment-list .momentBox .rightControl:hover .controlPanel {
  display: block;
}
.moment-list .momentBox .btnActionMore {
  font-size: 20px;
  padding: 2px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 50%;
}

.moment-list .momentBox .rightControl:hover .btnActionMore {
  background-color: rgba(255, 255, 255, 0.1);
  color: #9cfeff;
}

.moment-list .momentBox .controlPanel {
  position: absolute;
  display: none;
  right: 0;
  top: 24px;
  padding: 10px 0;
  color: #333;
  width: 120px;
  text-align: right;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.8);
}

.moment-list .momentBox .controlPanel .controlItem {
  cursor: pointer;
  padding: 2px 16px;
  transition: all 0.3s;
}

.moment-list .momentBox .controlPanel .controlItem:hover {
  color: #0086e0;
}

.visibleStatus {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: rgba(0, 71, 139, 0.2);
  margin-right: 4px;
}
.moment-list .midSection {
  display: flex;
  width: 100%;
}

.moment-list .momentBox .left {
  flex: 0 1 64px;
}
.moment-list .momentBox .right {
  width: 100%;
}
.moment-list .momentBox .name {
  padding-top: 4px;
  color: #d0e5f7;
}

.moment-list .momentBox .level {
  font-size: 12px;
  color: #d0e5f7;
  margin-left: 4px;
  display: inline-block;
}

.moment-list .time {
  font-size: 12px;
  color: #94aec5;
}

.moment-list .postCont {
  padding: 10px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.moment-list .midSection .meta {
  display: flex;
  width: 100%;
  padding: 0 60px 0 0;
  box-sizing: border-box;
  justify-content: space-around;
}

.moment-list .momentBox .btnAction {
  cursor: pointer;
  transition: all 0.3s;
}
.moment-list .momentBox .btnAction:hover {
  color: #9cfeff;
}

.moment-list .momentBox .btnAction .svgIcon {
  padding: 5px;
  border-radius: 50%;
  transition: all 0.3s;
}
.moment-list .momentBox .btnAction:hover .svgIcon {
  background-color: rgba(255, 255, 255, 0.1);
}
.moment-list .momentBox .liked {
  color: #9cfeff;
}

.moment-list .commentBox {
  display: flex;
  width: 100%;
  padding-bottom: 10px;
}

.moment-list .commentBox .left {
  flex: 0 1 48px;
}
.moment-list .commentBox .right {
  width: 100%;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 16px;
}
.moment-list .commentBox .name {
  padding-top: 4px;
  color: #d0e5f7;
}

.moment-list .commentBox .meta {
  font-size: 12px;
  color: #94aec5;
}

.moment-list .commentBox .meta .btnAction {
  transition: all 0.3s;
  margin-left: 18px;
  cursor: pointer;
}
.moment-list .commentBox .meta .btnAction:hover {
  color: #9cfeff;
}

.commentCreateBox {
  margin-bottom: 10px;
}
.commentCreateBox textarea {
  height: 64px;
}

.commentCreateBox .btnBlue {
  /* display: none; */
}
.commentCreateBox.expand .btnBlue {
  /* display: inline-block; */
}

.commentCreateBox .actionsRow {
  text-align: right;
}

.momentCreateSetting {
  position: relative;
  display: inline-block;
  margin-right: 8px;
  padding: 6px 0;
}
.momentCreateSetting:hover .visiblePanel {
  display: block;
}

.visibleResult {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  background-color: rgba(31, 185, 236, 0.1);
  cursor: pointer;
  color: #eee;
}

.momentCreateSetting .visiblePanel {
  display: none;
  position: absolute;
  right: 0;
  top: 34px;
  padding: 10px 0;

  color: #333;
  width: 160px;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.8);
}

.momentCreateSetting .visibleItem {
  cursor: pointer;
  padding: 2px 16px;
  transition: all 0.3s;
}

.momentCreateSetting .visibleItem:hover {
  color: #0086e0;
}