.button, .delete, .reload, table .id input, .popup {
  padding: 5px 0;
  margin: 5px 0;
  font-size: 1em;
  border: 1px solid;
  border-radius: 36px;
  text-align: center; }

.home .file-uploader, .help .instrus {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

/* resizable element */
/* http://www.developerdrive.com/2012/06/allowing-users-to-resize-web-page-elements-with-css3/ */
.resizable {
  resize: both;
  overflow: scroll; }

/* */
/* buttons */
.button, .delete, .reload, table .id input, .popup {
  font-weight: bold;
  text-transform: lowercase;
  overflow: scroll; }
  .button:hover, .delete:hover, .reload:hover, table .id input:hover, .popup:hover {
    cursor: pointer; }

.green {
  background-color: honeydew;
  color: #8aff8a;
  border-color: #8aff8a; }
  .green:hover {
    background-color: #8aff8a;
    color: honeydew; }

.red {
  background-color: lightsalmon;
  color: #ff5714;
  border-color: #ff5714; }
  .red:hover {
    background-color: #ff5714;
    color: lightsalmon; }

.blue {
  background-color: aliceblue;
  color: aquamarine;
  border-color: aquamarine; }
  .blue:hover {
    background-color: aquamarine;
    color: aliceblue; }

.black {
  background-color: black;
  color: white;
  border-color: white; }
  .black:hover {
    background-color: white;
    color: black; }

.white, table .id input, .toggleMenu, .popup {
  background-color: white;
  color: black;
  border-color: black; }
  .white:hover, table .id input:hover, .toggleMenu:hover, .popup:hover {
    background-color: black;
    color: white; }

.whitesmoke {
  background-color: whitesmoke;
  color: #c2c2c2;
  border-color: #c2c2c2; }
  .whitesmoke:hover {
    background-color: #c2c2c2;
    color: whitesmoke; }

.big-button {
  width: 80%;
  font-size: 2.5em; }

.small-button, .popup {
  width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto; }

.delete, .reload {
  color: red;
  font-family: sans-serif;
  font-size: 1em;
  padding: 0; }
  .delete:hover, .reload:hover {
    color: tomato; }

.reload {
  color: mediumaquamarine; }
  .reload:hover {
    color: aquamarine; }

/* MAIN containers */
html,
body,
#ractive-container {
  height: 100%;
  margin: 0;
  padding: 0; }

.screen {
  height: 90vh;
  padding: 5vh;
  -webkit-transition: all ease-in 0.5s;
  -ms-transition: all ease-in 0.5s;
  transition: all ease-in 0.5s; }

/* home */
.home {
  background-color: white;
  text-align: center; }
  .home div {
    width: 100%; }
  .home .measures {
    height: auto; }
  .home .instrus-text {
    color: white; }
  .home .file-uploader .input {
    overflow: scroll; }

/* tables used in measures and in image list */
table {
  width: 100%;
  text-align: center;
  word-break: break-all; }
  table td {
    border: 1px solid whitesmoke;
    padding: 1px 5px; }
  .file-uploader table {
    margin: 20px 0; }
    .file-uploader table td:first-child {
      text-align: left; }
  table .id {
    width: 15%; }
    table .id input {
      width: 100%;
      background-color: transparent;
      border: none;
      border: none;
      padding: 0;
      margin: 0; }
      table .id input:hover {
        color: white;
        cursor: text; }

.select-file {
  border: none;
  -moz-box-shadow: inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow: inset 0 0 10px #000000; }
  .select-file:hover {
    cursor: text; }

*:focus {
  outline: none; }

.side-menu {
  -webkit-transition: all ease-in 0.5s;
  -ms-transition: all ease-in 0.5s;
  transition: all ease-in 0.5s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 5000;
  background-color: white; }
  .side-menu > * {
    display: none; }
  .side-menu.collapsed {
    width: 30px; }
  .side-menu.expanded {
    width: 30%;
    border-right: 1px solid black; }
    .side-menu.expanded > * {
      display: block;
      margin: 25px auto 50px auto; }

.toggleMenu {
  display: block;
  color: black;
  font-size: 2em;
  text-align: right; }
  .toggleMenu:hover {
    cursor: pointer; }
  .collapsed .toggleMenu:after {
    content: ">"; }
  .expanded .toggleMenu {
    margin: 0; }
  .expanded .toggleMenu:after {
    content: "<"; }

.help {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 6000; }
  .help .instrus {
    margin-left: auto;
    margin-right: auto;
    padding: 5vh;
    width: 50%;
    position: relative; }
    .help .instrus:hover {
      background-color: white;
      color: initial; }
    .help .instrus .close {
      position: absolute;
      right: 5vh;
      top: 2vh;
      text-transform: uppercase; }
    .help .instrus p {
      margin: 0; }

.relative {
  position: relative; }

.popup {
  display: none;
  position: absolute;
  top: -65%;
  right: -45%;
  width: 50%;
  padding: 0.5em;
  font-size: 0.5em; }
  table .popup {
    width: 350%;
    top: -265%;
    right: initial;
    left: 0; }
  .image-list .popup {
    width: 800%; }
  .popup p {
    margin: 0; }

/* img to measure */
.image {
  background-color: white;
  /* canvas for image measure draw */ }
  .image .img-container {
    width: 100%;
    height: auto; }
  .image .img-active {
    width: 100%;
    height: auto; }
  .image .canvas {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2000; }
    .image .canvas circle {
      z-index: 5000; }
    .image .canvas .cota {
      font-size: 10px; }
    .image .canvas line {
      stroke: black; }
    .image .canvas circle {
      stroke: black;
      stroke-width: 1px;
      fill: transparent; }
    .image .canvas rect {
      fill: rgba(0, 0, 0, 0.6); }
    .image .canvas text {
      fill: white; }
  .image .canvas-parent {
    position: relative; }

/* init */
.inactive {
  height: 0;
  width: 0;
  padding: 0;
  opacity: 0;
  position: absolute;
  top: 0; }

.active {
  opacity: 1;
  top: 0; }

.hidden {
  display: none; }

/*# sourceMappingURL=style.css.map */