/* ---------------------- masks -------------------- */

.mask-logo::before {
  --image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 160"> \
    <path d="M 180 116 C 204 116 210 158 261 157 C 298 159 347 49 355 16 C 304 37 290 3 254 3 C 228 3 200 17 180 17 \
    C 160 17 132 3 106 3 C 70 3 56 37 5 16 C 13 49 62 159 99 157 C 150 158 156 116 180 116 Z \
    M 74 77 Q 118 55 147 104 Q 96 127 74 77 Z \
    M 286 77 Q 264 127 213 104 Q 242 55 286 77 Z" \
    fill="none" stroke="white" stroke-width="5"/> \
    <path d="M 40 45 L 54 78 L 60 75 L 55 64 C 65 67 65 56 63 51 C 59 39 50 36 46 45 L 45 42 Z \
    M 49 50 C 50 44 55 45 57 52 C 60 61 57 60 53 60 Z \
    M 87 45 C 86 27 67 29 67 42 C 68 63 84 61 89 52 L 85 49 C 81 54 76 54 74 49 Z \
    M 73 44 C 71 35 80 35 81 41 Z \
    M 93 29 L 94 55 L 100 55 L 99 38 Q 100 34 105 35 L 105 28 Q 101 28 99 33 L 99 29 Z \
    M 110 29 L 115 55 L 121 55 L 130 30 L 124 29 L 119 44 L 116 29 Z \
    M 151 50 C 157 28 136 28 133 41 C 128 60 142 61 149 58 L 147 53 C 142 55 137 53 138 48 Z \
    M 139 43 C 140 35 148 36 146 44 Z \
    M 160 37 L 154 62 L 160 63 L 164 48 Q 166 44 170 46 L 172 39 Q 168 38 165 43 L 166 38 Z \
    M 189 31 L 186 31 Q 179 31 179 39 L 179 42 L 175 42 L 175 47 L 179 47 L 179 68 \
    L 185 68 L 185 47 L 189 47 L 189 42 L 185 42 L 185 40 Q 185 35 189 36 Z \
    M 214 46 C 211 32 190 33 195 53 C 198 68 220 67 214 46 Z \
    M 208 47 C 212 60 203 60 201 51 C 198 41 206 40 208 47 Z \
    M 219 33 L 224 58 L 230 56 L 226 39 Q 226 36 232 36 L 231 30 Q 227 30 225 35 L 224 31 Z \
    M 240 28 L 240 54 L 246 54 L 246 36 C 247 32 252 32 252 36 L 252 54 L 258 54 L 258 36 \
    C 259 32 264 32 264 36 L 264 54 L 270 54 L 270 36 C 270 27 262 25 257 31 C 255 27 251 25 246 31 L 246 28 Z \
    M 296 49 C 304 26 277 25 277 47 C 277 56 285 60 294 57 L 293 52 C 285 55 282 50 283 46 Z \
    M 284 41 C 286 35 293 34 292 43 Z \
    M 308 38 L 299 62 L 305 64 L 310 50 Q 312 45 318 49 L 320 43 Q 318 40 313 43 L 314 40 Z" \
    fill="white"/> \
  </svg>');
  mask-image: var(--image);
  -webkit-mask-image: var(--image);
}

.mask-search::before {
  --image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="40" cy="40" r="36" fill="none" stroke="white" stroke-width="6"/> \
    <path d="M 18 38 Q 22 58 42 62" fill="none" stroke="white" stroke-width="8"/> \
    <path d="M 38 18 Q 58 22 62 42" fill="none" stroke="white" stroke-width="8"/> \
    <path d="M 66 66 L 96 96" fill="none" stroke="white" stroke-width="8"/> \
  </svg>');
  mask-image: var(--image);
  -webkit-mask-image: var(--image);
}

.mask-language::before {
  --image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="50" cy="50" r="45" fill="none" stroke="white" stroke-width="6"/> \
    <path d="M 8 30 Q 50 45 92 30 M 8 70 Q 50 55 92 70 M 49 5 Q 14 50 49 95 M 51 5 Q 86 50 51 95" \
    fill="none" stroke="white" stroke-width="6"/> \
  </svg>');
  mask-image: var(--image);
  -webkit-mask-image: var(--image);
}

.mask-info::before {
  --image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="50" cy="50" r="45" fill="none" stroke="white" stroke-width="6"/> \
    <circle cx="50" cy="27" r="8" fill="white"/> \
    <path d="M 51 42 L 51 80 M 39 46 L 55 46 M 39 76 L 63 76" \
    fill="none" stroke="white" stroke-width="8"/> \
  </svg>');
  mask-image: var(--image);
  -webkit-mask-image: var(--image);
}

