html {
  /* Глобальные */
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  --transition_time: 0.3s;
  --transition_time_default: 0.2s;

  --border_radius: 7px;
  --border_radius_low: 7px;
  --border_radius_optimaze: 12px;

  --border_radius_hard: 16px;

  --border_radius_button: 15px;
  --border_radius_button_primary: 7px;

  --margin_super_low: 0px;
  --margin_default: 4px;
  --margin_optimaze: 10px;

  --margin--button-group__gap-space: 1px;
  --margin--button-group__gap-small: 8px;
  --margin--button-group__gap-medium: 12px;

  --padding_super_low: 2px;
  --padding_low: 5px;
  --myui_padding_primary: 7px;
  --padding_default: 10px;
  --button-padding_default: 12px;
  --padding_icon_button: 13px;




  --font_size_super_low: 9px;
  --font_size_low: 12px;
  --font_size_default: 14px;

  --font_size_optimaze: 16px;
  --font_size_hard: 23px;
  --font_size_title: 17px;

  --font_size_large_title: 34px;
  --font_size_title_1: 28px;
  --font_size_title_2: 22px;
  --font_size_title_3: 20px;

  --font_size_headline: 17px;
  --font_size_body: 17px;
  --font_size_callout: 16px;

  --font_size_subhead: 15px;
  --font_size_footnote: 13px;

  --font_size_caption_1: 12px;
  --font_size_caption_2: 11px;



  --font_weight_default: 300;
  --font_weight_primary: 400;
  --font_weight_title: 500;
  --font_weight_hard: 700;

  /* TabbarItem */
  --tabbar_item_height: 48px;
  --tabbar-border_radius: 30px;

  /*Panel Header*/
  --panel_header_height: 48px;

  --box_shadow_card: 0 2px 24px 0 rgba(0, 0, 0, .1), 0 0 2px 0 rgba(0, 0, 0, .1);
  --box_shadow_dark: 0 2px 24px 20px rgba(0, 0, 0, 0.2);
  --box_shadow_image: inset 0px 0px 20px #00000040;

  /*Цвета */
  --text_primary: black;
  --text_inherit: white;
  --text_secondary: rgba(60, 60, 60);
  --text_button_primary: white;

  --icon_color: rgba(60, 60, 60);

  --background_form_item: 100, 100, 100;

  --background_primary: 255, 255, 255;

  --background_primary-opacity: 0.6;
  --backdrop_filter_blur: 5px;

  --background_modal: 255, 255, 255;
  --blur_background_modal: 39, 39, 43;

  --background_primary_2: 235, 235, 235;
  --background_secondary: 235, 235, 235;
  --background_dark: 39, 39, 43;
  --background_dark_2: 139, 139, 143;

  --min_height_input: 33px;

  --background_border_default: 190, 190, 190, 0.3;

  --background_border_primary: 190, 190, 190, 1;

  --background_card: 244, 244, 244;

  --color_positive: 50, 201, 91;
  --color_negative: 255, 69, 80;
  --color_warning: 251, 151, 1;
  --color_primary: 0, 122, 255;
  --color_default: 24, 24, 24;

  --mini_stats_border_color: var(--color_warning);

  --background_button_primary: 0, 120, 255;
  --background_active: 40, 200, 64;
  --background_error: 195, 11, 11;

  --width_swidth: 50px;
  --html_background: rgba(235, 237, 240);
  background: var(--html_background);

  /*Avatar*/
  --border_radius_avatar_app_low: 8px;
  --border_radius_avatar_app: 16px;


  /*Group*/
  --GROUP_padding_default: 15px;

  /*Padding*/
  --PADDING_bottom_or_top: 6px;
  --PADDING_left_or_right: 13px;
  /*Badge*/
  --BADGE_padding_default: 3px;
  --BADGE_padding_default_2: 5px;

  /*ActionSheer*/
  --ACTION_SHEET_padding_botton_or_top: 15px;

  /*Separator*/
  --SEPARATOR_background_primary: 211, 211, 211;
  --SEPARATOR_background_secondary: 40, 40, 40;

  /*MODALPAGE*/
  --MODALPAGE_border_radius: 15px;

  /*MODALCARD or MODALPAGE*/
  --MODAL_max_height: calc(100vh - ((var(--panel_header_height) * 2 + var(--margin_default) * 2) + var(--safe-area-inset-top) + var(--safe-area-inset-bottom)));
  /*MODALCARD*/
  --MODALCARD_border_radius: 30px;
  --MODALCARD_margin: 6px;
}

html[data-devaice="desktop"] {
  --font_size_large_title: 37px;
  --font_size_title_1: 31px;
  --font_size_title_2: 25px;
  --font_size_title_3: 23px;

  --font_size_headline: 20px;
  --font_size_body: 20px;
  --font_size_callout: 19px;

  --font_size_subhead: 18px;
  --font_size_footnote: 16px;

  --font_size_caption_1: 15px;
  --font_size_caption_2: 14px;
}

html[data-theme="dark"] {
  --box_shadow_card: 0 2px 24px 0 rgba(255, 255, 255, .1), 0 0 2px 0 rgba(255, 255, 255, .1);

  --text_primary: white;
  --text_inherit: black;
  --text_secondary: rgba(127, 127, 127);
  --text_button_primary: white;

  --icon_color: rgba(190, 190, 190);

  --background_primary: 28, 28, 30;
  --background_primary_2: 40, 40, 40;
  --background_secondary: 45, 45, 47;
  --background_dark: 235, 237, 240;
  --background_dark_2: 135, 137, 140;

  --color_default: 255, 255, 255;

  --background_border_primary: 39, 39, 39, 1;
  --background_border_default: 39, 39, 39, 0.9;
  --background_card: 45, 45, 45;

  --background_modal: 24, 24, 24;

  --html_background: rgba(0, 0, 0);
  background: var(--html_background);

  /*Separator*/
  --SEPARATOR_background_primary: 69, 69, 71;
  --SEPARATOR_background_secondary: 40, 40, 40;
}


* {
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0px;
  padding: 0px;
}


::-webkit-scrollbar {
  width: 4px;
  transition: all 0.3s;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(var(--background_dark_2));
  border-radius: 8px;
}

.MYUI-Background__secondary {
  background: rgba(var(--background_secondary));
}

.MYUI-Background__primary {
  background: rgba(var(--background_primary), var(--background_primary-opacity));
}

@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .MYUI-Background__secondary {
    background: rgba(var(--background_secondary), var(--background_primary-opacity));

    -webkit-backdrop-filter: blur(var(--backdrop_filter_blur)) saturate(86%);
    backdrop-filter: blur(var(--backdrop_filter_blur)) saturate(86%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .MYUI-Background__primary {
    background: rgba(var(--background_primary), var(--background_primary-opacity));

    -webkit-backdrop-filter: blur(var(--backdrop_filter_blur)) saturate(86%);
    backdrop-filter: blur(var(--backdrop_filter_blur))saturate(86%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}