@import url("https://fonts.googleapis.com/css?family=Roboto");
.g-font-min-bold, .g-font-min-bold-grey {
  font-size: 13px;
  font-style: normal;
  font-weight: 500; }

.g-font-min, .g-font-min-grey {
  font-size: 13px;
  font-style: normal;
  font-weight: normal; }

.g-font-main, .g-font-main-grey {
  font-size: 14px;
  font-style: normal;
  font-weight: normal; }

.g-font-small, .g-font-small-grey {
  font-size: 11px;
  font-style: normal;
  font-weight: 300; }

.g-font-semi-small, .badge, .tooltip-notification__count {
  font-size: 11px;
  font-style: normal;
  font-weight: 500; }

.g-font-italic {
  color: var(--razlet-notifications-gray);
  font-size: 13px;
  font-style: italic;
  font-weight: 300; }

.g-font-min-bold-grey {
  color: var(--razlet-notifications-text); }

.g-font-min-grey {
  color: var(--razlet-notifications-text); }

.g-font-main-grey {
  color: var(--razlet-notifications-text); }

.g-font-small-grey {
  color: var(--razlet-notifications-text); }

.badge {
  align-items: center;
  background: var(--razlet-notifications-badge-bg);
  border-radius: 6px;
  color: var(--razlet-notifications-contrast);
  display: flex;
  justify-content: center;
  line-height: 1;
  max-height: 13px;
  min-width: 13px;
  padding: 3px;
  text-align: center; }

.base-tooltip-notification__content {
  background: var(--razlet-notifications-tooltip-bg);
  border-radius: 5px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  color: var(--razlet-notifications-contrast);
  display: none;
  min-width: 30px;
  opacity: 0;
  position: absolute;
  z-index: 1031; }
  .base-tooltip-notification__content::before {
    border-bottom: 6px solid var(--razlet-notifications-tooltip-bg);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    height: 0;
    left: calc(50% - 6px);
    position: absolute;
    top: -4px; }
  .base-tooltip-notification__content--white {
    background: var(--razlet-notifications-card-bg);
    border: 0.5px solid var(--razlet-notifications-border); }
    .base-tooltip-notification__content--white::before {
      border-bottom: 6px solid var(--razlet-notifications-card-bg); }
  .base-tooltip-notification__content__padding {
    padding: 6px 13px 6px 10px; }

.base-tooltip-notification--triangle-bottom::before {
  top: 100%;
  transform: rotate(180deg);
  width: 0; }

.base-tooltip-notification__activator, .base-tooltip-notification__content {
  display: flex;
  justify-content: center;
  max-width: fit-content; }

.tooltip-notification {
  cursor: pointer;
  display: flex;
  justify-content: center; }
  .tooltip-notification__count {
    color: var(--razlet-notifications-contrast);
    display: flex;
    margin-left: 6px;
    position: absolute; }
  .tooltip-notification__icon {
    display: flex; }
    .tooltip-notification__icon--zero .icon-notice {
      fill: var(--razlet-notifications-gray) !important; }
  .tooltip-notification__content {
    padding: 6px 13px 6px 10px; }
    .tooltip-notification__content__notification {
      align-items: center;
      display: flex;
      justify-content: space-between; }
      .tooltip-notification__content__notification * {
        color: var(--razlet-notifications-contrast) !important; }
      .tooltip-notification__content__notification :not(:last-child) {
        margin-right: 22px; }
  .tooltip-notification__text-empty {
    color: var(--razlet-notifications-gray); }
  .tooltip-notification--medium .tooltip-notification__icon > .badge {
    border-radius: 10px;
    font-size: 12px;
    height: 22px;
    max-height: 22px;
    min-width: 22px; }
  .tooltip-notification--big .tooltip-notification__icon > .badge {
    border-radius: 30px;
    font-size: 15px;
    height: 28px;
    max-height: 50px;
    min-width: 28px; }

:root:is(.light) {
  --razlet-notifications-card-bg: #FFF;
  --razlet-notifications-text: #717171;
  --razlet-notifications-contrast: #FFF;
  --razlet-notifications-tooltip-bg: #717171;
  --razlet-notifications-badge-bg: #FA4242; }

:root:is(.dark) {
  --razlet-notifications-card-bg: #1D1E20;
  --razlet-notifications-text: #EEE;
  --razlet-notifications-contrast: #FFF;
  --razlet-notifications-tooltip-bg: #717171;
  --razlet-notifications-badge-bg: #FA4242; }

:root .theme--light {
  --razlet-notifications-bg: var(--bg);
  --razlet-notifications-text: #717171;
  --razlet-notifications-border: var(--thin-border);
  --razlet-notifications-contrast: var(--text-contrast);
  --razlet-notifications-panel-bg: #FAFAFA;
  --razlet-notifications-card-bg: var(--razlet-notifications-bg);
  --razlet-notifications-card-bg-hover: color-mix(in srgb, var(--razlet-notifications-card-bg), #61A6FF 13%);
  --razlet-notifications-card-color: var(--razlet-notifications-text);
  --razlet-notifications-card-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  --razlet-notifications-card-border: none;
  --razlet-notifications-center-bg: #3C3C3C;
  --razlet-notifications-badge-bg: #FA4242;
  --razlet-notifications-tooltip-bg: var(--razlet-notifications-text);
  --razlet-notifications-gray: var(--gray);
  --razlet-notifications-main-light: color-mix(in hsl, var(--main), #FFF 85%);
  --razlet-notifications-main: hsl(var(--main-h) var(--main-s) calc(var(--main-l) + 30%));
  --razlet-notifications-main-dark: hsl(var(--main-h) var(--main-s) calc(var(--main-l) + 10%)); }

:root .theme--dark {
  --razlet-notifications-bg: var(--bg);
  --razlet-notifications-text: #EEE;
  --razlet-notifications-border: var(--separator);
  --razlet-notifications-contrast: var(--text-contrast);
  --razlet-notifications-panel-bg: var(--bg);
  --razlet-notifications-card-bg: var(--razlet-notifications-bg);
  --razlet-notifications-card-bg-hover: color-mix(in srgb, var(--razlet-notifications-card-bg), #FFF 10%);
  --razlet-notifications-card-color: var(--razlet-notifications-text);
  --razlet-notifications-card-shadow: none;
  --razlet-notifications-card-border: 1px solid #5C6167;
  --razlet-notifications-center-bg: #3C3C3C;
  --razlet-notifications-badge-bg: #FA4242;
  --razlet-notifications-tooltip-bg: var(--razlet-notifications-text);
  --razlet-notifications-gray: var(--gray);
  --razlet-notifications-main-light: color-mix(in hsl, var(--main), #000 60%);
  --razlet-notifications-main: var(--main);
  --razlet-notifications-main-dark: hsl(var(--main-h) var(--main-s) calc(var(--main-l) + 15%)); }

.base-tooltip-notification__content--white {
  left: 0 !important;
  max-width: 500px !important; }