@font-face {
  font-family: "Gordita";
  src: url("../assets/typo/gordita_regular.woff");
  font-weight: 400;
}
@font-face {
  font-family: "Gordita";
  src: url("../assets/typo/gordita_regular_italic.woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Gordita";
  src: url("../assets/typo/gordita_medium.woff");
  font-weight: 600;
}
@font-face {
  font-family: "Gordita";
  src: url("../assets/typo/gordita_medium_italic.woff");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Gordita";
  src: url("../assets/typo/gordita_bold.woff");
  font-weight: 700;
}
@font-face {
  font-family: "Gordita";
  src: url("../assets/typo/gordita_bold_italic.woff");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Gordita";
  src: url("../assets/typo/gordita_black.woff");
  font-weight: 800;
}
@font-face {
  font-family: "Gordita";
  src: url("../assets/typo/gordita_black_italic.woff");
  font-weight: 800;
  font-style: italic;
}
:root {
  --color-background:243,247,249;
  --color-text:0,0,0;
  --color-text-inverse:255,255,255;
  --color-border:160,168,171;
  --color-tHead:232,234,235;
  --color-button:102,206,245;
  --color-button-inactive:160,168,171;
  --color-button-inactive-text:91, 104, 109;
  --color-label-green:0,240,146;
  --color-label-red:255,0,0;
  --color-label-orange:251,138,32;
  --color-label-purple:151,71,255;
  --color-label-pink:235,87,202;
  --color-label-yellow:251,188,9;
  --color-tag:232,234,235;
  --color-widget-background:255, 255, 255;
  --color-widget-savings:0, 174, 239;
  --color-link-sidebar:91, 104, 109;
  --color-header-text:91, 104, 109;
  --color-alert-disclaimer:255,71,71;
  --font-size:16px;
  --gutter:40px;
  --gap:30px;
  --radius:12px;
  --size-header:82px;
  --width:0;
  --width-sidebar:300px;
  --icon-dashboard:url(../assets/icons/icon-dashboard.svg);
  --icon-reports:url(../assets/icons/icon-reports.svg);
  --icon-savings:url(../assets/icons/icon-savings.svg);
  --icon-config:url(../assets/icons/icon-configuration.svg);
  --icon-invitations:url(../assets/icons/icon-invitation.svg);
  --icon-support:url(../assets/icons/icon-support.svg);
  --icon-support-new: url(../assets/icons/icon-support-new.svg);
  --icon-click:url(../assets/icons/icon-click.svg);
  --icon-money:url(../assets/icons/icon-money-white.svg);
  --icon-refresh:url(../assets/icons/icon-refresh-white.svg);
  --icon-docs:url(../assets/icons/icon-docs-grey.svg);
  --icon-bot:url(../assets/icons/icon-widget-bots.svg);
  --icon-proxy:url(../assets/icons/icon-widget-proxy-users.svg);
  --icon-vpn:url(../assets/icons/icon-widget-vpn-users.svg);
  --icon-crowler:url(../assets/icons/icon-widget-crowler.svg);
  --icon-mobile:url(../assets/icons/icon-mobile.svg);
  --icon-skull:url(../assets/icons/icon-skull.svg);
  --icon-monitor:url(../assets/icons/icon-monitoring.svg);
  --icon-whitelist:url(../assets/icons/icon-whitelist.svg);
  --icon-block:url(../assets/icons/icon-block.svg);
  --icon-config-red:url(../assets/icons/icon-config-red.svg);
  --icon-config-grey:url(../assets/icons/icon-config-grey.svg);
  --icon-download:url(../assets/icons/icon-download.svg);
  --icon-trash:url(../assets/icons/icon-trash-red.svg);
  --icon-close:url(../assets/icons/icon-close-grey.svg);
  --icon-close-white:url(../assets/icons/icon-close-white.svg);
  --icon-filters:url(../assets/icons/icon-filter-grey.svg);
  --icon-calendar:url(../assets/icons/icon-calendar-grey.svg);
  --icon-calendar-white:url(../assets/icons/icon-calendar-white.svg);
  --icon-arrow:url(../assets/icons/icon-arrow-grey.svg);
  --icon-arrow-dropdown:url(../assets/icons/icon-arrow-dropdown.svg);
  --icon-alert:url(../assets/icons/icon-alert.svg);
  --icon-lock-small:url(../assets/icons/icon-lock-small.svg);
  --icon-lock-small-green:url(../assets/icons/icon-lock-small-green.svg);
  --icon-radar:url(../assets/icons/icon-radar-grey.svg);
  --icon-cursor:url(../assets/icons/icon-cursor-grey.svg);
  --icon-search:url(../assets/icons/icon-search-grey.svg);
  --icon-scale:url(../assets/icons/icon-scale-grey.svg);
  --icon-connectivity:url(../assets/icons/icon-conectivity-grey.svg);
  --icon-browser:url(../assets/icons/icon-browser-grey.svg);
  --icon-devices:url(../assets/icons/icon-devices-grey.svg);
  --icon-location:url(../assets/icons/icon-location-grey.svg);
  --icon-header-account:url(../assets/icons/icon-dropdown-account.svg);
  --icon-header-theme:url(../assets/icons/icon-dropdown-dark-theme.svg);
  --icon-header-switch:url(../assets/icons/icon-dropdown-switch-account.svg);
  --icon-header-logout:url(../assets/icons/icon-dropdown-logout.svg);
  --icon-os-windows:url(../assets/icons/icon-os-windows.svg);
  --icon-os-apple:url(../assets/icons/icon-os-apple.svg);
  --icon-os-android:url(../assets/icons/icon-os-android.svg);
  --icon-os-linux:url(../assets/icons/icon-os-ubuntu.svg);
}

html {
  font-family: "Gordita", sans-serif;
  font-size: var(--font-size);
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: rgba(var(--color-background), 1);
  font-family: "Gordita", sans-serif;
  color: rgb(var(--color-text));
  min-height: 100%;
  opacity: 1;
}

* {
  box-sizing: border-box;
}

.fib, .fi {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}

.fi {
  position: relative;
  display: inline-block;
  width: 1.333333em;
  line-height: 1em;
}

.fi:before {
  content: "";
}

.fi.fis {
  width: 1em;
}

.fi-xx::before {
  content: url(../assets/flags/xx.svg);
}

.fi-xx.fis::before {
  content: url(../flags/1x1/xx.svg);
}

.fi-ad::before {
  content: url(../assets/flags/ad.svg);
}

.fi-ad.fis::before {
  content: url(../flags/1x1/ad.svg);
}

.fi-ae::before {
  content: url(../assets/flags/ae.svg);
}

.fi-ae.fis::before {
  content: url(../flags/1x1/ae.svg);
}

.fi-af::before {
  content: url(../assets/flags/af.svg);
}

.fi-af.fis::before {
  content: url(../flags/1x1/af.svg);
}

.fi-ag::before {
  content: url(../assets/flags/ag.svg);
}

.fi-ag.fis::before {
  content: url(../flags/1x1/ag.svg);
}

.fi-ai::before {
  content: url(../assets/flags/ai.svg);
}

.fi-ai.fis::before {
  content: url(../flags/1x1/ai.svg);
}

.fi-al::before {
  content: url(../assets/flags/al.svg);
}

.fi-al.fis::before {
  content: url(../flags/1x1/al.svg);
}

.fi-am::before {
  content: url(../assets/flags/am.svg);
}

.fi-am.fis::before {
  content: url(../flags/1x1/am.svg);
}

.fi-ao::before {
  content: url(../assets/flags/ao.svg);
}

.fi-ao.fis::before {
  content: url(../flags/1x1/ao.svg);
}

.fi-aq::before {
  content: url(../assets/flags/aq.svg);
}

.fi-aq.fis::before {
  content: url(../flags/1x1/aq.svg);
}

.fi-ar::before {
  content: url(../assets/flags/ar.svg);
}

.fi-ar.fis::before {
  content: url(../flags/1x1/ar.svg);
}

.fi-as::before {
  content: url(../assets/flags/as.svg);
}

.fi-as.fis::before {
  content: url(../flags/1x1/as.svg);
}

.fi-at::before {
  content: url(../assets/flags/at.svg);
}

.fi-at.fis::before {
  content: url(../flags/1x1/at.svg);
}

.fi-au::before {
  content: url(../assets/flags/au.svg);
}

.fi-au.fis::before {
  content: url(../flags/1x1/au.svg);
}

.fi-aw::before {
  content: url(../assets/flags/aw.svg);
}

.fi-aw.fis::before {
  content: url(../flags/1x1/aw.svg);
}

.fi-ax::before {
  content: url(../assets/flags/ax.svg);
}

.fi-ax.fis::before {
  content: url(../flags/1x1/ax.svg);
}

.fi-az::before {
  content: url(../assets/flags/az.svg);
}

.fi-az.fis::before {
  content: url(../flags/1x1/az.svg);
}

.fi-ba::before {
  content: url(../assets/flags/ba.svg);
}

.fi-ba.fis::before {
  content: url(../flags/1x1/ba.svg);
}

.fi-bb::before {
  content: url(../assets/flags/bb.svg);
}

.fi-bb.fis::before {
  content: url(../flags/1x1/bb.svg);
}

.fi-bd::before {
  content: url(../assets/flags/bd.svg);
}

.fi-bd.fis::before {
  content: url(../flags/1x1/bd.svg);
}

.fi-be::before {
  content: url(../assets/flags/be.svg);
}

.fi-be.fis::before {
  content: url(../flags/1x1/be.svg);
}

.fi-bf::before {
  content: url(../assets/flags/bf.svg);
}

.fi-bf.fis::before {
  content: url(../flags/1x1/bf.svg);
}

.fi-bg::before {
  content: url(../assets/flags/bg.svg);
}

.fi-bg.fis::before {
  content: url(../flags/1x1/bg.svg);
}

.fi-bh::before {
  content: url(../assets/flags/bh.svg);
}

.fi-bh.fis::before {
  content: url(../flags/1x1/bh.svg);
}

.fi-bi::before {
  content: url(../assets/flags/bi.svg);
}

.fi-bi.fis::before {
  content: url(../flags/1x1/bi.svg);
}

.fi-bj::before {
  content: url(../assets/flags/bj.svg);
}

.fi-bj.fis::before {
  content: url(../flags/1x1/bj.svg);
}

.fi-bl::before {
  content: url(../assets/flags/bl.svg);
}

.fi-bl.fis::before {
  content: url(../flags/1x1/bl.svg);
}

.fi-bm::before {
  content: url(../assets/flags/bm.svg);
}

.fi-bm.fis::before {
  content: url(../flags/1x1/bm.svg);
}

.fi-bn::before {
  content: url(../assets/flags/bn.svg);
}

.fi-bn.fis::before {
  content: url(../flags/1x1/bn.svg);
}

.fi-bo::before {
  content: url(../assets/flags/bo.svg);
}

.fi-bo.fis::before {
  content: url(../flags/1x1/bo.svg);
}

.fi-bq::before {
  content: url(../assets/flags/bq.svg);
}

.fi-bq.fis::before {
  content: url(../flags/1x1/bq.svg);
}

.fi-br::before {
  content: url(../assets/flags/br.svg);
}

.fi-br.fis::before {
  content: url(../flags/1x1/br.svg);
}

.fi-bs::before {
  content: url(../assets/flags/bs.svg);
}

.fi-bs.fis::before {
  content: url(../flags/1x1/bs.svg);
}

.fi-bt::before {
  content: url(../assets/flags/bt.svg);
}

.fi-bt.fis::before {
  content: url(../flags/1x1/bt.svg);
}

.fi-bv::before {
  content: url(../assets/flags/bv.svg);
}

.fi-bv.fis::before {
  content: url(../flags/1x1/bv.svg);
}

.fi-bw::before {
  content: url(../assets/flags/bw.svg);
}

.fi-bw.fis::before {
  content: url(../flags/1x1/bw.svg);
}

.fi-by::before {
  content: url(../assets/flags/by.svg);
}

.fi-by.fis::before {
  content: url(../flags/1x1/by.svg);
}

.fi-bz::before {
  content: url(../assets/flags/bz.svg);
}

.fi-bz.fis::before {
  content: url(../flags/1x1/bz.svg);
}

.fi-ca::before {
  content: url(../assets/flags/ca.svg);
}

.fi-ca.fis::before {
  content: url(../flags/1x1/ca.svg);
}

.fi-cc::before {
  content: url(../assets/flags/cc.svg);
}

.fi-cc.fis::before {
  content: url(../flags/1x1/cc.svg);
}

.fi-cd::before {
  content: url(../assets/flags/cd.svg);
}

.fi-cd.fis::before {
  content: url(../flags/1x1/cd.svg);
}

.fi-cf::before {
  content: url(../assets/flags/cf.svg);
}

.fi-cf.fis::before {
  content: url(../flags/1x1/cf.svg);
}

.fi-cg::before {
  content: url(../assets/flags/cg.svg);
}

.fi-cg.fis::before {
  content: url(../flags/1x1/cg.svg);
}

.fi-ch::before {
  content: url(../assets/flags/ch.svg);
}

.fi-ch.fis::before {
  content: url(../flags/1x1/ch.svg);
}

.fi-ci::before {
  content: url(../assets/flags/ci.svg);
}

.fi-ci.fis::before {
  content: url(../flags/1x1/ci.svg);
}

.fi-ck::before {
  content: url(../assets/flags/ck.svg);
}

.fi-ck.fis::before {
  content: url(../flags/1x1/ck.svg);
}

.fi-cl::before {
  content: url(../assets/flags/cl.svg);
}

.fi-cl.fis::before {
  content: url(../flags/1x1/cl.svg);
}

.fi-cm::before {
  content: url(../assets/flags/cm.svg);
}

.fi-cm.fis::before {
  content: url(../flags/1x1/cm.svg);
}

.fi-cn::before {
  content: url(../assets/flags/cn.svg);
}

.fi-cn.fis::before {
  content: url(../flags/1x1/cn.svg);
}

.fi-co::before {
  content: url(../assets/flags/co.svg);
}

.fi-co.fis::before {
  content: url(../flags/1x1/co.svg);
}

.fi-cr::before {
  content: url(../assets/flags/cr.svg);
}

.fi-cr.fis::before {
  content: url(../flags/1x1/cr.svg);
}

.fi-cu::before {
  content: url(../assets/flags/cu.svg);
}

.fi-cu.fis::before {
  content: url(../flags/1x1/cu.svg);
}

.fi-cv::before {
  content: url(../assets/flags/cv.svg);
}

.fi-cv.fis::before {
  content: url(../flags/1x1/cv.svg);
}

.fi-cw::before {
  content: url(../assets/flags/cw.svg);
}

.fi-cw.fis::before {
  content: url(../flags/1x1/cw.svg);
}

.fi-cx::before {
  content: url(../assets/flags/cx.svg);
}

.fi-cx.fis::before {
  content: url(../flags/1x1/cx.svg);
}

.fi-cy::before {
  content: url(../assets/flags/cy.svg);
}

.fi-cy.fis::before {
  content: url(../flags/1x1/cy.svg);
}

.fi-cz::before {
  content: url(../assets/flags/cz.svg);
}

.fi-cz.fis::before {
  content: url(../flags/1x1/cz.svg);
}

.fi-de::before {
  content: url(../assets/flags/de.svg);
}

.fi-de.fis::before {
  content: url(../flags/1x1/de.svg);
}

.fi-dj::before {
  content: url(../assets/flags/dj.svg);
}

.fi-dj.fis::before {
  content: url(../flags/1x1/dj.svg);
}

.fi-dk::before {
  content: url(../assets/flags/dk.svg);
}

.fi-dk.fis::before {
  content: url(../flags/1x1/dk.svg);
}

.fi-dm::before {
  content: url(../assets/flags/dm.svg);
}

.fi-dm.fis::before {
  content: url(../flags/1x1/dm.svg);
}

.fi-do::before {
  content: url(../assets/flags/do.svg);
}

.fi-do.fis::before {
  content: url(../flags/1x1/do.svg);
}

.fi-dz::before {
  content: url(../assets/flags/dz.svg);
}

.fi-dz.fis::before {
  content: url(../flags/1x1/dz.svg);
}

.fi-ec::before {
  content: url(../assets/flags/ec.svg);
}

.fi-ec.fis::before {
  content: url(../flags/1x1/ec.svg);
}

.fi-ee::before {
  content: url(../assets/flags/ee.svg);
}

.fi-ee.fis::before {
  content: url(../flags/1x1/ee.svg);
}

.fi-eg::before {
  content: url(../assets/flags/eg.svg);
}

.fi-eg.fis::before {
  content: url(../flags/1x1/eg.svg);
}

.fi-eh::before {
  content: url(../assets/flags/eh.svg);
}

.fi-eh.fis::before {
  content: url(../flags/1x1/eh.svg);
}

.fi-er::before {
  content: url(../assets/flags/er.svg);
}

.fi-er.fis::before {
  content: url(../flags/1x1/er.svg);
}

.fi-es::before {
  content: url(../assets/flags/es.svg);
}

.fi-es.fis::before {
  content: url(../flags/1x1/es.svg);
}

.fi-et::before {
  content: url(../assets/flags/et.svg);
}

.fi-et.fis::before {
  content: url(../flags/1x1/et.svg);
}

.fi-fi::before {
  content: url(../assets/flags/fi.svg);
}

.fi-fi.fis::before {
  content: url(../flags/1x1/fi.svg);
}

.fi-fj::before {
  content: url(../assets/flags/fj.svg);
}

.fi-fj.fis::before {
  content: url(../flags/1x1/fj.svg);
}

.fi-fk::before {
  content: url(../assets/flags/fk.svg);
}

.fi-fk.fis::before {
  content: url(../flags/1x1/fk.svg);
}

.fi-fm::before {
  content: url(../assets/flags/fm.svg);
}

.fi-fm.fis::before {
  content: url(../flags/1x1/fm.svg);
}

.fi-fo::before {
  content: url(../assets/flags/fo.svg);
}

.fi-fo.fis::before {
  content: url(../flags/1x1/fo.svg);
}

.fi-fr::before {
  content: url(../assets/flags/fr.svg);
}

.fi-fr.fis::before {
  content: url(../flags/1x1/fr.svg);
}

.fi-ga::before {
  content: url(../assets/flags/ga.svg);
}

.fi-ga.fis::before {
  content: url(../flags/1x1/ga.svg);
}

.fi-gb::before {
  content: url(../assets/flags/gb.svg);
}

.fi-gb.fis::before {
  content: url(../flags/1x1/gb.svg);
}

.fi-gd::before {
  content: url(../assets/flags/gd.svg);
}

.fi-gd.fis::before {
  content: url(../flags/1x1/gd.svg);
}

.fi-ge::before {
  content: url(../assets/flags/ge.svg);
}

.fi-ge.fis::before {
  content: url(../flags/1x1/ge.svg);
}

.fi-gf::before {
  content: url(../assets/flags/gf.svg);
}

.fi-gf.fis::before {
  content: url(../flags/1x1/gf.svg);
}

.fi-gg::before {
  content: url(../assets/flags/gg.svg);
}

.fi-gg.fis::before {
  content: url(../flags/1x1/gg.svg);
}

.fi-gh::before {
  content: url(../assets/flags/gh.svg);
}

.fi-gh.fis::before {
  content: url(../flags/1x1/gh.svg);
}

.fi-gi::before {
  content: url(../assets/flags/gi.svg);
}

.fi-gi.fis::before {
  content: url(../flags/1x1/gi.svg);
}

.fi-gl::before {
  content: url(../assets/flags/gl.svg);
}

.fi-gl.fis::before {
  content: url(../flags/1x1/gl.svg);
}

.fi-gm::before {
  content: url(../assets/flags/gm.svg);
}

.fi-gm.fis::before {
  content: url(../flags/1x1/gm.svg);
}

.fi-gn::before {
  content: url(../assets/flags/gn.svg);
}

.fi-gn.fis::before {
  content: url(../flags/1x1/gn.svg);
}

.fi-gp::before {
  content: url(../assets/flags/gp.svg);
}

.fi-gp.fis::before {
  content: url(../flags/1x1/gp.svg);
}

.fi-gq::before {
  content: url(../assets/flags/gq.svg);
}

.fi-gq.fis::before {
  content: url(../flags/1x1/gq.svg);
}

.fi-gr::before {
  content: url(../assets/flags/gr.svg);
}

.fi-gr.fis::before {
  content: url(../flags/1x1/gr.svg);
}

.fi-gs::before {
  content: url(../assets/flags/gs.svg);
}

.fi-gs.fis::before {
  content: url(../flags/1x1/gs.svg);
}

.fi-gt::before {
  content: url(../assets/flags/gt.svg);
}

.fi-gt.fis::before {
  content: url(../flags/1x1/gt.svg);
}

.fi-gu::before {
  content: url(../assets/flags/gu.svg);
}

.fi-gu.fis::before {
  content: url(../flags/1x1/gu.svg);
}

.fi-gw::before {
  content: url(../assets/flags/gw.svg);
}

.fi-gw.fis::before {
  content: url(../flags/1x1/gw.svg);
}

.fi-gy::before {
  content: url(../assets/flags/gy.svg);
}

.fi-gy.fis::before {
  content: url(../flags/1x1/gy.svg);
}

.fi-hk::before {
  content: url(../assets/flags/hk.svg);
}

.fi-hk.fis::before {
  content: url(../flags/1x1/hk.svg);
}

.fi-hm::before {
  content: url(../assets/flags/hm.svg);
}

.fi-hm.fis::before {
  content: url(../flags/1x1/hm.svg);
}

.fi-hn::before {
  content: url(../assets/flags/hn.svg);
}

.fi-hn.fis::before {
  content: url(../flags/1x1/hn.svg);
}

.fi-hr::before {
  content: url(../assets/flags/hr.svg);
}

.fi-hr.fis::before {
  content: url(../flags/1x1/hr.svg);
}

.fi-ht::before {
  content: url(../assets/flags/ht.svg);
}

.fi-ht.fis::before {
  content: url(../flags/1x1/ht.svg);
}

.fi-hu::before {
  content: url(../assets/flags/hu.svg);
}

.fi-hu.fis::before {
  content: url(../flags/1x1/hu.svg);
}

.fi-id::before {
  content: url(../assets/flags/id.svg);
}

.fi-id.fis::before {
  content: url(../flags/1x1/id.svg);
}

.fi-ie::before {
  content: url(../assets/flags/ie.svg);
}

.fi-ie.fis::before {
  content: url(../flags/1x1/ie.svg);
}

.fi-il::before {
  content: url(../assets/flags/il.svg);
}

.fi-il.fis::before {
  content: url(../flags/1x1/il.svg);
}

.fi-im::before {
  content: url(../assets/flags/im.svg);
}

.fi-im.fis::before {
  content: url(../flags/1x1/im.svg);
}

.fi-in::before {
  content: url(../assets/flags/in.svg);
}

.fi-in.fis::before {
  content: url(../flags/1x1/in.svg);
}

.fi-io::before {
  content: url(../assets/flags/io.svg);
}

.fi-io.fis::before {
  content: url(../flags/1x1/io.svg);
}

.fi-iq::before {
  content: url(../assets/flags/iq.svg);
}

.fi-iq.fis::before {
  content: url(../flags/1x1/iq.svg);
}

.fi-ir::before {
  content: url(../assets/flags/ir.svg);
}

.fi-ir.fis::before {
  content: url(../flags/1x1/ir.svg);
}

.fi-is::before {
  content: url(../assets/flags/is.svg);
}

.fi-is.fis::before {
  content: url(../flags/1x1/is.svg);
}

.fi-it::before {
  content: url(../assets/flags/it.svg);
}

.fi-it.fis::before {
  content: url(../flags/1x1/it.svg);
}

.fi-je::before {
  content: url(../assets/flags/je.svg);
}

.fi-je.fis::before {
  content: url(../flags/1x1/je.svg);
}

.fi-jm::before {
  content: url(../assets/flags/jm.svg);
}

.fi-jm.fis::before {
  content: url(../flags/1x1/jm.svg);
}

.fi-jo::before {
  content: url(../assets/flags/jo.svg);
}

.fi-jo.fis::before {
  content: url(../flags/1x1/jo.svg);
}

.fi-jp::before {
  content: url(../assets/flags/jp.svg);
}

.fi-jp.fis::before {
  content: url(../flags/1x1/jp.svg);
}

.fi-ke::before {
  content: url(../assets/flags/ke.svg);
}

.fi-ke.fis::before {
  content: url(../flags/1x1/ke.svg);
}

.fi-kg::before {
  content: url(../assets/flags/kg.svg);
}

.fi-kg.fis::before {
  content: url(../flags/1x1/kg.svg);
}

.fi-kh::before {
  content: url(../assets/flags/kh.svg);
}

.fi-kh.fis::before {
  content: url(../flags/1x1/kh.svg);
}

.fi-ki::before {
  content: url(../assets/flags/ki.svg);
}

.fi-ki.fis::before {
  content: url(../flags/1x1/ki.svg);
}

.fi-km::before {
  content: url(../assets/flags/km.svg);
}

.fi-km.fis::before {
  content: url(../flags/1x1/km.svg);
}

.fi-kn::before {
  content: url(../assets/flags/kn.svg);
}

.fi-kn.fis::before {
  content: url(../flags/1x1/kn.svg);
}

.fi-kp::before {
  content: url(../assets/flags/kp.svg);
}

.fi-kp.fis::before {
  content: url(../flags/1x1/kp.svg);
}

.fi-kr::before {
  content: url(../assets/flags/kr.svg);
}

.fi-kr.fis::before {
  content: url(../flags/1x1/kr.svg);
}

.fi-kw::before {
  content: url(../assets/flags/kw.svg);
}

.fi-kw.fis::before {
  content: url(../flags/1x1/kw.svg);
}

.fi-ky::before {
  content: url(../assets/flags/ky.svg);
}

.fi-ky.fis::before {
  content: url(../flags/1x1/ky.svg);
}

.fi-kz::before {
  content: url(../assets/flags/kz.svg);
}

.fi-kz.fis::before {
  content: url(../flags/1x1/kz.svg);
}

.fi-la::before {
  content: url(../assets/flags/la.svg);
}

.fi-la.fis::before {
  content: url(../flags/1x1/la.svg);
}

.fi-lb::before {
  content: url(../assets/flags/lb.svg);
}

.fi-lb.fis::before {
  content: url(../flags/1x1/lb.svg);
}

.fi-lc::before {
  content: url(../assets/flags/lc.svg);
}

.fi-lc.fis::before {
  content: url(../flags/1x1/lc.svg);
}

.fi-li::before {
  content: url(../assets/flags/li.svg);
}

.fi-li.fis::before {
  content: url(../flags/1x1/li.svg);
}

.fi-lk::before {
  content: url(../assets/flags/lk.svg);
}

.fi-lk.fis::before {
  content: url(../flags/1x1/lk.svg);
}

.fi-lr::before {
  content: url(../assets/flags/lr.svg);
}

.fi-lr.fis::before {
  content: url(../flags/1x1/lr.svg);
}

.fi-ls::before {
  content: url(../assets/flags/ls.svg);
}

.fi-ls.fis::before {
  content: url(../flags/1x1/ls.svg);
}

.fi-lt::before {
  content: url(../assets/flags/lt.svg);
}

.fi-lt.fis::before {
  content: url(../flags/1x1/lt.svg);
}

.fi-lu::before {
  content: url(../assets/flags/lu.svg);
}

.fi-lu.fis::before {
  content: url(../flags/1x1/lu.svg);
}

.fi-lv::before {
  content: url(../assets/flags/lv.svg);
}

.fi-lv.fis::before {
  content: url(../flags/1x1/lv.svg);
}

.fi-ly::before {
  content: url(../assets/flags/ly.svg);
}

.fi-ly.fis::before {
  content: url(../flags/1x1/ly.svg);
}

.fi-ma::before {
  content: url(../assets/flags/ma.svg);
}

.fi-ma.fis::before {
  content: url(../flags/1x1/ma.svg);
}

.fi-mc::before {
  content: url(../assets/flags/mc.svg);
}

.fi-mc.fis::before {
  content: url(../flags/1x1/mc.svg);
}

.fi-md::before {
  content: url(../assets/flags/md.svg);
}

.fi-md.fis::before {
  content: url(../flags/1x1/md.svg);
}

.fi-me::before {
  content: url(../assets/flags/me.svg);
}

.fi-me.fis::before {
  content: url(../flags/1x1/me.svg);
}

.fi-mf::before {
  content: url(../assets/flags/mf.svg);
}

.fi-mf.fis::before {
  content: url(../flags/1x1/mf.svg);
}

.fi-mg::before {
  content: url(../assets/flags/mg.svg);
}

.fi-mg.fis::before {
  content: url(../flags/1x1/mg.svg);
}

.fi-mh::before {
  content: url(../assets/flags/mh.svg);
}

.fi-mh.fis::before {
  content: url(../flags/1x1/mh.svg);
}

.fi-mk::before {
  content: url(../assets/flags/mk.svg);
}

.fi-mk.fis::before {
  content: url(../flags/1x1/mk.svg);
}

.fi-ml::before {
  content: url(../assets/flags/ml.svg);
}

.fi-ml.fis::before {
  content: url(../flags/1x1/ml.svg);
}

.fi-mm::before {
  content: url(../assets/flags/mm.svg);
}

.fi-mm.fis::before {
  content: url(../flags/1x1/mm.svg);
}

.fi-mn::before {
  content: url(../assets/flags/mn.svg);
}

.fi-mn.fis::before {
  content: url(../flags/1x1/mn.svg);
}

.fi-mo::before {
  content: url(../assets/flags/mo.svg);
}

.fi-mo.fis::before {
  content: url(../flags/1x1/mo.svg);
}

.fi-mp::before {
  content: url(../assets/flags/mp.svg);
}

.fi-mp.fis::before {
  content: url(../flags/1x1/mp.svg);
}

.fi-mq::before {
  content: url(../assets/flags/mq.svg);
}

.fi-mq.fis::before {
  content: url(../flags/1x1/mq.svg);
}

.fi-mr::before {
  content: url(../assets/flags/mr.svg);
}

.fi-mr.fis::before {
  content: url(../flags/1x1/mr.svg);
}

.fi-ms::before {
  content: url(../assets/flags/ms.svg);
}

.fi-ms.fis::before {
  content: url(../flags/1x1/ms.svg);
}

.fi-mt::before {
  content: url(../assets/flags/mt.svg);
}

.fi-mt.fis::before {
  content: url(../flags/1x1/mt.svg);
}

.fi-mu::before {
  content: url(../assets/flags/mu.svg);
}

.fi-mu.fis::before {
  content: url(../flags/1x1/mu.svg);
}

.fi-mv::before {
  content: url(../assets/flags/mv.svg);
}

.fi-mv.fis::before {
  content: url(../flags/1x1/mv.svg);
}

.fi-mw::before {
  content: url(../assets/flags/mw.svg);
}

.fi-mw.fis::before {
  content: url(../flags/1x1/mw.svg);
}

.fi-mx::before {
  content: url(../assets/flags/mx.svg);
}

.fi-mx.fis::before {
  content: url(../flags/1x1/mx.svg);
}

.fi-my::before {
  content: url(../assets/flags/my.svg);
}

.fi-my.fis::before {
  content: url(../flags/1x1/my.svg);
}

.fi-mz::before {
  content: url(../assets/flags/mz.svg);
}

.fi-mz.fis::before {
  content: url(../flags/1x1/mz.svg);
}

.fi-na::before {
  content: url(../assets/flags/na.svg);
}

.fi-na.fis::before {
  content: url(../flags/1x1/na.svg);
}

.fi-nc::before {
  content: url(../assets/flags/nc.svg);
}

.fi-nc.fis::before {
  content: url(../flags/1x1/nc.svg);
}

.fi-ne::before {
  content: url(../assets/flags/ne.svg);
}

.fi-ne.fis::before {
  content: url(../flags/1x1/ne.svg);
}

.fi-nf::before {
  content: url(../assets/flags/nf.svg);
}

.fi-nf.fis::before {
  content: url(../flags/1x1/nf.svg);
}

.fi-ng::before {
  content: url(../assets/flags/ng.svg);
}

.fi-ng.fis::before {
  content: url(../flags/1x1/ng.svg);
}

.fi-ni::before {
  content: url(../assets/flags/ni.svg);
}

.fi-ni.fis::before {
  content: url(../flags/1x1/ni.svg);
}

.fi-nl::before {
  content: url(../assets/flags/nl.svg);
}

.fi-nl.fis::before {
  content: url(../flags/1x1/nl.svg);
}

.fi-no::before {
  content: url(../assets/flags/no.svg);
}

.fi-no.fis::before {
  content: url(../flags/1x1/no.svg);
}

.fi-np::before {
  content: url(../assets/flags/np.svg);
}

.fi-np.fis::before {
  content: url(../flags/1x1/np.svg);
}

.fi-nr::before {
  content: url(../assets/flags/nr.svg);
}

.fi-nr.fis::before {
  content: url(../flags/1x1/nr.svg);
}

.fi-nu::before {
  content: url(../assets/flags/nu.svg);
}

.fi-nu.fis::before {
  content: url(../flags/1x1/nu.svg);
}

.fi-nz::before {
  content: url(../assets/flags/nz.svg);
}

.fi-nz.fis::before {
  content: url(../flags/1x1/nz.svg);
}

.fi-om::before {
  content: url(../assets/flags/om.svg);
}

.fi-om.fis::before {
  content: url(../flags/1x1/om.svg);
}

.fi-pa::before {
  content: url(../assets/flags/pa.svg);
}

.fi-pa.fis::before {
  content: url(../flags/1x1/pa.svg);
}

.fi-pe::before {
  content: url(../assets/flags/pe.svg);
}

.fi-pe.fis::before {
  content: url(../flags/1x1/pe.svg);
}

.fi-pf::before {
  content: url(../assets/flags/pf.svg);
}

.fi-pf.fis::before {
  content: url(../flags/1x1/pf.svg);
}

.fi-pg::before {
  content: url(../assets/flags/pg.svg);
}

.fi-pg.fis::before {
  content: url(../flags/1x1/pg.svg);
}

.fi-ph::before {
  content: url(../assets/flags/ph.svg);
}

.fi-ph.fis::before {
  content: url(../flags/1x1/ph.svg);
}

.fi-pk::before {
  content: url(../assets/flags/pk.svg);
}

.fi-pk.fis::before {
  content: url(../flags/1x1/pk.svg);
}

.fi-pl::before {
  content: url(../assets/flags/pl.svg);
}

.fi-pl.fis::before {
  content: url(../flags/1x1/pl.svg);
}

.fi-pm::before {
  content: url(../assets/flags/pm.svg);
}

.fi-pm.fis::before {
  content: url(../flags/1x1/pm.svg);
}

.fi-pn::before {
  content: url(../assets/flags/pn.svg);
}

.fi-pn.fis::before {
  content: url(../flags/1x1/pn.svg);
}

.fi-pr::before {
  content: url(../assets/flags/pr.svg);
}

.fi-pr.fis::before {
  content: url(../flags/1x1/pr.svg);
}

.fi-ps::before {
  content: url(../assets/flags/ps.svg);
}

.fi-ps.fis::before {
  content: url(../flags/1x1/ps.svg);
}

.fi-pt::before {
  content: url(../assets/flags/pt.svg);
}

.fi-pt.fis::before {
  content: url(../flags/1x1/pt.svg);
}

.fi-pw::before {
  content: url(../assets/flags/pw.svg);
}

.fi-pw.fis::before {
  content: url(../flags/1x1/pw.svg);
}

.fi-py::before {
  content: url(../assets/flags/py.svg);
}

.fi-py.fis::before {
  content: url(../flags/1x1/py.svg);
}

.fi-qa::before {
  content: url(../assets/flags/qa.svg);
}

.fi-qa.fis::before {
  content: url(../flags/1x1/qa.svg);
}

.fi-re::before {
  content: url(../assets/flags/re.svg);
}

.fi-re.fis::before {
  content: url(../flags/1x1/re.svg);
}

.fi-ro::before {
  content: url(../assets/flags/ro.svg);
}

.fi-ro.fis::before {
  content: url(../flags/1x1/ro.svg);
}

.fi-rs::before {
  content: url(../assets/flags/rs.svg);
}

.fi-rs.fis::before {
  content: url(../flags/1x1/rs.svg);
}

.fi-ru::before {
  content: url(../assets/flags/ru.svg);
}

.fi-ru.fis::before {
  content: url(../flags/1x1/ru.svg);
}

.fi-rw::before {
  content: url(../assets/flags/rw.svg);
}

.fi-rw.fis::before {
  content: url(../flags/1x1/rw.svg);
}

.fi-sa::before {
  content: url(../assets/flags/sa.svg);
}

.fi-sa.fis::before {
  content: url(../flags/1x1/sa.svg);
}

.fi-sb::before {
  content: url(../assets/flags/sb.svg);
}

.fi-sb.fis::before {
  content: url(../flags/1x1/sb.svg);
}

.fi-sc::before {
  content: url(../assets/flags/sc.svg);
}

.fi-sc.fis::before {
  content: url(../flags/1x1/sc.svg);
}

.fi-sd::before {
  content: url(../assets/flags/sd.svg);
}

.fi-sd.fis::before {
  content: url(../flags/1x1/sd.svg);
}

.fi-se::before {
  content: url(../assets/flags/se.svg);
}

.fi-se.fis::before {
  content: url(../flags/1x1/se.svg);
}

.fi-sg::before {
  content: url(../assets/flags/sg.svg);
}

.fi-sg.fis::before {
  content: url(../flags/1x1/sg.svg);
}

.fi-sh::before {
  content: url(../assets/flags/sh.svg);
}

.fi-sh.fis::before {
  content: url(../flags/1x1/sh.svg);
}

.fi-si::before {
  content: url(../assets/flags/si.svg);
}

.fi-si.fis::before {
  content: url(../flags/1x1/si.svg);
}

.fi-sj::before {
  content: url(../assets/flags/sj.svg);
}

.fi-sj.fis::before {
  content: url(../flags/1x1/sj.svg);
}

.fi-sk::before {
  content: url(../assets/flags/sk.svg);
}

.fi-sk.fis::before {
  content: url(../flags/1x1/sk.svg);
}

.fi-sl::before {
  content: url(../assets/flags/sl.svg);
}

.fi-sl.fis::before {
  content: url(../flags/1x1/sl.svg);
}

.fi-sm::before {
  content: url(../assets/flags/sm.svg);
}

.fi-sm.fis::before {
  content: url(../flags/1x1/sm.svg);
}

.fi-sn::before {
  content: url(../assets/flags/sn.svg);
}

.fi-sn.fis::before {
  content: url(../flags/1x1/sn.svg);
}

.fi-so::before {
  content: url(../assets/flags/so.svg);
}

.fi-so.fis::before {
  content: url(../flags/1x1/so.svg);
}

.fi-sr::before {
  content: url(../assets/flags/sr.svg);
}

.fi-sr.fis::before {
  content: url(../flags/1x1/sr.svg);
}

.fi-ss::before {
  content: url(../assets/flags/ss.svg);
}

.fi-ss.fis::before {
  content: url(../flags/1x1/ss.svg);
}

.fi-st::before {
  content: url(../assets/flags/st.svg);
}

.fi-st.fis::before {
  content: url(../flags/1x1/st.svg);
}

.fi-sv::before {
  content: url(../assets/flags/sv.svg);
}

.fi-sv.fis::before {
  content: url(../flags/1x1/sv.svg);
}

.fi-sx::before {
  content: url(../assets/flags/sx.svg);
}

.fi-sx.fis::before {
  content: url(../flags/1x1/sx.svg);
}

.fi-sy::before {
  content: url(../assets/flags/sy.svg);
}

.fi-sy.fis::before {
  content: url(../flags/1x1/sy.svg);
}

.fi-sz::before {
  content: url(../assets/flags/sz.svg);
}

.fi-sz.fis::before {
  content: url(../flags/1x1/sz.svg);
}

.fi-tc::before {
  content: url(../assets/flags/tc.svg);
}

.fi-tc.fis::before {
  content: url(../flags/1x1/tc.svg);
}

.fi-td::before {
  content: url(../assets/flags/td.svg);
}

.fi-td.fis::before {
  content: url(../flags/1x1/td.svg);
}

.fi-tf::before {
  content: url(../assets/flags/tf.svg);
}

.fi-tf.fis::before {
  content: url(../flags/1x1/tf.svg);
}

.fi-tg::before {
  content: url(../assets/flags/tg.svg);
}

.fi-tg.fis::before {
  content: url(../flags/1x1/tg.svg);
}

.fi-th::before {
  content: url(../assets/flags/th.svg);
}

.fi-th.fis::before {
  content: url(../flags/1x1/th.svg);
}

.fi-tj::before {
  content: url(../assets/flags/tj.svg);
}

.fi-tj.fis::before {
  content: url(../flags/1x1/tj.svg);
}

.fi-tk::before {
  content: url(../assets/flags/tk.svg);
}

.fi-tk.fis::before {
  content: url(../flags/1x1/tk.svg);
}

.fi-tl::before {
  content: url(../assets/flags/tl.svg);
}

.fi-tl.fis::before {
  content: url(../flags/1x1/tl.svg);
}

.fi-tm::before {
  content: url(../assets/flags/tm.svg);
}

.fi-tm.fis::before {
  content: url(../flags/1x1/tm.svg);
}

.fi-tn::before {
  content: url(../assets/flags/tn.svg);
}

.fi-tn.fis::before {
  content: url(../flags/1x1/tn.svg);
}

.fi-to::before {
  content: url(../assets/flags/to.svg);
}

.fi-to.fis::before {
  content: url(../flags/1x1/to.svg);
}

.fi-tr::before {
  content: url(../assets/flags/tr.svg);
}

.fi-tr.fis::before {
  content: url(../flags/1x1/tr.svg);
}

.fi-tt::before {
  content: url(../assets/flags/tt.svg);
}

.fi-tt.fis::before {
  content: url(../flags/1x1/tt.svg);
}

.fi-tv::before {
  content: url(../assets/flags/tv.svg);
}

.fi-tv.fis::before {
  content: url(../flags/1x1/tv.svg);
}

.fi-tw::before {
  content: url(../assets/flags/tw.svg);
}

.fi-tw.fis::before {
  content: url(../flags/1x1/tw.svg);
}

.fi-tz::before {
  content: url(../assets/flags/tz.svg);
}

.fi-tz.fis::before {
  content: url(../flags/1x1/tz.svg);
}

.fi-ua::before {
  content: url(../assets/flags/ua.svg);
}

.fi-ua.fis::before {
  content: url(../flags/1x1/ua.svg);
}

.fi-ug::before {
  content: url(../assets/flags/ug.svg);
}

.fi-ug.fis::before {
  content: url(../flags/1x1/ug.svg);
}

.fi-um::before {
  content: url(../assets/flags/um.svg);
}

.fi-um.fis::before {
  content: url(../flags/1x1/um.svg);
}

.fi-us::before {
  content: url(../assets/flags/us.svg);
}

.fi-us.fis::before {
  content: url(../flags/1x1/us.svg);
}

.fi-uy::before {
  content: url(../assets/flags/uy.svg);
}

.fi-uy.fis::before {
  content: url(../flags/1x1/uy.svg);
}

.fi-uz::before {
  content: url(../assets/flags/uz.svg);
}

.fi-uz.fis::before {
  content: url(../flags/1x1/uz.svg);
}

.fi-va::before {
  content: url(../assets/flags/va.svg);
}

.fi-va.fis::before {
  content: url(../flags/1x1/va.svg);
}

.fi-vc::before {
  content: url(../assets/flags/vc.svg);
}

.fi-vc.fis::before {
  content: url(../flags/1x1/vc.svg);
}

.fi-ve::before {
  content: url(../assets/flags/ve.svg);
}

.fi-ve.fis::before {
  content: url(../flags/1x1/ve.svg);
}

.fi-vg::before {
  content: url(../assets/flags/vg.svg);
}

.fi-vg.fis::before {
  content: url(../flags/1x1/vg.svg);
}

.fi-vi::before {
  content: url(../assets/flags/vi.svg);
}

.fi-vi.fis::before {
  content: url(../flags/1x1/vi.svg);
}

.fi-vn::before {
  content: url(../assets/flags/vn.svg);
}

.fi-vn.fis::before {
  content: url(../flags/1x1/vn.svg);
}

.fi-vu::before {
  content: url(../assets/flags/vu.svg);
}

.fi-vu.fis::before {
  content: url(../flags/1x1/vu.svg);
}

.fi-wf::before {
  content: url(../assets/flags/wf.svg);
}

.fi-wf.fis::before {
  content: url(../flags/1x1/wf.svg);
}

.fi-ws::before {
  content: url(../assets/flags/ws.svg);
}

.fi-ws.fis::before {
  content: url(../flags/1x1/ws.svg);
}

.fi-ye::before {
  content: url(../assets/flags/ye.svg);
}

.fi-ye.fis::before {
  content: url(../flags/1x1/ye.svg);
}

.fi-yt::before {
  content: url(../assets/flags/yt.svg);
}

.fi-yt.fis::before {
  content: url(../flags/1x1/yt.svg);
}

.fi-za::before {
  content: url(../assets/flags/za.svg);
}

.fi-za.fis::before {
  content: url(../flags/1x1/za.svg);
}

.fi-zm::before {
  content: url(../assets/flags/zm.svg);
}

.fi-zm.fis::before {
  content: url(../flags/1x1/zm.svg);
}

.fi-zw::before {
  content: url(../assets/flags/zw.svg);
}

.fi-zw.fis::before {
  content: url(../flags/1x1/zw.svg);
}

.fi-arab::before {
  content: url(../assets/flags/arab.svg);
}

.fi-arab.fis::before {
  content: url(../flags/1x1/arab.svg);
}

.fi-cefta::before {
  content: url(../assets/flags/cefta.svg);
}

.fi-cefta.fis::before {
  content: url(../flags/1x1/cefta.svg);
}

.fi-cp::before {
  content: url(../assets/flags/cp.svg);
}

.fi-cp.fis::before {
  content: url(../flags/1x1/cp.svg);
}

.fi-dg::before {
  content: url(../assets/flags/dg.svg);
}

.fi-dg.fis::before {
  content: url(../flags/1x1/dg.svg);
}

.fi-eac::before {
  content: url(../assets/flags/eac.svg);
}

.fi-eac.fis::before {
  content: url(../flags/1x1/eac.svg);
}

.fi-es-ct::before {
  content: url(../assets/flags/es-ct.svg);
}

.fi-es-ct.fis::before {
  content: url(../flags/1x1/es-ct.svg);
}

.fi-es-ga::before {
  content: url(../assets/flags/es-ga.svg);
}

.fi-es-ga.fis::before {
  content: url(../flags/1x1/es-ga.svg);
}

.fi-es-pv::before {
  content: url(../assets/flags/es-pv.svg);
}

.fi-es-pv.fis::before {
  content: url(../flags/1x1/es-pv.svg);
}

.fi-eu::before {
  content: url(../assets/flags/eu.svg);
}

.fi-eu.fis::before {
  content: url(../flags/1x1/eu.svg);
}

.fi-gb-eng::before {
  content: url(../assets/flags/gb-eng.svg);
}

.fi-gb-eng.fis::before {
  content: url(../flags/1x1/gb-eng.svg);
}

.fi-gb-nir::before {
  content: url(../assets/flags/gb-nir.svg);
}

.fi-gb-nir.fis::before {
  content: url(../flags/1x1/gb-nir.svg);
}

.fi-gb-sct::before {
  content: url(../assets/flags/gb-sct.svg);
}

.fi-gb-sct.fis::before {
  content: url(../flags/1x1/gb-sct.svg);
}

.fi-gb-wls::before {
  content: url(../assets/flags/gb-wls.svg);
}

.fi-gb-wls.fis::before {
  content: url(../flags/1x1/gb-wls.svg);
}

.fi-ic::before {
  content: url(../assets/flags/ic.svg);
}

.fi-ic.fis::before {
  content: url(../flags/1x1/ic.svg);
}

.fi-pc::before {
  content: url(../assets/flags/pc.svg);
}

.fi-pc.fis::before {
  content: url(../flags/1x1/pc.svg);
}

.fi-sh-ac::before {
  content: url(../assets/flags/sh-ac.svg);
}

.fi-sh-ac.fis::before {
  content: url(../flags/1x1/sh-ac.svg);
}

.fi-sh-hl::before {
  content: url(../assets/flags/sh-hl.svg);
}

.fi-sh-hl.fis::before {
  content: url(../flags/1x1/sh-hl.svg);
}

.fi-sh-ta::before {
  content: url(../assets/flags/sh-ta.svg);
}

.fi-sh-ta.fis::before {
  content: url(../flags/1x1/sh-ta.svg);
}

.fi-un::before {
  content: url(../assets/flags/un.svg);
}

.fi-un.fis::before {
  content: url(../flags/1x1/un.svg);
}

.fi-xk::before {
  content: url(../assets/flags/xk.svg);
}

.fi-xk.fis::before {
  content: url(../flags/1x1/xk.svg);
}

#allWrap {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-items: stretch;
  padding-left: var(--width-sidebar);
  transition: padding 0.3s ease-in-out;
}
#allWrap.registerLogin {
  background-color: white;
  padding-left: 0;
  flex-direction: row;
  padding: var(--gap);
}
#allWrap.registerLogin > [data-grid] {
  width: 100%;
}
#allWrap.registerLogin > [data-grid] .col:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1039px) {
  #allWrap.registerLogin > [data-grid] {
    grid-template-columns: 1fr;
  }
  #allWrap.registerLogin > [data-grid] .col:last-child {
    display: none;
  }
  #allWrap.registerLogin > [data-grid] [data-width="6"] {
    grid-column: span 1;
  }
}
@media (max-width: 349px) {
  #allWrap.registerLogin form p[data-horizontal][data-horizontal*=space] {
    font-size: 14px;
    align-items: center;
  }
}

