// @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@100;200;400;600&display=swap');
//@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@100;200;400;600&family=Fugaz+One&display=swap');
//@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&family=Sarabun:wght@100;200;400;600&display=swap');
@font-face {
  font-family: "TwemojiMozilla";
  src: local("TwemojiMozilla"), url("@/assets/font/TwemojiMozilla.ttf") format("truetype");
  font-weight: normal;
}

/* Your Input Div*/
.input-emoji {
  //font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Prompt', Arial, "TwemojiMozilla";
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, "TwemojiMozilla";
}

// app global css in SCSS form
:root {
  --app-main-bg-color: #fff;
  // --app-main-bg-color:  hsl(210 40% 96.1% / .4);

  --app-main-bg-color-theme-dark: var(--color-zinc-900);
  --app-second-bg-color-theme-dark: var(--color-zinc-900);
  // --app-main-bg-color-theme-dark: #1d1e22; 
  // --app-second-bg-color-theme-dark: #272a32;
  --third-bg-color-theme-dark: #18191d;

  --main-bg-color: var(--app-main-bg-color);
  --second-bg-color: #fff;

  --app-main-border-color: #dcdcdc;
  --app-main-border-color-theme-dark: #687782;


  --app-main-border-light-color: #ededed;
  --app-main-border-lighter-color: #f8f8f8;
  --border-lighter-color: #f8f8f8;
  --app-main-border-light-color-theme-dark: var(--app-main-border-color-theme-dark);

  --app-color-white: #fff;
  --app-text-muted: var(--color-zinc-500);

  --v-main-text-icon: #797f8f;
  --v-main-text-icon-theme-dark: #8e8e93;

  --v-main-text-head: #1a2d39;
  --v-main-text-head-theme-dark: #fff;

  --v-main-text-title: #62738d;
  --v-main-text-title-theme-dark: #8e8e93;

  // --v-main-text-body: #303336;
  --v-main-text-body: #000;
  --v-main-text-body-theme-dark: #fff;

  --v-text-black: #000;
  --emoji-icon-bg: #f7f7f7;
  --emoji-icon-bg-black: #000;
  //--wee-default-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Prompt', sans-serif;
  --wee-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;

  //scroll bar
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--color-zinc-100) !important;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
  }
}

.font-open-sans {
  font-family: 'Open Sans', sans-serif !important;
}

.ss-logo {
  font-family: 'Fugaz One', sans-serif !important;
}

// .input-emoji {
//   font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Open-Sans', "Apple Color Emoji", "TwemojiMozilla", "Noto Color Emoji", "Android Emoji", sans-serif;
// }

body {
  font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  //font-family: var(--wee-default-font) !important;
  color: var(--v-main-text-body);
  --v-main-text-head: #1a2d39;
  font-size: 14px;
  line-height: 1.5;
  /* or 21px if you prefer setting in pixels */
  font-weight: 400;

  ::selection {
    background-color: var(--color-primary-600);
    color: #fff;
  }
}

.app-bg-white {
  background-color: #fff;
}

.body--dark .app-bg-white {
  background-color: var(--app-second-bg-color-theme-dark) !important;
}

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

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

.app-main-bg-color-theme-dark {
  background-color: var(--app-main-bg-color-theme-dark) !important;
}

.app-second-bg-color-theme-dark {
  background-color: var(--app-second-bg-color-theme-dark) !important;
}

.defaultFontFamily {
  font-family: var(--wee-default-font) !important;
}

