
.SlideMenuLeftBottom {
  position: fixed;
  top: calc(100% - 60px);
  left: -120px;
  width: 170px;
  height: 200%;   /* 高さを2倍にしておくと、リサイズ時でも背景が描画される。 */
  background-color: rgba(0, 0, 0, 0.7);
  
  transition: transform 0.6s ease-in-out;

  padding: 20px;
  font-size:    9pt;
  font-weight: 100;
  color: rgba(245,245,245);

  display: flex;
  flex-direction: column; /* 縦並びにする */
/*  justify-content: flex-end; /* 下端に配置 */

  max-height: 530px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;  /* "auto", "thin", "none" のいずれかを指定可能 */
}

.SlideMenuLeftBottom:hover {
  transform: translate( 120px, -500px ); /* ホバー時に下へ移動 */
}

hr {
  width: 100%;
}

.SlideMenuLeftOl {
  margin-left:5px;
  padding-left:10px;
  text-indent: 0.3em;

  font-size:    9pt;

/*  border:1px solid rgba(245,245,245); */
}

.SlideMenuLeftUl {
  padding-left:10px;
  margin-left:5px;

  font-size:    9pt;

/*  border:1px solid rgba(245,245,245); */
}

.SlideMenuRightBottom {

  position: fixed;
  top: calc(100% - 60px);
  right: -120px;
  width: 170px;
  height: 200%;   /* 高さを2倍にしておくと、リサイズ時でも背景が描画される。 */
  background-color: rgba(0, 0, 0, 0.7);
  
  transition: transform 0.6s ease-in-out;

  padding:  20px;
  font-size:    9pt;
  font-weight:  100;
  color: rgba(245,245,245);

/*  display: flex;
  flex-direction: column; /* 縦並びにする */
/*  justify-content: flex-end; /* 下端に配置 */

  max-height: 530px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;  /* "auto", "thin", "none" のいずれかを指定可能 */
}

.SlideMenuRightBottom:hover {
  transform: translate( -120px, -500px );
}

/* Save/Loadボタン */
.backupButton {
  width:75px;
}

/* チェックボックスとテキストの縦位置を揃える */
.checkbox {
  vertical-align: middle;
}

a.manual {
  color: rgb(108, 205, 243);
}

a.manual:hover {
  color: rgba(245,245,245);
  text-decoration: none;
}

a.manual:visited {
  color: lightgray;
}

a.Dropbox, a.Dropbox:visited {
  color:rgb(108, 205, 243);
}