#sidebar {
  width: var(--width-sidebar);
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: var(--gutter);
  border-right: solid 1px rgba(var(--color-border), 0.24);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#theContent {
  width: 100%;
  min-height: 100%;
  flex: 1;
  padding: var(--gutter);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  position: relative;
  align-items: start;
}
#theContent #pageContent {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
#theContent #pageContent[data-grid] {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
#theContent #pageContent[data-grid] [data-width="2"] {
  grid-column: span 2;
}
#theContent #pageContent[data-grid] [data-width="3"] {
  grid-column: span 3;
}
#theContent #pageContent[data-grid] [data-width="4"] {
  grid-column: span 4;
}
#theContent #pageContent[data-grid] [data-width="5"] {
  grid-column: span 5;
}
#theContent #pageContent[data-grid] [data-width="6"] {
  grid-column: span 6;
}
#theContent #pageContent[data-grid] [data-width="7"] {
  grid-column: span 7;
}
#theContent #pageContent[data-grid] [data-width="8"] {
  grid-column: span 8;
}
#theContent #pageContent[data-grid] [data-width="9"] {
  grid-column: span 9;
}
#theContent #pageContent[data-grid] [data-width="10"] {
  grid-column: span 10;
}
#theContent #pageContent[data-grid] [data-width="11"] {
  grid-column: span 11;
}
#theContent #pageContent[data-grid] [data-width="12"] {
  grid-column: span 12;
}
#theContent #pageContent[data-grid] [data-flex] {
  display: flex;
  gap: var(--gap);
}
#theContent #pageContent[data-grid] [data-flex][data-flex=column] {
  flex-direction: column;
}

