1  @import '../../common/styles/variables';
 2  
 3  .alertWrapper {
 4    width: 100%;
 5    height: 100%;
 6    display: flex;
 7    align-items: center;
 8    justify-content: center;
 9    position: fixed;
10    left: 0;
11    top: 0;
12    font-family: $font;
13    font-size: 16px;
14    background: rgba(255, 255, 255, 0.5);
15    opacity: 0;
16    z-index: 4098;
17    pointer-events: none;
18  
19    transition-property: opacity;
20    transition-duration: 0.25s;
21  
22    .alert {
23      width: 280px;
24      max-width: 90%;
25      box-sizing: border-box;
26      font-weight: 400;
27      padding: 16px;
28      border-radius: 4px;
29      opacity: 0;
30      background: #fff;
31      border-radius: 8px;
32      box-shadow: 0px 2px 16px rgba(0, 9, 26, 0.12);
33  
34      .msg {
35        max-height: 384px;
36        text-align: left;
37        margin-bottom: 16px;
38        overflow: auto;
39      }
40  
41      .actions {
42        display: flex;
43        justify-content: flex-end;
44      }
45  
46      .textButton {
47        color: $link-color;
48        text-transform: uppercase;
49        text-decoration: none !important;
50        font-weight: 700;
51        font-size: 14px;
52        border-radius: 4px;
53        padding: 4px 12px;
54        cursor: pointer;
55      }
56    }
57  }
58  
59  .alertWrapper.active {
60    opacity: 1;
61    pointer-events: auto;
62  
63    .alert {
64      opacity: 1;
65    }
66  }