/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 8 version
*/

/* Landscape mode */
#main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#imageBox {
  -ms-flex-preferred-size: 950px;
  flex-basis: 950px;
}

#image {
  margin-right: 20px;
  margin-bottom: 20px;
  min-height: 0;
}

#controlBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 250px;
  flex-basis: 250px;
}

.sliderBox {
  margin-right: 20px;
}

.buttonBox {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.buttonBox > div {
  display: block;
}

#imageSliderWrapper {
  height: 100%;
}

#imageSlider {
  height: calc(100% - 16px);
  width: 44px;
  margin: 8px 3px;
}

#timedisplay {
  position: absolute;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  bottom: 0;
  top: 0;
}

#toggler {
  width: 52px;
  height: 20px;
}

#toggler:before {
  left: 10px;
  top: 8px;
  width: 30px;
  height: 2px;
}

.buttonBox input,
.buttonBox .styledSelect,
.buttonBox .button {
  margin-left: 0 !important;
  width: 190px;
}

.buttonBox #buttonPlayImgSlider,
.buttonBox label{
  margin-left: 0 !important;
  margin-bottom: 10px;
  width: 190px;
}

.buttonBox #buttonPlayImgSlider {
  margin-bottom: 20px;
}

#dateInput,
#timeInput {
  width: 190px;
}

.styledSelect {
  width: 190px;
}

#buttonGenerateVideoStart {
  margin-left: 140px;
  width: 150px;
}

.block {
  margin-bottom: 20px;
}

#videoBox {
  margin-top: 0;
}