.notifications {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) / 3);
  padding: var(--gap) var(--gutter) 0;
}

[data-grid] {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
[data-grid] [data-width="2"] {
  grid-column: span 2;
}
[data-grid] [data-width="3"] {
  grid-column: span 3;
}
[data-grid] [data-width="4"] {
  grid-column: span 4;
}
[data-grid] [data-width="5"] {
  grid-column: span 5;
}
[data-grid] [data-width="6"] {
  grid-column: span 6;
}
[data-grid] [data-width="7"] {
  grid-column: span 7;
}
[data-grid] [data-width="8"] {
  grid-column: span 8;
}
[data-grid] [data-width="9"] {
  grid-column: span 9;
}
[data-grid] [data-width="10"] {
  grid-column: span 10;
}
[data-grid] [data-width="11"] {
  grid-column: span 11;
}
[data-grid] [data-width="12"] {
  grid-column: span 12;
}
[data-grid] [data-flex] {
  display: flex;
  gap: var(--gap);
}
[data-grid] [data-flex][data-flex=column] {
  flex-direction: column;
}
@media (max-width: 880px) {
  [data-grid] [data-width="9"] {
    grid-column: span 12;
  }
}
@media (max-width: 639px) {
  [data-grid] {
    grid-template-columns: 1fr 1fr;
  }
  [data-grid] [data-width="4"],
  [data-grid] [data-width="5"],
  [data-grid] [data-width="7"],
  [data-grid] [data-width="9"],
  [data-grid] [data-width="12"] {
    grid-column: span 2;
  }
}

#allWrap #sidebar {
  position: fixed;
  z-index: 11;
  left: 0;
  top: 0;
  transition: left 0.2s ease-in-out;
  background-color: rgba(var(--color-background), 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

@media (max-width: 1275px) {
  #allWrap {
    padding-left: 0;
    transition: padding 0.3s ease-in-out;
  }
  #allWrap #sidebar {
    left: -100%;
    transition: left 0.3s ease-in-out;
  }
  #allWrap #sidebar.active {
    --width-sidebar:270px;
    left: 0;
  }
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

h2, h3, h4, h5 {
  font-weight: 600;
}

h1 {
  font-size: 2.25rem;
}

h2 {
  font-size: 1.875rem;
}

h3 {
  font-size: 1.6rem;
}

h4 {
  font-size: 1.312rem;
}

h5 {
  font-size: 1.1rem;
}

p {
  margin: 0;
  padding: 0;
}

b {
  font-weight: 600;
}

[data-text*=small] {
  font-size: 0.8125rem;
}

[data-text*=grey] {
  color: rgb(var(--color-border));
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

ol {
  counter-reset: item;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
ol li {
  display: flex;
  flex-direction: row;
  gap: 5px;
}
ol li::before {
  counter-increment: item;
  content: counter(item, decimal-leading-zero);
  color: rgb(var(--color-border));
}

a {
  color: inherit;
  text-decoration: none;
}
a.delete {
  color: rgb(var(--color-alert-disclaimer));
  display: inline-flex;
  flex-direction: row;
  gap: calc(var(--gap) / 3);
}
a.delete::after {
  content: var(--icon-trash);
}

form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap));
  margin: 0;
}
form p {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--gap) / 3);
}
form p[data-horizontal] {
  flex-direction: row;
}
form p[data-horizontal][data-horizontal*=space] {
  justify-content: space-between;
}

input:not([type=range], [type=checkbox], [type=radio]) {
  appearance: none;
  width: 100%;
  border: none;
  min-height: 40px;
  border-radius: 50px;
  font-family: "Gordita", sans-serif;
  font-size: 0.875rem;
  color: rgb(var(--color-text), 1);
  box-shadow: none;
  outline: 0;
  padding: 12px calc(var(--gap) / 2);
}
input:not([type=range], [type=checkbox], [type=radio])::placeholder {
  color: rgba(var(--color-text), 0.36);
}
input:not([type=range], [type=checkbox], [type=radio]):not(input[type=submit]) {
  border: solid 1px rgba(var(--color-border), 0.5);
}
input:not([type=range], [type=checkbox], [type=radio]):not(input[type=submit]):focus, input:not([type=range], [type=checkbox], [type=radio]):not(input[type=submit]):focus-within {
  appearance: none;
  border: solid 1px rgba(var(--color-border), 1);
}
input:not([type=range], [type=checkbox], [type=radio]):not(input[type=submit]):focus::placeholder, input:not([type=range], [type=checkbox], [type=radio]):not(input[type=submit]):focus-within::placeholder {
  opacity: 0;
}
.inputWrap input:not([type=range], [type=checkbox], [type=radio]):not(input[type=submit]) {
  border: none;
  min-height: auto;
  padding: 0;
  border-radius: 0;
}
input:not([type=range], [type=checkbox], [type=radio])[type=submit] {
  background-color: rgb(var(--color-button));
  font-weight: 600;
  font-size: 0.875rem;
  color: rgb(var(--color-text-inverse));
  justify-content: center;
}
input:not([type=range], [type=checkbox], [type=radio])[type=submit]:hover {
  cursor: pointer;
}
input:not([type=range], [type=checkbox], [type=radio])[type=submit][data-props*=outline] {
  border: solid 1px rgba(var(--color-border), 0.5);
  background-color: transparent;
  color: rgb(var(--color-text));
}
input:not([type=range], [type=checkbox], [type=radio])[data-icon], input:not([type=range], [type=checkbox], [type=radio])[type=search] {
  background-repeat: no-repeat;
  background-position: center left calc(var(--gap) / 2);
  padding-left: calc(var(--gap) + 10px);
}
input:not([type=range], [type=checkbox], [type=radio])[data-icon][data-icon=user], input:not([type=range], [type=checkbox], [type=radio])[type=search][data-icon=user] {
  background-image: url(../assets/icons/icon-user.svg);
}
input:not([type=range], [type=checkbox], [type=radio])[data-icon][data-icon=mail], input:not([type=range], [type=checkbox], [type=radio])[type=search][data-icon=mail] {
  background-image: url(../assets/icons/icon-mail.svg);
}
input:not([type=range], [type=checkbox], [type=radio])[data-icon][data-icon=password], input:not([type=range], [type=checkbox], [type=radio])[type=search][data-icon=password] {
  background-image: url(../assets/icons/icon-password.svg);
}
input:not([type=range], [type=checkbox], [type=radio])[data-icon][data-icon=globe], input:not([type=range], [type=checkbox], [type=radio])[type=search][data-icon=globe] {
  background-image: url(../assets/icons/icon-globe-grey.svg);
}
input:not([type=range], [type=checkbox], [type=radio])[type=number] {
  -moz-appearance: textfield;
}
input:not([type=range], [type=checkbox], [type=radio])[type=number]::-webkit-outer-spin-button, input:not([type=range], [type=checkbox], [type=radio])[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=checkbox] {
  position: relative;
  appearance: none;
  width: 16px;
  height: 16px;
  border: solid 1px rgba(var(--color-border), 0.5);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
input[type=checkbox]:hover {
  cursor: pointer;
  background-color: rgba(var(--color-border), 0.12);
}
input[type=checkbox]:checked {
  background-color: rgb(var(--color-button));
  border: solid 1px rgb(var(--color-button));
}
input[type=checkbox]:checked::before {
  content: "";
  width: 8px;
  height: 2px;
  background-color: rgb(var(--color-text-inverse));
  border-radius: 2px;
}
input[type=checkbox][data-input=switch] {
  width: 48px;
  height: 24px;
  min-width: 48px;
  max-width: 48px;
  border-radius: 12px;
  padding: 2px;
  background-color: rgba(var(--color-border), 0.24);
  border: none;
  transition: all 0.15s ease;
}
input[type=checkbox][data-input=switch]::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: rgb(var(--color-text-inverse));
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  transition: all 0.15s ease;
}
input[type=checkbox][data-input=switch]:checked {
  background-color: rgb(var(--color-button));
  transition: all 0.15s ease;
}
input[type=checkbox][data-input=switch]:checked::before {
  left: 26px;
  transition: all 0.15s ease;
}
input[type=radio] {
  position: relative;
  appearance: none;
  width: 16px;
  height: 16px;
  min-height: auto;
  padding: 0;
  border: solid 1px rgba(var(--color-border), 0.5);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
input[type=radio]:hover {
  cursor: pointer;
  background-color: rgba(var(--color-border), 0.12);
}
input[type=radio]:checked {
  background-color: rgb(var(--color-button));
  border: solid 1px rgb(var(--color-button));
}
input[type=radio]:checked::before {
  content: "";
  width: 8px;
  height: 8px;
  background-color: rgb(var(--color-text-inverse));
  border-radius: 6px;
}
input[type=search] {
  background-image: url(../assets/icons/icon-search-grey.svg);
}
input[type=range] {
  -webkit-appearance: none;
  padding: 0;
  appearance: none;
  width: 200px;
  max-width: 200px;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  height: 4px;
  min-height: auto;
  background: rgba(var(--color-border), 0.24);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 12px;
  width: 12px;
  background-color: rgb(var(--color-widget-savings));
  border-radius: 50%;
  border: none;
  transition: 0.2s ease-in-out;
}
input[type=range]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 5px rgba(var(--color-button), 0.2);
}
input[type=range]::-moz-range-thumb {
  height: 12px;
  width: 12px;
  background-color: rgb(var(--color-widget-savings));
  border-radius: 50%;
  border: none;
  transition: 0.2s ease-in-out;
}
input[type=range]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 5px rgba(var(--color-button), 0.2);
}
input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(var(--color-widget-savings), 0.2);
}
input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 0 0 5px rgba(var(--color-widget-savings), 0.2);
}

button {
  border: none;
  min-height: 40px;
  min-width: 90px;
  padding: 0.625rem 1.25rem;
  border-radius: 50px;
  font-family: "Gordita", sans-serif;
  font-size: 0.875rem;
  display: flex;
  flex-direction: row;
  gap: calc(var(--gap) / 2);
  align-items: center;
  justify-items: center;
  appearance: none;
  background-color: rgb(var(--color-button));
  font-weight: 600;
  font-size: 0.875rem;
  color: rgb(var(--color-text-inverse));
  justify-content: center;
  align-self: start;
}
button:hover {
  cursor: pointer;
}
button[data-button=outline] {
  border: solid 1px rgba(var(--color-border), 0.5);
  background-color: transparent;
  color: rgb(var(--color-text));
}
button[data-button=outline][data-icon=google]::before {
  content: url(../assets/icons/icon-google.svg);
}
button[data-button=inactive] {
  color: rgb(var(--color-button-inactive-text));
  background-color: rgba(var(--color-button-inactive), 0.15);
}
button[data-button*=red] {
  background-color: rgb(var(--color-label-red));
}
button[data-button*=red][data-button*=outline] {
  background-color: transparent;
  border: solid 1px rgb(var(--color-label-red));
  color: rgb(var(--color-label-red));
}
button[data-button*=green] {
  background-color: rgb(var(--color-label-green));
}
button:disabled:hover {
  cursor: default;
}

label {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}

select {
  appearance: none;
  width: 100%;
  border: none;
  min-height: 40px;
  border-radius: 50px;
  font-family: "Gordita", sans-serif;
  font-size: 0.875rem;
  color: rgb(var(--color-text), 1);
  box-shadow: none;
  outline: 0;
  padding: 12px calc(var(--gap) / 2);
  border: solid 1px rgba(var(--color-border), 0.5);
  background-image: url("../assets/icons/icon-arrow-select.svg");
  background-repeat: no-repeat;
  background-position: center right calc(var(--gap) / 2);
  min-width: 60px;
}

textarea {
  appearance: none;
  width: 100%;
  border: none;
  border-radius: 1rem;
  font-family: "Gordita", sans-serif;
  font-size: 0.875rem;
  color: rgb(var(--color-text), 1);
  box-shadow: none;
  outline: 0;
  border: solid 1px rgba(var(--color-border), 0.5);
  padding: calc(var(--gap) / 2);
  min-height: 110px;
  overflow: auto;
  resize: none;
}

.inputWrap {
  padding: 12px calc(var(--gap) / 2);
  border: solid 1px rgba(var(--color-border), 0.5);
  display: flex;
  flex-direction: row;
  gap: calc(var(--gap) / 3);
  min-height: 40px;
  border-radius: 50px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-weight: 400;
}
table thead tr:last-child td {
  border-bottom: none;
}
table tr {
  padding-left: 20px;
  padding-right: 20px;
}
table th {
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  color: rgb(var(--color-header-text));
  background-color: rgb(var(--color-tHead));
  text-align: left;
  letter-spacing: 0.3;
  height: 3rem;
}
table th:nth-of-type(1) {
  border-radius: var(--radius) 0 0 var(--radius);
  padding-left: 20px;
}
table th:nth-last-of-type(1) {
  border-radius: 0 var(--radius) var(--radius) 0;
  text-align: center;
  padding-right: 20px;
}
table td {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: solid 1px rgba(var(--color-border), 0.15);
}
table td:nth-of-type(1) {
  padding-left: 20px;
}
table td:nth-last-of-type(1) {
  padding-right: 20px;
}
table td[data-type=error] {
  color: rgb(var(--color-alert-disclaimer));
}
table th:nth-last-child(1), table td:nth-last-child(1) {
  text-align: right;
}
table[data-table*=last-blue] tbody td:nth-last-child(1) {
  color: rgb(var(--color-button));
}

.button {
  border: none;
  min-height: 40px;
  min-width: 90px;
  padding: 0.625rem 1.25rem;
  border-radius: 50px;
  font-family: "Gordita", sans-serif;
  font-size: 0.875rem;
  display: inline-flex;
  flex-direction: row;
  gap: calc(var(--gap) / 2);
  align-items: center;
  justify-items: center;
  appearance: none;
  background-color: rgb(var(--color-button));
  font-weight: 600;
  font-size: 0.875rem;
  color: rgb(var(--color-text-inverse));
  justify-content: center;
}
.button:hover {
  cursor: pointer;
}
.button[data-button*=outline] {
  border: solid 1px rgba(var(--color-border), 0.5);
  background-color: transparent;
  color: rgb(var(--color-text));
}
.button[data-button=inactive] {
  color: rgb(var(--color-button-inactive-text));
  background-color: rgba(var(--color-button-inactive), 0.15);
}
.button[data-button=download] {
  padding: 0;
  margin: 0;
  width: auto;
  min-width: auto;
  min-height: auto;
  background-color: transparent;
}
.button[data-button=download]::before {
  content: url(../assets/icons/icon-download.svg);
}
.button[data-button*=icon] {
  min-width: auto;
  min-height: auto;
  width: 40px;
  height: 40px;
  padding: 0;
}
.button[data-icon=google]::before {
  content: url(../assets/icons/icon-google.svg);
}
.button[data-icon=arrowBack]::before {
  content: url(../assets/icons/icon-back.svg);
}

