/* A common stylesheet which is used in the main page, detached page as well as iframes */

html {
  --webkit-scrollbar-track-background-color: #f8f8f8;
  --webkit-scrollbar-track-box-shadow: inset 0.71em 0.71em 0.143em
    rgba(0, 0, 0, 0.1);
  --webkit-scrollbar-thumb-background-color: #aaa;
  --webkit-scrollbar-thumb-hover-color: #989898;
  --webkit-scrollbar-thumb-box-shadow: inset 0.71em 0.71em 0.143em
    rgba(0, 0, 0, 0.2);
  --webkit-scrollbar-thumb-active-background-color: #808080;
  --webkit-scrollbar-thumb-active-box-shadow: inset 0.71em 0.71em 0.143em
    rgba(0, 0, 0, 0.3);
  --webkit-progress-bar-box-shadow: 0 0.143em 0.357em rgba(0, 0, 0, 0.25) inset;
  --webkit-progress-bar-background-image: -webkit-linear-gradient(
    -45deg,
    transparent 33%,
    rgba(0, 0, 0, 0.1) 33%,
    rgba(0, 0, 0, 0.1) 66%,
    transparent 66%
  );
  /* related to the browser font size. all other font size should use em unit */
  font-size: 87.5%;
}

input,
select,
textarea,
button {
  font: inherit;
  color: var(--on-primary-color);
  border: 1px solid rgba(0, 0, 0, 0.38);
}

input:hover,
select:hover,
textarea:hover {
  border: 1px solid rgba(0, 0, 0, 0.87);
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

body {
  font: 1rem "Roboto", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

table {
  font: unset;
}

/*******************************
 * Scrollbar *
 ********************************/

/* only works for webkit */
::-webkit-scrollbar {
  width: 0.7em;
  height: 0.7em;
}

::-webkit-scrollbar-button:start {
  display: none;
}

::-webkit-scrollbar-button:end {
  display: none;
}

::-webkit-scrollbar-track {
  background: var(--webkit-scrollbar-track-background-color);
  -webkit-box-shadow: var(--webkit-scrollbar-track-box-shadow);
}

::-webkit-scrollbar-thumb {
  background: var(--webkit-scrollbar-thumb-background-color);
  -webkit-box-shadow: var(--webkit-scrollbar-thumb-box-shadow);
  border-radius: 0.357em;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--webkit-scrollbar-thumb-hover-color);
}

::-webkit-scrollbar-thumb:active {
  background: var(--webkit-scrollbar-thumb-active-background-color);
  -webkit-box-shadow: var(--webkit-scrollbar-thumb-active-box-shadow);
}