.wee-container-responsive-center,
.content-limit {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.content-limit720 {
  max-width: 720px !important;
  margin-left: auto;
  margin-right: auto;
}

.content-limit896 {
  max-width: 896px;
  margin-left: auto;
  margin-right: auto;
}

.app-feed-container,
.report-container {
  max-width: 1380px;
  margin-left: auto;
  margin-right: auto;
}

.app-feed-page {
  max-width: 756px !important;
  margin-left: auto;
  margin-right: auto;
}

// .q-btn .q-focus-helper {
//   display: none;
// }
.q-btn.btn--no-hover .q-focus-helper {
  display: none;
}

.test-border {
  border: 1px solid red;
}

.app-border {
  border: 1px solid var(--app-main-border-color) !important;
}

.q-app-border {
  border: 1px solid var(--app-main-border-color) !important;
}

.app-border-top {
  border-top: 1px solid var(--app-main-border-color) !important;
}

.app-border-bottom {
  border-bottom: 1px solid var(--app-main-border-color) !important;
}

.app-border-top-bottom {
  border-top: 1px solid var(--app-main-border-color) !important;
  border-bottom: 1px solid var(--app-main-border-color) !important;
}

.app-border-light {
  border: 1px solid var(--app-main-border-light-color) !important;
}

.app-border-light-top {
  border-top: 1px solid var(--app-main-border-light-color) !important;
}

.app-border-light-bottom {
  border-bottom: 1px solid var(--app-main-border-light-color) !important;
}

.app-border-light-top-bottom {
  border-bottom: 1px solid var(--app-main-border-light-color) !important;
  border-top: 1px solid var(--app-main-border-light-color) !important;
}

.app-border-lighter {
  border: 1px solid var(--border-lighter-color) !important;
}

.app-border-lighter-top {
  border-top: 1px solid var(--border-lighter-color) !important;
}

.app-border-lighter-bottom {
  border-bottom: 1px solid var(--border-lighter-color) !important;
}

.app-border-lighter-top-bottom {
  border-bottom: 1px solid var(--border-lighter-color) !important;
  border-top: 1px solid var(--border-lighter-color) !important;
}

// emoji-mart
body.body--dark .emoji-mart {
  background: none;
}

body.body--dark .emoji-mart-category-label {
  background: none;
  color: #fff;
}

body.body--dark .emoji-mart-bar {
  background: none;
  color: #fff;
}

body.body--dark .emoji-mart-anchor {
  color: var(--color-zinc-400);
}

.theme-name {
  padding: 5px;
  border-radius: 15px;
  // background-color: $blue-1;
  // border: 1px solid $blue;
  width: fit-content;
  color: var(--color-primary-600);
  display: inline-block;
  font-size: 0.95em;
}

.border-radius-bottom-no {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.app-border-radius {
  border-radius: 10px;
}

.app-border-radius5 {
  border-radius: 5px;
}

.td-top {
  vertical-align: top;
}

.limited-autogrow.q-field--labeled .q-field__native {
  min-height: 125px;
}

.user-notify-toast {
  max-width: 450px;
}

.bg-opacity {
  background-color: rgba(0, 0, 0, .5);
}

.bg-black-chade {
  background: #000000;
  background: -webkit-linear-gradient(to bottom, #434343, #000000);
  background: linear-gradient(to bottom, #434343, #000000);
}

.bg-black-chade2 {
  background: #000000;
  background: -webkit-linear-gradient(to right, #434343, #000000);
  background: linear-gradient(to right, #434343, #000000);
}

.rounded {
  border-radius: 10px !important;
}

.rounded-full {
  border-radius: 20px !important;
}

.q-item__label--caption,
.q-item__label--header {
  color: var(--app-text-muted) !important;
}

.q-field--outlined .q-field__control::before {
  border: 1px solid $separator-color !important;
  box-shadow:
    0 0 #0000,
    0 0 #0000,
    0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.border-radius-inherit {
  border-radius: inherit;
}
.btn-group-toggle {
  padding: 3px 8px !important;
}
.btn-toggle-off-class {
  border-radius: 10px !important;
  color: var(--color-zinc-800) !important;
}

.btn-toggle-on-class {
  background-color: #fff !important;
  color: var(--color-black) !important;
  border-radius: 10px !important;
  box-shadow: $elevation-ambient 0px 1px 4px !important;
  font-weight: 600 !important;
}

.tabs-content-wrapper {
  padding: 5px !important;
  // border-radius: 10px !important;
  background-color: var(--color-zinc-100);
}

.tab-content-wrapper {
  border-radius: 10px !important;
}

.base-sidebar {
  background-color: var(--color-zinc-50);
}

.bg-dark-900 {
  background-color: var(--color-zinc-900) !important;
}

.text-message-sent {
  color: var(--color-primary-200) !important;
}

.text-message-received {
  color: var(--color-zinc-200) !important;
}

.text-message-unsend {
  color: var(--color-zinc-100) !important;
}

.text-message-transparent {
  color: transparent !important;
}

.bg-app-content-item{
  background-color: var(--color-zinc-100);
}



body.body--light {
  background-color: var(--app-main-bg-color) !important;

  .chip-color {
    background-color: var(--color-zinc-100);
  }
}

body.body--dark {
  color: #fff;
  --v-main-text-head: #fff;
  --main-bg-color: var(--app-main-bg-color-theme-dark);
  --second-bg-color: var(--app-second-bg-color-theme-dark);
  --v-text-black: #fff;
  --app-text-muted: var(--color-zinc-400);
  --app-main-border-color: var(--app-main-border-color-theme-dark);
  --app-main-border-light-color: var(--app-main-border-light-color-theme-dark);
  --border-lighter-color: var(--app-main-border-light-color-theme-dark);
  --emoji-icon-bg: var(--emoji-icon-bg-black);

  .chip-color {
    background-color: var(--color-zinc-900);
  }

  .base-sidebar {
    background-color: var(--color-zinc-950);
  }

  .btn-toggle-off-class {
    color: var(--color-zinc-400) !important;
  }

  .btn-toggle-on-class {
    color: var(--color-white) !important;
    background-color: var(--color-zinc-950) !important;
    box-shadow: $elevation-dark-ambient 0px 1px 4px !important;
  }

  .tabs-content-wrapper {
    border-radius: 10px !important;
    background-color: var(--color-zinc-800);
  }

  .q-field--outlined .q-field__control::before {
    box-shadow:
      0 0 $elevation-dark-ambient,
      0 0 $elevation-dark-ambient,
      0 1px 2px 0 $elevation-dark-ambient !important;
  }

  .text-message-received {
    color: var(--color-zinc-700) !important;
  }

  .text-message-unsend {
    color: var(--color-zinc-500) !important;
  }

  .bg-app-content-item{
    background-color: var(--color-zinc-800);
  }
}