.mask-entrance::before {
  --image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 40 5 L 95 5 L 95 95 L 40 95 M 5 50 L 75 50 M 55 30 L 75 50 L 55 70" \
    fill="none" stroke="white" stroke-width="6"/> \
  </svg>');
  mask-image: var(--image);
  -webkit-mask-image: var(--image);
}

.mask-user::before {
  --image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="50" cy="29" r="24" fill="none" stroke="white" stroke-width="6"/> \
    <path d="M 95 95 Q 95 75 75 60 C 60 72 40 72 25 60 Q 5 75 5 95 Z" \
    fill="none" stroke="white" stroke-width="6"/> \
  </svg>');
  mask-image: var(--image);
  -webkit-mask-image: var(--image);
}

.mask-right-arrow::before {
  --image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 72 58 L 52 78 C 42 88 54 100 64 90 L 94 60 Q 104 50 94 40 \
    L 64 10 C 54 0 42 12 52 22 L 72 42 L 10 42 C -2 42 -2 58 10 58 Z" fill="white"/> \
  </svg>');
  mask-image: var(--image);
  -webkit-mask-image: var(--image);
}

.mask-left-right-arrow::before {
  --image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 90 21 L 39 21 L 39 3 L 3 27 L 39 51 L 39 33 L 90 33 Z" fill="white"/> \
    <path d="M 10 79 L 61 79 L 61 97 L 97 73 L 61 49 L 61 67 L 10 67 Z" fill="white"/> \
  </svg>');
  mask-image: var(--image);
  -webkit-mask-image: var(--image);
}













































/* ---------------------- icons -------------------- */

.icon-logo {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <rect width="100" height="100" x="0" y="0" rx="20" ry="20" fill="black"/> \
    <path d="M 50 59 C 57 59 58 72 73 70 C 80 69 90 53 97 34 C 83 39 81 31 71 30 C 64 30 56 34 50 34 \
    C 44 34 36 30 29 30 C 19 31 17 39 3 34 C 10 53 20 69 27 70 C 42 72 43 59 50 59 Z \
    M 17 44 Q 38 33 44 52 Q 26 68 17 44 Z \
    M 83 44 Q 74 68 56 52 Q 62 33 83 44 Z" \
    fill="yellow"/> \
  </svg>');
}

.icon-selected::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="50" cy="50" r="40" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <circle cx="50" cy="50" r="20" fill="gainsboro"/> \
  </svg>');
}

.icon-unselected::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="50" cy="50" r="40" fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.icon-about::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 50 8 L 38 36 L 8 38 L 31 58 L 24 88 L 50 72 L 76 88 L 69 58 L 92 38 L 62 36 Z" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.icon-payment::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="50" cy="50" r="40" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 30 49 L 45 70 L 67 28" fill="none" stroke="gainsboro" stroke-width="8"/> \
  </svg>');
}

.icon-privacy::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 50 6 Q 40 25 10 25 Q 15 75 50 95 Q 85 75 90 25 Q 60 25 50 6 Z" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 50 38 L 38 50 L 50 62 L 62 50 Z" fill="gainsboro"/> \
  </svg>');
}

.icon-legal::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 68 18 C 50 -16 18 20 48 36 L 62 44 C 84 54 74 72 62 74 \
    M 32 82 C 50 116 82 80 52 64 L 38 56 C 16 46 26 28 38 26" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.icon-rta::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="50" cy="50" r="40" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 22 22 L 78 78" fill="none" stroke="gainsboro" stroke-width="8"/> \
  </svg>');
}

.icon-contact::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <rect width="92" height="66" x="4" y="17" rx="8" ry="8" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 7 19 L 40 55 Q 50 65 60 55 L 93 19 M 7 81 L 34 47 M 93 81 L 66 47" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.icon-key::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 4 96 L 19 96 L 19 82 L 33 82 L 33 68 L 47 68 L 47 54 \
    L 61 54 L 66 49 C 91 55 105 27 89 11 C 73 -5 45 9 51 34 L 4 81 Z" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
    <circle cx="77" cy="23" r="8" fill="gainsboro"/> \
  </svg>');
}

