/*!*********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/index.css ***!
  \*********************************************************************/
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #fff;
  font-family: "Noto Sans TC", sans-serif;
}
.root {
  height: inherit;
}
a {
  text-decoration: none;
  background-color: #fff;
}
a:link {
  text-decoration: none;
  background-color: #fff;
}
a:active {
  text-decoration: underline;
  background-color: #fff;
}
a:visited {
  text-decoration: underline;
  background-color: #fff;
}

/*!********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/sign.css ***!
  \********************************************************************/
/* .main{
    display: flex;
    justify-content: center;
    align-items: center; 
} */
.mainBox{
    display: flex;
    justify-content: center;
    align-items: center;    
    /* align-content: center;  */
}
@media(max-width:768px){
    .mainImg{
        display: none;
    }
    .mainLog{
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .loginBox{
        width: 80%;
    }
    hr{
        width: 80px;
    }
}
@media(max-width:480px){
    .mainImg{
        display: none;
    }
    .loginBox{
        width: 80%;
    }
    hr{
        width: 50px;
    }
}
.mainImg{
    width:25%;
    height: auto;
    margin:20px
}
.mainLogoImg{
    width:100%;   
    height: 100%;   
    object-fit:cover;

}
.loginBox{
    height:400px;
    width: 80%;
    display: flex;
    justify-content:space-around;
    align-items: center;
    flex-direction: column;
    background-color: #FFF;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid lightgray;
    margin: 20px 0px;   

}
.Title{
    margin:20px;
}
.logotitle_img{
    height:50px;
}
.signin__item{
    cursor: pointer;
    width: 90%;
}
#email{
    width: 90%;
    padding: 5px 10px;
    border-radius: 5px;
    border:1px solid lightgray;
    outline: none;
    font-size: 16px;
}
#email::-webkit-input-placeholder {
    transition: 0.5s; 
    font-size: 12px; 
    transform-origin: top left; 
  }
  
#email:focus::-webkit-input-placeholder {
    transform: scale(0.8) translateY(-10px);
  }

#password{
    width: 90%;
    padding: 5px 10px;
    border-radius: 5px;
    border:1px solid lightgray;
    outline: none;
    font-size: 16px;
}
#password::-webkit-input-placeholder {
    transition: 0.5s; 
    font-size: 12px; 
    transform-origin: top left; 
  }
  
#password:focus::-webkit-input-placeholder {
    transform: scale(0.8) translateY(-10px);
  }

#userName{
    width: 90%;
    padding: 5px 10px;
    border-radius: 5px;
    border:1px solid lightgray;
    outline: none;
    font-size: 16px;
}
#userName::-webkit-input-placeholder {
    transition: 0.5s; 
    font-size: 12px; 
    transform-origin: top left; 
  }
  
#userName:focus::-webkit-input-placeholder {
    transform: scale(0.8) translateY(-10px);
  }

#fullName{
    width: 90%;
    padding: 5px 10px;
    border-radius: 5px;
    border:1px solid lightgray;
    outline: none;
    font-size: 16px;
}
#fullName::-webkit-input-placeholder {
    transition: 0.5s; 
    font-size: 12px; 
    transform-origin: top left; 
  }
  
#fullName:focus::-webkit-input-placeholder {
    transform: scale(0.8) translateY(-10px);
  }

  
.signin__btn{
    width: 90%;
    border: 0px;
    border-radius: 5px;
    background-color: #41b6e6;
    color:#FFF;
    font-size: 16px;
    text-align: center;
    padding: 5px 10px;
}
.signin__warning{
    color: red;
    padding: 5px 10px;
}

