@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');

/* 赤字 */
.red{
  color: red;
}

/*太字で赤色*/
.bold-red{
  font-weight:bold;
  color:red;
}

/*赤のアンダーライン*/
.red-under{
  border-bottom: 2px solid red;
}

/*マーカーの黄色のような色*/
.marker{
  background-color:#ffff66;
}

/*下半分のマーカー色（km）*/
.marker-under{
  background: linear-gradient(transparent 60%, #ffff66 60%);
}


/* 段落 スタイル */
.is-style-information::before,
.is-style-success::before,
.is-style-warning::before,
.is-style-error::before {
  font-size: 30px;
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  position: absolute;
  top: 5px;
  left: 15px;
}

.is-style-information::before {
  content: 'info';
  /* color    :#17a2b8; */
  color:#9fc7db;
}

.is-style-success::before {
  content: 'check_circle';
  /* color    :#adca7e; */
  color:#adca7e;
}

.is-style-warning::before {
  content: 'warning';
  /* color    :#856404; */
  color:#d3bf70;
}

.is-style-error::before {
  content: 'error';
  /* color    :#721c24; */
  color:#e4a5a5;
}

.is-style-information,
.is-style-success,
.is-style-warning,
.is-style-error {
  border: 1px solid;

  padding:15px 15px 15px 60px;
  position: relative;
  display: block;
  margin: 1em 0;
}

.is-style-information{
  /* background-color:#d1ecf1;
  border-color    :#17a2b8; */
  background-color: #e6f2f8;
  border-color:#9fc7db;
}

.is-style-success {
  /* background-color:#eff7e2;
  border-color    :#adca7e; */
  background-color: #eff7e2;
  border-color:#adca7e;
}

.is-style-warning {
  color: #856404;
  /* background-color:#fff3cd;
  border-color    :#ffc107; */
  background-color: #f9f1d5;
  border-color:#d3bf70;
}

.is-style-error {
  /* color: #721c24;
  background-color:#f8d7da;
  border-color    :#721c24; */
  background-color: #f8e1e1;
  border-color:#e4a5a5;
}