@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900&text=0123456879ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzž%26&display=swap');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700&text=0123456879ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzž%26&display=swap');
@import url('https://fonts.googleapis.com/css?family=Kosugi|Kosugi+Maru|Sawarabi+Gothic|Noto+Sans+JP:400,700|Noto+Serif+JP:400,700&display=swap');
/* // カスタムプロパティ
---------------------------------------------------------------------------------------------------- */
:root {
  /* 基本フォント色 */
  --base-font-color: hsl(
    var(--base-font-color-hue),
    var(--base-font-color-saturation),
    var(--base-font-color-lightness)
  );
  --base-font-color-hue : 0; /* 基本フォント色の色相 */
  --base-font-color-saturation: 0%; /* 基本フォント色の彩度 */
  --base-font-color-lightness: 100%; /* 基本フォント色の明るさ */
  
  /* ログフォント色（色相と彩度は基本と共通） */
  --logs-font-color: hsl(
    var(--base-font-color-hue),
    var(--base-font-color-saturation),
    var(--logs-font-color-lightness)
  ); 
  --logs-font-color-lightness: 100%; /* ログフォント色の明るさ */
  
  /* ログフォント体（色相と彩度は基本と共通） */
  --logs-font-family-jp: "BIZ UDGothic";  /* 通常（ゴシック） */
  --logs-font-family-min: "Noto Serif JP"; /* 明朝体 */
  
  /* テキスト縁取り */
  --box-text-shadow-color: #000;
  --box-text-shadow:
    var(--box-text-shadow-color)  .1rem .1rem .1rem, var(--box-text-shadow-color) -.1rem -.1rem .1rem,
    var(--box-text-shadow-color) -.1rem .1rem .1rem, var(--box-text-shadow-color)  .1rem -.1rem .1rem,
    var(--box-text-shadow-color)   0rem .1rem .1rem, var(--box-text-shadow-color)   0rem -.1rem .1rem,
    var(--box-text-shadow-color) -.1rem  0rem .1rem, var(--box-text-shadow-color)  .1rem   0rem .1rem,
    var(--box-text-shadow-color)  .1rem .1rem .1rem, var(--box-text-shadow-color) -.1rem -.1rem .1rem,
    var(--box-text-shadow-color) -.1rem .1rem .1rem, var(--box-text-shadow-color)  .1rem -.1rem .1rem,
    var(--box-text-shadow-color)   0rem .1rem .1rem, var(--box-text-shadow-color)   0rem -.1rem .1rem,
    var(--box-text-shadow-color) -.1rem  0rem .1rem, var(--box-text-shadow-color)  .1rem   0rem .1rem ;
  
  /* ボーダー */
  --border-color      : rgba(255,255,255,0.3); /* ボーダー色 */
  --border-color-pale : rgba(255,255,255,0.2); /* ボーダー色（薄い） */
  --border-color-faint: rgba(255,255,255,0.1); /* ボーダー色（とても薄い） */
  --border-color-deep : rgba(255,255,255,0.5); /* ボーダー色（濃い） */
  --border-color-input: rgba(200,220,240,0.3); /* ボーダー色（フォーム類） */
  
  /* ボックス（ウィンドウ）背景 */
  --box-bg-opacity: 0.7;
  --box-bg-color: rgba(0,0,0, var(--box-bg-opacity));
  
  /* 背景 */
  --bg-opacity: 1;
}

