@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('../lib/font/HarmonyOS_Sans_light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('../lib/font/HarmonyOS_Sans_regular.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('../lib/font/HarmonyOS_Sans_medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Rounded Mplus 1c';
  src: url('../lib/font/RoundedMplus1c_regular.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rounded Mplus 1c';
  src: url('../lib/font/RoundedMplus1c_bold.woff2') format('woff2');
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: 'Color Emoji';
  src: local('Apple Color Emoji'), local('Segoe UI Emoji'), local('Segoe UI Symbol'), local('Noto Color Emoji');
}

:root {
  --text_color_primary: #191919;
  --text_color_secondary: #b2b2b2;
  --text_color_highlight: #576b95;
  --text_color_reversal: #fff;
  --background_color_page: #f0f0f0;
  --background_color_container: #fff;
  --splitline_color: #f2f2f2;
  --button_background_color: #f7f7f7;
  --block_background_color: #f7f7f7;
  --special_color_green: #07c160;
  --special_color_yellow: #fa9d3b;
  --special_color_red: #fa5151;
}
:root.darkmode {
  --text_color_primary: #eaeaea;
  --text_color_secondary: #6c6c6c;
  --text_color_highlight: #7d90a9;
  --background_color_page: #6b6b6b;
  --background_color_container: #2c2c2c;
  --splitline_color: #323232;
  --button_background_color: #3d3d3d;
  --block_background_color: #363636;
}
:root.darkmode.mobile {
  --text_color_primary: #d0d0d0;
  --text_color_secondary: #5d5d5d;
  --background_color_container: #191919;
  --splitline_color: #242424;
  --button_background_color: #2c2c2c;
  --block_background_color: #202020;
}

:root {
  --font_size: 16px;
  --font_size_venti: calc(var(--font_size) * 1.125);
  --font_size_grande: calc(var(--font_size) * 1);
  --font_size_tall: calc(var(--font_size) * 0.875);
  --font_size_short: calc(var(--font_size) * 0.75);
}
:root.mobile {
  --font_size_grande: calc(var(--font_size) * 1.125);
  --font_size_tall: calc(var(--font_size) * 1);
  --font_size_short: calc(var(--font_size) * 0.875);
}

/* Edge */
::-webkit-input-placeholder {
  color: var(--text_color_secondary);
}

::placeholder {
  color: var(--text_color_secondary);
}

/*
PC(large screen)
@media screen and (min-width: 1200px) {}
Pad(horizontal) - PC(small screen)
@media screen and (min-width: 768px) and (max-width: 1199px) {}
Phone(horizontal) - Pad(vertical)
@media screen and (min-width: 376px) and (max-width: 767px) {}
Phone(vertical)
@media screen and (max-width: 375px) {}
*/
@media screen and (min-width: 550px) {
  .g-width {
    width: 550px;
  }
}
@media screen and (max-width: 549px) {
  .g-width {
    width: 100%;
    min-width: 320px;
    max-width: 550px;
  }
}

.g-clear-both::after {
  display: block;
  clear: both;
  content: '';
}

.g-left {
  display: inline;
  float: left;
}

.g-left-flex {
  display: inline-flex;
  float: left;
}

.g-right {
  display: inline;
  float: right;
}

.g-right-flex {
  display: inline-flex;
  float: right;
}

.g-ovf-hide {
  overflow: hidden;
}

.g-block-center {
  margin: 0 auto;
}

.g-inline-center {
  text-align: center;
}

.g-inline-justify {
  /*
  text-align: justify;
  text-justify: inter-word;
  */
}

.g-txt-hide {
  display: block;
  width: 100%;
  height: 100%;
  color: transparent;
  font-size: 0;
  text-indent: -100em;
  overflow: hidden;
}

.g-txt-ellipsis {
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.g-user-select {
  -webkit-user-select: text; /* Safari */
  user-select: text;
}

.g-alias-defaultstatus {
  visibility: hidden;
}

.g-alias-highlighter {
  margin: 0 3px;
  padding: 0 2px;
  border-radius: 3px;
  font-weight: bold;
  font-family: 'Rounded Mplus 1c', sans-serif;
  background-color: var(--button_background_color);
}

.g-alias-imgblock {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

html {
  color: var(--text_color_primary);
  font: normal var(--font_size)/1.75rem 'HarmonyOS Sans', 'PingFang SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif, 'Color Emoji';
  background-color: var(--background_color_page);
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-user-select: none; /* Safari */
  user-select: none;
  cursor: default;
}

html.fullscreen {
  overflow: hidden;
}
@media screen and (max-width: 549px) {
  html.normaldialog:not(.fullscreen) {
    overflow: hidden;
  }
}
@media screen and (max-width: 319px) {
  html.smalldialog:not(.fullscreen) {
    overflow: hidden;
  }
}

#container {
  background-color: var(--background_color_container);
}