:root {
  --main-font: "Roboto", sans-serif;
  --black: #010101;
  --light-black: #2D2D2D;
  --light-black-plus:#313131;
  --hover: rgba(32, 31, 30, 0.04);
  --background-none: rgba(0, 0, 0, 0);
  --stroke-opacity: rgba(81, 80, 82, 0.12);
  --dark-blue: #3364a0;
  --blue: #2a79b7;
  --hover-blue: #23689e;
  --selected: rgba(0, 145, 255, 0.08);
  --white: #FFFFFF;
  --white-opacity: rgba(255, 255, 255, 0.5);
  --light-white: #E5E5E5;
  --icon: #7e7e7e;
  --text: #2b2b2b;
  --light-grey: #E9E9E9;
  --light-grey2: #DBDBDB;
  --grey: #A1A1A1;
  --dark-grey:#757575;
  --input-grey: #3D3C3C;
  --no-active: rgba(255, 255, 255, 0.6);
  --background: #D3D3D3;
  --dark-red:#AE2828;
  --red: #DD2222;
  --green: #54BC43;
  --orange: #FF8A00;
  --light-orange: #FFD9AC;
  --yellow: #f3cf61;
  --radius: 4px;
  --radius-10: 10px;
  --shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
  --font-60: 400 60px/60px var(--main-font);
  --font-60-600: 600 60px/60px var(--main-font);
  --font-48: 400 48px/48px var(--main-font);
  --font-48-600: 600 48px/48px var(--main-font);
  --font-30: 400 30px/30px var(--main-font);
  --font-30-600: 600 30px/30px var(--main-font);
  --font-24: 400 24px/24px var(--main-font);
  --font-24-600: 600 24px/24px var(--main-font);
  --font-20: 400 20px/20px var(--main-font);
  --font-20-600: 600 20px/20px var(--main-font);
  --font-18: 400 18px/20px var(--main-font);
  --font-18-600: 600 18px/20px var(--main-font);
  --font-16: 400 16px/18px var(--main-font);
  --font-16-600: 600 16px/18px var(--main-font);
  --font-14: 400 14px/16px var(--main-font);
  --font-14-600: 600 14px/16px var(--main-font);
  --font-12: 400 12px/14px var(--main-font);
  --font-12-600: 600 12px/14px var(--main-font);
  --font-11: 400 11px/14px var(--main-font);
  --font-11-600: 600 11px/14px var(--main-font);
  --font-10: 400 10px/14px var(--main-font);
  --font-10-600: 600 10px/14px var(--main-font);
}

html[data-theme=light] {
  --light-grey: #9e9c9c;
  --grey: #dfdfdf;
  --dark-grey: #7c9faf;
  --background: #ffffff;
  --background-back: #ffffff;
  --white: #222222;
  --light-black: #efefef;
  --light-white: #444444;
  /*--orange:#ebebeb;*/
  --icon: #938e8e;
}

/*html[data-theme=night] {
    --black: #201F1E;
    --black-80: #A19F9D;
    --black-60: #D2D0CE;
    --hover: rgba(210, 208, 206, 0.04);
    --stroke-opacity: rgba(210, 208, 206, 0.12);
    --dark-blue: #3364a0;
    --blue: #407EC9;
    --light-blue: #0091FF;
    --message-bg: rgba(0, 145, 255, 0.16);
    --message-bg-to: var(--background);
    --selected: rgba(0, 145, 255, 0.08);
    --white: var(--black);
    --no-active: rgba(255, 255, 255, 0.6);
    --background: #252424;
    --red: #D83B01;
    --light-red: rgba(216, 59, 1, 0.08);
    --green: #06C270;
    --light-green: rgba(6, 194, 112, 0.08);
    --yellow: #F8AF23;
    --shadow: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
    --chat-top: #303030;
    --message-header: #303030;
    --chats-list: #303030;
    --main-input: #303030;
    --wrap-message-bg: var(--black);
    --main-text-color: #D2D0CE;
    --optional-text-color: #A19F9D;
    --right-panel-bg: #303030;
    --left-panel: #303030;
    --icon-color: #A19F9D;
    --white-default-color: #A19F9D;
}
html[data-theme=classic] {
    --black: #201F1E;
    --black-80: #605E5C;
    --black-60: #A19F9D;
    --hover: rgba(32, 31, 30, 0.04);
    --stroke-opacity: rgba(81, 80, 82, 0.12);
    --dark-blue: #3364a0;
    --blue: #407EC9;
    --light-blue: #0091FF;
    --message-bg: rgba(0, 145, 255, 0.16);
    --message-bg-to: var(--white);
    --selected: rgba(0, 145, 255, 0.08);
    --white: #FFFFFF;
    --no-active: rgba(255, 255, 255, 0.6);
    --background: #f3f3f3;
    --red: #D83B01;
    --light-red: rgba(216, 59, 1, 0.08);
    --green: #06C270;
    --light-green: rgba(6, 194, 112, 0.08);
    --yellow: #F8AF23;
    --shadow: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
    --chat-top: var(--blue);
    --message-header: var(--white);
    --chats-list: var(--white);
    --main-input: var(--white);
    --wrap-message-bg: var(--background);
    --main-text-color: var(--black);
    --optional-text-color: var(--black-80);
    --right-panel-bg: var(--white);
    --left-panel: var(--dark-blue);
    --icon-color: var(--black);
    --white-default-color: var(--white);
}*/

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