1  @import '../../common/styles/variables';
  2  
  3  .modalWindow {
  4    height: 100%;
  5    display: flex;
  6    flex-direction: column;
  7  }
  8  
  9  @media (min-width: $desktop) {
 10    .modalWindow {
 11      height: auto;
 12    }
 13  }
 14  
 15  .modalContent {
 16    display: flex;
 17    flex-direction: column;
 18    flex: 1 1 auto;
 19  }
 20  
 21  @media (min-width: $desktop) {
 22    .modalContent {
 23      height: 512px;
 24    }
 25  }
 26  
 27  .tabs {
 28    width: 100%;
 29    border-bottom: 1px solid #eef2f5;
 30    text-align: center;
 31  }
 32  
 33  .tabs button {
 34    color: #939ba1;
 35    position: relative;
 36    background: transparent;
 37    border: none;
 38    text-transform: uppercase;
 39    font-family: $font;
 40    font-size: 13px;
 41    height: calculateRem(40);
 42    letter-spacing: calculateRem(0.2);
 43    display: inline-flex;
 44    align-items: center;
 45    cursor: pointer;
 46    outline: none;
 47  
 48    transition-property: color;
 49    transition-duration: 0.4s;
 50  }
 51  
 52  .tabs button:first-child {
 53    margin-right: 32px;
 54  }
 55  
 56  .tabs button:after {
 57    display: block;
 58    clear: both;
 59    content: '';
 60    position: absolute;
 61    left: 0;
 62    right: 0;
 63    bottom: 0;
 64    width: 24px;
 65    border-bottom: 2px solid transparent;
 66    margin: 0 auto 0 auto;
 67  
 68    transition-property: border-color;
 69    transition-duration: 0.4s;
 70  }
 71  
 72  .tabs button.active {
 73    color: $link-color;
 74  }
 75  
 76  .tabs button.active:after {
 77    border-bottom-color: $link-color;
 78  }
 79  
 80  .dapp {
 81    height: 48px;
 82    display: flex;
 83    align-items: center;
 84    font-family: $font;
 85    font-weight: 500;
 86    padding: 0 calculateRem(12);
 87  }
 88  
 89  .dapp .image {
 90    max-width: 24px;
 91    max-height: 24px;
 92    border-radius: 50%;
 93    margin-right: calculateRem(12);
 94  }
 95  
 96  .items {
 97    display: flex;
 98    flex-direction: column;
 99    font-family: $font;
100  }
101  
102  .items .itemRow {
103    height: 32px;
104    display: flex;
105    align-items: center;
106    padding: 0 calculateRem(12);
107  }
108  
109  .items .item {
110    display: flex;
111    align-items: center;
112  }
113  
114  .items .item img {
115    margin-right: calculateRem(12);
116  }
117  
118  .badge {
119    border-radius: 24px;
120    color: #ffffff;
121    font-family: $font;
122    font-size: calculateRem(15);
123    margin-right: calculateRem(16);
124    margin-left: auto;
125    padding: calculateRem(3) calculateRem(10);
126  }
127  
128  .greenBadge {
129    @extend .badge;
130    background: #44d058;
131  }
132  
133  .redBadge {
134    @extend .badge;
135    background: #f00;
136  }
137  
138  .inputArea {
139    width: calc(100% - 2 * 16px);
140    height: 64px;
141    display: flex;
142    align-items: center;
143    justify-content: center;
144    text-align: center;
145    margin: auto;
146  }
147  
148  .inputArea.inputAreaBorder {
149    border-bottom: 1px solid #eef2f5;
150  }
151  
152  .inputArea input {
153    width: 19px;
154    border: none;
155    text-align: center;
156    font-size: calculateRem(32);
157    line-height: calculateRem(28);
158    font-family: $font;
159    margin-right: calculateRem(6);
160  }
161  
162  .inputArea input:focus {
163    outline: none;
164  }
165  
166  .inputArea::after {
167    transition: all 0.05s ease-in-out;
168    content: 'SNT';
169    color: #939ba1;
170    font-size: calculateRem(32);
171    line-height: calculateRem(28);
172    font-family: $font;
173  }
174  
175  .inputArea span {
176    font-size: calculateRem(32);
177    line-height: calculateRem(28);
178    font-family: $font;
179    margin-right: calculateRem(6);
180  }
181  
182  .footer {
183    text-align: center;
184  }
185  
186  .footer button {
187    background: $link-color;
188    border-radius: 8px;
189    color: #fff;
190    margin: calculateRem(10) auto;
191    border: none;
192    font-family: $font;
193    padding: calculateRem(11) calculateRem(38);
194    font-size: calculateRem(15);
195    cursor: pointer;
196  }
197  
198  .footer button:disabled,
199  .footer button[disabled] {
200    background: $text-color;
201  }
202  
203  .footer .disclaimer {
204    font-size: calculateRem(15);
205    color: $text-color;
206    line-height: 22px;
207    font-family: $font;
208    padding: calculateRem(16);
209    border-bottom: 1px solid #eef2f5;
210    margin: 0;
211  }
212  
213  .footer .disclaimer a {
214    text-decoration: none;
215    color: $link-color;
216  }