/* Local Tabler money symbols. Keep currency codes visible beside each decoration. */
.flag-eur,.currency-symbol-eur,.currency-token-eur{--currency-mark:url('/currency-eur.svg')}
.flag-mnt,.currency-symbol-mnt,.currency-token-mnt{--currency-mark:url('/currency-mnt.svg')}
.flag-huf,.currency-symbol-huf,.currency-token-huf{--currency-mark:url('/currency-huf.svg')}

.flag{
  position:relative;
  background:#141a11;
  border-color:#3c4d31;
  color:#afe66e;
  font-size:0;
}
.flag::before,.currency-token::before,.currency-symbol::before{
  content:"";
  display:block;
  width:96%;
  height:96%;
  flex-shrink:0;
  background-color:currentColor;
  -webkit-mask-image:var(--currency-mark);
  mask-image:var(--currency-mark);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  pointer-events:none;
}
.currency-symbol{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:26px;
  height:26px;
  color:#afe66e;
  vertical-align:middle;
  pointer-events:none;
}
.currency-symbol::before{width:100%;height:100%}
.currency-token{
  background:#172011;
  border-color:#405333;
  color:#afe66e;
  font-size:0;
  flex-shrink:0;
}
.currency-options .currency-symbol{
  display:inline-flex;
  width:30px;
  height:30px;
  margin:0;
  color:#a4b598;
}
.currency-options input:checked+span>.currency-symbol{color:#afe66e}
.currency-flow-code{display:inline-flex;align-items:center;gap:9px}
.currency-flow-code .currency-symbol{
  width:29px;
  height:29px;
  border:1px solid #35472a;
  border-radius:50%;
  background:#141c10;
}
.currency-flow-code .currency-symbol::before{width:96%;height:96%}
@media(max-width:540px){
  .currency-options .currency-symbol{display:flex;width:29px;height:29px;margin:0 0 7px}
}
@media(max-width:480px){
  .route-graphic.currency-flow{gap:14px}
  .currency-flow-code{gap:7px}
  .currency-flow-code .currency-symbol{width:24px;height:24px}
}