/* // ベース設定
---------------------------------------------------------------------------------------------------- */
/* デフォルト背景 */
body {
  background-image: linear-gradient(160deg, #808899, #202233);
  background-size: cover;
  background-repeat: no-repeat;
}
.bg-image {
  filter: brightness(var(--bg-opacity));
}
.box {
  background-color: var(--box-bg-color);
  box-shadow: inset 0 0 1em rgba(255,255,255,0.15);
  text-shadow: var(--box-text-shadow);
}
/* リンク */
a { text-decoration: none; }
.link,
a[href]:link    { color: #00ffff; background: linear-gradient(to top, rgba(50,180,255,0.5) 0%, rgba(50,180,255,0.5) 20%, transparent 20%); }
a[href]:visited { color: #77ccff; }
.link:hover,
a[href]:hover   { color: #ffffff; }
.link-yt::before {
  content: "\f167" !important;
  display: inline-block;
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: normal !important;
  color: #f00 !important;
}
.link-yt:hover::before {
  color: #fff !important;
}

/* 他 */
input, textarea, select, button, .button, .dice-button {
  background: rgba(30,35,50,0.8);
  color: #fff;
}
.chat-palette {
  background: rgba(20,25,30,0.8);
}
input:focus,textarea:focus,select:focus {
  background: rgba(55,60,65,0.8);
}
button, .button {
  background: linear-gradient(145deg, rgba(50,60,80,0.8), rgba(30,40,60,0.8));
  color: #dde;
}
summary:hover,
label:hover {
  color: #ffaa00;
}
label input+b {
  font-style: normal;
  color: #8899aa;
}
label input:checked+b {
  color: inherit;
}
label:hover input+b {
  color: inherit !important;
}
.chat-palette b {
  color: #ee9999;
}
.chat-palette i {
  color: #99ccee;
  font-style: normal;
}
.chat-palette em {
  color: #cc99ee;
  font-style: normal;
}

/* // カラー設定：チャット
---------------------------------------------------------------------------------------------------- */
/* 秘話 */
.secret {
  background-color: rgba(255,0,50,0.1);
}
.secret.openlater {
  background-color: rgba(0,170,190,0.1);
}
/* ベース */
#form-name {
  text-shadow: inherit;
}
#form-name :checked {
}
@media (max-width: 600px) {
  .box {
    background-color: rgba(0,0,0,0.7);
  }
}
.box #main-name1 {
  text-shadow: inherit;
}
.float-box {
  background: rgba(10,10,30,0.9);
  border: .1rem solid #777;
  box-shadow: 0 0 .5em .1em #000;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
}

/* トピック */
#topic-value {
  color: #bfc;
}
/* ラウンド */
#round-value {
}
/* ステータス */
.gauge i { background: #7ad; }
.gauge i::before { background: linear-gradient(to left, #ff5, transparent); }
dd[data-stt*="HP"]   .gauge[data-signal="safe"]      i,
dd[data-stt*="ＨＰ"] .gauge[data-signal="safe"]      i,
dd[data-stt*="体力"] .gauge[data-signal="safe"]      i,
dd[data-stt*="耐久"] .gauge[data-signal="safe"]      i { background: #095; }
dd[data-stt*="HP"]   .gauge[data-signal="caution"]   i,
dd[data-stt*="ＨＰ"] .gauge[data-signal="caution"]   i,
dd[data-stt*="体力"] .gauge[data-signal="caution"]   i,
dd[data-stt*="耐久"] .gauge[data-signal="caution"]   i { background: #890; }
dd[data-stt*="HP"]   .gauge[data-signal="warning"]   i,
dd[data-stt*="ＨＰ"] .gauge[data-signal="warning"]   i,
dd[data-stt*="体力"] .gauge[data-signal="warning"]   i,
dd[data-stt*="耐久"] .gauge[data-signal="warning"]   i { background: #e80; }
dd[data-stt*="HP"]   .gauge[data-signal="danger"]    i,
dd[data-stt*="ＨＰ"] .gauge[data-signal="danger"]    i,
dd[data-stt*="体力"] .gauge[data-signal="danger"]    i,
dd[data-stt*="耐久"] .gauge[data-signal="danger"]    i { background: #e00; }
dd[data-stt*="HP"]   .gauge[data-signal="knockdown"] i,
dd[data-stt*="ＨＰ"] .gauge[data-signal="knockdown"] i,
dd[data-stt*="体力"] .gauge[data-signal="knockdown"] i,
dd[data-stt*="耐久"] .gauge[data-signal="knockdown"] i { background: #900; }

dd[data-stt*="MP"]   .gauge i,
dd[data-stt*="ＭＰ"] .gauge i { background: #42e; }

dd[data-stt*="侵蝕"] .gauge[data-signal="safe"]      i { background: #2ae; }
dd[data-stt*="侵蝕"] .gauge[data-signal="notice"]    i { background: #38e; }
dd[data-stt*="侵蝕"] .gauge[data-signal="attention"] i { background: #46e; }
dd[data-stt*="侵蝕"] .gauge[data-signal="caution"]   i { background: #83c; }
dd[data-stt*="侵蝕"] .gauge[data-signal="warning"]   i { background: #b18; }
dd[data-stt*="侵蝕"] .gauge[data-signal="danger"]    i { background: #e00; }
dd[data-stt*="侵蝕"] .gauge[data-signal="critical"]  i { background: #a00; }
dd[data-stt*="侵蝕"] .gauge[data-signal="fatal"]     i { background: #605; }
dd[data-stt*="侵蝕"] .gauge[data-signal="grave"]     i { background: #005; }
dd[data-stt*="侵蝕"] .gauge[data-signal="monster"]   i { background: #000; box-shadow: inset 0 0 .3rem #808; }

dd[data-stt*="侵蝕"] .gauge[data-signal="critical"] i::before,
dd[data-stt*="侵蝕"] .gauge[data-signal="fatal"] i::before,
dd[data-stt*="侵蝕"] .gauge[data-signal="grave"] i::before { background: linear-gradient(to left, #f00, transparent); }
dd[data-stt*="侵蝕"] .gauge[data-signal="monster"] i::before { background: none; }

/* チャットログ */
.tab-group {
  background-image: linear-gradient(to right, rgba(0,0,0, 0.4), transparent);
}
.tab-group .option:hover {
  background-color: rgba(0,0,0, 0.5);
}
@media (max-width: 600px) {
  .tab-group {
    background-color: rgba(0,0,0, 0.3);
  }
}
.logs-font {
  color: var(--logs-font-color);
}
.logs dl {
  border-width: .1rem 0 0;
  border-style: solid;
  border-color: var(--border-color-faint);
}
.logs dl dt,
.logs dl dd {
}
.logs dl dd.comm mark {
  color: #ff9900;
  font-weight: bold;
  background: transparent;
}
.logs dl dd.info {
  font-size: 85%;
  color: #acd;
  background: rgba(0,0,0,0.2);
}
.logs dl:hover {
  background-image: linear-gradient(rgba(0,0,0, 0.3), rgba(0,0,0, 0.3));
}
.logs dl dd:hover {
  box-shadow: 0 0 0 .1rem rgba(100,200,255,0.2) inset !important;
}
/* チャットログ：リンク */
.logs a[href]::before, 
#topic a[href]::before {
  content: "\f35d";
  margin-right: .2rem;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  font-size: .8em;
  line-height: 1;
  color: #fff;
}
/* チャットログ：システムメッセージ */
.logs dl.system {
  color: #fff;
  background-color: rgba(50,60,80,0.6);
}
.logs dl.system dd.comm {
  font-weight: bold;
}
.logs dl.system dd.comm::before {
  content: '';
  display: inline-block;
  width: 1.6em;
  margin-left: -.5em;
  font-size: 1em;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  text-align: center;
  opacity: 1 !important;
  border-radius: 50%;
}
.logs dl.system.enter  dd.comm::before { color: #fd9; content: "\f52b"; }
.logs dl.system.exit   dd.comm::before { color: #89a; content: "\f52a"; }
.logs dl.system.topic  dd.comm::before { color: #7f7; content: "\f044"; }
.logs dl.system.memo   dd.comm::before { color: #7f7; content: "\f249"; }
.logs dl.system.ready  dd.comm::before { color: #f77; content: "\f0ae"; }
.logs dl.system.round  dd.comm::before { color: #f90; content: "\f562"; }
.logs dl.system.change dd.comm::before { color: #f55; content: "\f085"; }
.logs dl.system.bgm    dd.comm::before { color: #f8c; content: "\f001"; }
.logs dl.system.bg     dd.comm::before { color: #c8f; content: "\f03e"; }

.logs dl.system  dd.info { color: #cdf; }
.logs dl.system.round  dd.info { color: #f90; font-weight: bold; }
.logs dl.system.topic  dd.info { color: #bfc; font-weight: bold; }
.logs dl.system.memo   dd.info { color: #ded; }
.logs dl.system.change dd.info { color: #f99; }

.logs dl.system.bgm dd.info small { color: #b9a; }
.logs dl.system.bgm dd.info small::before {
  content: '\f028';
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  margin: auto .2em auto .5em;
}
.logs dl.bgm dd.info a.link-yt {
  background: none;
}
.logs dl.bgm dd.info a.link-yt::before {
  margin-left: .5em;
  transform: scale(1.5);
  text-shadow: none;
}
/* チャットログ：ユニット操作 */
.logs dl dd.info.unit::before {
  color: #07d;
}
.logs dl dd.info.unit {
  color: #acf;
}
.logs dl dd.info.unit i {
  opacity: 0.70;
}
/* チャットログ：チョイス */
.logs dl dd.info.choice::before {
  color: #fe0;
}
.logs dl dd.info.choice {
  color: #db5;
}
.logs dl dd.info.choice > i,
.logs dl dd.info.choice > b,
.logs dl dd.info.choice > s {
  display: inline-block;
}
.logs dl dd.info.choice > i {
  margin: 1px .25em;
  padding: 0 .25em;
  border-width: 0px 1px;
  border-style: solid;
  border-color: #eda7;
  border-radius: .5em;
  font-size: 94%;
  font-style: normal;
  vertical-align: top;
  background-color: #fe01;
  color: #eda;
}
.logs dl dd.info.choice s {
  color: #888;
  text-decoration: none;
}
/* チャットログ：ダイス */
.logs dl dd.info.dice::before {
  color: #f33;
}
.logs dl dd.info.dice {
  color: #e55;
  letter-spacing: 0.1rem;
}
.logs dl dd.info.dice i {
  margin-left: .2rem;
  font-size: 90%;
  opacity: 0.85;
}
.logs dl dd.info.dice b,
.logs dl dd.info.dice strong {
  color: #f33;
}
.logs dl dd.info.dice em {
  color: #e90;
  font-weight: bold;
  -webkit-text-emphasis: none;
          text-emphasis: none;
}
.logs dl dd.info.dice em.fail,
.logs dl dd.info.dice strong.fail {
  color: #888;
  font-weight: bold;
}
.logs dl dd.info.dice .division {
  filter: grayscale(50%);
}

/* チャットログ：威力表 */
.logs dl dd.info.dice[data-game="sw"] { color: #ea6; }
.logs dl dd.info.dice[data-game="sw"] em { color: #ee8f61; }
.logs dl dd.info.dice[data-game="sw"] em em { color: #ee875c; }
.logs dl dd.info.dice[data-game="sw"] em em em { color: #ee7d57; }
.logs dl dd.info.dice[data-game="sw"] em em em em { color: #ee7452; }
.logs dl dd.info.dice[data-game="sw"] em em em em em { color: #ee6a4d; }
.logs dl dd.info.dice[data-game="sw"] em em em em em em { color: #ee6047; }
.logs dl dd.info.dice[data-game="sw"] em em em em em em em { color: #ee5542; }
.logs dl dd.info.dice[data-game="sw"] em em em em em em em em { color: #ee4a3d; }
.logs dl dd.info.dice[data-game="sw"] em em em em em em em em em { color: #ee3f38; }
.logs dl dd.info.dice[data-game="sw"] em em em em em em em em em em { color: #ee3333; }
.logs dl dd.info.dice[data-game="sw"] em.fail { color: #888; }

/* チャットログ：ダブルクロス */
.logs dl dd.info.dice[data-game="dx"] { color: #9999ff; }
.logs dl dd.info.dice[data-game="dx"] em { color: #a18feb; }
.logs dl dd.info.dice[data-game="dx"] em em { color: #aa85d7; }
.logs dl dd.info.dice[data-game="dx"] em em em { color: #b27bc2; }
.logs dl dd.info.dice[data-game="dx"] em em em em { color: #bb71ae; }
.logs dl dd.info.dice[data-game="dx"] em em em em em { color: #c36699; }
.logs dl dd.info.dice[data-game="dx"] em em em em em em { color: #cc5c85; }
.logs dl dd.info.dice[data-game="dx"] em em em em em em em { color: #d45271; }
.logs dl dd.info.dice[data-game="dx"] em em em em em em em em { color: #dd485c; }
.logs dl dd.info.dice[data-game="dx"] em em em em em em em em em { color: #e53e48; }
.logs dl dd.info.dice[data-game="dx"] em em em em em em em em em em { color: #ee3333; }
.logs dl dd.info.dice[data-game="dx"] em.fail { color: #888; }

/* チャットログ：タイムスタンプ */
.logs dl dd:after {
  color: #5af;
  letter-spacing: 0rem;
  text-shadow: none;
}
/* チャットログ：編集済 */
.logs dl dd span.rewrited {
  position: absolute;
  top: auto;
  right: -.5rem;
  bottom: 0;
  color: var( --base-font-color);
  border-bottom: 1px dashed var( --base-font-color);
  font-size: 80%;
  line-height: 1;
  text-shadow: none;
  opacity: 0.2;
}
.logs dl dd span.rewrited::before {
  content: "\f304";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
}
/* チャットログ：水平線 */
.logs hr {
  margin: .75em 0;
  border-width: .1rem 0 0;
  border-style: solid;
  border-color: var(--border-color-deep);
  box-shadow: var(--box-text-shadow);
}
/* チャットログ：見出し */
.logs h1 {
  position: relative;
  margin: 2em 0;
  padding: 1em 0;
  border-width: 3px 0;
  border-style: solid;
  border-color: var(--base-font-color);
  text-align: center;
  font-size: 200%;
  font-family: "游明朝","Yu Mincho","游明朝体","YuMincho" !important;
  line-height: 1;
}
.logs h1 span {
  line-height: 1 !important;
}
.logs h1::before {
  content: "";
  position: absolute;
  inset: auto 0 calc(-.7em + 3px);
  height: .7em;
  border-width: 1px 0 0;
  border-style: solid;
  border-color: var(--border-color-deep);
  background-image: linear-gradient(to bottom, var(--border-color), transparent);
  pointer-events: none;
}
.logs h1::after {
  content: "";
  position: absolute;
  inset: calc(-.7em + 3px) 0 auto;
  height: .7em;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: var(--border-color-deep);
  background-image: linear-gradient(to top, var(--border-color), transparent);
  pointer-events: none;
}
.logs h2 {
  position: relative;
  margin: 1.5em 0 .5em;
  padding: .6em;
  border-width: 3px 0 3px 0px;
  border-style: solid;
  border-image: linear-gradient(to right, var(--base-font-color), transparent);
  border-image-slice: 1;
  background-color: #fff1;
  font-size: 150%;
  line-height: 1;
}
.logs h2::before {
  content: "";
  position: absolute;
  inset: 2px 0 2px;
  border-width: 1px 0 1px;
  border-style: solid;
  border-image: linear-gradient(to right, #fff7, transparent);
  border-image-slice: 1;
  pointer-events: none;
}
.logs h3 {
  position: relative;
  margin: 1em 0 .5em;
  padding: .6em;
  border-width: 0 0 2px;
  border-style: solid;
  border-image: linear-gradient(to right, var(--base-font-color), transparent);
  border-image-slice: 1;
  background-image: linear-gradient(15deg, #fff1, transparent);
  font-size: 130%;
  line-height: 1;
}
.logs h3::before {
  content: "";
  position: absolute;
  inset: 0;
  border-width: 2px 0 0;
  border-style: solid;
  border-image: linear-gradient(to right, var(--base-font-color),  transparent 70%);
  border-image-slice: 1;
  pointer-events: none;
}
.logs h4 {
  margin: 1em 0 .5em;
  padding: .6em;
  border-width: 0 0 1px;
  border-style: solid;
  border-image: linear-gradient(to right, var(--base-font-color), transparent);
  border-image-slice: 1;
  background-image: linear-gradient(15deg, #fff1, transparent);
  font-size: 110%;
  line-height: 1;
}
/* .logs h4::before {
  content: "❖";
  display: inline-block;
  margin-right: .4em;
  color: #fff7;
  text-shadow: none;
  transform: scale(1.4);
} */
.logs h5 {
  margin: 1em 0 .5em;
  padding: .4em;
  background-image: linear-gradient(to right, #fff1, transparent);
  font-size: 100%;
  line-height: 1;
}
.logs h6 {
  width: max-content;
  margin: 1em 0 .5em;
  padding: .2em 1.7em .2em .2em;
  border-width: 0 0 2px;
  border-style: solid;
  border-image: linear-gradient(to right, #fff5, #fff4, #fff3, transparent);
  border-image-slice: 1;
  font-size: 100%;
  line-height: 1;
}
/* チャットログ：テーブル */
.logs table,
#topic table {
  margin: .5em 0;
  border-collapse: collapse;
  border-style: hidden;
  outline-width: 1px;
  outline-style: solid;
  outline-color: var(--border-color-deep);
}
#topic table {
  margin: 0 0;
}
.logs table thead th,
.logs table thead td,
#topic table thead th,
#topic table thead td {
  padding: 0 .5em;
  border-width: 0;
  font-size: 90%;
}
.logs table thead tr,
#topic table thead tr {
  background: rgba(100,127,200,0.3);
}
.logs table tbody th,
.logs table tbody td,
#topic table tbody th,
#topic table tbody td {
  padding: 0 .5em;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color-pale);
}
.logs table tbody tr:nth-child(even) {
  background: rgba(127,127,127,0.15);
}
/* チャットログ：リスト */
.logs ul,
#topic ul {
  padding-left: 1.5em;
  list-style-type: square;
}

/* // カラー設定：サイドバー
---------------------------------------------------------------------------------------------------- */
/* ステータス欄 */
#status #status-body > dl dl dt {
  color: #bce;
}
.sheet-body .status-remocon-sub ul:nth-child(odd){
  background: rgba(127,127,127,0.45);
}
.sheet-body .status-remocon-sub ul:nth-child(even){
  background: rgba(127,127,127,0.1);
}

/* // デフォルト設定：ログ
---------------------------------------------------------------------------------------------------- */
/* ログ */
.logs:empty::before {
  content: 'ログがありません';
}
#topic-value:empty::before {
  content: 'トピック';
  opacity: 0.3;
}
/* ステータス */
#status-body:empty::before {
  content: 'ステータス';
  opacity: 0.3;
}
/* 共有メモ */
#memo-list:empty::before {
  content: '共有メモ';
  opacity: 0.3;
}
/* // Font awesome
---------------------------------------------------------------------------------------------------- */
.s-icon {
  display: inline-block;
  position: relative;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  vertical-align: bottom;
  text-shadow: none;
}
.s-icon i {
  display: inline-block;
  color: transparent;
  font-style: normal;
  font-size: 10%;
}
.s-icon::after,
.s-icon::before {
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-size: .9em;
  text-shadow: #000 0 0 2px, #000 0 0 2px, #000 0 0 2px;
}
.s-icon.passive::before{ content: "\f111"; font-weight: normal; }
.s-icon.setup::before  { content: "△";    font-weight: bold; }
.s-icon.major::before  { content: "\f04b"; font-weight: bold; }
.s-icon.minor::before  { content: "\f04e"; font-weight: bold; }
.s-icon.active::before { content: "\f075"; font-weight: normal; transform: scale(-1, 1); }
.s-icon.active::after  { content: "\f00c"; font-weight: bold; transform: scale(0.6,0.6);  }

/* // カラーピッカー
---------------------------------------------------------------------------------------------------- */
body .pcr-app {
  background-color: #000a;
}

/* // スクロールバー
---------------------------------------------------------------------------------------------------- */
.pcr-app ::-webkit-scrollbar,
.box::-webkit-scrollbar,
.box ::-webkit-scrollbar,
.float-box::-webkit-scrollbar,
.float-box ::-webkit-scrollbar {
  width: .8rem;
  height: .8rem;
}
.pcr-app ::-webkit-scrollbar-track,
.box::-webkit-scrollbar-track,
.box ::-webkit-scrollbar-track,
.float-box::-webkit-scrollbar-track,
.float-box ::-webkit-scrollbar-track {
  border-radius: .8rem;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
}
.pcr-app ::-webkit-scrollbar-thumb,
.box::-webkit-scrollbar-thumb,
.box ::-webkit-scrollbar-thumb,
.float-box::-webkit-scrollbar-thumb,
.float-box ::-webkit-scrollbar-thumb {
  background-color: rgba(150, 150, 150, .5);
  border-radius: 10px;
}
.pcr-app,
.box,
.box *,
.float-box,
.float-box * {
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 150, 150, .5) rgba(0, 0, 0, .5);
}