.spot {
        /*fill : none;*/
        stroke : white;
        stroke-width : 2;
        fill-opacity : 0;
        stroke-opacity : 0;
    }

 .area {
    stroke-width : 2;
    fill-opacity : 0.6;
    /*pointer-events : none;*/
}


/* The arrow animation code */
@keyframes boingboing {
    from {transform: translate(0,0);}
    to {transform: translate(8px,0);}
}

#starting-arrow {
    font-size:60px;
    fill:white;
    cursor: default;

    transform: translate(0,0);
    animation-name: boingboing;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;

} 

/* UI */
.svg-button {
    stroke : white;
    stroke-width : 2;
    fill : white;
    fill-opacity : 0;
}
.svg-button text {
    stroke : none;
    fill-opacity : 1;
    text-anchor: middle;
    font-weight: bold;
}
.svg-button:hover {
    cursor: pointer;
    stroke-width : 3;
}
.svg-button:active {
    stroke-width : 4;
    fill-opacity : 0.5;
}

/* Modal */
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 120px auto;
  padding: 20px;
  background: #222;
  color: #eee;
  /*border : 2px solid black;*/
  /*border-radius: 5px;*/
  /*width: 30%;*/
  width : 500px;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #ddd;
}
.popup .close:hover {
  color: #AA0000;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

/*  */

#save-modal-errormsg {
    color: red;
    border: 1px solid;
    display: none;
}