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

body {
   font-family: arial, helvetica, sans-serif;
   font-size: 14px;
}

a {
  text-decoration: none;
  color: gray;
}

#elements {
   position: fixed;
   left: 0px;
   top: 0px;
   bottom: 0px;
   width: 300px;
   border-right: solid 1px gray;
   box-shadow: 10px 10px 25px #AAAAAA;
   background-color: white;
   overflow: scroll;
}

#segment_1 {
   text-align: center;
}

#segment_1 table {
   margin: 10px;
}

#segment_1 table tr td {
   padding: 5px;
}

#show_front, #show_back {
   display: inline-block;
   width: 25px;
   height: 25px;
   border-radius: 25px;
   position: relative;
}

#show_front.active {
   background-color: #ed145b;
}

#show_back.active {
   background-color: #00bb55;
}

#show_front { 
   border: 2px solid #ed145b;
}

#show_back {
   border: 2px solid #00bb55;
}

#show_front:after, #show_back:after { 
   content: '';
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   border-radius: 20px;
   border: 5px solid white;
}

#card_frame {
   position: fixed;
   left: 302px;
   top: 0px;
   bottom: 0px;
   right: 402px;
   border-right: solid 1px gray;
   background-color: #DDDDDD;
   overflow: auto;
   text-align: center;
}

#metric {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
   padding: 49px 0px 0px 49px;
}

#metric::after {
  content: "";
   background-image: url("mm.png");
   background-repeat: no-repeat;
   background-position: 0px 0px;
  opacity: 0.4;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

#front, #back {
   width: 105mm;
   height: 148mm;
   outline: #ed145b solid 3px;
   background-color: white;
   box-shadow: 10px 10px 25px #AAAAAA;
}

#back {
   display: none;
   outline: #00bb55 solid 3px;
}

#properties {
   position: fixed;
   right: 0px;
   top: 0px;
   bottom: 0px;
   width: 400px;
   border-left: solid 1px gray;
   box-shadow: -10px 10px 25px #AAAAAA;
   background-color: white;
   overflow: hidden;
}

.propbox, .segment_title {
   border-top: solid 1px steelblue;
   color: steelblue;
   padding: 10px 10px 10px 30px;
   background-color: white;
   cursor: pointer;
}

.propbox:hover, .segment_title:hover {
   background-color: gainsboro;
}

.prop-button {
   background-repeat: no-repeat;
   background-position: 10px center;   
}

.arr-rt {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAH/SURBVHgBAO8BEP4BRoK0RAAAAIgAAABnuX1LzQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAADMAAADMR4O1qkeDtREAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAVQAAAO5Hg7V3AAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACIR4O13UeDtWYAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIgAAAJlHg7XMR4O1MwAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAzAAAAzEeDtXcEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADNAAAAZ7l9S80EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3gAAAIm5fUuaAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB4uX1LiQAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAqwAAAGe5fUvvAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAM0AAABnuX1LzQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAD//2yhKg4Mo6eWAAAAAElFTkSuQmCC');
}

.arr-dn {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAH/SURBVHgBAO8BEP4BRoK0IgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAqgAAADMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAO8CAAAAeAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIkB////AEeDtaoAAABVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3gAAADQCAAAAAAAAAHgAAADvAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAibl9S+8CAAAAALl9S94AAACJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC8uX1LmgAAAAACAAAAAAAAAAAAAACaAAAA3gAAAAAAAAAAAAAAAAAAAO8AAAB4AAAAAAAAAAACAAAAAAAAAAC5fUvvAAAAiQAAAAAAAAAAAAAAAAAAAKu5fUvNAAAAAAAAAAACAAAAAAAAAAAAAAAAuX1LmgAAALwAAAAAAAAA7wAAAIkAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAIkAAAAAAAAAibl9S94AAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wBGgrR3////AP///wD///8A////AP///wABAAD//4tCRZK7CE/1AAAAAElFTkSuQmCC');
}