.clickThreshold {
  border-spacing: calc(var(--gap) / 3);
  border-collapse: initial;
  font-size: 0.875rem;
  padding: calc(var(--gap) / 3);
  border: solid 1px rgba(var(--color-border), 0.24);
  border-radius: var(--radius);
}
li .clickThreshold {
  margin-top: calc(var(--gap) / 2);
}
.clickThreshold th, .clickThreshold td {
  padding: 0;
  border: none;
}
.clickThreshold th:nth-child(2), .clickThreshold td:nth-child(2) {
  max-width: 150px;
}
.clickThreshold th:first-child, .clickThreshold th:nth-child(3), .clickThreshold th:nth-last-child(1), .clickThreshold td:first-child, .clickThreshold td:nth-child(3), .clickThreshold td:nth-last-child(1) {
  width: 1%;
  white-space: nowrap;
}
.clickThreshold th:nth-last-child(3), .clickThreshold td:nth-last-child(3) {
  max-width: 90px;
}
.clickThreshold .buttonsWrap {
  border-top: solid 1px rgba(var(--color-border), 0.24);
  padding-top: calc(var(--gap) / 2);
  margin-top: 5px;
}

#sidebar .logo {
  flex: 0;
  align-self: center;
  padding: 0;
}
#sidebar a {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  color: rgb(var(--color-link-sidebar));
  align-items: center;
  padding: 1.125rem;
  border-radius: var(--radius);
}
#sidebar a[data-icon=dashboard]::before {
  content: var(--icon-dashboard);
}
#sidebar a[data-icon=reports]::before {
  content: var(--icon-reports);
}
#sidebar a[data-icon=savings]::before {
  content: var(--icon-savings);
}
#sidebar a[data-icon=config]::before {
  content: var(--icon-config);
}
#sidebar a[data-icon=invitations]::before {
  content: var(--icon-invitations);
}
#sidebar a[data-icon=support]::before {
  content: var(--icon-support);
}
#sidebar a[data-icon=support-new]::before {
  content: var(--icon-support-new);
}
#sidebar > .menu,
#sidebar > .support {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
#sidebar > .menu a,
#sidebar > .support a {
  transition: background-color 0.2s ease;
}
#sidebar > .menu a:hover,
#sidebar > .support a:hover {
  background-color: rgba(var(--color-link-sidebar), 0.05);
  transition: background-color 0.2s ease;
}
#sidebar > .menu a.active,
#sidebar > .support a.active {
  background-color: rgba(var(--color-widget-background), 1);
}
#sidebar > .menu .active a,
#sidebar > .support .active a {
  background-color: rgba(var(--color-widget-background), 1);
}
@media (max-width: 1275px) {
  #sidebar {
    border-right: none;
  }
  #sidebar .logo {
    min-width: 22px;
    min-height: 22px;
    position: relative;
    margin-left: auto;
    transform: rotate(45deg);
  }
  #sidebar .logo::before {
    width: 2px;
    height: 22px;
    left: 50%;
    transform: translateX(-50%);
  }
  #sidebar .logo::after {
    width: 22px;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  #sidebar .logo::before, #sidebar .logo::after {
    position: absolute;
    background-color: rgb(var(--color-border));
    border-radius: 2px;
    display: block;
    content: "";
  }
  #sidebar .logo svg {
    display: none;
  }
}

#header {
  width: 100%;
  height: var(--size-header);
  padding: var(--gutter) var(--gutter) 0.66rem var(--gutter);
  display: flex;
  flex-direction: row;
  gap: calc(var(--gap) / 2);
  align-items: center;
  justify-content: space-between;
  background-color: rgba(var(--color-background), 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 10;
  align-items: center;
}
#header .trigger, #header .logo {
  display: none;
}
#header .trigger {
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 18px;
}
#header .trigger span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: rgb(var(--color-border));
}
#header .trigger span:nth-child(2) {
  width: 75%;
}
#header h4 {
  text-transform: capitalize;
  flex: 1;
}
#header .userName {
  color: rgb(var(--color-header-text));
}
#header .--savings {
  align-self: center;
}
#header .userMenu {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
#header .userMenu::after {
  content: url(../assets/icons/icon-arrow-dropdown.svg);
}
#header .userMenu > img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 20px;
}
#header .userMenu > ul {
  position: absolute;
  top: calc(100% + var(--gap) / 2);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 1.25rem;
  background-color: white;
  border-radius: var(--radius);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: collapse;
  transform: translateY(-20px);
  transition: transform 0.3s ease, opacity 0.2s ease, visibility 0s ease 0.3s;
}
#header .userMenu > ul li {
  border-bottom: solid 1px rgba(var(--color-border), 0.24);
  padding: 1.25rem 0;
}
#header .userMenu > ul li:nth-last-of-type(1) {
  border-bottom: transparent;
}
#header .userMenu > ul li > a {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  transition: opacity 0.2s ease;
  width: max-content;
}
#header .userMenu > ul li > a[data-icon=account]::before {
  content: var(--icon-header-account);
}
#header .userMenu > ul li > a[data-icon=theme]::before {
  content: var(--icon-header-theme);
}
#header .userMenu > ul li > a[data-icon=switch]::before {
  content: var(--icon-header-switch);
}
#header .userMenu > ul li > a[data-icon=logout]::before {
  content: var(--icon-header-logout);
}
#header .userMenu > ul a {
  color: rgb(var(--color-header-text));
}
#header .userMenu > ul:hover li a {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
#header .userMenu > ul:hover li:hover a {
  opacity: 1;
  transition: opacity 0.2s ease;
}
#header .userMenu:hover {
  cursor: pointer;
}
#header .userMenu.active::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: calc(var(--gap) / 2);
  transform: translateY(100%);
}
#header .userMenu.active ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: transform 0.3s ease, opacity 0.2s ease, visibility 0s ease;
}
@media (max-width: 1275px) {
  #header h4 {
    display: none;
  }
  #header .trigger {
    display: flex;
  }
  #header .logo {
    display: block;
  }
  #header .userName {
    margin-left: auto;
  }
}
@media (max-width: 715px) {
  #header .userName,
  #header .--savings {
    display: none;
  }
  #header .userMenu {
    margin-left: auto;
  }
}
@media (max-width: 460px) {
  #header {
    padding: 0 var(--gutter);
  }
}
@media (max-width: 340px) {
  #header .userMenu {
    gap: 5px;
  }
  #header .logo svg {
    width: 150px;
    height: auto;
  }
}

#filters {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: calc(var(--gap) / 2);
  position: relative;
  z-index: 4;
}
#filters .dateFilter,
#filters .campaignFilter {
  position: relative;
}
#filters .dateFilter > span,
#filters .campaignFilter > span {
  min-width: 100px;
  min-height: 40px;
  padding: 0.75rem 1.25rem;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--color-header-text));
  background-color: rgba(var(--color-border), 0.15);
  transition: background-color 0.15s ease;
  position: relative;
}
#filters .dateFilter > span:hover,
#filters .campaignFilter > span:hover {
  cursor: pointer;
  background-color: rgba(var(--color-border), 0.24);
  transition: background-color 0.15s ease;
}
#filters .dateFilter .wrap,
#filters .campaignFilter .wrap {
  position: absolute;
  top: calc(100% + var(--gap) / 2);
  max-width: 750px;
  width: 100vw;
  background-color: rgb(var(--color-widget-background));
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06);
  padding: var(--gap);
  border-radius: var(--radius);
  display: flex;
  opacity: 0;
  visibility: collapse;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s ease 0.2s;
}
#filters .dateFilter.active,
#filters .campaignFilter.active {
  z-index: 2;
}
#filters .dateFilter.active > span,
#filters .campaignFilter.active > span {
  color: rgb(var(--color-text-inverse));
  background-color: rgb(var(--color-button));
}
#filters .dateFilter .closeTrigger,
#filters .campaignFilter .closeTrigger {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background-color: rgba(var(--color-border), 0.15);
  transform: rotate(45deg);
  display: none;
}
#filters .dateFilter .closeTrigger:hover,
#filters .campaignFilter .closeTrigger:hover {
  cursor: pointer;
}
#filters .dateFilter .closeTrigger::before, #filters .dateFilter .closeTrigger::after,
#filters .campaignFilter .closeTrigger::before,
#filters .campaignFilter .closeTrigger::after {
  content: "";
  width: 2px;
  height: 20px;
  background-color: rgb(var(--color-border));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#filters .dateFilter .closeTrigger::after,
#filters .campaignFilter .closeTrigger::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
#filters .dateFilter > span::after {
  content: "";
  width: 14px;
  height: 10px;
  background-image: var(--icon-arrow-dropdown);
  background-position: center;
  background-repeat: no-repeat;
}
#filters .dateFilter .wrap {
  flex-direction: column;
  gap: calc(var(--gap) / 2);
  transform: translateY(20px);
  transition: visibility 0s ease, opacity 0.2s ease, transform 0.2s ease;
}
#filters .dateFilter .wrap > div {
  width: 100%;
  border-bottom: solid 1px rgba(var(--color-border), 0.24);
}
#filters .dateFilter .wrap footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}
#filters .dateFilter .wrap footer .date {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgb(var(--color-button-inactive-text));
  background-color: rgba(var(--color-border), 0.15);
  padding: 0 15px;
  border-radius: 50px;
  min-height: 30px;
  font-size: 0.875rem;
  font-weight: 600;
}
#filters .dateFilter .wrap footer .date span:nth-of-type(2) {
  display: flex;
  gap: 10px;
  align-items: center;
}
#filters .dateFilter .wrap footer .date span:nth-of-type(2)::before {
  content: var(--icon-arrow);
  transform: rotate(90deg);
}
#filters .dateFilter .wrap footer button:first-of-type {
  margin-left: auto;
}
#filters .dateFilter.active > span::after {
  background-image: var(--icon-close-white);
}
#filters .dateFilter.active .wrap {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: visibility 0s ease, opacity 0.2s ease, transform 0.2s ease;
}
#filters .campaignFilter > span::before {
  content: "";
  width: 14px;
  height: 10px;
  background-image: var(--icon-filters);
  background-repeat: no-repeat;
  background-position: center center;
}
#filters .campaignFilter .wrap {
  left: 50%;
  transform: translate(-50%, 20px);
  gap: var(--gap);
  flex-direction: row;
  flex-wrap: wrap;
}
#filters .campaignFilter .wrap ul {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) / 3);
}
#filters .campaignFilter .wrap ul > li:first-child {
  font-weight: 600;
}
#filters .campaignFilter .wrap ul li {
  position: relative;
}
#filters .campaignFilter .wrap input {
  visibility: collapse;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
#filters .campaignFilter .wrap input:checked + label {
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-text-inverse));
  transition: background-color 0.15s ease, color 0.15s ease;
}
#filters .campaignFilter .wrap label {
  padding: calc(var(--gap) / 2);
  border-radius: var(--radius);
  background-color: rgba(var(--color-border), 0.12);
  transition: background-color 0.15s ease, color 0.15s ease;
}
#filters .campaignFilter .wrap label:hover {
  cursor: pointer;
}
#filters .campaignFilter .wrap > div {
  flex-basis: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
  border-top: solid 1px rgba(var(--color-border), 0.24);
  padding-top: calc(var(--gap) / 2);
}
#filters .campaignFilter .wrap > div button:first-of-type {
  margin-left: auto;
}
#filters .campaignFilter .wrap > div > span {
  color: rgb(var(--color-border));
}
#filters .campaignFilter.active > span::before {
  background-image: var(--icon-close-white);
}
#filters .campaignFilter.active .wrap {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
  transition: visibility 0s ease, opacity 0.2s ease, transform 0.2s ease;
}
@media (max-width: 850px) {
  #filters .dateFilter .wrap,
  #filters .campaignFilter .wrap {
    position: fixed;
    top: auto;
    bottom: -100%;
    max-width: 100%;
    width: 100%;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06);
    border-radius: var(--radius) var(--radius) 0 0;
    transition: bottom 0.3s ease, opacity 0.2s ease, transform 0.2s ease, visibility 0s ease 0.2s;
    max-height: 90%;
  }
  #filters .dateFilter .closeTrigger,
  #filters .campaignFilter .closeTrigger {
    display: block;
  }
  #filters .dateFilter .wrap {
    flex-direction: column;
    left: 0;
    bottom: -100%;
    transform: translateY(0);
    transition: bottom 0.3s ease, visibility 0s ease, opacity 0.2s ease, transform 0.2s ease;
  }
  #filters .dateFilter .wrap footer .close {
    display: none;
  }
  #filters .dateFilter.active .wrap {
    visibility: visible;
    opacity: 1;
    bottom: 0;
    transform: translateY(0);
    transition: bottom 0.3s ease, visibility 0s ease, opacity 0.2s ease, transform 0.2s ease;
  }
  #filters .campaignFilter .wrap {
    left: 0;
    transform: translate(0);
  }
  #filters .campaignFilter .wrap > div {
    gap: 15px;
  }
  #filters .campaignFilter .wrap > div button {
    margin-left: auto;
  }
  #filters .campaignFilter .wrap > div .close {
    display: none;
  }
  #filters .campaignFilter.active .wrap {
    visibility: visible;
    opacity: 1;
    transform: translate(0);
    bottom: 0;
    transition: bottom 0.3s ease, visibility 0s ease, opacity 0.2s ease, transform 0.2s ease;
  }
}
@media (max-width: 639px) {
  #filters .campaignFilter .wrap {
    display: grid;
    grid-template-columns: 1fr;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-top: 0;
  }
  #filters .campaignFilter .wrap::-webkit-scrollbar {
    display: none;
  }
  #filters .campaignFilter .wrap > div {
    grid-row: 1;
    border-top: none;
    border-bottom: solid 1px rgba(var(--color-border), 0.24);
    padding: var(--gap) 0;
    position: sticky;
    background-color: rgb(var(--color-widget-background));
    z-index: 2;
    top: 0;
  }
}
@media (max-width: 574px) {
  #filters .dateFilter > span::before {
    content: "";
    width: 16px;
    height: 17px;
    background-image: var(--icon-calendar);
    background-repeat: no-repeat;
    background-position: center;
  }
  #filters .dateFilter > span::after {
    display: none;
  }
  #filters .dateFilter.active > span::before {
    background-image: var(--icon-calendar-white);
  }
}
@media (max-width: 463px) {
  #filters .dateFilter,
  #filters .campaignFilter {
    flex: 1;
  }
  #filters .dateFilter > span,
  #filters .campaignFilter > span {
    justify-content: center;
  }
  #filters .dateFilter .wrap footer {
    display: grid;
    grid-template-columns: 1fr 40px;
  }
  #filters .dateFilter .wrap footer .date {
    grid-column: 1/span 2;
    height: 40px;
    justify-content: center;
  }
  #filters .dateFilter .wrap footer button:first-of-type {
    margin-left: 0;
    margin-right: auto;
  }
}
@media (max-width: 394px) {
  #filters .campaignFilter {
    flex: 0;
  }
}
@media (max-width: 376px) {
  #filters .dateFilter {
    flex: 1;
  }
  #filters .dateFilter > span {
    justify-content: center;
  }
}
@media (max-width: 345px) {
  #filters {
    gap: 6px;
  }
  #filters .dateFilter > span,
  #filters .campaignFilter > span {
    padding: 0.75rem;
    gap: 7px;
    justify-content: center;
  }
  #filters .campaignFilter .wrap > div > span:first-child {
    display: none;
  }
  #filters .campaignFilter .wrap > div button {
    margin-left: 0;
  }
}