.icon-account::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 10 50 L 25 80 L 60 10" fill="none" stroke="gainsboro" stroke-width="8"/> \
    <path d="M 75 20 L 95 20" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 65 40 L 95 40" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 55 60 L 95 60" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 45 80 L 95 80" fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.icon-coin::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="50" cy="50" r="46" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <rect width="5" height="60" x="35" y="20" fill="gainsboro"/> \
    <rect width="5" height="60" x="45" y="20" fill="gainsboro"/> \
    <path d="M 35 24 L 50 24 C 75 24 75 54 50 54 L 35 54" fill="none" stroke="gainsboro" stroke-width="8"/> \
  </svg>');
}

.icon-inventory::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <rect width="14" height="14" x="15" y="15" fill="gainsboro"/> \
    <rect width="14" height="14" x="43" y="15" fill="gainsboro"/> \
    <rect width="14" height="14" x="71" y="15" fill="gainsboro"/> \
    <rect width="14" height="14" x="15" y="43" fill="gainsboro"/> \
    <rect width="14" height="14" x="43" y="43" fill="gainsboro"/> \
    <rect width="14" height="14" x="71" y="43" fill="gainsboro"/> \
    <rect width="14" height="14" x="15" y="71" fill="gainsboro"/> \
    <rect width="14" height="14" x="43" y="71" fill="gainsboro"/> \
    <rect width="14" height="14" x="71" y="71" fill="gainsboro"/> \
  </svg>');
}







.icon-home::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 50 59 C 57 59 58 72 73 70 C 80 69 90 53 97 34 C 83 39 81 31 71 30 C 64 30 56 34 50 34 \
    C 44 34 36 30 29 30 C 19 31 17 39 3 34 C 10 53 20 69 27 70 C 42 72 43 59 50 59 Z \
    M 17 44 Q 38 33 44 52 Q 26 68 17 44 Z \
    M 83 44 Q 74 68 56 52 Q 62 33 83 44 Z" \
    fill="gainsboro"/> \
  </svg>');
}

.icon-search::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="40" cy="40" r="36" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 18 38 Q 22 58 42 62" fill="none" stroke="gainsboro" stroke-width="8"/> \
    <path d="M 38 18 Q 58 22 62 42" fill="none" stroke="gainsboro" stroke-width="8"/> \
    <path d="M 66 66 L 96 96" fill="none" stroke="gainsboro" stroke-width="8"/> \
  </svg>');
}

.icon-collab::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 60 85 Q 70 90 75 80 L 95 40 Q 100 30 90 25 L 70 15 Q 60 10 55 20 L 35 60 Q 30 70 40 75" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 45 20 Q 40 10 30 15 L 10 25 Q 0 30 5 40 L 25 80 Q 30 90 40 85 L 60 75 Q 70 70 65 60 L 55 40" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.icon-error::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 50 30 L 30 10 L 10 30 L 30 50 L 10 70 L 30 90 L 50 70 L 70 90 L 90 70 L 70 50 L 90 30 L 70 10 Z" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.icon-preview::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 5 20 L 22 50 L 5 80 L 21 80 L 38 50 L 21 20 Z" fill="gainsboro" stroke="gainsboro" stroke-width="4"/> \
    <path d="M 34 20 L 51 50 L 34 80 L 50 80 L 67 50 L 50 20 Z" fill="none" stroke="gainsboro" stroke-width="4"/> \
    <path d="M 63 20 L 80 50 L 63 80 L 79 80 L 96 50 L 79 20 Z" fill="none" stroke="gainsboro" stroke-width="4"/> \
  </svg>');
}

.icon-trailer::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 5 20 L 22 50 L 5 80 L 21 80 L 38 50 L 21 20 Z" fill="lightgreen" stroke="lightgreen" stroke-width="4"/> \
    <path d="M 34 20 L 51 50 L 34 80 L 50 80 L 67 50 L 50 20 Z" fill="lightgreen" stroke="lightgreen" stroke-width="4"/> \
    <path d="M 63 20 L 80 50 L 63 80 L 79 80 L 96 50 L 79 20 Z" fill="none" stroke="lightgreen" stroke-width="4"/> \
  </svg>');
}

.icon-unlock::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 5 20 L 22 50 L 5 80 L 21 80 L 38 50 L 21 20 Z" fill="aqua" stroke="aqua" stroke-width="4"/> \
    <path d="M 34 20 L 51 50 L 34 80 L 50 80 L 67 50 L 50 20 Z" fill="aqua" stroke="aqua" stroke-width="4"/> \
    <path d="M 63 20 L 80 50 L 63 80 L 79 80 L 96 50 L 79 20 Z" fill="aqua" stroke="aqua" stroke-width="4"/> \
  </svg>');
}