.arr-up {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAH/SURBVHgBAO8BEP4A////AP///wD///8A////AP///wBGgrR3////AP///wD///8A////AP///wACAAAAAAAAAAAAAAAAAAAAAEeDtXcAAACIR4O1RAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAR4O1IgAAAHcAAAAAAAAAdwAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAdwAAABEAAAAAAAAAREeDtWYAAAAAAAAAAAAAAAAB////AAAAAABHg7UzAAAAuwAAABEAAAAAAAAAAAAAAN4AAAA0uX1L7wAAAAACAAAAAAAAAAAAAACIAAAAEQAAAAAAAAAAAAAAAAAAACIAAABmAAAAAAAAAAAB////AEeDtWYAAACZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADvAAAANLl9S94CR4O1EQAAAHcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARAAAAiAAAAAACAAAAZgAAACIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVUeDtUQCAAAAdwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIgEAAAANAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAD//ydGQvmWcrR+AAAAAElFTkSuQmCC');
}

.arr-lt {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAH/SURBVHgBAO8BEP4B////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABHg7UzAAAAmQAAAHgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAR4O1EQAAAJkAAABVAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAABHg7V3AAAA7gAAAFUAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAR4O1ZgAAAHcAAAAiAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAEeDtTMAAACZAAAAMwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADxwM1dwAAAKoAAAAaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKMCuX1LiQAAADQAAADNAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB////AAAAAAAAAAAAR4O1ZgAAAHcAAAAiAAAAAAAAAAAAAAAAAAAAAAAAAEUB////AAAAAAAAAAAAAAAAAAAAAABHg7V3AAAAiAAAAAAAAAAAAAAAAAAAAEUCAAAAAAAAAAAAAAAAAAAAAAAAAAC5fUuJAAAAEgAAAKsAAAAAAAAAAAAAAAAB////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABHg7UzAAAAmQAAAHgBAAD//1vnKny6AzRoAAAAAElFTkSuQmCC');
}

#properties .content {
   /* height: 200px; */
   display: none;
   background-color: white;
   border-top: solid 1px gainsboro;
   padding: 15px;
}

#elements .content {
   /* height: 200px; */
   display: none;
   background-color: white;
   border-top: solid 1px gainsboro;
}

#foreground, #segment_3 {
   border-bottom: solid 1px steelblue;
}

.segment_label {
   padding: 10px;
   color: gray;
   border-bottom: solid 1px gainsboro;
}

.dot {
   display: block;
   width: 10px;
   height: 10px;
   background-color: red;
   border-radius: 5px;
}

#segment_3 table {
   border-collapse: collapse;
   width: 100%;
}

#segment_3 table tr td {
   vertical-align: top;
   /* border: solid 1px gray; */
}

.dotty {
   width: 15px;
   padding: 12px 0px 0px 10px;
}

.texty {
   padding: 0px;
}

.texty a {
   display: block;
   padding: 9px;
}

.texty a:hover {
   background-color: steelblue;
   color: white;
}

.placeholder {
   position: absolute;
   min-width: 20mm;
   min-height: 20mm;
   border: dotted 1px black;
   top: 20mm;
   left: 20mm;
}

.placeholder .handle {
   position: absolute;
   width: 8px;
   height: 8px;
   border: solid 1px black;
   background-color: gray;
}

.ul_handle { top: -5px; left: -5px; cursor: nw-resize; }
.ur_handle { top: -5px; right: -5px; cursor: ne-resize; }
.bl_handle { bottom: -5px; left: -5px; cursor: sw-resize}
.br_handle { bottom: -5px; right: -5px; cursor: se-resize}






.resize-container {
    position: relative;
    display: inline-block;
    cursor: move;
    margin: 0 auto;
}

.resize-container img {
    display: block
}

.resize-container:hover img,
.resize-container:active img {
    outline: 2px dashed rgba(222,60,80,.9);
}

.resize-handle-ne,
.resize-handle-ne,
.resize-handle-se,
.resize-handle-nw,
.resize-handle-sw {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background: rgba(222,60,80,.9);
    z-index: 999;
}

.resize-handle-nw {
    top: -5px;
    left: -5px;
    cursor: nw-resize;
}

.resize-handle-sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}

.resize-handle-ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}

.resize-handle-se {
    bottom: -5px;
    right: -5px;
    cursor: se-resize;
}