.widget {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.562rem 1.875rem;
  background-color: rgba(var(--color-widget-background), 1);
  border-radius: var(--radius);
  align-self: start;
  gap: var(--gap);
}
.widget > * {
  z-index: 2;
}
.widget .widgetTitle {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  font-weight: 600;
  color: rgb(var(--color-header-text));
}
.widget .widgetTitle[data-title=underline] {
  border-bottom: solid 1px rgba(var(--color-border), 0.24);
  padding: 0 0 0.937rem;
}
.widget .widgetTitle[data-icon=click]::before {
  content: var(--icon-click);
}
.widget .widgetTitle[data-icon=money]::before {
  content: var(--icon-money);
}
.widget .widgetTitle[data-icon=bot]::before {
  content: var(--icon-bot);
}
.widget .widgetTitle[data-icon=proxy]::before {
  content: var(--icon-proxy);
}
.widget .widgetTitle[data-icon=vpn]::before {
  content: var(--icon-vpn);
}
.widget .widgetTitle[data-icon=crowler]::before {
  content: var(--icon-crowler);
}
.widget .widgetTitle[data-icon=mobile]::before {
  content: var(--icon-mobile);
}
.widget .widgetTitle[data-icon=skull]::before {
  content: var(--icon-skull);
}
.widget .widgetTitle input[type=search] {
  min-height: 24px;
  padding: 5px 12px 5px var(--gap);
  border-color: transparent;
  background-color: rgba(var(--color-text), 0.06);
  background-position: center left calc(var(--gap) / 3);
  background-image: url(../assets/icons/icon-search-s.svg);
  max-width: 240px;
  margin-left: auto;
  transition: all 0.15s ease;
}
.widget .widgetTitle input[type=search]:focus, .widget .widgetTitle input[type=search]:focus-within {
  background-color: transparent;
  border-color: rgba(var(--color-border), 0.5);
  transition: all 0.15s ease;
}
.widget .widgetTitle > span {
  margin-right: auto;
}
.widget .widgetTitle > a {
  font-size: 0.8125rem;
  font-weight: 400;
  display: inline-flex;
  flex-direction: row;
  gap: calc(var(--gap) / 3);
}
.widget .widgetTitle > a.download {
  margin-left: auto;
}
.widget .widgetTitle > a.download::after {
  content: var(--icon-download);
}
.widget .widgetTitle > div {
  display: flex;
  flex-direction: column;
}
.widget .widgetTitle > div span {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgb(var(--color-border));
}
.widget.--menu {
  padding: 0;
  background-color: transparent;
  grid-column: span 3;
}
.widget.--menu ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.widget.--menu ul li a {
  display: flex;
  gap: calc(var(--gap) / 3);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  color: rgb(var(--color-header-text));
  transition: background-color 0.2s ease;
}
.widget.--menu ul li a:hover {
  background-color: rgba(var(--color-link-sidebar), 0.05);
  transition: background-color 0.2s ease;
}
.widget.--menu ul li a::before {
  transform: translateY(2px);
}
.widget.--menu ul li a.active {
  background-color: rgba(var(--color-widget-background), 1);
}
.widget.--menu ul li a[data-icon=whitelist]::before {
  content: var(--icon-whitelist);
}
.widget.--menu ul li a[data-icon=block]::before {
  content: var(--icon-block);
}
.widget.--menu ul li a[data-icon=config-red]::before {
  content: var(--icon-config-red);
}
.widget.--menu ul li a[data-icon=config-grey]::before {
  content: var(--icon-config-grey);
}
.widget.--menu ul li a span {
  display: flex;
  flex-direction: column;
}
.widget.--menu ul li a span::after {
  content: attr(data-description);
  color: rgb(var(--color-button-inactive));
  font-size: 0.75rem;
}
.widget.--menu ul li.active a {
  background-color: rgba(var(--color-widget-background), 1);
}
@media (max-width: 880px) {
  .widget.--menu {
    grid-column: span 12;
    position: relative;
  }
  .widget.--menu ul {
    flex-direction: row;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .widget.--menu ul::-webkit-scrollbar {
    display: none;
  }
  .widget.--menu ul li {
    white-space: nowrap;
  }
}
@media (max-width: 639px) {
  .widget.--menu {
    grid-column: span 2;
  }
  .widget.--menu ul {
    gap: 5px;
  }
  .widget.--menu ul li a {
    padding: 0.8rem;
  }
}
.widget.--menuRow {
  padding: 0;
  background-color: transparent;
}
.widget.--menuRow a {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  color: rgba(var(--color-text), 0.36);
}
.widget.--menuRow a[data-icon=radar]::before {
  content: var(--icon-radar);
}
.widget.--menuRow a[data-icon=cursor]::before {
  content: var(--icon-cursor);
}
.widget.--menuRow a[data-icon=search]::before {
  content: var(--icon-search);
}
.widget.--menuRow a[data-icon=scale]::before {
  content: var(--icon-scale);
}
.widget.--menuRow a[data-icon=connectivity]::before {
  content: var(--icon-connectivity);
}
.widget.--menuRow a[data-icon=browser]::before {
  content: var(--icon-browser);
}
.widget.--menuRow a[data-icon=devices]::before {
  content: var(--icon-devices);
}
.widget.--menuRow a[data-icon=location]::before {
  content: var(--icon-location);
}
.widget.--menuRow a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 1px;
  background-color: rgba(var(--color-border), 0.24);
  transition: background-color 0.2s ease, width 0.2s ease;
}
.widget.--menuRow a:hover::after {
  width: 100%;
  transition: background-color 0.2s ease, width 0.2s ease;
}
.widget.--menuRow a.active {
  --icon-radar: url(../assets/icons/icon-radar-blue.svg);
  --icon-cursor: url(../assets/icons/icon-cursor-blue.svg);
  --icon-search: url(../assets/icons/icon-search-blue.svg);
  --icon-scale: url(../assets/icons/icon-scale-blue.svg);
  --icon-connectivity: url(../assets/icons/icon-conectivity-blue.svg);
  --icon-browser: url(../assets/icons/icon-browser-blue.svg);
  --icon-devices: url(../assets/icons/icon-devices-blue.svg);
  --icon-location: url(../assets/icons/icon-location-blue.svg);
  color: rgb(0, 173, 239);
}
.widget.--menuRow a.active::after {
  width: 100%;
  background-color: rgb(0, 173, 239);
}
.widget.--menuRow ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media (max-width: 1099px) {
  .widget.--menuRow ul {
    overflow-x: scroll;
    justify-content: start;
    flex-wrap: nowrap;
    gap: 15px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 10px;
  }
  .widget.--menuRow ul::-webkit-scrollbar {
    display: none;
  }
  .widget.--menuRow ul li {
    display: flex;
    flex-wrap: nowrap;
  }
  .widget.--menuRow ul li a {
    white-space: nowrap;
  }
}
.widget.--billing-info form {
  gap: var(--gap);
}
.widget.--billing-info form .wrap {
  display: grid;
  gap: var(--gap);
}
.widget.--billing-info form .wrap[data-wrap="2"] {
  grid-template-columns: 1fr 1fr;
}
.widget.--billing-info form .wrap[data-wrap="3"] {
  grid-template-columns: repeat(3, 1fr);
}
.widget.--billing-info form label {
  align-self: start;
  padding-left: 5px;
}
@media (max-width: 419px) {
  .widget.--billing-info form .wrap[data-wrap="2"] {
    grid-template-columns: 1fr;
  }
}
.widget.--payment-method .cardList {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--gap);
  border-bottom: solid 1px rgba(var(--color-border), 0.24);
}
.widget.--payment-method .cardList li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: calc(var(--gap) / 2);
  align-items: center;
  transition: padding 0.2s ease;
}
.widget.--payment-method .cardList li:nth-of-type(1) {
  padding-top: 0;
}
.widget.--payment-method .cardList li p {
  flex: 1;
}
.widget.--payment-method .cardList li button {
  flex: 0;
}
.widget.--payment-method .cardList li .details {
  display: none;
  width: 100%;
  border-top: solid 1px rgba(var(--color-border), 0.24);
  padding-top: calc(var(--gap) / 2);
  overflow: hidden;
}
.widget.--payment-method .cardList li .details .wrap {
  display: flex;
  flex-direction: row;
  gap: var(--gap);
}
.widget.--payment-method .cardList li .details .wrap p {
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--gap) / 3);
  flex: 1;
}
.widget.--payment-method .cardList li .details .wrap > div {
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--gap) / 3);
}
.widget.--payment-method .cardList li .details .wrap > div > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(var(--gap) / 2);
  border-radius: 50px;
  padding: 12px calc(var(--gap) / 2);
  border: solid 1px rgba(var(--color-border), 0.5);
  color: rgba(var(--color-text), 0.36);
}
.widget.--payment-method .cardList li .details .wrap > div > div input {
  border: none;
  padding: 0;
  border-radius: 0;
  min-height: auto;
}
.widget.--payment-method .cardList li.active {
  padding: calc(var(--gap) / 2);
  border: solid 1px rgba(var(--color-border), 0.24);
  border-radius: var(--radius);
  transition: padding 0.2s ease;
}
.widget.--payment-method .cardList li.active > *:last-child {
  order: 1;
}
.widget.--payment-method .cardList li.active .details {
  display: flex;
}
@media (max-width: 669px) {
  .widget.--payment-method .cardList li p {
    min-width: 100%;
  }
}
@media (max-width: 419px) {
  .widget.--payment-method > button {
    width: 100%;
  }
  .widget.--payment-method .cardList li .details {
    gap: 15px;
  }
  .widget.--payment-method .cardList li .details .wrap {
    flex-direction: column;
  }
  .widget.--payment-method .cardList li.active {
    padding: 10px;
  }
}
.widget.--invoices table th:nth-last-of-type(3),
.widget.--invoices table th:nth-last-of-type(2),
.widget.--invoices table th:nth-last-of-type(1),
.widget.--invoices table td:nth-last-of-type(3),
.widget.--invoices table td:nth-last-of-type(2),
.widget.--invoices table td:nth-last-of-type(1) {
  text-align: center;
}
.widget.--invoices table [data-button=download] {
  width: fit-content;
}
@media (max-width: 700px) {
  .widget.--invoices table tr {
    display: flex;
    flex-direction: column;
    border-bottom: solid 1px rgba(var(--color-border), 0.24);
    padding: 15px 0;
  }
  .widget.--invoices table tr:first-child {
    display: none;
  }
  .widget.--invoices table tr:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .widget.--invoices table tr:nth-of-type(2) {
    padding-top: 0;
  }
  .widget.--invoices table tr td {
    border-bottom: none;
    width: 100%;
    padding: 10px 0;
    text-align: left;
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
  }
  .widget.--invoices table tr td:nth-last-of-type(3), .widget.--invoices table tr td:nth-last-of-type(2), .widget.--invoices table tr td:nth-last-of-type(1) {
    text-align: left;
  }
  .widget.--invoices table tr td .tdTitle {
    min-width: 80px;
    text-transform: uppercase;
    color: rgb(var(--color-border));
    font-size: 12px;
  }
}
@media (max-width: 463px) {
  .widget.--invoices table tr td {
    flex-direction: column;
    align-items: start;
    gap: 5px;
  }
}
.widget.--subscription table td:nth-of-type(1) {
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: rgb(var(--color-header-text));
  width: 100px;
  padding-left: 0;
}
.widget.--subscription table td:nth-last-of-type(1) {
  padding-left: 0;
}
.widget.--subscription .buttonsWrap button:nth-of-type(1) {
  margin-right: auto;
}
@media (max-width: 563px) {
  .widget.--subscription .buttonsWrap {
    flex-direction: column;
  }
  .widget.--subscription .buttonsWrap button {
    width: 100%;
  }
}
@media (max-width: 390px) {
  .widget.--subscription table tr {
    display: flex;
    flex-direction: column;
    align-items: start;
    border-bottom: solid 1px rgba(var(--color-border), 0.24);
    padding: 10px 0;
    gap: 5px;
  }
  .widget.--subscription table tr td {
    padding: 0;
    border: none;
  }
}
.widget.--accountsOverview {
  display: grid;
  grid-template-columns: 1fr;
}
.widget.--accountsOverview > ul {
  display: flex;
  flex-direction: column;
}
.widget.--accountsOverview > ul > li {
  padding: var(--gap) 0;
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  align-items: stretch;
  border-bottom: solid 1px rgba(var(--color-border), 0.24);
}
.widget.--accountsOverview > ul > li:nth-of-type(1) {
  padding-top: 0;
}
.widget.--accountsOverview > ul > li > * {
  flex: 1;
  align-self: stretch;
}
.widget.--accountsOverview .accountDetails {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) / 6);
}
.widget.--accountsOverview .accountDetails .mail {
  font-weight: 600;
  font-size: 1.125rem;
}
.widget.--accountsOverview .accountDetails .buttonsWrap {
  margin-top: auto;
}
.widget.--accountsOverview .--clicks {
  background-color: rgba(var(--color-border), 0.12);
}
.widget.--accountsOverview .--clicks .widgetTitle {
  color: rgb(var(--color-text));
}
.widget.--accountsOverview .--clicks .canvasWrap {
  max-width: 100px;
  position: relative;
}
.widget.--accountsOverview .--clicks .canvasWrap .center {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
}
.widget.--accountsOverview > .buttonsWrap {
  grid-row: 2;
  border-bottom: solid 1px rgba(var(--color-border), 0.24);
  padding-bottom: var(--gap);
}
@media (max-width: 1099px) {
  .widget.--accountsOverview ul li {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .widget.--accountsOverview ul li .accountDetails {
    grid-row: 1/span 2;
  }
  .widget.--accountsOverview ul li .--savings {
    grid-column: 2;
  }
}
@media (max-width: 767px) {
  .widget.--accountsOverview ul li {
    display: grid;
    grid-template-columns: 1fr;
  }
  .widget.--accountsOverview ul li .accountDetails {
    grid-row: 1;
  }
  .widget.--accountsOverview ul li .accountDetails .buttonsWrap {
    padding-top: 20px;
  }
  .widget.--accountsOverview ul li .--savings {
    grid-column: 1;
  }
}
@media (max-width: 499px) {
  .widget.--accountsOverview > .buttonsWrap {
    flex-direction: column;
  }
  .widget.--accountsOverview > .buttonsWrap button {
    width: 100%;
  }
}
@media (max-width: 399px) {
  .widget.--accountsOverview .--clicks[data-size=s] {
    gap: 15px;
    flex-direction: column;
  }
  .widget.--accountsOverview .--clicks[data-size=s] > div:nth-of-type(1) {
    gap: 20px;
  }
}
.widget.--savings {
  --color-text: 255, 255, 255;
  --color-text-inverse: 0, 0, 0;
  background-color: rgb(var(--color-widget-savings));
  color: rgb(var(--color-text));
  justify-content: space-between;
  overflow: hidden;
}
.widget.--savings::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(314deg, rgba(253, 212, 0, 0.84) -25.97%, rgba(253, 212, 0, 0) 66.44%);
}
.widget.--savings .widgetTitle {
  color: rgb(var(--color-text));
  font-size: 1.125rem;
}
.widget.--savings .widgetTitle + div {
  font-size: 1.875rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
}
.widget.--savings .widgetTitle + div span {
  font-size: 0.75rem;
}
.widget.--savings[data-size=L] {
  flex: 1;
  min-height: 250px;
}
.widget.--savings[data-size=L]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/overlay-money.png);
  background-size: cover;
  mix-blend-mode: multiply;
}
.widget.--savings[data-size=s] {
  height: 36px;
  padding: 0 15px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  background-color: rgba(var(--color-border), 0.1);
  border-radius: 18px;
  gap: 10px;
  color: rgb(var(--color-header-text));
  width: auto;
  align-items: center;
  transition: background-color 0.15s ease;
}
.widget.--savings[data-size=s]::before {
  content: var(--icon-savings);
  background: none;
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
}
.widget.--savings[data-size=s]:hover {
  cursor: pointer;
  background-color: rgba(var(--color-border), 0.24);
  transition: background-color 0.15s ease;
}
.widget.--clicks .canvasWrap {
  max-width: 120px;
  position: relative;
  margin: 0 auto;
}
.widget.--clicks .canvasWrap .center {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
}
.widget.--clicks .stats {
  text-transform: capitalize;
  font-size: 0.8125rem;
  color: rgb(var(--color-border));
}
.widget.--clicks .stats > * {
  display: flex;
  flex-direction: row;
  gap: calc(var(--gap) / 3);
  align-items: center;
}
.widget.--clicks .stats > *::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: rgba(var(--color-border), 0.24);
}
.widget.--clicks .stats > *[data-label=green]::before {
  background-color: rgb(var(--color-label-green));
}
.widget.--clicks .stats > *[data-label=red]::before {
  background-color: rgb(var(--color-label-red));
}
.widget.--clicks .stats > * span {
  font-weight: 600;
  color: rgb(var(--color-text));
  margin-left: auto;
}
.widget.--clicks[data-size=s] {
  flex-direction: row;
  align-items: stretch;
}
.widget.--clicks[data-size=s] > div {
  flex: 1;
}
.widget.--clicks[data-size=s] > div:nth-of-type(1) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (max-width: 1149px) {
  .widget.--sendInvite {
    grid-column: span 12;
  }
}
@media (max-width: 639px) {
  .widget.--sendInvite {
    grid-column: span 2;
  }
}
.widget.--invitations > ul {
  display: flex;
  flex-direction: column;
}
.widget.--invitations > ul li {
  padding: 1.25rem 0;
  border-bottom: solid 1px rgba(var(--color-border), 0.24);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: calc(var(--gap) / 3);
  align-items: center;
}
.widget.--invitations > ul li:nth-of-type(1) {
  padding-top: 0;
}
.widget.--invitations > ul li:nth-last-of-type(1) {
  border-bottom: none;
}
.widget.--invitations > ul li span {
  margin-right: auto;
  word-break: break-all;
}
.widget.--invitations > ul li label {
  color: rgb(var(--color-button-inactive));
}
@media (max-width: 1149px) {
  .widget.--invitations {
    grid-column: span 12;
  }
}
@media (max-width: 639px) {
  .widget.--invitations {
    grid-column: span 2;
  }
  .widget.--invitations ul li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 20px;
  }
  .widget.--invitations ul li label {
    align-items: end;
    justify-content: end;
  }
}
@media (max-width: 549px) {
  .widget.--invitations ul li {
    grid-template-columns: 1fr;
    row-gap: 15px;
    justify-content: center;
    text-align: center;
    align-items: center;
  }
  .widget.--invitations ul li span {
    margin: 0 auto;
  }
  .widget.--invitations ul li label {
    align-items: center;
    justify-content: center;
  }
}
.widget.--refresh {
  padding: 0;
  background-color: transparent;
}
.widget.--refresh button {
  width: 100%;
  border-radius: var(--radius);
  padding: 1.562rem 1.875rem;
  background-color: rgb(var(--color-text));
  font-size: 1.125rem;
  justify-content: space-between;
  text-align: left;
  line-height: 1;
}
.widget.--refresh button::before {
  content: var(--icon-refresh);
}
.widget.--documentation {
  padding: 0;
  background-color: transparent;
}
.widget.--documentation button {
  flex-direction: column;
  gap: 0;
  width: 100%;
  border-radius: var(--radius);
  padding: 1.562rem 1.875rem;
  background-color: rgba(var(--color-border), 0.24);
  color: rgb(var(--color-header-text));
  font-size: 1.125rem;
  align-items: end;
}
.widget.--documentation button::before {
  content: var(--icon-docs);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 1.875rem;
}
.widget.--documentation button::after {
  content: attr(data-description);
  font-size: 0.8125rem;
  font-weight: 400;
}
@media (max-width: 1080px) {
  .widget.--documentation button {
    padding: 4rem 1.562rem 1.562rem;
    align-items: center;
  }
  .widget.--documentation button::before {
    top: 1.562rem;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (max-width: 483px) {
  .widget.--documentation button {
    padding: 1.562rem 1.875rem;
    align-items: end;
  }
  .widget.--documentation button::before {
    top: 50%;
    transform: translateY(-50%);
    left: 1.875rem;
  }
}
.widget.--savingsDetails table td:not(:nth-of-type(1)) {
  text-align: center;
}
.widget.--savingsDetails table td:nth-last-of-type(1) {
  color: rgb(var(--color-button));
}
.widget.--registerLogin {
  padding: 0;
  border-radius: 0;
  align-items: center;
  margin: auto 0;
  background-color: transparent;
}
.widget.--registerLogin article {
  width: 100%;
  max-width: 350px;
  align-items: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) / 2);
}
.widget.--registerLogin form {
  width: 100%;
  gap: calc(var(--gap) / 2);
  align-items: center;
}
.widget.--registerLogin form button {
  width: 100%;
}
.widget.--progressBar .widgetTitle {
  color: rgb(var(--color-text));
}
.widget.--progressBar .widgetTitle + div {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) / 3);
}
.widget.--progressBar .widgetTitle + div span {
  font-size: 1.875rem;
  font-weight: 600;
}
.widget.--progressBar .widgetTitle + div > div {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background-color: rgba(var(--color-border), 0.12);
  position: relative;
  overflow: hidden;
}
.widget.--progressBar .widgetTitle + div > div::before {
  content: "";
  display: block;
  width: calc(var(--width) * 1%);
  height: 10px;
  background: linear-gradient(90deg, #00AEEF 0%, #FDD400 50%, #FF4747 100%);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: calc(100% * 100 / var(--width));
  border-radius: 5px;
}
@media (max-width: 900px) {
  .widget.--progressBar {
    grid-column: span 6;
  }
}
@media (max-width: 639px) {
  .widget.--progressBar {
    grid-column: span 2;
  }
}
.widget.--totalTraffic {
  min-height: 400px;
}
.widget.--clickInsights .widgetTitle {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  font-weight: 600;
  color: rgb(var(--color-header-text));
  position: relative;
  z-index: 3;
}
.widget.--clickInsights .widgetTitle input[type=search] {
  margin-left: 0;
}
.widget.--clickInsights .widgetTitle input[type=search]:focus, .widget.--clickInsights .widgetTitle input[type=search]:focus-within {
  background-color: transparent;
  border-color: rgba(var(--color-border), 0.5);
  transition: all 0.15s ease;
}
.widget.--clickInsights .widgetTitle > div:first-child {
  display: flex;
  flex-direction: column;
  width: calc((100% - 20px - 240px) / 2);
}
.widget.--clickInsights .widgetTitle > div:first-child span {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgb(var(--color-border));
}
.widget.--clickInsights .widgetTitle .columns {
  margin-left: auto;
  position: relative;
}
.widget.--clickInsights .widgetTitle .columns:hover {
  cursor: pointer;
}
.widget.--clickInsights .widgetTitle .columns span {
  font-size: 0.8125rem;
  font-weight: 400;
  display: inline-flex;
  flex-direction: row;
  gap: calc(var(--gap) / 4);
  color: rgb(var(--color-header-text));
  text-transform: capitalize;
}
.widget.--clickInsights .widgetTitle .columns span::before {
  content: "+/-";
}
.widget.--clickInsights .widgetTitle .columns ul {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 20px);
  opacity: 0;
  visibility: collapse;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background-color: rgb(var(--color-widget-background));
  padding: 10px 15px 10px 10px;
  border: solid 1px rgba(var(--color-border), 0.24);
  border-radius: var(--radius);
}
.widget.--clickInsights .widgetTitle .columns ul label {
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
}
.widget.--clickInsights .widgetTitle .columns.active ul {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}
.widget.--clickInsights .widgetTitle .download {
  margin-left: var(--gap);
}
@media (max-width: 880px) {
  .widget.--clickInsights .widgetTitle > div:first-child {
    width: auto;
    flex: 1;
  }
  .widget.--clickInsights .widgetTitle .columns {
    display: none;
  }
  .widget.--clickInsights .widgetTitle .download {
    margin-left: 0;
  }
  .widget.--clickInsights .widgetTitle input[type=search] {
    margin-left: auto;
  }
}
@media (max-width: 715px) {
  .widget.--clickInsights .widgetTitle > div:first-child {
    flex: 1;
  }
  .widget.--clickInsights .widgetTitle input[type=search] {
    display: none;
  }
}
@media (max-width: 540px) {
  .widget.--clickInsights .widgetTitle {
    flex-direction: column;
    align-items: start;
    row-gap: 10px;
  }
}
@media (max-width: 630px) {
  .widget.--whitelisted .widgetTitle {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .widget.--whitelisted .widgetTitle input[type=search] {
    margin-left: 0;
  }
}
@media (max-width: 520px) {
  .widget.--whitelisted .widgetTitle {
    grid-template-columns: 1fr 1fr 16px;
  }
  .widget.--whitelisted .widgetTitle .download {
    width: 17px;
    height: 17px;
    overflow: hidden;
    position: relative;
    padding-left: 17px;
  }
  .widget.--whitelisted .widgetTitle .download::after {
    position: absolute;
    left: 0;
    top: 0;
  }
}
@media (max-width: 500px) {
  .widget.--whitelisted table thead {
    display: none;
  }
  .widget.--whitelisted table tr {
    display: grid;
    grid-template-columns: 1fr 30px;
    text-align: left;
    align-items: start;
    border-bottom: solid 1px rgba(var(--color-border), 0.24);
    padding: 10px 0;
  }
  .widget.--whitelisted table tr:last-child {
    border: none;
  }
  .widget.--whitelisted table tr td {
    border: none;
    padding: 5px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .widget.--whitelisted table tr td:first-child, .widget.--whitelisted table tr td:nth-child(2) {
    grid-column: 1;
  }
  .widget.--whitelisted table tr td:last-child {
    grid-column: 2;
    grid-row: 1/span 2;
    align-self: center;
    justify-content: center;
    align-items: center;
  }
  .widget.--whitelisted table tr td:last-child .tdTitle {
    display: none;
  }
  .widget.--whitelisted table tr td .tdTitle {
    min-width: 80px;
    color: rgb(var(--color-border));
    font-size: 12px;
    text-transform: uppercase;
  }
}
@media (max-width: 393px) {
  .widget.--whitelisted .widgetTitle {
    grid-template-columns: 1fr 16px;
  }
  .widget.--whitelisted .widgetTitle input[type=search] {
    grid-column: 1;
    grid-row: 2;
    min-width: 90%;
  }
  .widget.--whitelisted .widgetTitle .download {
    grid-row: 2;
  }
  .widget.--whitelisted table tr td {
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2px;
  }
}
@media (max-width: 767px) {
  .widget.--monthlySavings table thead {
    display: none;
  }
  .widget.--monthlySavings table tr {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    padding: 15px 0;
    column-gap: 20px;
    row-gap: 15px;
    border-bottom: solid 1px rgba(var(--color-border), 0.24);
  }
  .widget.--monthlySavings table tr:first-child {
    border-top: solid 1px rgba(var(--color-border), 0.24);
  }
  .widget.--monthlySavings table tr:last-child {
    border: none;
  }
  .widget.--monthlySavings table tr td {
    padding: 0;
    border: none;
    margin-left: 0;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .widget.--monthlySavings table tr td:not(:nth-of-type(1)) {
    text-align: left;
  }
  .widget.--monthlySavings table tr td .tdTitle {
    text-transform: uppercase;
    font-size: 12px;
    color: rgb(var(--color-border));
  }
}
@media (max-width: 674px) {
  .widget.--monthlySavings table tr {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 424px) {
  .widget.--monthlySavings table tr {
    grid-template-columns: 1fr;
    row-gap: 5px;
  }
  .widget.--monthlySavings table tr td {
    grid-template-columns: 140px 1fr;
  }
}
@media (max-width: 549px) {
  .widget.--campaign ul.split2 > li {
    flex-direction: column;
    gap: 10px;
  }
  .widget.--campaign ul.split2 > li button {
    width: 100%;
  }
  .widget.--campaign ul.split2 > li .rangeSlider {
    align-items: start;
  }
  .widget.--campaign ul.split2 > li .rangeSlider input[type=range] {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 989px) {
  .widget.--countryRegion {
    grid-column: span 12;
  }
}
@media (max-width: 639px) {
  .widget.--countryRegion {
    grid-column: span 2;
  }
}
@media (max-width: 549px) {
  .widget.--countryRegion table thead {
    display: none;
  }
  .widget.--countryRegion table tbody {
    display: flex;
    flex-direction: column;
  }
  .widget.--countryRegion table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-bottom: solid 1px rgba(var(--color-border), 0.24);
    gap: 10px;
    padding: 15px 0;
  }
  .widget.--countryRegion table tbody tr:last-child {
    border: none;
  }
  .widget.--countryRegion table tbody tr td {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0;
    border: none;
    text-align: left;
  }
  .widget.--countryRegion table tbody tr td .tdTitle {
    text-transform: uppercase;
    font-size: 12px;
    color: rgb(var(--color-border));
  }
}
@media (max-width: 419px) {
  .widget.--countryRegion table tbody tr {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 574px) {
  .widget {
    padding: 1.2rem;
  }
}

.alert {
  padding: 1.25rem;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) / 3);
}
.alert[data-alert=disclaimer] {
  background-color: rgba(var(--color-alert-disclaimer), 0.09);
  color: rgb(var(--color-alert-disclaimer));
}
.alert .alertTitle {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  font-weight: 600;
}

.picUpload {
  display: flex;
  flex-direction: row;
  gap: calc(var(--gap) / 2);
  align-items: center;
}
.picUpload img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50px;
}
.picUpload button {
  align-self: center;
}
.picUpload .fileWrap {
  display: flex;
  flex-direction: row;
}
.picUpload .fileWrap input {
  display: none;
}
.picUpload .fileWrap label {
  min-height: 40px;
  min-width: 90px;
  padding: 0.625rem 1.25rem;
  border-radius: 50px;
  border: solid 1px rgba(var(--color-border), 1);
  background-color: transparent;
  color: rgb(var(--color-text));
}
.picUpload .fileWrap label:hover {
  cursor: pointer;
}
@media (max-width: 473px) {
  .picUpload {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: start;
  }
  .picUpload img {
    grid-row: span 2;
    align-self: center;
  }
  .picUpload .fileWrap {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .picUpload .fileWrap label {
    width: 100%;
    justify-content: center;
  }
  .picUpload button {
    grid-column: 2;
  }
}
@media (max-width: 391px) {
  .picUpload {
    display: flex;
    flex-direction: column;
  }
  .picUpload button {
    width: 100%;
  }
}

.buttonsWrap {
  display: flex;
  flex-direction: row;
  gap: calc(var(--gap) / 3);
}

.banner {
  display: flex;
  flex-direction: row;
  gap: calc(var(--gap) / 2);
  align-items: center;
  padding: calc(var(--gap) / 2);
  background-color: white;
  border-radius: var(--radius);
  color: rgb(var(--color-text));
}
.banner[data-icon=monitor]::before {
  content: var(--icon-monitor);
}
.banner > div {
  margin-right: auto;
}
.banner.--upgrade {
  --color-text: 255, 255, 255;
  --color-border: 255, 255, 255;
  background-color: transparent;
  background: linear-gradient(257deg, #66CEF5 32.84%, #FFD600 155.53%);
}
.banner.--upgrade .button {
  border-color: rgb(var(--color-border));
  min-width: 160px;
}
@media (max-width: 716px) {
  .banner {
    flex-wrap: wrap;
  }
  .banner[data-icon=monitor]::before {
    display: none;
  }
  .banner .button {
    flex-basis: 100%;
  }
}

ul.split2 > li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: solid 1px rgba(var(--color-border), 0.24);
  padding: calc(var(--gap) / 2) 0;
  gap: var(--gap);
}
ul.split2 > li > *:first-child {
  flex: 1;
}
ul.split2 > li:last-child {
  border-bottom: none;
}

.rangeSlider {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) / 5);
  align-items: end;
}
.rangeSlider span {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: rgb(var(--color-border));
}

.tagInput {
  min-height: 40px;
  border-radius: var(--radius);
  border: solid 1px rgba(var(--color-border), 0.24);
  padding: 7px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 0.875rem;
  align-items: center;
}
.tagInput input:not([type=checkbox], [type=range]):not([type=submit]) {
  border: none;
  padding: 5px;
  border-radius: 0;
  min-height: auto;
  flex: 1;
  min-width: 200px;
}
.tagInput input:not([type=checkbox], [type=range]):not([type=submit]):focus, .tagInput input:not([type=checkbox], [type=range]):not([type=submit]):focus-within {
  border: none;
}
.tagInput .tag {
  background-color: rgb(var(--color-tag));
  color: rgb(var(--color-link-sidebar));
  padding: 5px 10px;
  border-radius: 6px;
  display: inline-flex;
  flex-direction: row;
  gap: calc(var(--gap) / 3);
  align-items: center;
}
.tagInput .tag span::after {
  content: var(--icon-close);
}
.tagInput .tag span:hover {
  cursor: pointer;
}

.maxHeight {
  max-height: calc(100svh - var(--gap) - var(--size-header) - var(--gutter) * 2);
}
@media (max-width: 880px) {
  .maxHeight {
    max-height: none;
  }
  .maxHeight[data-flex=column] {
    grid-column: span 12;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .maxHeight[data-flex=column] > *,
  .maxHeight[data-flex=column] button {
    height: 100%;
  }
}
@media (max-width: 639px) {
  .maxHeight[data-flex=column] {
    grid-column: span 2;
  }
}
@media (max-width: 483px) {
  .maxHeight[data-flex=column] {
    grid-template-columns: 1fr;
  }
  .maxHeight[data-flex=column] .--savings[data-size=L] {
    min-height: 200px;
  }
}

table.clickThreshold {
  border-spacing: calc(var(--gap) / 3);
  border-collapse: initial;
  font-size: 0.875rem;
  padding: calc(var(--gap) / 3);
  border: solid 1px rgba(var(--color-border), 0.24);
  border-radius: var(--radius);
}
li table.clickThreshold {
  margin-top: calc(var(--gap) / 2);
}
table.clickThreshold th,
table.clickThreshold td {
  padding: 0;
  border: none;
}
table.clickThreshold th:first-child, table.clickThreshold th:nth-child(3), table.clickThreshold th:nth-last-child(1),
table.clickThreshold td:first-child,
table.clickThreshold td:nth-child(3),
table.clickThreshold td:nth-last-child(1) {
  width: 1%;
  white-space: nowrap;
}
table.clickThreshold th:nth-child(2),
table.clickThreshold td:nth-child(2) {
  max-width: 150px;
}
table.clickThreshold th:nth-last-child(3),
table.clickThreshold td:nth-last-child(3) {
  max-width: 90px;
}
table.clickThreshold .buttonsWrap {
  border-top: solid 1px rgba(var(--color-border), 0.24);
  padding-top: calc(var(--gap) / 2);
  margin-top: 5px;
}
@media (max-width: 799px) {
  table.clickThreshold tbody {
    display: flex;
    flex-direction: column;
  }
  table.clickThreshold tr {
    padding: 15px 0;
    border-bottom: solid 1px rgba(var(--color-border), 0.24);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  table.clickThreshold tr:first-child {
    padding-top: 0;
  }
  table.clickThreshold tr:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  table.clickThreshold tr:last-child div {
    border-top: none;
    padding-top: 0;
  }
  table.clickThreshold tr th:first-child, table.clickThreshold tr th:nth-child(3), table.clickThreshold tr td:first-child, table.clickThreshold tr td:nth-child(3) {
    width: 80px;
  }
  table.clickThreshold tr th:nth-last-child(1), table.clickThreshold tr td:nth-last-child(1) {
    width: auto;
  }
  table.clickThreshold tr th:nth-child(2), table.clickThreshold tr td:nth-child(2) {
    max-width: 100%;
    width: calc(100% - 10px - 80px);
  }
  table.clickThreshold tr th:nth-last-child(3), table.clickThreshold tr td:nth-last-child(3) {
    flex: 1;
    max-width: 100%;
  }
  table.clickThreshold tr th:nth-last-child(2), table.clickThreshold tr td:nth-last-child(2) {
    flex: 1;
    max-width: 100%;
  }
}
@media (max-width: 549px) {
  table.clickThreshold tr th:last-child, table.clickThreshold tr td:last-child {
    min-width: 100%;
  }
  table.clickThreshold tr th:last-child button, table.clickThreshold tr td:last-child button {
    width: 100%;
  }
}
@media (max-width: 449px) {
  table.clickThreshold tr th:first-child, table.clickThreshold tr th:nth-child(3), table.clickThreshold tr td:first-child, table.clickThreshold tr td:nth-child(3) {
    min-width: 100%;
  }
  table.clickThreshold tr th:nth-child(2), table.clickThreshold tr td:nth-child(2) {
    width: 100%;
  }
  table.clickThreshold tr:last-child div {
    flex-direction: column;
  }
}
@media (max-width: 359px) {
  table.clickThreshold tr th:first-child, table.clickThreshold tr th:nth-child(3), table.clickThreshold tr td:first-child, table.clickThreshold tr td:nth-child(3) {
    min-width: 100%;
  }
  table.clickThreshold tr th:nth-last-child(3), table.clickThreshold tr td:nth-last-child(3) {
    min-width: 100%;
  }
}

table.clickInsights {
  width: 100%;
  display: flex;
  flex-direction: column;
}
table.clickInsights > thead,
table.clickInsights > tbody {
  display: flex;
  flex-direction: column;
}
table.clickInsights > thead > tr,
table.clickInsights > tbody > tr {
  width: 100%;
  padding: 0 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  border-top: solid 1px rgba(var(--color-border), 0.24);
}
table.clickInsights > thead > tr:nth-of-type(1),
table.clickInsights > tbody > tr:nth-of-type(1) {
  border-top: none;
}
table.clickInsights > thead > tr td.details,
table.clickInsights > tbody > tr td.details {
  display: none;
}
table.clickInsights > thead > tr.active,
table.clickInsights > tbody > tr.active {
  border: solid 1px rgba(var(--color-border), 0.24);
  border-radius: var(--radius);
}
table.clickInsights > thead > tr.active td.details,
table.clickInsights > tbody > tr.active td.details {
  display: flex;
}
table.clickInsights > thead > tr.active + tr,
table.clickInsights > tbody > tr.active + tr {
  border-top: none;
}
table.clickInsights > thead th, table.clickInsights > thead td,
table.clickInsights > tbody th,
table.clickInsights > tbody td {
  background-color: transparent;
  min-height: 3rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex: 1;
}
table.clickInsights > thead th.date, table.clickInsights > thead th.aiScore, table.clickInsights > thead td.date, table.clickInsights > thead td.aiScore,
table.clickInsights > tbody th.date,
table.clickInsights > tbody th.aiScore,
table.clickInsights > tbody td.date,
table.clickInsights > tbody td.aiScore {
  min-width: 8%;
}
table.clickInsights > thead th.suspicious, table.clickInsights > thead td.suspicious,
table.clickInsights > tbody th.suspicious,
table.clickInsights > tbody td.suspicious {
  min-width: 8%;
  align-items: center;
  justify-content: center;
}
table.clickInsights > thead th.os, table.clickInsights > thead td.os,
table.clickInsights > tbody th.os,
table.clickInsights > tbody td.os {
  min-width: 10%;
}
table.clickInsights > thead th.ip, table.clickInsights > thead td.ip,
table.clickInsights > tbody th.ip,
table.clickInsights > tbody td.ip {
  min-width: 18%;
}
table.clickInsights > thead th.geo, table.clickInsights > thead th.iProv, table.clickInsights > thead th.keywords, table.clickInsights > thead td.geo, table.clickInsights > thead td.iProv, table.clickInsights > thead td.keywords,
table.clickInsights > tbody th.geo,
table.clickInsights > tbody th.iProv,
table.clickInsights > tbody th.keywords,
table.clickInsights > tbody td.geo,
table.clickInsights > tbody td.iProv,
table.clickInsights > tbody td.keywords {
  min-width: 16%;
}
table.clickInsights > thead th.details, table.clickInsights > thead td.details,
table.clickInsights > tbody th.details,
table.clickInsights > tbody td.details {
  width: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: var(--gap) 0;
  align-items: start;
  justify-content: start;
  row-gap: var(--gap);
}
table.clickInsights > thead th.details > div, table.clickInsights > thead td.details > div,
table.clickInsights > tbody th.details > div,
table.clickInsights > tbody td.details > div {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: start;
  justify-content: start;
}
table.clickInsights > thead th.details > div:nth-child(1), table.clickInsights > thead td.details > div:nth-child(1),
table.clickInsights > tbody th.details > div:nth-child(1),
table.clickInsights > tbody td.details > div:nth-child(1) {
  width: 60%;
  padding-right: var(--gap);
}
table.clickInsights > thead th.details > div:nth-child(2), table.clickInsights > thead td.details > div:nth-child(2),
table.clickInsights > tbody th.details > div:nth-child(2),
table.clickInsights > tbody td.details > div:nth-child(2) {
  width: 40%;
}
table.clickInsights > thead th.details > div:nth-child(3), table.clickInsights > thead td.details > div:nth-child(3),
table.clickInsights > tbody th.details > div:nth-child(3),
table.clickInsights > tbody td.details > div:nth-child(3) {
  width: 100%;
  flex-direction: row;
  gap: calc(var(--gap) / 2);
}
table.clickInsights > thead th.details > div:nth-child(3) button:last-child, table.clickInsights > thead td.details > div:nth-child(3) button:last-child,
table.clickInsights > tbody th.details > div:nth-child(3) button:last-child,
table.clickInsights > tbody td.details > div:nth-child(3) button:last-child {
  margin-left: auto;
}
table.clickInsights > thead th.details > div .wrap, table.clickInsights > thead td.details > div .wrap,
table.clickInsights > tbody th.details > div .wrap,
table.clickInsights > tbody td.details > div .wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
table.clickInsights > thead th.details > div .title, table.clickInsights > thead td.details > div .title,
table.clickInsights > tbody th.details > div .title,
table.clickInsights > tbody td.details > div .title {
  text-transform: capitalize;
  color: rgb(var(--color-text));
  font-size: 1rem;
  font-weight: 600;
  padding: 0;
  min-height: auto;
  height: auto;
  text-align: left;
}
table.clickInsights > thead th.details > div .timeline, table.clickInsights > thead td.details > div .timeline,
table.clickInsights > tbody th.details > div .timeline,
table.clickInsights > tbody td.details > div .timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
table.clickInsights > thead th.details > div .timeline::before, table.clickInsights > thead td.details > div .timeline::before,
table.clickInsights > tbody th.details > div .timeline::before,
table.clickInsights > tbody td.details > div .timeline::before {
  position: absolute;
  content: "";
  width: 1px;
  height: calc(100% - var(--gap));
  bottom: 0;
  left: 7px;
  background: linear-gradient(180deg, #00AEEF 57.75%, rgba(0, 174, 239, 0) 99.77%);
}
table.clickInsights > thead th.details > div .timeline > li, table.clickInsights > thead td.details > div .timeline > li,
table.clickInsights > tbody th.details > div .timeline > li,
table.clickInsights > tbody td.details > div .timeline > li {
  display: flex;
  flex-direction: row;
  gap: 15px;
  position: relative;
  z-index: 2;
}
table.clickInsights > thead th.details > div .timeline > li::before, table.clickInsights > thead td.details > div .timeline > li::before,
table.clickInsights > tbody th.details > div .timeline > li::before,
table.clickInsights > tbody td.details > div .timeline > li::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 12px;
  border: solid 2px white;
  margin-top: var(--gap);
  background-color: rgb(var(--color-button));
}
table.clickInsights > thead th.details > div .timeline > li ul, table.clickInsights > thead td.details > div .timeline > li ul,
table.clickInsights > tbody th.details > div .timeline > li ul,
table.clickInsights > tbody td.details > div .timeline > li ul {
  flex: 1;
  border: solid 1px rgba(var(--color-border), 0.24);
  border-radius: var(--radius);
  padding: 15px;
  display: flex;
  flex-direction: column;
}
table.clickInsights > thead th.details > div .timeline > li ul li, table.clickInsights > thead td.details > div .timeline > li ul li,
table.clickInsights > tbody th.details > div .timeline > li ul li,
table.clickInsights > tbody td.details > div .timeline > li ul li {
  display: flex;
  flex-direction: row;
  gap: 15px;
  justify-content: space-between;
  border-bottom: solid 1px rgba(var(--color-border), 0.24);
  padding: 10px 0;
}
table.clickInsights > thead th.details > div .timeline > li ul li:last-child, table.clickInsights > thead td.details > div .timeline > li ul li:last-child,
table.clickInsights > tbody th.details > div .timeline > li ul li:last-child,
table.clickInsights > tbody td.details > div .timeline > li ul li:last-child {
  border-bottom: none;
}
table.clickInsights > thead th.details > div .timeline > li ul .date, table.clickInsights > thead td.details > div .timeline > li ul .date,
table.clickInsights > tbody th.details > div .timeline > li ul .date,
table.clickInsights > tbody td.details > div .timeline > li ul .date {
  font-weight: 600;
}
table.clickInsights > thead th.details > div .timeline > li ul .title, table.clickInsights > thead td.details > div .timeline > li ul .title,
table.clickInsights > tbody th.details > div .timeline > li ul .title,
table.clickInsights > tbody td.details > div .timeline > li ul .title {
  color: rgb(var(--color-header-text));
  text-transform: uppercase;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.5;
}
table.clickInsights > thead th.details > div .mapLocation, table.clickInsights > thead td.details > div .mapLocation,
table.clickInsights > tbody th.details > div .mapLocation,
table.clickInsights > tbody td.details > div .mapLocation {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  justify-content: stretch;
}
table.clickInsights > thead th.details > div .mapLocation .mapWrap, table.clickInsights > thead td.details > div .mapLocation .mapWrap,
table.clickInsights > tbody th.details > div .mapLocation .mapWrap,
table.clickInsights > tbody td.details > div .mapLocation .mapWrap {
  width: calc(100% - var(--gap) - 120px);
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
}
table.clickInsights > thead th.details > div .mapLocation .mapWrap iframe, table.clickInsights > thead td.details > div .mapLocation .mapWrap iframe,
table.clickInsights > tbody th.details > div .mapLocation .mapWrap iframe,
table.clickInsights > tbody td.details > div .mapLocation .mapWrap iframe {
  width: 100%;
  height: 100%;
}
table.clickInsights > thead th.details > div .mapLocation table, table.clickInsights > thead td.details > div .mapLocation table,
table.clickInsights > tbody th.details > div .mapLocation table,
table.clickInsights > tbody td.details > div .mapLocation table {
  display: flex;
  flex-direction: column;
  max-width: 120px;
}
table.clickInsights > thead th.details > div .mapLocation table tr, table.clickInsights > thead td.details > div .mapLocation table tr,
table.clickInsights > tbody th.details > div .mapLocation table tr,
table.clickInsights > tbody td.details > div .mapLocation table tr {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: none;
}
table.clickInsights > thead th.details > div .mapLocation table tr td, table.clickInsights > thead td.details > div .mapLocation table tr td,
table.clickInsights > tbody th.details > div .mapLocation table tr td,
table.clickInsights > tbody td.details > div .mapLocation table tr td {
  width: 100%;
}
table.clickInsights > thead th.details table tr, table.clickInsights > thead td.details table tr,
table.clickInsights > tbody th.details table tr,
table.clickInsights > tbody td.details table tr {
  padding: 10px 0;
  border-bottom: solid 1px rgba(var(--color-border), 0.24);
}
table.clickInsights > thead th.details table td, table.clickInsights > thead td.details table td,
table.clickInsights > tbody th.details table td,
table.clickInsights > tbody td.details table td {
  min-height: auto;
  height: auto;
  white-space: wrap;
  display: block;
  text-align: left;
}
table.clickInsights > thead th.details table td:first-child, table.clickInsights > thead td.details table td:first-child,
table.clickInsights > tbody th.details table td:first-child,
table.clickInsights > tbody td.details table td:first-child {
  color: rgb(var(--color-header-text));
  text-transform: uppercase;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.5;
  max-width: 130px;
}
table.clickInsights > thead th.hide, table.clickInsights > thead td.hide,
table.clickInsights > tbody th.hide,
table.clickInsights > tbody td.hide {
  display: none;
}
table.clickInsights > thead td,
table.clickInsights > tbody td {
  flex: 1;
  border-bottom: none;
  padding: 0;
  font-size: 0.75rem;
}
table.clickInsights > thead td:not(.suspicious):hover,
table.clickInsights > tbody td:not(.suspicious):hover {
  cursor: pointer;
}
table.clickInsights > thead .tdTitle,
table.clickInsights > tbody .tdTitle {
  text-transform: uppercase;
  font-size: 12px;
  color: rgb(var(--color-border));
}
table.clickInsights > thead {
  background-color: rgb(var(--color-tHead));
  border-radius: var(--radius);
}
table.clickInsights > thead th:first-child {
  padding-left: 0;
}
table.clickInsights > thead th:last-child {
  padding-right: 0;
}
table.clickInsights > tbody tr {
  display: flex;
  flex-direction: row;
}
table.clickInsights span {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}
table.clickInsights span.location::before {
  width: 16px;
  height: 12px;
}
table.clickInsights span.os.windows::before {
  content: var(--icon-os-windows);
}
table.clickInsights span.os.apple::before {
  content: var(--icon-os-apple);
}
table.clickInsights span.os.android::before {
  content: var(--icon-os-android);
}
table.clickInsights span.os.linux::before {
  content: var(--icon-os-linux);
}
table.clickInsights span.score, table.clickInsights span.keyword {
  border-radius: 50px;
  padding: 5px 10px;
}
table.clickInsights span.score {
  color: rgb(var(--color-text-inverse));
}
table.clickInsights span.score.safe {
  background-color: rgb(var(--color-label-green));
}
table.clickInsights span.score.low {
  background-color: rgb(var(--color-button));
}
table.clickInsights span.score.medium {
  background-color: rgb(var(--color-label-yellow));
}
table.clickInsights span.score.high {
  background-color: rgb(var(--color-label-orange));
}
table.clickInsights span.score.extreme {
  background-color: rgb(var(--color-label-red));
}
table.clickInsights span.keyword {
  background-color: rgb(var(--color-tHead));
  color: rgb(var(--color-header-text));
}
@media (max-width: 1099px) {
  table.clickInsights > thead {
    display: none;
  }
  table.clickInsights > tbody tr {
    padding: 15px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 10px;
    row-gap: 20px;
  }
  table.clickInsights > tbody tr td {
    padding: 0;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 5px;
  }
  table.clickInsights > tbody tr td.suspicious {
    align-items: start;
    justify-content: start;
  }
  table.clickInsights > tbody tr td.details {
    grid-column: 1/span 4;
    flex-direction: row;
    width: 100%;
    column-gap: 0;
  }
  table.clickInsights > tbody tr td.details > div table tr {
    display: flex;
    flex-wrap: wrap;
  }
  table.clickInsights > tbody tr td.details > div table tr > td:last-child {
    word-break: break-all;
  }
  table.clickInsights > tbody tr.active {
    padding: 15px;
  }
}
@media (max-width: 880px) {
  table.clickInsights > tbody > tr {
    grid-template-columns: repeat(3, 1fr);
  }
  table.clickInsights > tbody > tr td.details {
    grid-column: 1/span 3;
    grid-template-columns: 1fr;
  }
  table.clickInsights > tbody > tr td.details > div:nth-child(1) {
    width: 100%;
    padding-right: 0;
  }
  table.clickInsights > tbody > tr td.details > div:nth-child(2) {
    width: 100%;
  }
  table.clickInsights > tbody > tr.active td.details {
    display: grid;
  }
}
@media (max-width: 730px) {
  table.clickInsights > tbody > tr td.details > div:nth-child(3) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  table.clickInsights > tbody > tr td.details > div:nth-child(3) button:last-child {
    margin-left: 0;
  }
}
@media (max-width: 639px) {
  table.clickInsights > tbody > tr {
    grid-template-columns: repeat(2, 1fr);
  }
  table.clickInsights > tbody > tr td.details {
    grid-column: 1/span 2;
  }
}
@media (max-width: 540px) {
  table.clickInsights > tbody > tr td.details > div:nth-child(3) {
    grid-template-columns: 1fr;
  }
  table.clickInsights > tbody > tr td.details > div .mapLocation {
    display: grid;
    grid-template-columns: 1fr;
  }
  table.clickInsights > tbody > tr td.details > div .mapLocation .mapWrap {
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 449px) {
  table.clickInsights > tbody > tr {
    grid-template-columns: 1fr;
  }
  table.clickInsights > tbody > tr td.details {
    grid-column: 1;
  }
  table.clickInsights > tbody > tr td.details table tr {
    flex-direction: column;
    gap: 5px;
  }
}
@media (max-width: 394px) {
  table.clickInsights > tbody > tr {
    grid-template-columns: 1fr;
  }
  table.clickInsights > tbody > tr td.details > div .timeline > li ul li {
    flex-direction: column;
    gap: 7px;
  }
}

.trafficSavingsClicks .--totalTraffic {
  align-self: stretch;
}
.trafficSavingsClicks .--totalTraffic .widgetTitle {
  align-items: end;
}
.trafficSavingsClicks .--totalTraffic .widgetTitle .labels {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.trafficSavingsClicks .--totalTraffic .widgetTitle .labels span {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}
.trafficSavingsClicks .--totalTraffic .widgetTitle .labels span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: rgba(var(--color-border), 0.24);
}
.trafficSavingsClicks .--totalTraffic .widgetTitle .labels span[data-label=blue]::before {
  background-color: rgb(var(--color-button));
}
.trafficSavingsClicks .--totalTraffic .widgetTitle .labels span[data-label=green]::before {
  background-color: rgb(var(--color-label-green));
}
.trafficSavingsClicks .--totalTraffic .widgetTitle .labels span[data-label=red]::before {
  background-color: rgb(var(--color-label-red));
}
.trafficSavingsClicks .--totalTraffic #trafficChart {
  width: calc(100% + 20px);
  margin-left: -10px;
  position: relative;
}
.trafficSavingsClicks .--totalTraffic #trafficChart::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #f2fbfe;
  top: 0;
  left: 0;
  border-radius: var(--radius);
}
.trafficSavingsClicks .--totalTraffic #trafficChart .apexcharts-yaxis-texts-g text:not(:nth-child(1), :nth-last-child(1)) {
  display: none;
}
.trafficSavingsClicks [data-width="3"] {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.trafficSavingsClicks [data-width="3"] .--savings {
  flex: 1;
}
.trafficSavingsClicks [data-width="3"] .--clicks {
  flex: 1;
  gap: 10px;
}
.trafficSavingsClicks [data-width="3"] .--clicks .canvasWrap {
  max-width: 125px;
  margin: 0 auto;
  position: relative;
}
.trafficSavingsClicks [data-width="3"] .--clicks .canvasWrap .center {
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  font-weight: 600;
  font-size: 1.2rem;
}
@media (max-width: 880px) {
  .trafficSavingsClicks {
    grid-template-columns: 1fr 1fr;
  }
  .trafficSavingsClicks .--totalTraffic {
    grid-column: span 2;
  }
  .trafficSavingsClicks [data-width="3"] {
    grid-column: span 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .trafficSavingsClicks [data-width="3"] .--savings {
    height: 100%;
  }
}
@media (max-width: 539px) {
  .trafficSavingsClicks .--totalTraffic {
    display: none;
  }
  .trafficSavingsClicks [data-width="3"] {
    grid-template-columns: 1fr;
  }
}

.fraudStatistics {
  align-items: center;
}
.fraudStatistics .chartWrap {
  transform: rotate(180deg);
}
.fraudStatistics .widget.stats {
  border-radius: 0;
  padding: var(--gap) 0;
  background-color: transparent;
  gap: 15px;
}
.fraudStatistics .widget.stats .widgetTitle {
  color: rgb(var(--color-text));
}
.fraudStatistics .widget.stats ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gap);
  row-gap: 0;
}
.fraudStatistics .widget.stats ul li {
  padding: 10px 0;
  border-bottom: solid 1px rgba(var(--color-border), 0.24);
  display: grid;
  grid-template-columns: 1fr 45px;
  row-gap: 5px;
  column-gap: 15px;
}
.fraudStatistics .widget.stats ul li .label {
  width: 100%;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.3;
  grid-column: 1/span 2;
}
.fraudStatistics .widget.stats ul li .label[data-label=blue] {
  color: rgb(var(--color-button));
}
.fraudStatistics .widget.stats ul li .label[data-label=purple] {
  color: rgb(var(--color-label-purple));
}
.fraudStatistics .widget.stats ul li .label[data-label=pink] {
  color: rgb(var(--color-label-pink));
}
.fraudStatistics .widget.stats ul li .label[data-label=green] {
  color: rgb(var(--color-label-green));
}
.fraudStatistics .widget.stats ul li .label[data-label=yellow] {
  color: rgb(var(--color-label-yellow));
}
.fraudStatistics .widget.stats ul li .label[data-label=orange] {
  color: rgb(var(--color-label-orange));
}
@media (max-width: 1099px) {
  .fraudStatistics[data-grid] {
    grid-template-columns: 325px 1fr;
  }
  .fraudStatistics .chart {
    grid-column: 1;
  }
  .fraudStatistics .stats {
    grid-column: 2;
  }
}
@media (max-width: 900px) {
  .fraudStatistics {
    align-items: start;
  }
  .fraudStatistics .widget.stats ul {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 639px) {
  .fraudStatistics {
    grid-column: span 2;
    gap: 0;
  }
  .fraudStatistics[data-grid] {
    grid-template-columns: 1fr;
  }
  .fraudStatistics .widget.stats {
    grid-column: 1;
  }
}

@media (max-width: 959px) {
  table[data-table=last-blue] thead {
    display: none;
  }
  table[data-table=last-blue] tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: solid 1px rgba(var(--color-border), 0.24);
    padding: 15px 0;
    gap: 10px;
  }
  table[data-table=last-blue] tr:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  table[data-table=last-blue] tr:first-child {
    padding-top: 0;
  }
  table[data-table=last-blue] tr td {
    border-bottom: none;
    width: 100%;
    padding: 10px 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: start;
  }
  table[data-table=last-blue] tr td:nth-last-of-type(3), table[data-table=last-blue] tr td:nth-last-of-type(2), table[data-table=last-blue] tr td:nth-last-of-type(1) {
    text-align: left;
  }
  table[data-table=last-blue] tr td .tdTitle {
    min-width: 80px;
    text-transform: uppercase;
    color: rgb(var(--color-border));
    font-size: 12px;
  }
}
@media (max-width: 649px) {
  table[data-table=last-blue] tr {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 499px) {
  table[data-table=last-blue] tr {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

[data-props*=stick] {
  position: sticky;
  top: calc(var(--size-header) + var(--gutter));
}
@media (max-width: 880px) {
  [data-props*=stick] {
    position: relative;
    top: auto;
  }
}

[data-props*=expand] {
  flex: 1;
}

#popupWrap {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 98;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  visibility: collapse;
}
#popupWrap::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(var(--color-text), 0.12);
  opacity: 0;
  transition: backdrop-filter 0.1s ease;
}
#popupWrap .popup {
  position: relative;
  z-index: 3;
  width: 80%;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  padding: 1.562rem 1.875rem;
  background-color: rgba(var(--color-widget-background), 1);
  border-radius: var(--radius);
  align-self: start;
  gap: var(--gap);
  text-align: center;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.15s ease;
}
#popupWrap .popup .title {
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) / 4);
  align-items: center;
  justify-content: center;
}
#popupWrap .popup .title[data-title=alert]::before {
  content: var(--icon-alert);
}
#popupWrap .popup .actions {
  display: flex;
  flex-direction: row;
  gap: calc(var(--gap) / 3);
  justify-content: center;
}
#popupWrap.active {
  visibility: visible;
}
#popupWrap.active::before {
  opacity: 1;
  transition: opacity 0.1s ease;
}
#popupWrap.active .popup {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.15s ease;
}

