@import url('./after-login-page.css');
@import url('./login.css');
@import url('./button.css');
@import url('./index.css');
@import url('./common-index.css');
@import url('./auth.login.css');
@import url('./user.avatar.css');
@import url('./toast.css');
@import url('./room.page.css');
@import url('./error.css');
@import url('./notification.modul.css');
@import url('./room.css');
@import url('./transition.dialog.css');
@import url('./room.instance.dialog.css');
@import url('./icon.css');
@import url('./menu.container.css');
@import url('./toast.css');
@import url('./dialog.css');
@import url('./menu.css');
@import url('./input.css');
@import url('./chat.css');
@import url('./App.css');

:root {
  --color-primary: #000000;
  --color-primary-light: #904488;
  --color-secondary: #00baff;

  --color-background-default: #323232;
  --color-background-paper: #484848;

  --color-grey-100: #bebebe;
  --color-grey-200: #969696;
  --color-grey-300: #707070;
  --color-grey-400: #5a5a5a;
  --color-grey-500: #00000020;

  --color-error: #d32f2f;
  --color-warning: #ffc400;
  --color-info: #004dff;
  --color-success: #54e342;
}

body {
  font-family: 'Graphik-Regular';
}

.menu-item:hover {
  background-color: var(--color-grey-500);
}

.text-input::placeholder {
  font-family: 'Graphik-Regular';
  font-size: 14px;
  font-weight: 600;
}

.searchbar-input::placeholder {
  font-family: 'Graphik-Regular';
  font-size: 13px;
  font-weight: 500;
  color: var(--color-grey-200);
  margin: 0;
}

.text-input {
  width: 100%;
  font-family: 'Graphik-Regular';
  font-size: 15px;
  color: white;
  background: transparent;
  border: none;
  border-bottom: 1px solid black;
  padding: 4px 0;
  outline: none;
}

.text-input:hover,
.select-input:hover {
  border-bottom: 2px solid black;
}

.select-input {
  width: 100%;
  font-family: 'Graphik-Regular';
  font-size: 15px;
  color: white;
  background: transparent;
  border: none;
  border-bottom: 1px solid black;
  padding: 4px 0;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.filter-input {
  width: '100%';
  font-family: 'Graphik-Regular';
  font-size: 20px;
  color: black;
  outline: none;
}

.select-input:focus {
  border: none;
}

@font-face {
  font-family: 'Graphik-Light';
  src: url('../fonts/Graphik-Light.woff');
}

@font-face {
  font-family: 'Graphik-Bold';
  src: url('../fonts/Graphik-Bold.woff');
}

@font-face {
  font-family: 'Graphik-Super';
  src: url('../fonts/Graphik-Super.woff');
}

@font-face {
  font-family: 'Graphik-Semibold';
  src: url('../fonts/Graphik-Semibold.woff');
}

@font-face {
  font-family: 'Graphik-Regular';
  src: url('../fonts/Graphik-Regular.woff');
}

@font-face {
  font-family: 'Graphik-Medium';
  src: url('../fonts/Graphik-Medium.woff');
}

@font-face {
  font-family: 'Graphik-Black';
  src: url('../fonts/Graphik-Black.woff');
}

@font-face {
  font-family: 'Graphik-Thin';
  src: url('../fonts/Graphik-Thin.woff');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Graphik-Extralight';
  src: url('../fonts/Graphik-Extralight.woff');
  font-weight: 200;
  font-style: normal;
}