/*
--font-family-main
--color-text
--color-text-category
--color-bg
--color-bg-80
--color-button
--color-tile

--color-option

--font-size-text-menu-time
--font-size-title

--color-error

--color-success
--color-success-50

--color-white
--color-white-70
--color-white-50
--color-white-30
--color-white-20
--color-white-10

--color-black
--color-black-70
--color-black-50
--color-black-30
--color-black-10 */

@font-face {
  font-weight: 400;
  font-family: EuclidCircularA;
  src: url('/fonts/EuclidCircularA-Regular.otf');
}

@font-face {
  font-weight: 500;
  font-family: EuclidCircularA;
  src: url('/fonts/EuclidCircularA-Medium.otf');
}

/* predefined styles */
:root {
  --font-family-main: euclidcirculara, roboto, sans-serif;
  --font-family-secondary: var(--font-family-main);
  --font-family-button: var(--font-family-main);
  --font-family-title: var(--font-family-main);
  --font-family-modal-title: var(--font-family-main);
  --font-size-text: 14px;
  --font-size-title: 21px;
  --font-size-mobile-modal-title: 20px;
  --font-size-modal-title: 34px;
  --font-size-medium-title: 18px;
  --font-size-button: 16px;
  --font-size-tiles: 16px;
  --font-size-small-tile: 13px;
  --font-size-large-name: 20px;
  --font-size-sections: 12px;
  --font-size-text-menu-time: 18px;
  --color-bg: #111;
  --color-bg-80: rgba(17, 17, 17, 80%);
  --color-tile: #353535;
  --color-tile-rgb: 53, 53, 53;
  --color-text: #fff;
  --color-text-button: var(--color-bg);
  --color-text-category: var(--color-text);
  --color-button: #3272db;
  --color-icon: var(--color-text);

  /* введено для случая когда цвет кнопки задан через linear-gradient */

  /* используется для топпигов */
  --color-option: var(--color-button);

  /* используется для топпигов */

  --color-error: #ca3434;
  --color-error-50: rgba(202, 52, 52, 50%);
  --color-success: #439b47;
  --color-success-50: rgba(67, 155, 71, 50%);
  --color-white: #fff;
  --color-white-70: rgba(255, 255, 255, 70%);
  --color-white-50: rgba(255, 255, 255, 50%);
  --color-white-30: rgba(255, 255, 255, 30%);
  --color-white-20: rgba(255, 255, 255, 20%);
  --color-white-10: rgba(255, 255, 255, 10%);
  --color-black: #000;
  --color-black-70: rgba(0, 0, 0, 70%);
  --color-black-50: rgba(0, 0, 0, 50%);
  --color-black-30: rgba(0, 0, 0, 30%);
  --color-black-10: rgba(0, 0, 0, 10%);
}

.global {
  color: var(--color-text) !important;
  --color-black-white-15: rgba(255, 255, 255, 15%);
}

.theme-white {
  --color-black-white-15: rgba(0, 0, 0, 15%);
}

.global .text-page-title {
  font-size: var(--font-size-title) !important;
  font-family: var(--font-family-title) !important;
}

.global .text-modal-title {
  font-size: var(--font-size-modal-title) !important;
  font-family: var(--font-family-modal-title) !important;
}

.global .mobile .text-modal-title {
  font-size: var(--font-size-mobile-modal-title) !important;
  font-family: var(--font-family-modal-title) !important;
}

.global .text-page-medium-title {
  font-weight: 500 !important;
  font-size: var(--font-size-medium-title) !important;
  font-family: var(--font-family-main) !important;
}

.global .mobile .text-main-1 {
  font-family: var(--font-family-main) !important;
  font-style: normal !important;
}

.global .tablet .text-main-1 {
  font-family: var(--font-family-main) !important;
  font-style: normal !important;
}

.global .tablet .text-menu-time {
  font-size: var(--font-size-text-menu-time) !important;
  font-family: var(--font-family-main) !important;
}

.global .text-main-2 {
  font-family: var(--font-family-secondary) !important;
  font-style: normal !important;
}

