body, html {
    width: 100%; height: 100%; padding: 0; margin: 0;
}

.app-container {
    width: 100%; height: 100%;
    display: flex; flex-flow: column;
}

.header {

}

.title {
    font-size: 20px;
    font-family: monospace;
    padding: 20px;
    width: 100%;
    text-align: center;
}

.options {
    margin-top: 10px;
    display: flex; flex-flow: column;
}

.option-line {
    display: flex; flex-flow: row;
    margin-bottom: 10px;
    /* justify-content: center; */
    text-align: center;
}

.option-label {
    width: 300px;
    text-align: right;
    margin-right: 20px;
}

.option-input {

}

.horizontal-panel {
    display: flex; flex-flow: row;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.menu-panel {
    width: 500px;
}

.preview-panel {
    width: 100%;
    height: 100%;
    /* flex-grow: 1; */
    display: flex; flex-flow: column;
    box-sizing: border-box;
}

.img-panel {
    width: 100%;
    /* height: 45%;
    max-height: 45%; */
    /* height: 100%; */
    /* overflow: auto; */
    margin-bottom: 10px;
    padding: 10px;
    /* flex-grow: 1; */
    /* display: flex; flex-flow: column; */
    box-sizing: border-box;
}

img {
    /* width: auto; */
}

#secretCanvas {
    display: none;
}

#secretCanvasRotate {
    display: none;
}

input {
    max-width: 75px;
}




* {
    font-family: monospace;
}


#wait {
    text-align: center;
    margin-top: 20px;
}

.spinner {
  margin: 10px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;

  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