.icon-category-11::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 45 60 Q 55 85 80 85 Q 70 75 69 60 C 94 60 94 15 69 15 L 31 15 C 6 15 6 60 31 60 Z" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.icon-category-12::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="50" cy="30" r="8" fill="gainsboro"/> \
    <path d="M 50 87 L 70 45 C 82 18 65 7 50 7 C 35 7 18 18 30 45 Z" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.icon-category-21::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="50" cy="28" r="20" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 50 46 L 50 94 M 28 72 L 72 72" fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.icon-category-22::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="36" cy="64" r="20" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 50 50 L 83 17 M 50 17 L 83 17 L 83 50" fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.icon-category-31::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="33" cy="29" r="6" fill="gainsboro"/> \
    <circle cx="80" cy="34" r="6" fill="gainsboro"/> \
    <circle cx="52" cy="72" r="6" fill="gainsboro"/> \
    <path d="M 55 45 Q 28 69 9 33" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 55 45 Q 48 10 89 11" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 55 45 Q 89 57 67 91" fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.icon-category-41::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 50 50 L 50 90 M 50 50 L 15 30 M 50 50 L 85 30" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 50 90 L 85 70 L 85 30 L 50 10 L 15 30 L 15 70 Z" fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.icon-category-42::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 30 38 L 30 83 L 70 83 L 70 38" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 70 58 L 90 43 L 70 13 Q 50 28 30 13 L 10 43 L 30 58" fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}



.icon-gateway-card::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <rect width="92" height="66" x="4" y="17" rx="8" ry="8" fill="%23A5F5FF" stroke="%23000000" stroke-width="6"/> \
    <rect width="86" height="16" x="7" y="32" fill="%23000000"/> \
    <rect width="35" height="10" x="15" y="60" fill="%23000000"/> \
  </svg>');
}

.icon-gateway-paypal::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 42 50 Q 38 50 38 52 L 34 78 L 32 91 Q 31 96 34 96 L 47 96 Q 49 96 50 92 \
    L 53 72 Q 54 68 58 68 L 66 68 C 90 68 99 34 79 25 Q 76 48 55 50 Z" fill="%230070E0"/> \
    <path d="M 55 50 Q 76 48 79 25 Q 76 23 65 22 L 47 22 \
    Q 43 22 42 26 L 38 52 Q 38 50 42 50 Z" fill="%23001C64"/> \
    <path d="M 29 4 Q 26 5 26 7 L 16 73 Q 15 78 20 78 L 34 78 L 38 52 \
    L 42 26 Q 43 22 47 22 L 65 22 Q 76 23 79 25 Q 78 5 56 4 Z" fill="%23003087"/> \
  </svg>');
}

.icon-gateway-crypto::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 50 1 L 15 50 L 50 35 Z" fill="%23FEED5B"/> \
    <path d="M 50 1 L 50 35 L 85 50 Z" fill="%23F48067"/> \
    <path d="M 50 35 L 15 50 L 50 65 Z" fill="%2353BA68"/> \
    <path d="M 50 35 L 50 65 L 85 50 Z" fill="%23A85CA5"/> \
    <path d="M 50 75 L 15 60 L 50 99 Z" fill="%2301B3E2"/> \
    <path d="M 50 75 L 50 99 L 85 60 Z" fill="%236676B9"/> \
  </svg>');
}

.icon-gateway-crypto-usdt::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 20 8 L 0 48 L 50 96 L 100 48 L 80 8 Z" fill="%2321A27C"/> \
    <ellipse cx="50" cy="48" rx="32" ry="8" fill="none" stroke="%23FFFFFF" stroke-width="4"/> \
    <rect width="48" height="12" x="26" y="18" fill="%23FFFFFF"/> \
    <rect width="12" height="20" x="44" y="30" fill="%23FFFFFF"/> \
    <rect width="12" height="24" x="44" y="56" fill="%23FFFFFF"/> \
  </svg>');
}

.icon-gateway-crypto-usdc::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="50" cy="50" r="48" fill="%232671C4"/> \
    <circle cx="50" cy="50" r="36" fill="none" stroke="%23FFFFFF" stroke-width="6"/> \
    <path d="M 62 40 C 50 16 25 45 50 50 C 75 55 50 84 38 60" \
    fill="none" stroke="%23FFFFFF" stroke-width="6"/> \
    <rect width="24" height="15" x="38" y="6" fill="%232671C4"/> \
    <rect width="24" height="15" x="38" y="79" fill="%232671C4"/> \
    <rect width="6" height="8" x="47" y="21" fill="%23FFFFFF"/> \
    <rect width="6" height="8" x="47" y="71" fill="%23FFFFFF"/> \
  </svg>');
}