.global .text-button-16 {
  font-size: var(--font-size-button) !important;
  font-family: var(--font-family-button) !important;
}

.global .list-item__title {
  font-size: var(--font-size-tiles) !important;
}

.global .text-tile-small {
  /* font-family: var(--font-family-main) !important; */
  font-size: var(--font-size-small-tile) !important;
}

/* правило работает только на плашках без изображений
   на плашках с изображениями текст должен быть белым */
.global .theme-white .icon .text-style-menu-item-color {
  color: var(--color-text) !important;
}

.global .text-style-text {
  font-size: var(--font-size-text) !important;
  font-family: var(--font-family-main) !important;
}

.global .text-large-name {
  font-size: var(--font-size-large-name) !important;
  font-family: var(--font-family-modal-title) !important;
}

.global .text-food-tag {
  font-size: 11px !important;
  font-family: var(--font-family-main) !important;
}

.global .text-sections-12 {
  font-size: var(--font-size-sections) !important;
  font-family: var(--font-family-main) !important;
}

.global .color-bg {
  background: var(--color-bg) !important;
}

.global .color-bg-80 {
  background: var(--color-bg-80) !important;
}

.global .color-bg-input .v-input__slot {
  background: var(--color-tile) !important;
}

.global .color-bg__fill {
  fill: var(--color-bg) !important;
}

.global .color-bg__stroke {
  stroke: var(--color-bg) !important;
}

.global .color-text-category {
  color: var(--color-text-category) !important;
}

/* <!-- <ICONS> --> */
.global .color-icon {
  color: var(--color-icon) !important;
}

.global .color-icon__fill {
  fill: var(--color-icon) !important;
}

.global .color-icon__stroke {
  stroke: var(--color-icon) !important;
}

.global .active .color-icon {
  color: var(--color-text-button) !important;
}

.global .active .color-icon__fill {
  fill: var(--color-text-button) !important;
}

.global .active .color-icon__stroke {
  stroke: var(--color-text-button) !important;
}

.global .placeholder-color__fill {
  fill: var(--color-tile) !important;
}

/* <!-- </ICONS> --> */

.global .color-option__fill {
  fill: var(--color-option) !important;
}

.global .color-option__stroke {
  stroke: var(--color-option) !important;
}

.global .color-tile__stroke {
  stroke: var(--color-tile) !important;
}

.global .color-text-category__border-color,
.global .color-border {
  border-color: var(--color-text-category) !important;
}

.global .color-text__border-color {
  border-color: var(--color-text) !important;
}

.color-text-button__border-color {
  border-color: var(--color-text-button) !important;
}

.color-button__border-color {
  border-color: var(--color-button) !important;
}

.global .color-tile__border-color {
  border-color: var(--color-tile) !important;
}

.global .color-button,
.global .color-text-button {
  color: var(--color-text-button) !important;
}

.global .color-text-button__bg {
  background: var(--color-text-button) !important;
}

.global .color-text-category__bg {
  background: var(--color-text-category) !important;
}

.global .v-application .color-button__color,
.global .color-button__color,
/* правило для второй кнопки в диалоговом окне планшета */
.global .tablet .button.transparent-bg-color {
  color: var(--color-button) !important;
}

.global .color-button__bg {
  background: var(--color-button) !important;
}

.global .color-button-error__bg {
  background: var(--color-error) !important;
}

.global .color-button__fill {
  fill: var(--color-button) !important;
}

.global .color-button__stroke {
  stroke: var(--color-button) !important;
}

.global .color-tile {
  color: var(--color-tile) !important;
}

.global .color-tile__bg {
  background: var(--color-tile) !important;
}

.global .theme-dark .active-item-bg-color {
  background: var(--color-tile) !important;
  filter: brightness(0.8);
}

.global .theme-white .active-item-bg-color {
  filter: brightness(1.1);
}

.global .color-tile__fill {
  fill: var(--color-tile) !important;
}

.global .color-text {
  color: var(--color-text) !important;
}

.global .color-text__bg {
  background: var(--color-text) !important;
}

.global .color-text__fill {
  fill: var(--color-text) !important;
}

.global .loader .ring::after {
  border-color: var(--color-button) !important;
}

