:root {
  --my-screen-width: 100%;
  --my-screen-height: 100%; //90%;
  --my-menu-color: rgba(26,176,229,1.0);
}

.touka-item {
    //background: transparent;
}

html {
  width: 100%;
  height: 100%;
}
body {
  //background: linear-gradient(#49C0EB, #49C0EB) fixed;
  //background: linear-gradient(-135deg, #05FBFF, #1E00FF) fixed;
  //background: linear-gradient(#D8D8D8, #000000) fixed;
  //background: radial-gradient(#000000, #8C8C96) fixed;
  background: transparent;

  margin: 0;
  padding: 0;
  min-width: 100%;
  width: auto !important;
  width: 100%;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  position: relative;
}
h1 {
  position: absolute;
  width:  100%;
  height:70px;
  margin-top:0px;
  top: 0px;
  text-align: center;
  font-size: 36px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  overflow: hidden;
  //background-color: blue;
}
article {
  width: var(--my-screen-width);
  padding-left: 0px;
  padding-top: 10px;
  //padding-bottom: 20px;
  //background-color: red;
}
footer {
  position: absolute;
  width: 100%;
  height: 20px;
  left: 0px;
  bottom: 0px;
  text-align: center;
  overflow: hidden;
  padding-bottom: 0px;
  color: white;
  background-color: rgba(73,192,235,1.0);
}

input[type=range] {
  -webkit-appearance: none;
  border: none;
  border-radius: 3px;
  width: 400px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 400px;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  background: url("../images/Zoom.png") no-repeat 0 0;
  background-size: contain;
  background-color: #fff;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #fff;
}
input[type=range]:focus::-webkit-slider-thumb {
  background-color: #0df;
}
input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin-top: 0px;
  background: url("../images/Zoom.png") no-repeat 0 0;
  background-size: contain;
  background-color: #fff;
}
input[type=range]::-ms-track {
  width: 400px;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}
input[type=range]:focus::-ms-track {
  background: #fff;
}

.open > .dropdown-toggle.btn-default {
  border: 2px solid #ffffff !important;
  background-color: rgba(73,192,235,1.0) !important;
  color: white;
}
.dropdown-toggle.btn-default {
  border: 2px solid #ffffff !important;
  background-color: rgba(73,192,235,1.0) !important;
  color: white;
}
.filter-option {
  font-size: 20px;
  color: white;
}
.bootstrap-select {
  width: 300px !important;
  color: white;
}
.bootstrap-select.btn-group .dropdown-menu li {
  float: left;
}
.bootstrap-select.btn-group .dropdown-menu li a {
  background-color: rgba(73,192,235,1.0);
  color: white;
  font-size: 20px;
}
.bootstrap-select.btn-group .dropdown-menu li a:hover {
  background-color: rgba(73,192,235,0.8);
}
.bootstrap-select.btn-group .dropdown-menu li a:focus {
  background-color: rgba(26,176,229,1.0);
}

#background {
  position: absolute;
  float: left;
  width: var(--my-screen-width);
  height: var(--my-screen-height);
  margin-top: -10px;
  margin-left: 0px;
  overflow: hidden;
}
#image {
  margin: auto auto;
  width: 100%;
  height: 100%;
  transform: scale(1.0) rotate(0deg);
}
#video {
  margin: auto auto;
  width: 100%;
  height: 100%;
  transform: scale(1.0) rotate(0deg);
}
#object {
  position: absolute;
  float: left;
  width: var(--my-screen-width);
  height: var(--my-screen-height);
  margin-top: -10px;
  margin-left: 0px;
  //border: 1px solid;
  overflow: hidden;
}
#line {
  margin: auto auto;
  width: 100%;
  height: 100%;
  transform: scale(1.0) rotate(0deg);
}
#draw {
  position: absolute;
  float: left;
  width: var(--my-screen-width);
  height: var(--my-screen-height);
  margin-top: -10px;
  margin-left: 0px;
  //border: 1px solid;
  overflow: hidden;
}
#canvas {
  margin: auto auto;
  width: 100%;
  height: 100%;
  transform: scale(1.0);
}

#menubackground {
  position: absolute;
  width: 100%;
  height: 110px;
  bottom: 0px;
  left: 0px;
}

ul#pen_style {
  list-style: none;
  position: relative;
  top: 10px;
  left: 0px;
  margin-left: 0px;
}
#pen_style li {
  display: table-cell;
  height: 70px;
  width: 70px;
  background-color: var(--my-menu-color);
}
#pen_style li img{
  float: center;
  width: 60px;
  height: 60px;
  padding-left:0px;
  //display: block;
}
#pen_style li img:hover{
  //background-color: rgba(0,255,255,0.3);
}
#submenu_pen {
  position: absolute;
  width: 100%;
  height: 80px;
  background-color: var(--my-menu-color);
  bottom: 110px; //menubackground
  left: 0px;
}

ul#marker_style {
  list-style: none;
  position: relative;
  top: 10px;
  left: 0px;
  margin-left: 70px;
}
#marker_style li {
  display: table-cell;
  height: 70px;
  width: 70px;
  background-color: var(--my-menu-color);
}
#marker_style li img{
  float: center;
  width: 60px;
  height: 60px;
  padding-left:0px;
  //display: block;
}
#marker_style li img:hover{
  //background-color: rgba(0,255,255,0.3);
}
#submenu_marker {
  position: absolute;
  width: 100%;
  height: 80px;
  background-color: var(--my-menu-color);
  bottom: 110px; //menubackground
  left: 0px;
}

ul#eraser_style {
  list-style: none;
  position: relative;
  top: 10px;
  left: 0px;
  margin-left: 140px;
}
#eraser_style li {
  display: table-cell;
  height: 60px;
  background-color: var(--my-menu-color);
}
#eraser_style li img{
  float: center;
  width: 60px;
  height: 60px;
  padding-left: 0px;
  display: block;
}
#eraser_style li img:hover{
  //background-color: rgba(0,255,255,0.3);
}
#submenu_eraser {
  position: absolute;
  width: 100%;
  height: 80px;
  background-color: var(--my-menu-color);
  bottom: 110px; //menubackground
  left: 0px;
}

#menumove {
  position: absolute;
  bottom: 0px;
  left: 0px;
  -webkit-transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  -o-transform: translate(0,-50%);
  transform: translate(0,-50%);
  width: 100%;
  height: 60px;
  //background-color: red;
}

ul#menulist {
  list-style: none;
  position: relative;
  float: left; //位置切替時に変更する
  margin-left: 0px; //位置切替時に変更する
  top: 0px;
  width: 100%;
  height: 60px;
}
#menulist li {
  display: table-cell;
  height: 100%;
  width: 100%;
  background-color: transparent;
  float: left; //位置切替時に変更する
  margin-left: 0px; //位置切替時に変更する
}
#menulist li img{
  float: center;
  width: 60px;
  height: 60px;
  padding-left:0px;
  //display: block;
}
#menulist li img:hover{
  //background-color: rgba(0,255,255,0.3);
}