ui/app/static/css/style.css

body {
  background-color: #f2f2f2;
}
/* If you want the content centered horizontally and vertically */
/*.centered {
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin: 10;
}

.header_centered {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin: 10;
}
.thick-border {
        border: 3px solid black;
        border-collapse: collapse;
}*/

/* Style the image inside the centered container, if needed */
img {
  max-width: 100%;
}

.images{
  flex: 1 1 auto;
  padding: 0;
  min-width: 15em;
  max-width: 800px;
}

.container {
    display: flex;
    flex-wrap: row wrap;
}

.column {
    flex: 1;
    background: #f2f2f2;
    box-sizing: border-box;
}
.column-one {
    order: 1;
}
.column-two {
    order: 2;
}
.column-three {
    order: 3;
}

@media (max-width: 50em) { /* 2 x 15em (.text & .images) + 2em  (left & right margin of the body element) + 1em (.text margin-right)  */
  .container {flex-wrap: wrap}
}

.red{
/*padding: 10;*/
background: red;
opacity: 0.4;
position: absolute;
left: 0px;
top: 0px;
}

.green{
background: red;
opacity: 0.2;
width: 20;
height: 20px;
position: absolute;
left: 0px;
top: 0px;
}


.frame {
  flex: 1 1 auto;
  border: 0;
  height: 50%;
  width: 100%;
}