.icon-gateway-bank::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 95 27 L 50 2 L 5 27 Z" fill="%23EAC4C8"/> \
    <rect width="10" height="30" x="20" y="37" fill="%23EAC4C8"/> \
    <rect width="10" height="30" x="45" y="37" fill="%23EAC4C8"/> \
    <rect width="10" height="30" x="70" y="37" fill="%23EAC4C8"/> \
    <path d="M 95 87 L 85 77 L 15 77 L 5 87 Z" fill="%23EAC4C8"/> \
  </svg>');
}

.icon-gateway-bank-eu::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 84 75 C 74 85 47 86 36 65 L 68 65 L 72 55 L 33 55 \
    Q 32 50 33 45 L 76 45 L 80 35 L 36 35 C 47 14 74 15 84 25 \
    L 88 15 C 60 -1 33 13 25 35 L 12 35  L 8 45 L 23 45 Q 22 50 23 55 \
    L 12 55 L 8 65 L 25 65 C 33 87 60 101 88 85 Z" fill="%23E8B130"/> \
  </svg>');
}

.icon-gateway-bank-ch::before {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <rect width="84" height="84" x="8" y="8" fill="%23DB2415"/> \
    <rect width="60" height="18" x="20" y="41" fill="%23FFFFFF"/> \
    <rect width="18" height="60" x="41" y="20" fill="%23FFFFFF"/> \
  </svg>');
}

























/* ---------------------- archive -------------------- */