.dividing{
    display: flex;
    align-items: center;
    width: 80%;
}
hr{
    height: 1px;
    width: 150px;
    border: 0px;
    background-color: gray;
    margin: 5px;
}
.useGooglesignin{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.useGooglesignin__item{
    padding: 10px;
    cursor: pointer;
}
.signup{
    width: 80%;
    background-color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:5px 0px;
    border-radius: 5px;
    border:1px solid lightgray;
    padding:20px;
}
.signup__Btn{
    color:#41b6e6;
    margin-left: 10px;
}
/*!************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/homepage.css ***!
  \************************************************************************/
.homeBox{
    height: inherit;
    display: flex;
}
.homeMain{
    margin: auto;
    width: 100%;
}
.main{
    display: flex;
    flex-direction: column;

}

@media (max-width:768px) {
    .homeBox{
        display: block;
        justify-content: space-between;
    }
    .container:nth-last-child(1){
        margin-bottom: 30px;
    }
}


@media (max-width:480px) {
    .container:nth-last-child(1){
        margin-bottom: 20px;
    }
}
/*!***********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/sideBar.css ***!
  \***********************************************************************/
.otherLogo__item {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 20px;
  border-radius: 5px;
  margin: 5px;
  box-sizing: border-box;
}
.otherLogo__item:hover {
  background-color: lightgray;
}
.otherLogo__item__title {
  margin: 0px 15px;
}
.leftSideBar {
  width: 15%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  left: 0;
  z-index: 5;
  border-right: 1px solid lightgray;
}
/* toplogo */
.mainLogo {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.sideBarLogo {
  width: 60%;
  margin: 0px 10px;
  align-items: center;
}
.sideBarLogo__ins {
  display: none;
}
/* middle logo */
.otherLogo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 90%;
  position: relative;
}
.otherLogo__item__personImg {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid black;
  background-size: cover;
  background-position: center;
}

/* lower logo */
.hamburger {
  display: flex;
  flex-direction: column;
}
/*padsideBae*/
.padSideBar {
  display: none;
}
.padSideBar__hamburger {
  display: none;
}

@media (max-width: 1200px) {
  .leftSideBar {
    width: 8%;
  }
  .otherLogo__item__title {
    display: none;
  }
  .sideBarLogo {
    display: none;
  }
  .sideBarLogo__ins {
    display: block;
    width: 100%;
  }
  .otherLogo__item {
    /* margin: 40px 20px; */
    /* padding: 0px; */
  }
}

.signout {
  position: absolute;
  border: 1px solid lightgray;
  padding: 5px 10px;
  bottom: 10%;
  left: 10%;
  width: 75%;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 1px 1px 8px #888888;
  text-align: center;
}

@media (max-width: 768px) {
  .leftSideBar {
    display: none;
    /* width: 100%; */
    justify-content: space-between;
  }
  .padSideBar {
    display: block;
  }
  .mainLogo {
    position: fixed;
    z-index: 5;
    display: block;
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid lightgray;
  }
  .sideBarLogo {
    display: block;
    width: 150px;
  }
  .sideBarLogo__ins {
    display: none;
  }
  .otherLogo__group {
    position: fixed;
    z-index: 5;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    border-top: 1px solid lightgray;
  }
  .otherLogo__item {
    margin: 10px;
    padding: 0px;
    border-radius: 50%;
  }
  .otherLogo {
    width: 393px;
    position: absolute;
    bottom: 0;
    height: auto;
    flex-direction: row;
    align-items: flex-end;
    border-top: 1px solid lightgray;
    background-color: #fff;
  }
  .hamburger {
    display: none;
  }
  .mainLogo {
    display: flex;
    justify-content: space-between;
  }

  .padSideBar__hamburger {
    display: block;
    padding: 5px;
    /* padding-right: 5px; */
  }
  .padotherLogo__signout {
    position: absolute;
    border: 1px solid lightgray;
    padding: 5px 10px;
    bottom: 10%;
    right: 0;
    height: 20px;
    top: 50px;
    width: 50px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 1px 1px 8px #888888;
    text-align: center;
  }
  .padotherLogo__item {
    padding: 5px;
  }
}
@media (max-width: 480px) {
  .mainLogo {
    padding: 0px;
  }
  .otherLogo__item {
    padding: 0px;
  }
  .sideBarLogo {
    display: block;
    width: 100px;
    padding: 5px;
  }
}

/*!**********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/topBar.css ***!
  \**********************************************************************/
.topBarBox{
    margin:auto;
    width:50%;
    position: relative;
}
.topBar{
    display: flex;
    justify-content: space-around;
    margin:20px auto;
    width: 100%;
    height: 10%;
    overflow: auto;

}
.topBar::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
.Circle{
    width: 50px;
    margin: 0px 5px;
    
}
.Circle_userName{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden;
    font-size: 10px;
}
.leftBtn{
    position: absolute;
    left: 5px;
    top: 40%;
    transform: (-50%,-50%);
    color: #FFF;
}
.rightBtn{
    position: absolute;
    right: 5px;
    top: 40%;
    transform: (-50%,-50%);
    color: #FFF;
}
@media (max-width:1200px) {
    .topBarBox{
        width: 60%;
    }

}
@media (max-width:768px) {
    .topBarBox{
        margin-top: 50px;
        width: 90%;
    }
}
@media (max-width:480px) {

}
/*!*************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/container.css ***!
  \*************************************************************************/
.container {
  margin: 0px auto;
  width: 50%;
}
.container__name {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container__text {
  word-wrap: break-word;
  line-height: 25px;
}
.container__name__title {
  width: 100%;
  display: flex;
  align-items: center;
  font-weight: 700;
  justify-content: space-between;
  margin: 5px;
}
/* 照片區 */
.container__follow {
  padding: 5px 10px;
  background-color: #41b6e6;
  color: #fff;
  border-radius: 5px;
  margin: 10px;
  cursor: pointer;
}
.container__follow__true {
  padding: 5px 10px;
  background-color: #fff;
  color: #41b6e6;
  border-radius: 5px;
  margin: 10px;
  border: 1px solid #41b6e6;
  cursor: pointer;
}
.container__name__personImagebox {
  width: 100%;
  display: flex;
  align-items: center;
}
.container__name__personImage {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  border-radius: 50%;
  border: 1px solid lightgray;
}
.container__name__username {
  margin: 5px;
}
.container__picture {
  border: 1px solid lightgray;
  max-width: 100%;
  position: relative;
}
.post__main__picture {
  width: 100%;
  height: 500px;
  object-fit: contain;
  display: block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}
@keyframes post__main__picture {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.picture__like {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.picture__Leftbtn {
  position: absolute;
  top: 50%;
  left: 10px;
  z-index: 5;
  cursor: pointer;
}

.picture__Rightbtn {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 4;
  cursor: pointer;
}
.picture__dot {
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  bottom: 5px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 5px;
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.container__icon {
  display: flex;
  justify-content: space-between;
}
.container__content {
  border-bottom: 1px solid lightgray;
  padding: 5px 0px;
  margin-bottom: 5px;
}
/* 愛心 傳送 收藏icon */
.container__icon__left {
  display: flex;
  align-items: center;
  justify-content: center;
}
.container__like {
  display: flex;
  margin: 5px 0px;
}
.caption__icon__like {
  cursor: pointer;
}
.caption__icon__msg {
  cursor: pointer;
}
.caption__icon__sendMsg {
  cursor: pointer;
}
.caption__icon__mark {
  cursor: pointer;
}
/* 留言區 */
.container__auth {
  margin: 5px 0px;
  font-weight: 700;
}
.container__msg {
  display: flex;
  justify-content: space-between;
  margin: 5px 0px;
}
.container__msg__main {
  display: flex;
  /* margin: 5px 0px; */
}
.container__msg__like {
  margin-right: 5px;
}
.container__msg__name {
  margin-right: 10px;
  font-weight: 700;
}
.container__msg__input {
  width: 100%;
}
.msg__input {
  width: 100%;
  outline: none;
  border: 0px;
  font-size: 16px;
  margin: 5px 0px;
}
.container__hr {
  width: 100%;
  margin: 15px 0px;
}
.container__seeMore {
  color: darkgray;
  cursor: pointer;
}
.container__deletePost {
  cursor: pointer;
}
/*暫時*/
.container:nth-child(1) {
  margin-top: 20px;
}
.container:nth-last-child(1) {
  margin-bottom: 80px;
}
/*loading*/
.container__loading {
  position: absolute;
  z-index: 6;
  width: 50%;
  height: 100%;
  background-color: #41b6e6;
}

@media (max-width: 1200px) {
  .container {
    margin: 0px auto;
    width: 60%;
  }
}

@media (max-width: 768px) {
  .sideBarLogo {
    padding: 10px 5px;
  }
  .post__main__picture {
    height: 400px;
  }
  .container {
    width: 90%;
  }
  .otherLogo__item {
    padding: 10px;
  }
  .container:nth-child(1) {
    margin-top: 60px;
  }
}

@media (max-width: 480px) {
  .post__main__picture {
    height: 300px;
  }
  .container {
    width: 100%;
  }
  .container__main {
    margin: 10px;
  }
  .container:nth-child(1) {
    margin-top: 50px;
  }
}

@keyframes ldio-x2f8f9g0nn {
  0% {
    opacity: 1;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1.86, 1.86);
  }
  100% {
    opacity: 0;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
  }
}
.ldio-x2f8f9g0nn div > div {
  position: absolute;
  width: 14.46px;
  height: 14.46px;
  border-radius: 50%;
  background: #6a6a6a;
  animation: ldio-x2f8f9g0nn 1s linear infinite;
}
.ldio-x2f8f9g0nn div:nth-child(1) > div {
  left: 166.5px;
  top: 113.5px;
  animation-delay: -0.9s;
}
.ldio-x2f8f9g0nn > div:nth-child(1) {
  transform: rotate(0deg);
  transform-origin: 173.73000000000002px 120.73px;
}
.ldio-x2f8f9g0nn div:nth-child(2) > div {
  left: 156.5px;
  top: 144.5px;
  animation-delay: -0.8s;
}
.ldio-x2f8f9g0nn > div:nth-child(2) {
  transform: rotate(36deg);
  transform-origin: 163.73000000000002px 151.73000000000002px;
}
.ldio-x2f8f9g0nn div:nth-child(3) > div {
  left: 129.5px;
  top: 163.5px;
  animation-delay: -0.7s;
}
.ldio-x2f8f9g0nn > div:nth-child(3) {
  transform: rotate(72deg);
  transform-origin: 136.73000000000002px 170.73000000000002px;
}
.ldio-x2f8f9g0nn div:nth-child(4) > div {
  left: 96.5px;
  top: 163.5px;
  animation-delay: -0.6s;
}
.ldio-x2f8f9g0nn > div:nth-child(4) {
  transform: rotate(108deg);
  transform-origin: 103.73px 170.73000000000002px;
}
.ldio-x2f8f9g0nn div:nth-child(5) > div {
  left: 70.5px;
  top: 144.5px;
  animation-delay: -0.5s;
}
.ldio-x2f8f9g0nn > div:nth-child(5) {
  transform: rotate(144deg);
  transform-origin: 77.73px 151.73000000000002px;
}
.ldio-x2f8f9g0nn div:nth-child(6) > div {
  left: 60.5px;
  top: 113.5px;
  animation-delay: -0.4s;
}
.ldio-x2f8f9g0nn > div:nth-child(6) {
  transform: rotate(180deg);
  transform-origin: 67.73px 120.73px;
}
.ldio-x2f8f9g0nn div:nth-child(7) > div {
  left: 70.5px;
  top: 82.5px;
  animation-delay: -0.3s;
}
.ldio-x2f8f9g0nn > div:nth-child(7) {
  transform: rotate(216deg);
  transform-origin: 77.73px 89.73px;
}
.ldio-x2f8f9g0nn div:nth-child(8) > div {
  left: 96.5px;
  top: 62.5px;
  animation-delay: -0.2s;
}
.ldio-x2f8f9g0nn > div:nth-child(8) {
  transform: rotate(252deg);
  transform-origin: 103.73px 69.73px;
}
.ldio-x2f8f9g0nn div:nth-child(9) > div {
  left: 129.5px;
  top: 62.5px;
  animation-delay: -0.1s;
}
.ldio-x2f8f9g0nn > div:nth-child(9) {
  transform: rotate(288deg);
  transform-origin: 136.73000000000002px 69.73px;
}
.ldio-x2f8f9g0nn div:nth-child(10) > div {
  left: 156.5px;
  top: 82.5px;
  animation-delay: 0s;
}
.ldio-x2f8f9g0nn > div:nth-child(10) {
  transform: rotate(324deg);
  transform-origin: 163.73000000000002px 89.73px;
}
.loadingio-spinner-spin-sub1ib266w {
  width: 100%;
  height: 100%;
  /* display: inline-block; */
  overflow: hidden;
  background: #f1f2f3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ldio-x2f8f9g0nn {
  width: 250px;
  height: 200px;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-x2f8f9g0nn div {
  box-sizing: content-box;
}
/* generated by https://loading.io/ */

/*!**********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/person.css ***!
  \**********************************************************************/
.personDocument{
    display: flex;
    width: 70%;
    margin: auto;
}
.personDocument__img{
    margin:20px;
}
.person__Img{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}
.person__Img__item{
    width: 100%;
    height: auto;
}
.personInfomation{
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

}
.personInfomation__item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0px 20px;
}
.personInfomation__id-name{
    font-size: 20px;
}
.personInfomation__edit{
    border-radius: 5px;
    background-color: lightgray;
    padding: 5px 10px;
    font-weight: 700;
    margin: 0px 20px;
    cursor: pointer;
}
.personInfomation__item-num{
    display: flex;
}
.personInfomation__followers-num{
    display: flex;
}
.personInfomation__following-num{
    display: flex;
}
.personInfomation__name{
    font-weight: 700;
}
.introduction{
    flex-direction: column;
    align-items: flex-start;
}
.post_num{
    font-weight: 700;
}
/* hr */
.person__hr{
    width: 70%;
    margin: 50px auto 0px auto;
    border: 0px;
    color: lightgray;
}
/*person_select*/
.personInfomation__select{
    display: flex;
    justify-content: center;
}
.personInfomation__select__item{
    margin:0px 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.post:hover{
    border-top: 1px solid black;
}

#post{
    -webkit-appearance:none;
}
#collect{
    -webkit-appearance:none;

}
.select_icon{
    margin:0px 10px;
    display: flex;
    align-items: center;
}


/*post*/
.person_post{
    width: 70%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:20px;
    margin: 20px auto;

}
.item__img{
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.person_post__item{
    width: 100%;
    height: 200px;
    /* background-color: black; */
    border: 1px solid lightgray;
    /* cursor: pointer; */
}

.item__status{
    width: 100%;
    height: 100%;
    /* visibility:hidden; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255,255,255,0);

}
.item__status:hover{
    /* visibility:visible; */
    color: #FFF;
    background-color: rgba(0,0,0,0.6);
}
.item__status_heart{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 20px;
}
.item__status_msg{
    display: flex;
    justify-content: center;
    align-items: center;
}
.personInfomation__edit-icon{
    display: none;
}

@media (max-width:1200px) {
    .personDocument{
        width: 60%;
    }
    .person_post{
        width: 60%;
        grid-template-columns: 1fr 1fr ;
        gap:15px;
    }
    .person__Img{
        width: 150px;
        height: 150px;
    }
}

@media (max-width:768px) {
    .personDocument{
        width: 90%;
        margin: auto;
    }
    .personInfomation{
        width: 400px;
        margin-top: 80px;
        justify-content: space-between;
    }
    .person_post{
        width: 80%;
        margin: auto;
    }
    .person__Img{
        margin: 0px;
    }
    .personDocument__img{
        margin-top: 80px;
    }
    .personInfomation__item{
        justify-content: flex-start;
        width: 100%;
    }
    .personInfomation__item-num{
        margin-right: 20px;
    }
    .personInfomation__followers-num{
        margin-right: 20px;
    }
    .person_post__item:nth-last-child(1){
        margin-bottom: 80px;
    }
}

@media (max-width:480px) {
    .personDocument{
        width: 100%;
        margin: auto;
    }
    .personDocument__img{
        margin: 60px 0px 0px 0px;
    }
    .person__Img{
        width: 100px;
        height: 100px;
        margin: 10px;
    }
    .personInfomation{
        margin-top: 60px;
    }
    .personInfomation__id-name{
        font-size: 16px;
    }
    .person__hr{
        width: 90%;
    }
    .person_post{
        width: 100%;
    }
    .person_post__item{
        height: 150px;
    }
    .personInfomation__edit-icon{
        display: flex;
        justify-content: flex-end;
        width: 80px;
    }
    .personInfomation__edit{
        display: none;
    }
}


/*!*****************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/createNewPage.css ***!
  \*****************************************************************************/
.newPage__container {
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0;
}
.newPage__container_close-btn {
  position: absolute;
  right: 10px;
  color: #fff;
  cursor: pointer;
}
.newPage__box {
  margin: 100px;
  width: 70%;
  height: 80%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
}
.newPage__box_title {
  width: 100%;
  text-align: center;
  padding: 10px 0px;
  border-bottom: 1px solid lightgray;
  font-weight: 700;
  font-size: 16px;
}
.newPage__box_title-group {
  width: 100%;
  text-align: center;
  padding: 10px 0px;
  border-bottom: 1px solid lightgray;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.back {
  padding: 0px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.next {
  padding: 0px 10px;
  cursor: pointer;
  color: #50c1e9;
}
.next:hover {
  color: black;
}
.newPage__box_putImg {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.newPage__box_putImg-icon {
  width: 40%;
  text-align: center;
}
.newPage__box_putImg-text {
  font-size: 20px;
  font-weight: 400;
}
.newPage__box_putImg-btn {
  padding: 5px 10px;
  margin: 10px;
  background-color: rgb(0, 191, 255);
  color: #fff;
  border-radius: 5px;
  font-weight: 700;
  cursor: pointer;
}
/* 上傳 */
#uploadPostImg {
  display: none;
}
.preViewImg {
  width: 60%;
  height: 100%;
  background-size: contain;
  border-radius: 0 0 0 10px;
  background-position: center;
  background-repeat: no-repeat;
  border-right: 1px solid lightgray;
}
.perviewImg__item {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto; /* ⏹ a perfect square */
}
.newPage_rightBtn {
  position: absolute;
  top: 50%;
  color: rgb(244, 255, 255, 0.6);
  cursor: pointer;
}
.newPage_leftBtn {
  position: absolute;
  top: 50%;
  right: 43%;
  color: rgb(244, 255, 255, 0.6);
  cursor: pointer;
}
/* 建立貼文box */
.newPage__newPost {
  display: flex;
  width: 100%;
  height: 100%;
}
.perViewPost {
  width: 40%;
  height: 100%;
}
.perViewPost__member {
  display: flex;
  margin: 5px 10px;
}
.perViewPost__member__img {
  width: 50px;
  height: 50px;
  margin: 10px;
  background-size: contain;
  border-radius: 50%;
  background-position: center;
  border: 1px solid black;
}
.perViewPost__member__username {
  margin: auto 5px;
}
.perViewPost__input {
  outline-style: none;
  border: 0px;
  padding: 10px;
  font-size: 16px;
  width: 90%;
  height: 75%;
  resize: none;
}
.newPage__container__loading {
  position: absolute;
  width: 70%;
  height: 80%;
  margin: 100px;
  z-index: 7;
}
@media (max-width: 1280px) {
  .perViewPost__input {
    padding: 10px;
  }
}
@media (max-width: 768px) {
  .newPage__box {
    width: 80%;
    margin: auto;
    height: 70%;
  }
  .newPage__container__loading {
    width: 80%;
    height: 70%;
    margin: 150px;
  }

  .newPage__newPost {
    flex-direction: column;
  }
  .preViewImg {
    width: 100%;
    border-right: 0px;
    border-bottom: 1px solid lightgray;
    border-radius: 0px;
  }
  .perViewPost {
    width: 100%;
  }
  .perViewPost__input {
    width: 95%;
    height: 50%;
  }
  .newPage_leftBtn {
    top: 35%;
    right: 10%;
    color: rgba(175, 175, 175, 0.885);
  }
  .newPage_rightBtn {
    top: 35%;
    left: 10%;
    color: rgba(175, 175, 175, 0.885);
  }
}
@media (max-width: 480px) {
  .newPage__box {
    height: 80%;
    width: 100%;
  }
  .newPage__container__loading {
    width: 100%;
    height: 85%;
    margin: 90px;
  }
  .newPage__newPost {
    flex-direction: column;
  }
  .preViewImg {
    width: 100%;
    border-right: 0px;
    border-bottom: 1px solid lightgray;
    border-radius: 0px;
  }
  .perViewPost {
    width: 100%;
  }
  .newPage_leftBtn {
    top: 35%;
    right: 0%;
    color: rgba(175, 175, 175, 0.885);
  }
  .newPage_rightBtn {
    top: 35%;
    left: 0%;
    color: rgba(175, 175, 175, 0.885);
  }
}

/*!***********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/setting.css ***!
  \***********************************************************************/
.setting__background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 5;
  display: flex;
  align-items: center;
}
.settingBox {
  width: 250px;
  padding: 20px 30px;
  border: 1px solid lightgray;
  border-radius: 10px;
  background-color: #fff;
  margin: auto;
}
.settingBox__title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
#setting__username {
  padding: 5px;
  margin: 10px 0px;
  width: 95%;
}
#setting__fullname {
  padding: 5px;
  margin: 10px 0px;
  width: 95%;
}
#setting__introduction {
  padding: 5px;
  margin: 10px 0px;
  width: 95%;
  height: 100px;
  resize: none;
}
.setting__btn {
  margin: auto;
  padding: 5px 10px;
  background-color: #41b6e6;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}
.setting__closebtn {
  position: absolute;
  right: 5px;
  top: 5px;
  color: #fff;
  border: lightgray;
  cursor: pointer;
}

/*!******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/showAllcomment.css ***!
  \******************************************************************************/
.showAllcommentContainer {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.closeAllcomment {
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}
.showAllcommentContainer__box {
  background-color: #fff;
  width: 70%;
  height: 80%;
  border-radius: 10px;
  display: flex;
  z-index: 6;
}
.showAllcommentContainer__img {
  width: 60%;
  border-right: 1px solid lightgray;
}
.showAllcommentContainer__picture__main {
  width: 100%;
  height: 100%;
}
.showAllcommentContainer__main {
  width: 100%;
  height: 100%;
  position: relative;
}
.showAllcommentContainer__box__Image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 10px 0px 0px 10px;
  border-right: 1px solid lightgray;
}
.showAllcommentContainer__dot {
  position: relative;
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  left: 50%;
  bottom: 20px;
  display: flex;
}
.dot {
  box-shadow: 1px 1px rgba(0, 0, 0, 0.7);
}
.showAllcommentContainer__picture__Leftbtn {
  color: rgba(0, 0, 0, 0.7);
  position: absolute;
  z-index: 6;
  cursor: pointer;
  top: 50%;
}
.showAllcommentContainer__picture__Rightbtn {
  color: rgba(0, 0, 0, 0.7);
  position: absolute;
  z-index: 6;
  cursor: pointer;
  top: 50%;
  right: 43%;
}
.showAllcommentContainer__information {
  width: 40%;
  display: flex;
  flex-direction: column;
}
/*person info*/
.showAllcommentContainer__name__personImagebox {
  display: flex;
  align-items: center;
  margin: 10px 5px;
}
.showAllcommentContainer__name__personImage {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid lightgray;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.showAllcommentContainer__name__username {
  margin: 0px 10px;
  font-weight: 700;
}
.showAllcommentContainer__deletePost {
  background-color: black;
  position: relative;
}
/*caption*/
.showAllcommentContainer__content {
  width: 100%;
  margin: 5px;
  display: flex;
  /* align-items: center; */
}
.showAllcommentContainer__content__authBox {
  float: left;
  margin-right: 5px;
}
.showAllcommentContainer__authImg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid lightgray;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 5px;
}

.showAllcommentContainer__auth {
  font-weight: 700;
  margin-right: 5px;
  display: inline-block;
}
.showAllcommentContainer__text {
  word-break: break-word;
  width: 98%;
  padding-right: 10px;
  margin-right: 5px;
  overflow: hidden;
}
/*comment*/

.showAllcommentContainer__content__main {
  width: 100%;
  height: 90%;
  border-top: 1px solid lightgray;
  overflow: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.showAllcommentContainer__msg__userBox {
  float: left;
  display: flex;
  /* align-items: center; */
  margin-right: 5px;
}
.showAllcommentContainer__msg__userImg {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid lightgray;
  margin-right: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.showAllcommentContainer__msg {
  margin: 10px 0px;
}
.showAllcommentContainer__msg__box {
  margin: 5px;
  display: flex;
  flex-direction: column;
}
.showAllcommentContainer__authBox {
  width: 80%;
}
.showAllcommentContainer__msg__msg {
  width: 80%;
  word-break: break-word;
}
.showAllcommentContainer__msg__name {
  font-weight: 700;
  display: inline;
  margin-right: 5px;
}
/*icon*/
.showAllcommentContainer__icon {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid lightgray;
}
.showAllcommentContainer__icon__left {
  display: flex;
}
.showAllcommentContainer__icon__like {
  cursor: pointer;
}
.showAllcommentContainer__icon__mark {
  cursor: pointer;
}
/*讚*/
.showAllcommentContainer__like {
  display: flex;
  align-items: center;
}
.showAllcommentContainer__like_name {
  font-weight: 700;
  margin: 5px;
}
/*input*/
.showAllcommentContainer__msg__input {
  font-size: 16px;
  width: 100%;
  outline: none;
  border: none;
  border-radius: 0px 0px 10px 0px;
}
.showAllcommentContainer__input {
  height: 5%;
  padding: 5px;
  border-top: 1px solid lightgray;
  overflow: hidden;
  display: flex;
  align-items: center;
}

@media (max-width: 1200px) {
  .showAllcommentContainer__box {
    width: 80%;
    height: 80%;
  }
}

@media (max-width: 768px) {
  .showAllcommentContainer__box {
    width: 100%;
    border-radius: 0px;
  }
}

@media (max-width: 480px) {
  .closeIcon {
    width: 30px;
    height: 30px;
    margin: 5px;
  }
  .showAllcommentContainer__box {
    width: 100%;
    height: 90%;
    border-radius: 0px;
    flex-direction: column;
  }
  .showAllcommentContainer__main {
    width: 100%;
    height: 100%;
    margin: 0px;
    display: flex;
    flex-direction: column;
    position: relative;
    border-bottom: 1px solid lightgray;
  }
  .showAllcommentContainer__box__Image {
    width: 100%;
    height: 100%;
  }
  .showAllcommentContainer__name {
    display: none;
  }
  .showAllcommentContainer__img {
    width: 100%;
    height: 50%;
  }
  .showAllcommentContainer__information {
    width: 100%;
    height: 50%;
  }
  .showAllcommentContainer__input {
    width: 100%;
    height: 20%;
    border-top: 1px solid lightgray;
  }
  .showAllcommentContainer__picture__Rightbtn {
    right: 0px;
    top: 250px;
  }
  .showAllcommentContainer__picture__Leftbtn {
    top: 250px;
  }
}

/*!***************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/deleteAlert.css ***!
  \***************************************************************************/
.delete__box{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 5;
    left: 0;
    top:0;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.delete__container{
    width: 40%;
    height: 20%;
    background-color: #FFF;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}
.delete__title{
    width: 100%;
    height: 150px;
    border-bottom: 1px solid lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
}
.delete__select{
    display: flex;
    align-content: space-around;
}
.delete__selec__delete{
    width: 50%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right:  1px solid lightgray;
    font-weight: 700;
    color: red;
    cursor: pointer;
    border-radius: 0px 0px 0px 10px;
}
.delete__selec__delete:hover{
    color: #FFF;
    background-color: red;
}
.delete__selec__cancel{
    width: 50%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: #41b6e6;
    border-radius: 0px 0px 10px 0px;
    cursor: pointer;
}
.delete__selec__cancel:hover{
    color: #FFF;
    background-color: #41b6e6;
    border-radius: 0px 0px 10p 0px;
}

@media (max-width:1200px) {
    /* .delete__container{
        width: 60%;
        height: 30%;
    } */

}

@media (max-width:768px) {
    .delete__container{
        width: 60%;
        height: 20%;
    }
}

@media (max-width:480px) {
    .delete__container{
        width: 80%;
        height: 20%;
    }
    .delete__selec__delete{
        height: 50px;
    }
    .delete__selec__cancel{
        height: 50px;
    }
}

/*!***********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/sendMsg.css ***!
  \***********************************************************************/
.sendMsgBox{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: rgba(0,0,0,0.6);
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 7;
}

.sendMsgBox__container{
    width: 70%;
    height: 70%;
    background-color: #FFF;
    border-radius: 10px;

}
.sendMsgBox__container__close{
    position: absolute;
    right:10px;
    color: #FFF;
    cursor: pointer;
    top: 5px;
    cursor: pointer;
}
/*title*/
.sendMsgBox__container__title{
    font-size: 20px;
    font-weight: 700;
    padding: 10px 20px;
    margin: auto;
    text-align: center;
    border-bottom: 1px solid lightgray;
}
.sendMsgBox__container__search{
    width: 99%;
    font-size: 20px;
    font-weight: 700;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid lightgray;
    display: flex;
    align-items: center;
}
.sendMsgBox__container__input{
    width: 100%;
    outline: none;
    padding: 5px 10px;
    font-size: 20px;
    border: none;
}
/*recomend&input msg*/
.sendMsgBox__container__searchBox{
    display: flex;
    width: 100%;
    height: 70%;
    border-bottom: 1px solid lightgray;
}
.sendMsgBox__searchBox__recomend{
    width: 40%;
    height: 100%;
    border-right: 1px solid lightgray;
    overflow-y: scroll;
    /* border: 1px solid lightgray; */
}
.sendMsgBox__searchBox__inputMsg{
    width: 60%;
    height: 95%;
}
.searchBox__inputMsg{
    width: 95%;
    height: 100%;
    resize: none;
    outline: none;
    padding: 5px;
    border: none;
    font-size: 20px;
}
.searchBox__recomend__title{
    font-size: 20px;
    font-weight: 700;
    padding: 5px;
    border-bottom: 1px solid lightgray;
}
.searchBox__recomend__user{
    display: flex;
    align-items: center;
    padding: 10px 5px;
    border-bottom: 1px solid lightgray;
}
.searchBox__recomend__user:hover{
    background-color: lightgray;
    cursor: pointer;
}
.searchBox__recomend__userImg{
    width: 30px;
    height: 30px;
    border: 1px solid lightgray;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
}
.searchBox__recomend__username{
    margin-left: 5px;
}
/*btn*/
.sendMsgBox__container__sendBtn{
    width: 90%;
    padding: 5px 10px;
    background-color: #41b6e6;
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin: 10px auto;
    border-radius: 5px;
    cursor: pointer;
}
/*loding*/
@keyframes ldio-qbt6147e1us {
  0% {
    opacity: 1;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1.86,1.86);
  } 100% {
    opacity: 0;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1,1);
  }
}
.ldio-qbt6147e1us div > div {
  position: absolute;
  width: 14.46px;
  height: 14.46px;
  border-radius: 50%;
  background: #6a6a6a;
  animation: ldio-qbt6147e1us 1s linear infinite;
}.ldio-qbt6147e1us div:nth-child(1) > div {
  left: 166.5px;
  top: 113.5px;
  animation-delay: -0.9s;
}
.ldio-qbt6147e1us > div:nth-child(1) {
  transform: rotate(0deg);
  transform-origin: 173.73000000000002px 120.73px;
}.ldio-qbt6147e1us div:nth-child(2) > div {
  left: 156.5px;
  top: 144.5px;
  animation-delay: -0.8s;
}
.ldio-qbt6147e1us > div:nth-child(2) {
  transform: rotate(36deg);
  transform-origin: 163.73000000000002px 151.73000000000002px;
}.ldio-qbt6147e1us div:nth-child(3) > div {
  left: 129.5px;
  top: 163.5px;
  animation-delay: -0.7s;
}
.ldio-qbt6147e1us > div:nth-child(3) {
  transform: rotate(72deg);
  transform-origin: 136.73000000000002px 170.73000000000002px;
}.ldio-qbt6147e1us div:nth-child(4) > div {
  left: 96.5px;
  top: 163.5px;
  animation-delay: -0.6s;
}
.ldio-qbt6147e1us > div:nth-child(4) {
  transform: rotate(108deg);
  transform-origin: 103.73px 170.73000000000002px;
}.ldio-qbt6147e1us div:nth-child(5) > div {
  left: 70.5px;
  top: 144.5px;
  animation-delay: -0.5s;
}
.ldio-qbt6147e1us > div:nth-child(5) {
  transform: rotate(144deg);
  transform-origin: 77.73px 151.73000000000002px;
}.ldio-qbt6147e1us div:nth-child(6) > div {
  left: 60.5px;
  top: 113.5px;
  animation-delay: -0.4s;
}
.ldio-qbt6147e1us > div:nth-child(6) {
  transform: rotate(180deg);
  transform-origin: 67.73px 120.73px;
}.ldio-qbt6147e1us div:nth-child(7) > div {
  left: 70.5px;
  top: 82.5px;
  animation-delay: -0.3s;
}
.ldio-qbt6147e1us > div:nth-child(7) {
  transform: rotate(216deg);
  transform-origin: 77.73px 89.73px;
}.ldio-qbt6147e1us div:nth-child(8) > div {
  left: 96.5px;
  top: 62.5px;
  animation-delay: -0.2s;
}
.ldio-qbt6147e1us > div:nth-child(8) {
  transform: rotate(252deg);
  transform-origin: 103.73px 69.73px;
}.ldio-qbt6147e1us div:nth-child(9) > div {
  left: 129.5px;
  top: 62.5px;
  animation-delay: -0.1s;
}
.ldio-qbt6147e1us > div:nth-child(9) {
  transform: rotate(288deg);
  transform-origin: 136.73000000000002px 69.73px;
}.ldio-qbt6147e1us div:nth-child(10) > div {
  left: 156.5px;
  top: 82.5px;
  animation-delay: 0s;
}
.ldio-qbt6147e1us > div:nth-child(10) {
  transform: rotate(324deg);
  transform-origin: 163.73000000000002px 89.73px;
}
.loadingio-spinner-spin-n52qtr6h19b {
  width:100%;
  height: 360px;
  display: inline-block;
  overflow: hidden;
  background: #f1f2f3;
}
.ldio-qbt6147e1us {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-qbt6147e1us div { box-sizing: content-box; }
/* generated by https://loading.io/ */

@media (max-width:1200px) {


}

@media (max-width:768px) {
    .sendMsgBox__container{
        width: 90%;
        height: 80%;
    }
    .sendMsgBox__container__search{
        width: 98%;
    }
    .sendMsgBox__container__searchBox{
        flex-direction: column;
    }
    .sendMsgBox__container__searchBox{
        height: 75%;
    }
    .sendMsgBox__searchBox__recomend{
        width: 100%;
        border-bottom: 1px solid lightgray;
        border-right: 0px;
    }
    .sendMsgBox__searchBox__inputMsg{
        width: 100%;
        height: 85%;
        border-bottom: 1px solid lightgray;
    }
    .searchBox__inputMsg{
        height: 80%;
    }
    .sendMsgBox__container__sendBtn{
        margin: 5px auto;
    }
}

@media (max-width:480px) {
    .sendMsgBox__container{
        width: 100%;
        height: 90%;
        border-radius: 0px;
    }
    .sendMsgBox__container__sendBtn{
        margin: 15px auto;
    }
}
/*!************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/chatroom.css ***!
  \************************************************************************/
.chatRoom {
  width: 70%;
  height: 100vh;
  margin: auto;
  display: flex;
}
.chatRoom__info {
  border-left: 1px solid lightgray;
  border-right: 1px solid lightgray;

  border-bottom: 1px solid lightgray;
}

.chatRoom__title {
  font-size: 20px;
}
.chatRoom__info {
  width: 30%;
}
.chatRoom__search {
  outline: none;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid lightgray;
  font-size: 16px;
}

.chatRoom__userName {
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid lightgray;
}
/*following*/

.chatRoom__following__item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px 5px;
  border-bottom: 1px solid lightgray;
  box-sizing: border-box;
}
.chatRoom__following__item:hover {
  background-color: rgba(211, 211, 211, 0.712);
  cursor: pointer;
}
.chatRoom__followingImg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-right: 10px;
  border: 1px solid lightgray;
}
.chatRoom__username {
  font-weight: 700;
  font-size: 16px;
  width: 80%;
  text-overflow: ellipsis;
}
/*chatRoom main*/
.chatRoom__main {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid lightgray;
}
.chatRoom__input {
  padding: 20px 10px;
  font-size: 16px;
  font-weight: 700;
  width: 100%;
  outline: none;
  border: none;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  bottom: 1px;
  box-sizing: border-box;
}
/*chatBox*/
.chatRoom__box__username {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  border-bottom: 1px solid lightgray;
  position: fixed;
  width: 48%;
  z-index: 5;
  background-color: #fff;
}
.chatRoom__box {
  overflow-y: scroll;
}
.chatRoom__orther {
  display: flex;
  align-items: flex-end;
}
.chatRoom__orther__userImg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 5px;
  border: 1px solid lightgray;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.chatRoom__orther__msg {
  width: 70%;
  font-size: 16px;
  padding: 10px;
  margin: 10px;
  border: 1px solid lightGray;
  border-radius: 10px 10px 10px 0px;
  width: auto;
  display: inline-block;
  max-width: 80%;
  word-wrap: break-word;
}

.chatRoom__mine {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.chatRoom__mine__userImg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 5px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid lightgray;
}
.chatRoom__mine__msg {
  font-size: 16px;
  padding: 10px;
  margin: 10px;
  border: 1px solid lightGray;
  border-radius: 10px 10px 0px 10px;
  width: auto;
  display: inline-block;
  background-color: rgb(40, 194, 246);
  color: white;
  max-width: 80%;
  word-wrap: break-word;
}
.chatRoom__lastMessage {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
  height: 20px;
}
@media (max-width: 1200px) {
  .chatRoom {
    width: 80%;
  }
  .chatRoom__box__username {
    width: 55.5%;
  }
}
@media (max-width: 768px) {
  .chatRoom {
    width: 100%;
  }
  .chatRoom__username {
    width: 60%;
  }
  .chatRoom__mine__msg {
    max-width: 65%;
  }
  .chatRoom__orther__msg {
    max-width: 65%;
  }
  .chatRoom__search {
    padding: 0px 10px;
    height: 60px;
  }
  .chatRoom__info {
    margin-top: 7.5%;
  }
  .chatRoom__main {
    height: 86%;
    margin-top: 7.5%;
  }

  .chatRoom__following__item {
    padding: 10px;
  }
  .chatRoom__box__username {
    width: 80%;
    background-color: #fff;
    border-top: 1px solid lightgray;
    box-sizing: border-box;
    z-index: 4;
  }
}
@media (max-width: 480px) {
  .chatRoom__mine__msg {
    max-width: 70%;
  }
  .chatRoom__orther__msg {
    max-width: 70%;
  }
  .chatRoom__mine__userImg {
    width: 30px;
    height: 30px;
  }
  .chatRoom__orther__userImg {
    width: 30px;
    height: 30px;
  }
  .chatRoom__followingImg {
    width: 30px;
    height: 30px;
  }
  .chatRoom__main {
    width: 100%;
    height: 62%;
    margin-top: 0%;
  }
  .chatRoom__lastMessage {
    display: none;
  }
  .chatRoom {
    flex-direction: column;
  }
  .chatRoom__info {
    margin-top: 12%;
    width: 100%;
  }
  .chatRoom__following {
    overflow-y: scroll;
  }

  .chatRoom__box__username {
    position: absolute;
    z-index: 5;
    background-color: #fff;
    width: 100%;
  }
  .chatRoom__search {
    padding: 0px 5px;
    height: 40px;
  }
  /* .chatRoom__box {
    display: flex;
    flex-direction: column;
  } */
  .chatRoom__msg__box {
    margin-top: 50px;
  }
}