#loader {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: rgba(var(--color-text), 0.36);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: collapse;
  transition: opacity 0.3s ease, visibility 0s ease 0.3s;
}
#loader.active {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s ease, opacity 0.3s ease;
}
#loader .loader {
  width: 3px;
  height: 3px;
  display: block;
  margin: 10px auto;
  position: relative;
  border-radius: 4px;
  color: #FFF;
  background: currentColor;
  box-sizing: border-box;
  animation: animloader 0.3s 0.3s linear infinite alternate;
}
#loader .loader::after, #loader .loader::before {
  content: "";
  box-sizing: border-box;
  width: 3px;
  height: 3px;
  border-radius: 4px;
  background: currentColor;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  animation: animloader 0.3s 0.45s linear infinite alternate;
}
#loader .loader::after {
  top: -10px;
  animation-delay: 0s;
}
@keyframes animloader {
  0% {
    width: 3px;
  }
  100% {
    width: 30px;
  }
}

.pricingPlans {
  padding-top: calc(var(--gap) * 0.5);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: center;
}
.pricingPlans > div {
  width: 90%;
  max-width: 500px;
  text-align: center;
}
.pricingPlans > div:first-of-type {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pricingPlans > div:first-of-type h4 {
  color: rgb(var(--color-button));
}
.pricingPlans > div:first-of-type p {
  color: rgba(var(--color-text), 0.36);
}
.pricingPlans > div:nth-of-type(2) .contactTxt {
  display: none;
}
.pricingPlans > div:nth-of-type(3) .switchWrap {
  margin: 0 auto;
  max-width: 320px;
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: 1;
  align-items: center;
  gap: 1rem;
}
.pricingPlans > div:nth-of-type(3) .switchWrap > * {
  grid-row: 1;
  margin: 0;
}
.pricingPlans > div:nth-of-type(3) .switchWrap p {
  grid-column: 3;
  grid-row: 1;
}
.pricingPlans > div:nth-of-type(3) .switchWrap p + p {
  grid-column: 1;
  color: rgb(var(--color-button));
}
.pricingPlans > div:nth-of-type(3) .switchWrap input:checked + p {
  color: rgb(var(--color-button));
}
.pricingPlans > div:nth-of-type(3) .switchWrap input:checked + p + p {
  color: rgb(var(--color-text));
}
.pricingPlans > div:nth-of-type(3) .switchWrap span {
  color: rgb(var(--color-button));
  grid-column: 4;
  border: solid 1px rgb(var(--color-button));
  border-radius: 20px;
  height: 36px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.pricingPlans > div:nth-of-type(4) {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pricingPlans > div:nth-of-type(5) {
  margin-top: 30px;
}
.pricingPlans > div:nth-of-type(5) button {
  margin: 0 auto;
  padding: 12px 30px;
  font-size: 1.1rem;
}
.pricingPlans > div:nth-of-type(6) {
  margin-top: var(--gap);
  background: rgb(var(--color-widget-background));
  border-radius: var(--radius);
  padding: 10px var(--gap);
  font-size: 1.2rem;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06);
}
.pricingPlans > div:nth-of-type(6) ul {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pricingPlans > div:nth-of-type(6) ul li {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  border-bottom: solid 1px rgba(var(--color-border), 0.12);
}
.pricingPlans > div:nth-of-type(6) ul li:last-child {
  border-bottom: none;
}
.pricingPlans > div:nth-of-type(6) ul li::before {
  content: var(--icon-whitelist);
}
.pricingPlans > div:nth-of-type(7) {
  margin-top: var(--gap);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}
.pricingPlans > div:nth-of-type(7) img {
  width: auto;
  max-height: 36px;
}
.pricingPlans > div:last-of-type {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 60px;
}
.pricingPlans > div:last-of-type h2 {
  font-weight: 700;
  color: rgba(var(--color-border), 0.72);
  line-height: 1;
}
.pricingPlans > div [data-contact] {
  display: none;
}

:host {
  --color-bg-default: #fff;
  --color-bg-secondary: #f9f9f9;
  --color-fg-default: #333;
  --color-fg-primary: #66cef5;
  --color-fg-secondary: #748194;
  --color-fg-selected: #fff;
  --color-fg-muted: #9e9e9e;
  --color-fg-accent: #e63757;
  --color-btn-primary-bg: #fff;
  --color-btn-primary-fg: #6b82ff;
  --color-btn-primary-border: #6b82ff;
  --color-btn-primary-hover-bg: #6b82ff;
  --color-btn-primary-hover-fg: #fff;
  --color-btn-primary-hover-border: #6b82ff;
  --color-btn-primary-disabled-bg: #a2b0ff;
  --color-btn-primary-disabled-fg: #fff;
  --color-btn-primary-disabled-border: #a2b0ff;
  --color-btn-secondary-bg: #fff;
  --color-btn-secondary-fg: #748194;
  --color-btn-secondary-border: #748194;
  --color-btn-secondary-hover-bg: #748194;
  --color-btn-secondary-hover-fg: #fff;
  --color-btn-secondary-hover-border: #748194;
  --color-btn-secondary-disabled-bg: #b5bbc4;
  --color-btn-secondary-disabled-fg: #fff;
  --color-btn-secondary-disabled-border: #b5bbc4;
  --color-border-default: #ddd;
  --color-border-locked: #f9f9f9;
  --day-width: 42px;
  --day-height: 37px;
  --border-radius: 2px;
  --primary-color: #6b82ff;
  --secondary-color: #748194;
  --white-color: #fff;
  --black-color: #333;
  --lightgray-color: #f9f9f9;
  --gray-color: #9e9e9e;
  --red-color: #e63757 ;
}

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  border-radius: 4px;
  color: var(--color-fg-default);
  cursor: default;
  display: inline-block;
  font-size: 0.8em;
  height: 0;
  overflow: hidden;
  pointer-events: all;
  position: absolute;
  transform: scale(0);
}

.container.calc {
  height: auto;
  transform: none;
  transition: none;
  visibility: hidden;
}

.container.show {
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  height: auto;
  transform: scale(1);
}

.container.inline {
  height: auto;
  left: 0;
  position: relative;
  top: 0;
  transform: scaleY(1);
}

.container > main {
  background-color: var(--color-bg-default);
}

.container > footer,
.container > header {
  background-color: var(--color-bg-secondary);
  padding: 10px;
}

.container > footer .footer-buttons {
  -moz-column-gap: 5px;
  column-gap: 5px;
  display: flex;
  justify-content: flex-end;
}

.container > footer .footer-buttons > button {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  cursor: pointer;
  padding: 5px 10px;
}

.container > footer .footer-buttons > button.apply-button {
  background-color: var(--color-btn-primary-bg);
  border-color: var(--color-btn-primary-border);
  color: var(--color-btn-primary-fg);
}

.container > footer .footer-buttons > button.apply-button:hover {
  background-color: var(--color-btn-primary-hover-bg);
  border-color: var(--color-btn-primary-hover-border);
  color: var(--color-btn-primary-hover-fg);
}

.container > footer .footer-buttons > button.apply-button:disabled {
  background-color: var(--color-btn-primary-disabled-bg);
  border-color: var(--color-btn-primary-disabled-border);
  color: var(--color-btn-primary-disabled-fg);
  cursor: default;
}

.container > footer .footer-buttons > button.cancel-button {
  background-color: var(--color-btn-secondary-bg);
  border-color: var(--color-btn-secondary-border);
  color: var(--color-btn-secondary-fg);
}

.container > footer .footer-buttons > button.cancel-button:hover {
  background-color: var(--color-btn-secondary-hover-bg);
  border-color: var(--color-btn-secondary-hover-border);
  color: var(--color-btn-secondary-hover-fg);
}

.container > footer .footer-buttons > button.cancel-button:disabled {
  background-color: var(--color-btn-secondary-disabled-bg);
  border-color: var(--color-btn-secondary-disabled-border);
  color: var(--color-btn-secondary-disabled-fg);
  cursor: default;
}

.grid-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid-6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid-7 {
  grid-template-columns: repeat(7, 1fr);
}

.grid-8 {
  grid-template-columns: repeat(8, 1fr);
}

.grid-9 {
  grid-template-columns: repeat(9, 1fr);
}

.grid-10 {
  grid-template-columns: repeat(10, 1fr);
}

.grid-11 {
  grid-template-columns: repeat(11, 1fr);
}

.grid-12 {
  grid-template-columns: repeat(12, 1fr);
}

.calendars {
  display: grid;
}

.calendars:not(.grid-1) .calendar > .header .month-name {
  order: 2;
  text-align: center;
}

.calendars:not(.grid-1) .calendar > .header .previous-button {
  order: 1;
  visibility: hidden;
}

.calendars:not(.grid-1) .calendar > .header .next-button {
  order: 3;
  visibility: hidden;
}

.calendars:not(.grid-1) .calendar:first-child > .header .previous-button,
.calendars:not(.grid-1) .calendar:last-child > .header .next-button {
  visibility: visible;
}

.calendar {
  padding: 10px;
  padding-left: 0;
}
.calendar + .calendar {
  padding-right: 0;
}

.calendar > .header {
  align-items: center;
  -moz-column-gap: 5px;
  column-gap: 5px;
  display: flex;
  justify-content: space-between;
}

.calendar > .header .month-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}

.calendar > .header button {
  min-width: auto;
  align-items: center;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--color-btn-secondary-fg);
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 4px 7px;
}
.calendar > .header button.previous-button {
  position: relative;
}
.calendar > .header button.previous-button::before {
  content: var(--icon-arrow-dropdown);
  transform: rotate(90deg);
}
.calendar > .header button.next-button {
  position: relative;
}
.calendar > .header button.next-button::before {
  content: var(--icon-arrow-dropdown);
  transform: rotate(-90deg);
}

