1  @import '../../common/styles/variables';
  2  
  3  .modalWindow {
  4    height: 100%;
  5  }
  6  
  7  @media (min-width: $desktop) {
  8    .modalWindow {
  9      height: auto;
 10    }
 11  }
 12  
 13  a {
 14    text-decoration: none;
 15  }
 16  
 17  .container {
 18    font-family: $font;
 19    background-color: #ffffff;
 20  }
 21  
 22  .banner {
 23    height: calculateRem(140);
 24    display: flex;
 25    justify-content: center;
 26  }
 27  
 28  .image {
 29    border-radius: calculateRem(100);
 30    width: calculateRem(100);
 31    height: calculateRem(100);
 32    margin: calculateRem(80) auto;
 33    z-index: 99;
 34    box-shadow: 0px 4px 12px rgba(0, 34, 51, 0.08),
 35      0px 2px 4px rgba(0, 34, 51, 0.16);
 36  }
 37  
 38  .header {
 39    color: $headline-color;
 40    font-size: calculateRem(22);
 41    line-height: calculateRem(22);
 42    margin-bottom: calculateRem(4);
 43    margin-top: calculateRem(12);
 44    font-weight: 600;
 45    cursor: pointer;
 46  }
 47  
 48  .heading {
 49    color: $text-color;
 50    font-size: calculateRem(13);
 51    line-height: calculateRem(18);
 52    margin-bottom: calculateRem(2);
 53    margin-top: 0;
 54    max-height: calculateRem(40);
 55    overflow-y: hidden;
 56    cursor: pointer;
 57  }
 58  
 59  .information {
 60    display: flex;
 61    flex-direction: column;
 62    align-items: center;
 63    margin: calculateRem(40) 0 0 0;
 64  }
 65  
 66  .button {
 67    border-radius: 20px;
 68    background-color: #4360df;
 69    color: #ffffff;
 70    margin: calculateRem(16) 0 calculateRem(16) 0;
 71    padding: calculateRem(12) calculateRem(32);
 72  }
 73  
 74  .description {
 75    border-bottom: 1px solid #eef2f5;
 76    box-shadow: inset 0px 1px 0px #eef2f5;
 77    padding: calculateRem(10) calculateRem(20);
 78    display: flex;
 79    flex-direction: column;
 80  }
 81  
 82  .wrapper {
 83    margin-top: calculateRem(8);
 84  }
 85  
 86  .chat {
 87    display: flex;
 88    align-items: center;
 89    border-bottom: 1px solid #eef2f5;
 90    box-shadow: inset 0px 1px 0px #eef2f5;
 91    padding: calculateRem(10) calculateRem(20);
 92  }
 93  
 94  .chat_image {
 95    width: calculateRem(40);
 96    height: calculateRem(40);
 97    // margin-top: calculateRem(20);
 98    border-radius: 20px;
 99  }
100  
101  .chat_link {
102    margin: 0 0 0 calculateRem(10);
103  }
104  
105  .chat_icon {
106    margin-left: calculateRem(-10);
107    margin-bottom: calculateRem(20);
108  }
109  
110  .url {
111    border-bottom: 1px solid #eef2f5;
112    box-shadow: inset 0px 1px 0px #eef2f5;
113    padding: calculateRem(10) calculateRem(20);
114    display: flex;
115    flex-direction: column;
116  }
117  
118  .reviewed {
119    border-bottom: 1px solid #eef2f5;
120    box-shadow: inset 0px 1px 0px #eef2f5;
121    padding: calculateRem(15) calculateRem(20);
122    display: flex;
123    flex-direction: row;
124    span {
125      margin-left: calculateRem(10);
126      align-self: center;
127    }
128  }
129  
130  .ranking {
131    border-bottom: 1px solid #eef2f5;
132    box-shadow: inset 0px 1px 0px #eef2f5;
133    padding: calculateRem(10) calculateRem(20);
134  }
135  
136  .rank {
137    display: flex;
138    margin-top: calculateRem(10);
139  }
140  
141  .rank_position_1 {
142    border-radius: 40px;
143    width: calculateRem(40);
144    margin-right: calculateRem(15);
145    height: calculateRem(40);
146    background-color: $blue;
147    display: flex;
148    justify-content: center;
149  }
150  
151  .rank_position_2 {
152    border-radius: 40px;
153    width: calculateRem(40);
154    margin-right: calculateRem(15);
155    height: calculateRem(40);
156    background-color: $red;
157    display: flex;
158    justify-content: center;
159  }
160  
161  .rank_position_span {
162    padding: calculateRem(10);
163    color: #ffffff;
164    font-weight: 600;
165  }
166  
167  .rank_position_text {
168    margin-top: calculateRem(10);
169  }
170  
171  .actions {
172    display: flex;
173    justify-content: center;
174    border-bottom: 1px solid #eef2f5;
175    box-shadow: inset 0px 1px 0px #eef2f5;
176    padding: calculateRem(10) calculateRem(20);
177  
178    .button {
179      cursor: pointer;
180    }
181  
182    .button:first-child {
183      margin-right: calculateRem(20);
184    }
185  }
186  
187  @media (max-width: 356px) {
188    .actions {
189      .button {
190        font-size: 13px;
191      }
192    }
193  }
194  
195  .EXCHANGES {
196    background: $purple-bg;
197  }
198  
199  .DEFI {
200    background: $dark-blue-bg;
201  }
202  
203  .MARKETPLACES {
204    background: $orange-bg;
205  }
206  
207  .CRYPTO_ONRAMPS {
208    background: $navy;
209  }
210  
211  .OTHER {
212    background: $yellow-bg;
213  }
214  
215  .MEDIA {
216    background: $yellow-bg;
217  }
218  
219  .GAMES {
220    background: $pink-bg;
221  }
222  
223  .COLLECTIBLES {
224    background: $blue-bg;
225  }
226  
227  .SOCIAL_NETWORKS {
228    background: $green-bg;
229  }
230  
231  .UTILITIES {
232    background: $red-bg;
233  }