1  @import '../../common/styles/variables';
  2  
  3  // @keyframes loading_rotate {
  4  //   100% {
  5  //       transform: rotate(360deg);
  6  //   }
  7  // }
  8  
  9  .cnt {
 10    width: 100%;
 11    display: flex;
 12    box-sizing: border-box;
 13    position: fixed;
 14    left: 0;
 15    top: 0;
 16    font-family: $font;
 17    padding: 12px;
 18    background: #fff;
 19    box-shadow: 0px 4px 12px rgba(0, 34, 51, 0.08),
 20      0px 2px 4px rgba(0, 34, 51, 0.16);
 21    transform: translateY(-200%);
 22  
 23    transition-property: transform;
 24    transition-duration: 0.4s;
 25  
 26    .image {
 27      width: 40px;
 28      height: 40px;
 29      border-radius: 50%;
 30      margin-right: 16px;
 31    }
 32  
 33    .data {
 34      width: 100%;
 35      display: flex;
 36      flex-direction: column;
 37  
 38      .name {
 39        display: flex;
 40        align-items: center;
 41        position: relative;
 42        line-height: 22px;
 43        font-size: 15px;
 44        font-weight: 700;
 45        margin-bottom: 2px;
 46  
 47        .nameItself {
 48          width: 0px;
 49          flex: 1 1 auto;
 50          text-overflow: ellipsis;
 51          overflow: hidden;
 52          white-space: nowrap;
 53          margin-right: 8px;
 54        }
 55  
 56        .close {
 57          width: 20px;
 58          height: 20px;
 59          flex: 0 0 auto;
 60          display: flex;
 61          align-items: center;
 62          justify-content: center;
 63          color: #fff;
 64          font-size: 18px;
 65          font-weight: 300;
 66          font-family: 'Times New Roman', Times, serif;
 67          margin-left: auto;
 68          border-radius: 50%;
 69          background: #939ba1;
 70          transform: rotate(45deg);
 71          cursor: pointer;
 72        }
 73      }
 74  
 75      .info {
 76        line-height: 18px;
 77        color: #939ba1;
 78        font-size: 13px;
 79        margin-bottom: 8px;
 80      }
 81  
 82      .status {
 83        display: flex;
 84        align-items: center;
 85        line-height: 15px;
 86        color: $link-color;
 87        font-size: 12px;
 88  
 89        img {
 90          margin-right: 4px;
 91          // animation:loading_rotate 1s linear infinite;
 92        }
 93      }
 94  
 95      .status.red {
 96        color: $red;
 97      }
 98  
 99      .status.column {
100        flex-direction: column;
101        align-items: flex-start;
102  
103        span {
104          word-break: break-all;
105        }
106      }
107    }
108  }
109  
110  .cnt.active {
111    transform: translateY(0);
112  }
113  
114  @media (min-width: $desktop) {
115    .cnt {
116      width: 375px;
117      right: 0;
118      top: 16px;
119      border-radius: 16px;
120      margin: auto;
121    }
122  }