.calendar > .header button > img,
.calendar > .header button > svg {
  fill: var(--color-btn-secondary-fg);
  color: var(--color-btn-secondary-fg);
  pointer-events: none;
  transform: scale(0.7);
}

.calendar > .daynames-row,
.calendar > .days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}

.calendar > .daynames-row > .day,
.calendar > .daynames-row > .dayname,
.calendar > .days-grid > .day,
.calendar > .days-grid > .dayname {
  align-items: center;
  cursor: default;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  justify-content: center;
}

.calendar > .daynames-row > .dayname {
  color: var(--color-fg-muted);
  font-size: 12px;
  padding: 5px 0;
}

.calendar > .days-grid > .day {
  aspect-ratio: 1/1;
  z-index: 2;
  position: relative;
}

.calendar > .days-grid > .day:hover::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50px;
  background-color: rgb(var(--color-tHead));
  z-index: -1;
}

.calendar > .days-grid > .day.today {
  font-weight: 600;
}

.calendar > .days-grid > .day.selected {
  color: var(--color-fg-selected);
}
.calendar > .days-grid > .day.selected::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50px;
  background-color: var(--color-fg-primary);
  z-index: -1;
}

@media (max-width: 480px) {
  .container:not(.inline) {
    transform: scaleY(0) !important;
    transform-origin: bottom center !important;
  }
  .container:not(.inline).show {
    bottom: 0 !important;
    left: 0 !important;
    position: fixed !important;
    right: 0 !important;
    top: auto !important;
    transform: scaleY(1) !important;
  }
  .container {
    width: 100%;
  }
  .calendars {
    grid-template-columns: repeat(1, 1fr);
  }
  .calendars .calendar {
    box-sizing: border-box;
    width: 100%;
  }
  .calendars .calendar:nth-child(n+2) {
    display: none;
  }
  .calendars .calendar > .days-grid > .day {
    height: auto;
    max-height: unset;
    max-width: unset;
    min-height: unset;
    min-width: unset;
    width: auto;
  }
  .calendars .calendar > .header:not(.no-next-month) .next-button {
    visibility: visible;
  }
}
:host {
  --color-fg-locked: #9e9e9e;
  --color-bg-locked: #ffab91;
  --color-bg-unavailable: #f9f9f9 ;
}