.global .scroll-bg-color::-webkit-scrollbar-thumb,
.global .scroll-bg-color textarea::-webkit-scrollbar-thumb {
  background-color: var(--color-button) !important;
}

.global .color-error {
  color: var(--color-error) !important;
}

.global .color-error__bg {
  background: var(--color-error) !important;
}

.global .color-error__border {
  border-color: var(--color-error) !important;
}

.global .color-error__fill {
  fill: var(--color-error) !important;
}

.global .color-error__stroke {
  stroke: var(--color-error) !important;
}

.global .color-error-50 {
  color: var(--color-error) !important;
}

.global .color-error-50__bg {
  background: var(--color-error) !important;
}

.global .color-error-50__fill {
  fill: var(--color-error) !important;
}

.global .color-success {
  color: var(--color-success) !important;
}

.global .color-success__bg {
  background: var(--color-success) !important;
}

.global .color-success__fill {
  fill: var(--color-success) !important;
}

.global .color-success-50 {
  color: var(--color-success-50) !important;
}

.global .color-success-50__bg {
  background: var(--color-success-50) !important;
}

.global .color-success-50__fill {
  fill: var(--color-success-50) !important;
}

.global .color-white {
  color: var(--color-white) !important;
}

.global .color-white__bg {
  background: var(--color-white) !important;
}

.global .color-white-70 {
  color: var(--color-white-70) !important;
}

.global .color-white-70__bg {
  background: var(--color-white-70) !important;
}

.global .color-white-50 {
  color: var(--color-white-50) !important;
}

.global .color-white-50__bg {
  background: var(--color-white-50) !important;
}

.global .color-white-30 {
  color: var(--color-white-30) !important;
}

.global .color-white-30__bg {
  background: var(--color-white-30) !important;
}

.global .color-white-20 {
  color: var(--color-white-20) !important;
}

.global .color-white-20__bg {
  background: var(--color-white-20) !important;
}

.global .color-white-10 {
  color: var(--color-white-10) !important;
}

.global .color-white-10__bg {
  background: var(--color-white-10) !important;
}

.global .color-white-10__fill {
  fill: var(--color-white-10) !important;
}

.global .color-white-10__stroke {
  stroke: var(--color-white-10) !important;
}

.global .color-black {
  color: var(--color-black) !important;
}

.global .color-black__bg {
  background: var(--color-black) !important;
}

.global .color-black-70 {
  color: var(--color-black-70) !important;
}

.global .color-black-70__bg {
  background: var(--color-black-70) !important;
}

.global .color-black-50 {
  color: var(--color-black-50) !important;
}

.global .color-black-50__bg {
  background: var(--color-black-50) !important;
}

.global .color-black-30 {
  color: var(--color-black-30) !important;
}

.global .color-black-30__bg {
  background: var(--color-black-30) !important;
}

.global .color-black-10 {
  color: var(--color-black-10) !important;
}

.global .color-black-10__fill {
  fill: var(--color-black-10) !important;
}

.global .color-black-10__bg {
  background: var(--color-black-10) !important;
}

/*************************************
 vuetify styles
 ************************************/
.global .main-badge-bg-color .v-badge__wrapper .v-badge__badge {
  color: var(--color-text) !important;
  background-color: var(--color-button) !important;
}

/* Important */
.global .button.transparent-bg-color {
  background-color: transparent !important;
}

.modal-inner .text a.button {
  color: var(--color-text-button) !important;
  background-color: var(--color-button) !important;
}

.global .page-tablet .substrate-background,
.global .page-tablet .substrate {
  background-color: transparent;
}

.global .page-tablet .substrate-background {
  background-color: var(--color-bg) !important;
  opacity: 0.8 !important;
}

.global .textarea-bg-color {
  background-color: var(--color-tile) !important;
}

.global .header-wrapper.color-bg::after {
  background: var(--color-bg) !important;
}

/* EXTENSIONS */
.global .channels .bottom-bar.color-tile__bg,
.global .channels .left-bar.color-tile__bg {
  background-color: rgba(var(--color-tile-rgb), 0.9) !important;
}