.svg-logout {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 48 30 L 48 6 L 4 6 L 4 94 L 48 94 L 48 70 M 28 50 L 93 50 M 70 25 L 95 50 L 70 75" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.svg-options {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 60 40 L 55 22 L 70 7 C 62 -2 30 5 45 45 L 8 82 C -2 92 8 102 18 92 L 55 55 C 95 70 102 38 93 30 L 78 45 Z" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.svg-database {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 87 16 C 87 0 13 0 13 16 C 13 32 87 32 87 16" fill="none" stroke="steelblue" stroke-width="6"/> \
    <path d="M 90 15 C 90 35 10 35 10 15 L 10 28 C 10 48 90 48 90 28 Z" fill="steelblue"/> \
    <path d="M 90 40 C 90 60 10 60 10 40 L 10 56 C 10 76 90 76 90 56 Z" fill="steelblue"/> \
    <path d="M 90 68 C 90 88 10 88 10 68 L 10 84 C 10 104 90 104 90 84 Z" fill="steelblue"/> \
  </svg>');
}

.svg-context {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 35 15 C 15 15 15 15 15 35" fill="none" stroke="steelblue" stroke-width="8"/> \
    <path d="M 15 65 C 15 85 15 85 35 85" fill="none" stroke="steelblue" stroke-width="8"/> \
    <path d="M 65 85 C 85 85 85 85 85 65" fill="none" stroke="steelblue" stroke-width="8"/> \
    <path d="M 85 35 C 85 15 85 15 65 15" fill="none" stroke="steelblue" stroke-width="8"/> \
  </svg>');
}









































.svg-search {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="40" cy="40" r="36" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 18 38 Q 22 58 42 62" fill="none" stroke="gainsboro" stroke-width="8"/> \
    <path d="M 38 18 Q 58 22 62 42" fill="none" stroke="gainsboro" stroke-width="8"/> \
    <path d="M 66 66 L 96 96" fill="none" stroke="gainsboro" stroke-width="8"/> \
  </svg>');
}

.svg-collab {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 60 85 Q 70 90 75 80 L 95 40 Q 100 30 90 25 L 70 15 Q 60 10 55 20 L 35 60 Q 30 70 40 75" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 45 20 Q 40 10 30 15 L 10 25 Q 0 30 5 40 L 25 80 Q 30 90 40 85 L 60 75 Q 70 70 65 60 L 55 40" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.svg-unlock {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 5 20 L 22 50 L 5 80 L 21 80 L 38 50 L 21 20 Z" fill="aqua" stroke="aqua" stroke-width="4"/> \
    <path d="M 34 20 L 51 50 L 34 80 L 50 80 L 67 50 L 50 20 Z" fill="aqua" stroke="aqua" stroke-width="4"/> \
    <path d="M 63 20 L 80 50 L 63 80 L 79 80 L 96 50 L 79 20 Z" fill="aqua" stroke="aqua" stroke-width="4"/> \
  </svg>');
}







.svg-collab-videos {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 5 85 L 75 85 L 75 35 L 5 35 Z" fill="none" stroke="darkorchid" stroke-width="6"/> \
    <path d="M 75 65 L 95 65 L 95 15 L 25 15 L 25 35" fill="none" stroke="darkorchid" stroke-width="6"/> \
    <path d="M 32 72 L 53 60 L 32 48 Z" fill="darkorchid"/> \
  </svg>');
}

.svg-collab-profit {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 5 15 L 5 85 L 95 85" fill="none" stroke="dodgerblue" stroke-width="6"/> \
    <rect width="15" height="15" x="20" y="60" fill="dodgerblue"/> \
    <rect width="15" height="35" x="45" y="40" fill="dodgerblue"/> \
    <rect width="15" height="60" x="70" y="15" fill="dodgerblue"/> \
  </svg>');
}

.svg-collab-payouts {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 5 75 L 95 75 L 95 25 L 5 25 Z" fill="none" stroke="forestgreen" stroke-width="6"/> \
    <path d="M 5 75 L 20 75 Q 20 60 5 60 Z" fill="forestgreen"/> \
    <path d="M 95 75 L 95 60 Q 80 60 80 75 Z" fill="forestgreen"/> \
    <path d="M 95 25 L 80 25 Q 80 40 95 40 Z" fill="forestgreen"/> \
    <path d="M 5 25 L 5 40 Q 20 40 20 25 Z" fill="forestgreen"/> \
    <circle cx="50" cy="50" r="12" fill="forestgreen"/> \
  </svg>');
}

.svg-collab-settings {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 5 30 L 95 30" fill="none" stroke="sandybrown" stroke-width="8"/> \
    <path d="M 5 70 L 95 70" fill="none" stroke="sandybrown" stroke-width="8"/> \
    <circle cx="65" cy="30" r="14" fill="sandybrown"/> \
    <circle cx="35" cy="70" r="14" fill="sandybrown"/> \
  </svg>');
}

.svg-access-actions {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 50 8 L 6 90 L 94 90 Z" fill="none" stroke="darkviolet" stroke-width="6"/> \
    <path d="M 50 43 L 33 75 L 67 75 Z" fill="none" stroke="darkviolet" stroke-width="6"/> \
  </svg>');
}

.svg-access-permissions {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 50 8 L 6 90 L 94 90 Z" fill="none" stroke="darkturquoise" stroke-width="6"/> \
    <path d="M 33 62 L 45 75 L 56 42" fill="none" stroke="darkturquoise" stroke-width="8"/> \
  </svg>');
}

.svg-access-assignments {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 50 8 L 6 90 L 94 90 Z" fill="none" stroke="orange" stroke-width="6"/> \
    <circle cx="50" cy="54" r="12" fill="orange"/> \
    <path d="M 75 90 C 70 65 30 65 25 90 Z" fill="orange"/> \
  </svg>');
}

.svg-producer {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="50" cy="50" r="14" fill="none" stroke="lime" stroke-width="8"/> \
    <path d="M 30 25 L 20 25 Q 10 25 10 35 L 10 70 Q 10 80 20 80 L 80 80 Q 90 80 90 70 L 90 35 Q 90 25 80 25 \
    L 70 25 L 65 15 L 35 15 Z" fill="none" stroke="lime" stroke-width="8"/> \
  </svg>');
}

.svg-category-11 {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 45 60 Q 55 85 80 85 Q 70 75 69 60 C 94 60 94 15 69 15 L 31 15 C 6 15 6 60 31 60 Z" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.svg-category-12 {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="50" cy="30" r="8" fill="gainsboro"/> \
    <path d="M 50 87 L 70 45 C 82 18 65 7 50 7 C 35 7 18 18 30 45 Z" \
    fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.svg-category-21 {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="50" cy="28" r="20" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 50 46 L 50 94 M 28 72 L 72 72" fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.svg-category-22 {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="36" cy="64" r="20" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 50 50 L 83 17 M 50 17 L 83 17 L 83 50" fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.svg-category-31 {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="33" cy="29" r="6" fill="gainsboro"/> \
    <circle cx="80" cy="34" r="6" fill="gainsboro"/> \
    <circle cx="52" cy="72" r="6" fill="gainsboro"/> \
    <path d="M 55 45 Q 28 69 9 33" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 55 45 Q 48 10 89 11" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 55 45 Q 89 57 67 91" fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.svg-category-41 {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 50 50 L 50 90 M 50 50 L 15 30 M 50 50 L 85 30" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 50 90 L 85 70 L 85 30 L 50 10 L 15 30 L 15 70 Z" fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.svg-category-42 {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 30 38 L 30 83 L 70 83 L 70 38" fill="none" stroke="gainsboro" stroke-width="6"/> \
    <path d="M 70 58 L 90 43 L 70 13 Q 50 28 30 13 L 10 43 L 30 58" fill="none" stroke="gainsboro" stroke-width="6"/> \
  </svg>');
}

.svg-down-up-arrow {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 21 10 L 21 61 L 3 61 L 27 97 L 51 61 L 33 61 L 33 10 Z" fill="grey"/> \
    <path d="M 79 90 L 79 39 L 97 39 L 73 3 L 49 39 L 67 39 L 67 90 Z" fill="grey"/> \
  </svg>');
}

.svg-cross {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 15 15 L 85 85 M 85 15 L 15 85" fill="none" stroke="yellow" stroke-width="10"/> \
  </svg>');
}

.svg-bin {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 65 25 L 65 4 L 35 4 L 35 25" fill="none" stroke="yellow" stroke-width="6"/> \
    <path d="M 92 25 C 92 15 8 15 8 25 C 8 35 92 35 92 25" fill="yellow"/> \
    <path d="M 81 44 Q 50 53 19 44 L 26 91 Q 50 101 74 91 Z" fill="none" stroke="yellow" stroke-width="6"/> \
    <path d="M 61 48 L 58 96 M 39 48 L 42 96" fill="none" stroke="yellow" stroke-width="6"/> \
  </svg>');
}

.svg-cog {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 65 87 L 87 35 L 35 13 L 13 65 Z" fill="none" stroke="yellow" stroke-width="10"/> \
    <path d="M 35 87 L 87 65 L 65 13 L 13 35 Z" fill="none" stroke="yellow" stroke-width="10"/> \
  </svg>');
}

.svg-pen {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 97 21 L 79 3 L 69 13 L 87 31 Z" fill="yellow"/> \
    <path d="M 79 39 L 61 21 L 23 59 L 41 77 Z" fill="yellow"/> \
    <path d="M 33 85 L 15 67 L 3 97 Z" fill="yellow"/> \
  </svg>');
}

.svg-plus {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <rect width="76" height="16" x="12" y="42" fill="yellow"/> \
    <rect width="16" height="76" x="42" y="12" fill="yellow"/> \
  </svg>');
}

.svg-minus {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <rect width="76" height="16" x="12" y="42" fill="yellow"/> \
  </svg>');
}

.svg-attached {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 36 28 L 64 56 C 76 68 64 80 52 68 L 16 32 C 0 16 20 -4 36 12 L 84 60 \
    C 104 80 76 108 56 88 L 16 48" fill="none" stroke="green" stroke-width="6"/> \
  </svg>');
}

.svg-hidden {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="50" cy="50" r="12" fill="red"/> \
    <path d="M 5 48 Q 50 100 95 48" fill="none" stroke="red" stroke-width="6"/> \
    <path d="M 95 52 Q 50 0 5 52" fill="none" stroke="red" stroke-width="6"/> \
    <path d="M 20 10 L 80 90" fill="none" stroke="red" stroke-width="6"/> \
  </svg>');
}


.svg-waiting-old {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 27 17 C 27 40 45 40 45 50 C 45 60 27 60 27 83 \
    L 73 83 C 73 60 55 60 55 50 C 55 40 73 40 73 17 Z" fill="purple"/> \
  </svg>');
}

.svg-waiting {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 25 10 C 25 35 45 35 45 50 C 45 65 25 65 25 90 \
    L 75 90 C 75 65 55 65 55 50 C 55 35 75 35 75 10 Z" fill="purple"/> \
  </svg>');
}

.svg-negative {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 24 87 Q 45 39 82 14 M 30 19 Q 45 54 73 73" fill="none" stroke="red" stroke-width="10"/> \
  </svg>');
}

.svg-positive {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 12 49 Q 29 63 38 77 Q 53 39 89 12" fill="none" stroke="green" stroke-width="15"/> \
  </svg>');
}






.svg-gateway-card {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <rect width="92" height="66" x="4" y="17" rx="8" ry="8" fill="%23A5F5FF" stroke="%23000000" stroke-width="6"/> \
    <rect width="86" height="16" x="7" y="32" fill="%23000000"/> \
    <rect width="35" height="10" x="15" y="60" fill="%23000000"/> \
  </svg>');
}

.svg-gateway-paypal {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 42 50 Q 38 50 38 52 L 34 78 L 32 91 Q 31 96 34 96 L 47 96 Q 49 96 50 92 \
    L 53 72 Q 54 68 58 68 L 66 68 C 90 68 99 34 79 25 Q 76 48 55 50 Z" fill="%230070E0"/> \
    <path d="M 55 50 Q 76 48 79 25 Q 76 23 65 22 L 47 22 \
    Q 43 22 42 26 L 38 52 Q 38 50 42 50 Z" fill="%23001C64"/> \
    <path d="M 29 4 Q 26 5 26 7 L 16 73 Q 15 78 20 78 L 34 78 L 38 52 \
    L 42 26 Q 43 22 47 22 L 65 22 Q 76 23 79 25 Q 78 5 56 4 Z" fill="%23003087"/> \
  </svg>');
}

.svg-gateway-crypto {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 50 1 L 15 50 L 50 35 Z" fill="%23FEED5B"/> \
    <path d="M 50 1 L 50 35 L 85 50 Z" fill="%23F48067"/> \
    <path d="M 50 35 L 15 50 L 50 65 Z" fill="%2353BA68"/> \
    <path d="M 50 35 L 50 65 L 85 50 Z" fill="%23A85CA5"/> \
    <path d="M 50 75 L 15 60 L 50 99 Z" fill="%2301B3E2"/> \
    <path d="M 50 75 L 50 99 L 85 60 Z" fill="%236676B9"/> \
  </svg>');
}

.svg-gateway-crypto-usdt {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 20 8 L 0 48 L 50 96 L 100 48 L 80 8 Z" fill="%2321A27C"/> \
    <ellipse cx="50" cy="48" rx="32" ry="8" fill="none" stroke="%23FFFFFF" stroke-width="4"/> \
    <rect width="48" height="12" x="26" y="18" fill="%23FFFFFF"/> \
    <rect width="12" height="20" x="44" y="30" fill="%23FFFFFF"/> \
    <rect width="12" height="24" x="44" y="56" fill="%23FFFFFF"/> \
  </svg>');
}

.svg-gateway-crypto-usdc {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <circle cx="50" cy="50" r="48" fill="%232671C4"/> \
    <circle cx="50" cy="50" r="36" fill="none" stroke="%23FFFFFF" stroke-width="6"/> \
    <path d="M 62 40 C 50 16 25 45 50 50 C 75 55 50 84 38 60" \
    fill="none" stroke="%23FFFFFF" stroke-width="6"/> \
    <rect width="24" height="15" x="38" y="6" fill="%232671C4"/> \
    <rect width="24" height="15" x="38" y="79" fill="%232671C4"/> \
    <rect width="6" height="8" x="47" y="21" fill="%23FFFFFF"/> \
    <rect width="6" height="8" x="47" y="71" fill="%23FFFFFF"/> \
  </svg>');
}

.svg-gateway-bank {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 95 27 L 50 2 L 5 27 Z" fill="%23EAC4C8"/> \
    <rect width="10" height="30" x="20" y="37" fill="%23EAC4C8"/> \
    <rect width="10" height="30" x="45" y="37" fill="%23EAC4C8"/> \
    <rect width="10" height="30" x="70" y="37" fill="%23EAC4C8"/> \
    <path d="M 95 87 L 85 77 L 15 77 L 5 87 Z" fill="%23EAC4C8"/> \
  </svg>');
}

.svg-gateway-bank-eu {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 84 75 C 74 85 47 86 36 65 L 68 65 L 72 55 L 33 55 \
    Q 32 50 33 45 L 76 45 L 80 35 L 36 35 C 47 14 74 15 84 25 \
    L 88 15 C 60 -1 33 13 25 35 L 12 35  L 8 45 L 23 45 Q 22 50 23 55 \
    L 12 55 L 8 65 L 25 65 C 33 87 60 101 88 85 Z" fill="%23E8B130"/> \
  </svg>');
}

.svg-gateway-bank-ch {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <rect width="84" height="84" x="8" y="8" fill="%23DB2415"/> \
    <rect width="60" height="18" x="20" y="41" fill="%23FFFFFF"/> \
    <rect width="18" height="60" x="41" y="20" fill="%23FFFFFF"/> \
  </svg>');
}

.svg-select {
  background-image: url('data:image/svg+xml, \
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
    <path d="M 50 75 L 80 25 L 20 25 Z" fill="yellow"/> \
  </svg>');
}