.container.lock-plugin .calendars .calendar:first-child > .header.no-previous-month .previous-button,
.container.lock-plugin .calendars .calendar:last-child > .header.no-next-month .next-button {
  visibility: hidden;
}

.container.lock-plugin .calendar > .days-grid > .day.not-available {
  background-color: var(--color-bg-unavailable);
  color: var(--color-fg-locked);
  font-style: italic;
  pointer-events: none;
}

.container.lock-plugin .calendar > .days-grid > .day.locked {
  background-color: transparent;
  border: 1px solid var(--color-border-locked);
  color: var(--color-fg-locked);
  pointer-events: none;
}

.container.lock-plugin .calendar > .days-grid > .day.locked:not(.start):not(.end) {
  background-image: repeating-linear-gradient(135deg, transparent, var(--color-bg-locked) 2px, transparent 2px, transparent 4px);
  font-style: italic;
}

.container.lock-plugin .preset-plugin-container > button:disabled {
  color: var(--color-fg-locked);
  pointer-events: none;
}

.container.preset-plugin > main {
  display: flex;
}

.container.preset-plugin > main.preset-left {
  flex-direction: row-reverse;
}

.container.preset-plugin > main.preset-right {
  flex-direction: row;
}

.container.preset-plugin > main.preset-left .preset-plugin-container,
.container.preset-plugin > main.preset-right .preset-plugin-container {
  flex-direction: column;
  width: 130px;
}

.container.preset-plugin > main.preset-top {
  flex-direction: column-reverse;
}

.container.preset-plugin > main.preset-bottom {
  flex-direction: column;
}

.container.preset-plugin > main.preset-bottom .preset-plugin-container,
.container.preset-plugin > main.preset-top .preset-plugin-container {
  flex-direction: row;
  flex-wrap: wrap;
}

.preset-plugin-container {
  display: flex;
  align-items: center;
  gap: calc(var(--gap) / 2);
  padding-bottom: 15px;
  border-bottom: solid 1px rgba(var(--color-border), 0.24);
}

.preset-plugin-container > button {
  color: rgb(var(--color-button-inactive-text));
  background-color: rgba(var(--color-border), 0.15);
  padding: 0 10px;
  border-radius: 50px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.preset-plugin-container > button:hover {
  background-color: rgba(var(--color-border), 0.24);
}

:host {
  --color-bg-inrange: #d5dbff;
  --color-bg-tooltip: #fff;
  --color-fg-tooltip: #333 ;
}

.range-plugin-tooltip {
  background-color: var(--color-bg-tooltip);
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  color: var(--color-fg-tooltip);
  font-size: 12px;
  margin-top: -4px;
  padding: 4px 8px;
  pointer-events: none;
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  z-index: 1;
}

.range-plugin-tooltip:before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(0, 0, 0, 0.12);
  bottom: -5px;
  content: "";
  left: calc(50% - 5px);
  position: absolute;
}

.range-plugin-tooltip:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--color-bg-tooltip);
  bottom: -4px;
  content: "";
  left: calc(50% - 4px);
  position: absolute;
}

.container.range-plugin .calendar > .days-grid > .day {
  position: relative;
  aspect-ratio: 1/1;
}

.container.range-plugin .calendar > .days-grid > .day.in-range:last-of-type {
  border-bottom-right-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.container.range-plugin .calendar > .days-grid > .day.in-range {
  background-color: rgb(var(--color-tHead));
  border-radius: 0;
}

.container.range-plugin .calendar > .days-grid > .day.end,
.container.range-plugin .calendar > .days-grid > .day.start {
  color: var(--color-fg-selected);
}
.container.range-plugin .calendar > .days-grid > .day.end::before,
.container.range-plugin .calendar > .days-grid > .day.start::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50px;
  background-color: var(--color-fg-primary);
  z-index: -1;
}

.container.range-plugin .calendar > .days-grid > .day.start::after {
  content: "";
  width: 50%;
  aspect-ratio: 1/2;
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgb(var(--color-tHead));
  z-index: -2;
}
.container.range-plugin .calendar > .days-grid > .day.start.flipped::after {
  right: auto;
  left: 0;
}

.container.range-plugin .calendar > .days-grid > .in-range:nth-last-of-type(1) {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

.container.range-plugin .calendar > .days-grid > .day.end::after {
  content: "";
  width: 50%;
  aspect-ratio: 1/2;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(var(--color-tHead));
  z-index: -2;
}
.container.range-plugin .calendar > .days-grid > .day.end.flipped::after {
  left: auto;
  right: 0;
}

.container.range-plugin .calendar > .days-grid > .day.start.end:after {
  content: none;
}

.container.range-plugin .calendar > .days-grid > div:not(.day) + .day.in-range {
  border-bottom-left-radius: var(--border-radius);
  border-top-left-radius: var(--border-radius);
}

.container.range-plugin .calendar > .days-grid > div:nth-child(7n).in-range {
  border-bottom-right-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.container.range-plugin .calendar > .days-grid > div:nth-child(7n+1).in-range {
  border-bottom-left-radius: var(--border-radius);
  border-top-left-radius: var(--border-radius);
}

.container.preset-plugin main {
  display: grid;
}

.container.preset-plugin main.preset-left > .calendars,
.container.preset-plugin main.preset-top > .calendars {
  order: 2;
}

.container.preset-plugin main.preset-left > .preset-plugin-container,
.container.preset-plugin main.preset-top > .preset-plugin-container {
  order: 1;
}

.container.preset-plugin main.preset-left,
.container.preset-plugin main.preset-right {
  grid-template-columns: auto auto;
}

.container.preset-plugin main.preset-left .preset-plugin-container,
.container.preset-plugin main.preset-right .preset-plugin-container {
  grid-row: span 2;
  width: 130px;
}

.container.preset-plugin main.preset-bottom > .preset-plugin-container {
  order: 4;
}

.container.preset-plugin main.preset-bottom,
.container.preset-plugin main.preset-top {
  grid-template-columns: auto;
}

.container.preset-plugin main > .time-plugin-container {
  order: 3;
}

.container > main:not([class*=preset-]) {
  flex-direction: column;
}

.time-plugin-container {
  background-color: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
  display: flex;
  justify-content: space-around;
  padding: 10px;
}

.time-plugin-container input[type=time] {
  font-size: 18px;
}

.time-plugin-container input[type=time],
.time-plugin-container select {
  background-color: var(--color-bg-default);
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--color-fg-default);
}

.time-plugin-container select {
  margin: 0 3px;
}

.container.amp-plugin .calendars .calendar > .header .month-name {
  align-items: center;
  -moz-column-gap: 5px;
  column-gap: 5px;
  display: flex;
  justify-content: center;
}

.container.amp-plugin .calendars .calendar > .header .month-name select {
  border: none;
  font-size: 14px;
  padding: 3px;
}

.container.amp-plugin .calendars .calendar > .header .month-name select.month-name--dropdown {
  font-weight: 700;
}

.container.amp-plugin .calendars .calendar > .header .reset-button {
  order: 4;
}

.container.amp-plugin .calendars.calendars:not(.grid-1) .calendar > .header .reset-button {
  visibility: hidden;
}

.container.amp-plugin .calendars.calendars:not(.grid-1) .calendar:last-child > .header .reset-button {
  visibility: visible;
}

.container.amp-plugin.week-numbers .calendar > .daynames-row,
.container.amp-plugin.week-numbers .calendar > .days-grid {
  grid-template-columns: 30px repeat(7, 1fr);
}

.container.amp-plugin.week-numbers .calendar > .daynames-row .wnum-header,
.container.amp-plugin.week-numbers .calendar > .daynames-row .wnum-item,
.container.amp-plugin.week-numbers .calendar > .days-grid .wnum-header,
.container.amp-plugin.week-numbers .calendar > .days-grid .wnum-item {
  align-items: center;
  color: var(--color-fg-muted);
  display: flex;
  font-size: 12px;
  justify-content: center;
}

.container[data-theme=dark] {
  --color-bg-default: #22272e;
  --color-bg-secondary: #2d333b;
  --color-bg-inrange: #2c542e;
  --color-bg-locked: #ec775c;
  --color-bg-unavailable: #545d68;
  --color-bg-tooltip: #9e9e9e;
  --color-fg-default: #adbac7;
  --color-fg-primary: #46954a;
  --color-fg-secondary: #202122;
  --color-fg-muted: #9e9e9e;
  --color-fg-accent: #ec775c;
  --color-fg-locked: #9e9e9e;
  --color-btn-primary-bg: #2d333b;
  --color-btn-primary-fg: #46954a;
  --color-btn-primary-border: #46954a;
  --color-btn-primary-hover-bg: #46954a;
  --color-btn-primary-hover-fg: #fff;
  --color-btn-primary-hover-border: #46954a;
  --color-btn-secondary-bg: #2d333b;
  --color-btn-secondary-fg: #adbac7;
  --color-btn-secondary-border: #adbac7;
  --color-btn-secondary-hover-bg: #adbac7;
  --color-btn-secondary-hover-fg: #202122;
  --color-btn-secondary-hover-border: #adbac7;
  --color-border-default: #373e47;
  --color-border-locked: #2d333b ;
}

input#datepicker {
  display: none;
}

@media (max-width: 739px) {
  .preset-plugin-container > button {
    font-size: 0.75rem;
  }
}
@media (max-width: 463px) {
  .preset-plugin-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .preset-plugin-container > button {
    width: 100%;
  }
}
@media (max-width: 373px) {
  .preset-plugin-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.noUi-target {
  position: relative;
}

.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* Wrapper for all connect elements.
 */
.noUi-connects {
  overflow: hidden;
  z-index: 0;
}

.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  transform-style: flat;
}

/* Offset direction
 */
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
  left: 0;
  right: auto;
}

/* Give origins 0 height/width so they don't interfere with clicking the
 * connect elements.
 */
.noUi-vertical .noUi-origin {
  top: -100%;
  width: 0;
}

.noUi-horizontal .noUi-origin {
  height: 0;
}

.noUi-handle {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}

.noUi-touch-area {
  height: 100%;
  width: 100%;
}

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
}

.noUi-state-drag * {
  cursor: inherit !important;
}

/* Slider size and handle placement;
 */
.noUi-horizontal {
  height: 4px;
}

.noUi-horizontal .noUi-handle {
  width: 12px;
  height: 12px;
  right: -4px;
  top: -4px;
  border-radius: 12px;
  outline: 5px solid;
  outline-color: rgba(var(--color-button), 0.24);
  transition: outline 0.2s ease-out;
}
.noUi-horizontal .noUi-handle:hover {
  cursor: pointer;
}

.noUi-vertical {
  width: 18px;
}

.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  right: -6px;
  bottom: -17px;
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
  left: -17px;
  right: auto;
}

/* Styling;
 * Giving the connect element a border radius causes issues with using transform: scale
 */
.noUi-target {
  background: #EBEDEE;
  border-radius: 4px;
}

.noUi-connects {
  border-radius: 3px;
}

.noUi-connect {
  background: rgb(var(--color-button));
}

/* Handles and cursors;
 */
.noUi-draggable {
  cursor: ew-resize;
}

.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}

.noUi-handle {
  background: rgb(var(--color-button));
  cursor: default;
}

.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}

.noUi-vertical .noUi-handle:after {
  top: 17px;
}

/* Disabled state;
 */
[disabled] .noUi-connect {
  background: #B8B8B8;
}

[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
  cursor: not-allowed;
}

/* Base;
 *
 */
.noUi-pips,
.noUi-pips * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.noUi-pips {
  position: absolute;
  color: #999;
}

/* Values;
 *
 */
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}

.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}

/* Markings;
 *
 */
.noUi-marker {
  position: absolute;
  background: #CCC;
}

.noUi-marker-sub {
  background: #AAA;
}

.noUi-marker-large {
  background: #AAA;
}

/* Horizontal layout;
 *
 */
.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}

.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}

.noUi-rtl .noUi-value-horizontal {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}

.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}

.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}

.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}

/* Vertical layout;
 *
 */
.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}

.noUi-value-vertical {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding-left: 25px;
}

.noUi-rtl .noUi-value-vertical {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}

.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}

.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}

.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}

.noUi-tooltip {
  display: block;
  position: absolute;
  border-radius: 6px;
  background: #1A2428;
  color: white;
  padding: 0.36rem 1rem;
  text-align: center;
  white-space: nowrap;
}

.noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: -50px;
}
.noUi-horizontal .noUi-tooltip::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #1A2428;
}

.noUi-vertical .noUi-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}

.noUi-horizontal .noUi-origin > .noUi-tooltip {
  -webkit-transform: translate(50%, 0);
  transform: translate(50%, 0);
  left: auto;
  bottom: 10px;
}

.noUi-vertical .noUi-origin > .noUi-tooltip {
  -webkit-transform: translate(0, -18px);
  transform: translate(0, -18px);
  top: auto;
  right: 28px;
}

.registerAd {
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  border-radius: var(--radius);
  background-color: #031720;
  background-image: url(../assets/images/ad-register-background.png);
  background-size: cover;
  overflow: hidden;
}
.registerAd .wrap {
  width: 100%;
  height: 90%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 2);
  justify-content: space-between;
}
.registerAd .wrap > article:nth-of-type(1) p {
  color: rgba(255, 255, 255, 0.5);
}
.registerAd .wrap > article:nth-of-type(2) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}
.registerAd .wrap > article:nth-of-type(2) > div {
  position: relative;
}
.registerAd .wrap > article:nth-of-type(2) > div::before {
  content: url(../assets/images/circles.svg);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.registerAd .wrap > article:nth-of-type(2) ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  text-align: left;
  margin: 0;
  padding: 0;
  align-items: start;
}
.registerAd .wrap > article:nth-of-type(2) ul li {
  flex: 0;
  position: relative;
}
.registerAd .wrap > article:nth-of-type(2) ul li::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  background-color: rgb(var(--color-button));
  opacity: 0.8;
}
.registerAd .logos {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.loginAd {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: var(--gap);
  display: flex;
  align-items: center;
}
.loginAd .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 500px;
  height: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.loginAd .wrap p {
  font-size: 1.125rem;
  color: rgba(0, 0, 0, 0.5);
}
.loginAd .wrap article:not(.logos) {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.loginAd .wrap .logos {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--gap) / 2) var(--gap);
  background-color: rgba(255, 255, 255, 0.36);
  border-radius: 50px;
  backdrop-filter: blur(12px);
}
.loginAd > img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

#registerWrap {
  width: 100%;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--gap);
}
@media (max-width: 460px) {
  #registerWrap {
    padding: 0 15px;
  }
}
#registerWrap .logoWrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
#registerWrap [data-color=grey] {
  color: rgb(var(--color-border));
}
#registerWrap [data-color=green] {
  color: rgb(var(--color-label-green));
}
#registerWrap [data-size=small] {
  font-size: 14px;
}
#registerWrap [data-icon=lock-green] {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
#registerWrap [data-icon=lock-green]::before {
  content: var(--icon-lock-small-green);
}
#registerWrap [data-text=center] {
  text-align: center;
}
#registerWrap [data-message] {
  width: 100%;
  padding: 12px 15px;
  border-radius: 9px;
  text-align: center;
}
#registerWrap [data-message][data-message=success] {
  background-color: #eafbe7;
  color: rgb(0, 191, 0);
  border: solid 1px rgba(0, 191, 0, 0.5);
}
#registerWrap [data-message][data-message=error] {
  background-color: #ffe5e5;
  color: rgb(var(--color-label-red));
  border: solid 1px rgba(var(--color-label-red), 0.2);
}
#registerWrap .title {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 var(--gap);
}
#registerWrap button[type=submit] {
  width: 100%;
}
#registerWrap [data-icon=arrowBack] {
  align-self: center;
}
#registerWrap .text {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#registerWrap .text p {
  display: inline;
}
#registerWrap .text p[data-icon] {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
#registerWrap .text p[data-icon][data-color=green] {
  color: rgb(0, 191, 0);
}
#registerWrap input:not(:focus, :focus-within)[data-icon]:required:valid {
  background-image: url(../assets/icons/icon-check-green.svg);
}
#registerWrap input[data-props*=text-center] {
  text-align: center;
}
#registerWrap .switchWrap {
  margin: 0 auto;
  max-width: 320px;
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: 1;
  align-items: center;
  gap: 1rem;
}
#registerWrap .switchWrap > * {
  grid-row: 1;
  margin: 0;
}
#registerWrap .switchWrap p {
  grid-column: 3;
  grid-row: 1;
}
#registerWrap .switchWrap p + p {
  grid-column: 1;
  color: rgb(var(--color-button));
}
#registerWrap .switchWrap input:checked + p {
  color: rgb(var(--color-button));
}
#registerWrap .switchWrap input:checked + p + p {
  color: rgb(var(--color-text));
}
#registerWrap .switchWrap input:checked + p + p + span {
  color: rgb(var(--color-button));
  border-color: rgb(var(--color-button));
}
#registerWrap .switchWrap span {
  color: rgb(var(--color-border));
  grid-column: 4;
  border: solid 1px rgb(var(--color-border));
  border-radius: 20px;
  height: 36px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
@media (max-width: 430px) {
  #registerWrap .switchWrap {
    grid-template-columns: repeat(3, 1fr);
  }
  #registerWrap .switchWrap span {
    grid-row: 2;
    grid-column: 1/span 3;
  }
}
#registerWrap .sliderWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-bottom: 50px;
}
#registerWrap .sliderWrap #slider {
  width: 90%;
}
#registerWrap .sliderWrap .noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: -60px;
  font-size: 13px;
  padding: 9px;
}
#registerWrap .sliderWrap .noUi-horizontal .noUi-tooltip::before {
  top: -4px;
}
#registerWrap .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
@media (max-width: 460px) {
  #registerWrap .wrap {
    grid-template-columns: 1fr;
  }
}
#registerWrap .monthYear {
  display: flex;
  flex-direction: row;
  min-height: 40px;
  border-radius: 50px;
  border: solid 1px rgba(var(--color-border), 0.5);
  padding: 12px calc(var(--gap) / 2);
  color: rgba(var(--color-text), 0.36);
  gap: 5px;
  max-width: 100%;
}
#registerWrap .monthYear input {
  margin: 0;
  padding: 0;
  height: auto;
  min-height: auto;
  border: none;
  border-radius: 0;
  width: 30px;
}
#registerWrap .registerContainer {
  width: 100%;
  min-height: 100svh;
  max-width: 420px;
  padding-top: var(--gap);
  padding-bottom: var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
#registerWrap .content {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: auto 0;
  gap: var(--gap);
}
#registerWrap .content form {
  gap: 15px;
}
#registerWrap #popupWrap .popup {
  width: 90%;
  max-width: 640px;
  text-align: left;
  max-height: 90%;
}
@media (max-width: 400px) {
  #registerWrap #popupWrap .popup {
    padding: 20px;
    gap: 20px;
  }
}
#registerWrap #popupWrap .popup .title {
  text-align: left;
  justify-content: start;
  align-items: start;
  padding: 0;
}
#registerWrap #popupWrap .popup .content {
  gap: 15px;
  font-size: 14px;
  margin: 0 0 auto;
  overflow-y: scroll;
  padding-right: 20px;
}
#registerWrap #popupWrap .popup .content::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
  border-radius: 10px;
}
#registerWrap #popupWrap .popup .content::-webkit-scrollbar-thumb {
  background-color: rgba(var(--color-border), 0.5);
  border-radius: 10px;
}
#registerWrap #popupWrap .popup .content ol li {
  counter-increment: step-counter;
  position: relative;
  padding-left: 30px;
}
#registerWrap #popupWrap .popup .content ol li::before {
  counter-increment: li;
  content: counter(step-counter, decimal-leading-zero) ".";
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 14px;
}

/* datatable */
table.dataTable>thead>tr>th{
  border: none !important;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{
  margin-bottom: 12px;
}
.invoice-table-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: solid 1px rgba(var(--color-border), 0.24);
}
.custom-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 98;
  display: none;
  justify-content: center;
  align-items: center;
}
.custom-modal .modal-content {
  background: #fff;
  border-radius: 0.3rem;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 3px 9px rgba(0,0,0,0.5);
  position: relative;
}
.custom-modal .modal-header h2 {
  margin: 0;
  font-size: 1rem;
}
.custom-modal .modal-body {
  padding: 20px;
  max-height: calc(100dvh - 150px);
  overflow-y: auto;
}
.custom-modal .modal-footer, .modal-header {
  padding: 15px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
}
.custom-modal .modal-header{
  justify-content: space-between;
}
.label-cst{
  font-size: 12px;
  margin-bottom: 4px;
}
.upload-wrapper {
  text-align: center;
}
#drop-area {
  border: 2px dashed rgb(var(--color-button));
  border-radius: 8px;
  background: #f0fcfd;
  padding: 40px 20px;
  transition: background 0.3s;
  cursor: pointer;
  position: relative;
}
#drop-area.dragover {
  background-color: #e0f7fa;
}
.upload-icon {
  font-size: 40px;
  color: rgb(var(--color-button));
  margin-bottom: 10px;
}
.upload-btn:hover {
  background: #0097a7;
}
.file-types {
  color: #555;
  font-size: 0.9em;
  margin-top: 10px;
}
.file-name {
  margin-top: 8px;
  font-weight: bold;
  color: #333;
  position: absolute;
  bottom: 12px;
  text-align: center;
  width: 100%;
  left: 0;
}

@media (max-width: 1399px) {
  :root {
    --gutter:30px;
  }
}
@media (max-width: 1399px) {
  :root {
    --gutter:30px;
    --width-sidebar:250px;
  }
}
@media (max-width: 1399px) {
  :root {
    --gutter:24px;
    --width-sidebar:220px;
  }
}
@media (max-width: 460px) {
  :root {
    --size-header:72px;
  }
}

/*# sourceMappingURL=style.css.map */