.current-session-wrap {
    .component-content {
      display: flex;
      flex-direction: row;
    //   min-width: 1200px;
      background: none !important;
      font-size: 14px;
      .center {
        margin-left: 10%;
        margin-right: 10%;
        flex: 1;
        background: #fff;
        .c-header {
          padding: 0 25px;
          height: 56px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          border-bottom: 2px solid #f5f5f5;
          & > .c-header-l {
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            & > img {
              display: inline-block;
              width: 24px;
              height: 24px;
              border-radius: 12px;
              margin-right: 8px;
            }
            & > .name {
              margin-right: 25px;
              color: #333333;
            }
            & > .time-tip {
              font-size: 12px;
              color: #999999;
            }
          }
          .close-btn {
            width: 100px;
            color: #c7c8c9;
            cursor: pointer;
          }
        }
        .msg-content {
          // width: 100%;
          // height: 650px;
          word-break: break-all;
          overflow: scroll;
          display: flex;
          flex-direction: column;
          margin: 10px 20px;
          .msg-item {
            display: flex;
            flex-direction: row;
            margin: 12px 0;
            .msg-item-img {
              width: 36px;
              height: 36px;
              margin-right: 12px;
              & > img {
                width: 100%;
                height: 100%;
                border-radius: 22px;
              }
            }
            .msg-item-detail {
              display: flex;
              flex-direction: column;
              text-align: left;
              font-size: 13px;
              & > :first-child {
                color: #999999;
                margin-bottom: 8px;
              }
              .send-warpper {
                // display: flex;
                // flex-direction: row;
                // align-items: center;
                & > .icon {
                  float: left;
                  width: 20px;
                  height: 20px;
                  margin-right: 10px;
                  margin-top: 10px;
                }
                .mid-text-wrapper {
                  display: inline-block;
                  // display: flex;
                  // flex-direction: row;
                  // align-items: center;
                  // & > img {
                  //   width: 18px;
                  //   height: 18px;
                  //   margin-right: 8px;
                  //   cursor: pointer;
                  // }
                }
                .mid-text {
                  padding: 12px 16px;
                  display: inline-block;
                  max-width: 520px;
                  border-radius: 8px;
                  background: #ebf5fc;
                  text-align: justify;
                  color: #333333;
                  &.no-support {
                    display: flex;
                    align-items: center;
                    & > img {
                      width: 14px;
                      height: 14px;
                      margin-right: 3px;
                    }
                  }
                }
                .link {
                  color: #2f86f6;
                }
                & > .mid-pdf {
                  width: 260px;
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                  text-align: left;
                  padding: 10px 15px;
                  background: #f0f1f2;
                  border-radius: 8px;
                  min-height: 80px;
                  cursor: pointer;
                  .midp-left {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    margin-right: 10px;
                    .name {
                      font-size: 13px;
                      color: #333333;
                      word-break: break-word;
                    }
                    .size {
                      font-size: 12px;
                      color: #999999;
                    }
                  }
                  .midp-icon {
                    width: 36px;
                    height: 44px;
                    & > img {
                      width: 36px;
                      height: 100%;
                      border-radius: 3px;
                    }
                  }
                }
                & > .mid-img {
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  cursor: pointer;
                  // & > .icon {
                  //   width: 20px;
                  //   height: 20px;
                  // }
                  // & > .img {
                  //   width: 170px;
                  //   height: 108px;
                  //   border-radius: 8px;
                  // }
                  .img-box {
                    max-width: 192px;
                    max-height: 320px;
                    overflow: hidden;
                  }
                }
                & > .diagnosis-box {
                  width: 260px;
                  text-align: left;
                  padding: 10px 15px;
                  background: #f0f1f2;
                  border-radius: 8px;
                  min-height: 80px;
                  .title {
                      padding-bottom: 10px; 
                      font-size: 14px;
                      font-weight: 700;
                  }
                  .dia-text {
                    font-size: 12px;
                    color: #7C7C7C;
                    .label {
                        color: #B4B4B4;
                    }
                  }
                }
                & > .time-box {
                  width: 260px;
                  text-align: left;
                  padding: 10px 15px;
                  background: #f0f1f2;
                  border-radius: 8px;
                  min-height: 80px;
                  .title {
                    padding-bottom: 10px; 
                    font-size: 14px;
                    font-weight: 700;
                  }
                  .time {
                      padding-bottom: 10px;
                      font-size:12px;
                      font-weight: 700;
                  }
                  .time-text {
                    font-size: 12px;
                    color: #7C7C7C;
                  }
                }
                & > .suggession-box {
                  width: 260px;
                  text-align: left;
                  padding: 10px 15px;
                  background: #f0f1f2;
                  border-radius: 8px;
                  min-height: 80px;
                  .title {
                      padding-bottom: 10px; 
                      font-size: 14px;
                      font-weight: 700;
                  }
                  .suggession-text {
                    font-size: 12px;
                    color: #7C7C7C;
                    .label {
                        color: #B4B4B4;
                    }
                  }
                  
                }
                & > .audio-box audio {
                  width: 242px;
                  height: 44px;
                  background: #EBF5FC;
                  border-radius: 20px;
                }
                & > .live-box {
                  width: 202px;
                  height: 44px;
                  line-height: 44px;
                  background: #f0f1f2;
                  border-radius: 8px;
                  text-align: center;
                }
                & > .diagnosis-end {
                  width: 100%;
                  .split-line {
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin: 15px 0;
                    font-size: 14px;
                    color: #999999;
                    &::before {
                      flex: 1;
                      content: '';
                      height: 1px;
                      margin-right: 18px;
                      background: #f0f1f2;
                    }
                    &::after {
                      flex: 1;
                      content: '';
                      height: 1px;
                      margin-left: 18px;
                      background: #f0f1f2;
                    }
                  }
                }
              }
            }
            .msg-item-detail.line {
              width: 100%;
            }
            &.cr {
              flex-direction: row-reverse;
              //justify-content: flex-end;
              .msg-item-img {
                margin-right: 0;
                margin-left: 8px;
              }
              .msg-item-detail {
                text-align: right;
                & > .mid-text {
                  background: #f0f1f2;
                }
              }
            }
          }
          .split-line {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 15px 0;
            font-size: 14px;
            color: #999999;
            &::before {
              flex: 1;
              content: '';
              height: 1px;
              margin-right: 18px;
              background: #f0f1f2;
            }
            &::after {
              flex: 1;
              content: '';
              height: 1px;
              margin-left: 18px;
              background: #f0f1f2;
            }
          }
          .error-mg {
            display: inline-block;
            max-width: 520px;
            // height: 24px;
            max-width: 520px;
            line-height: 16px;
            text-align: left;
            border-radius: 20px;
            opacity: 0.45;
            margin: -2px 0 10px;
            padding: 4px 12px;
            color: #FFFFFF;
            background: #000000;
            margin-left: 50px;
            &.mr {
              margin-left: 0;
              margin-right: 50px;
            }
          }
        }
        .msg-content::-webkit-scrollbar  
        {  
            width: 0px;  
            height: 0px;  
            background-color: #fff;  
        }
        .c-bottom {
          position: relative;
          top: -8px;
          left: 0;
          display: flex;
          flex-direction: row;
          margin: 16px 12px 16px 25px;
          .cb-icon-wrapper {
            position: absolute;
            top: 0;
            right: 70px;
            display: flex;
            align-items: center;
            height: 44px;
            img {
              width: 20px;
              height: 20px;
              margin-right: 16px;
              cursor: pointer;
            }
          }
          .send-btn {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 44px;
            background: #f3f6f7;
            margin-left: 12px;
            border-radius: 8px;
            cursor: pointer;
            & > img {
              width: 24px;
              height: 24px;
            }
            &.active {
              background: #0d9078;
            }
          }
        }
        &.no-content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          img {
            display: block;
            width: 120px;
            height: 100px;
          }
          p {
            margin-top: 10px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
          }
        }
      }
      background: #fff;
      .time {
        color: #999999;
      }
      .small {
        font-size: 12px;
      }
      .ld{
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 1s;
        -moz-transition-property: -moz-transform;
        -moz-transition-duration: 1s;
        -webkit-animation: rotate 3s linear infinite;
        -moz-animation: rotate 3s linear infinite;
        -o-animation: rotate 3s linear infinite;
        animation: rotate 3s linear infinite;
      }
      @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
          to{-webkit-transform: rotate(360deg)}
      }
      @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
          to{-moz-transform: rotate(359deg)}
      }
      @-o-keyframes rotate{from{-o-transform: rotate(0deg)}
          to{-o-transform: rotate(359deg)}
      }
      @keyframes rotate{from{transform: rotate(0deg)}
          to{transform: rotate(359deg)}
      }    
    }
  }