#debug {
    height: 95vh;
    width: 40%;
    border: 1px dotted gray;
    overflow: auto;
    position: fixed;
    top: 20px;
    left: 20px;
    visibility: collapse;
}

* {
    box-sizing: border-box;
    tap-highlight-color: transparent;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*:read-write:focus {
     outline: none;
}

*:focus {
    outline:none;
}

html {
    height: 100%;
    background-color: white;  /* to fix mix-blend-mode on chrome toplevel */
}


body {
    margin: 0px; 
    height: 100%; 
    display: flex;
    cursor:default;
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    flex-direction: column;
}


.highlightrect {
    position: absolute;
    opacity: 0.8;
    border: 2px solid Highlight;
    pointer-events: none;
    z-index:134217727;
}

.droptargetrect {
    position: absolute;
    border: 2px solid rgba(178, 215, 255, 1.00);
    background: rgba(255,0,0,0.2);
    pointer-events: none;
}
.handle {
    border: 1px solid black;
    background: white; 
    position: absolute;
    width: 6px;
    height: 6px;
    z-index:134217727;
}

.selectionRect {
    border: 1px solid rgba(128, 128, 128, 1.00);
    background: rgba(0,0,0,0.1);
    position: absolute;
    z-index:134217727;
}


/* spinner */
.loader-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    z-index: 134217727;
}
.loader {
    height: 100px;
    width: 100px;
}


/* live-preview-spinner */
.loader-container-live-preview {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    background: #00000000;
    z-index: 134217727;
}


svg path,
svg rect {
          fill: #000000;
}

/* text */
.text{
    display: flex !important;
    flex: 1 1 auto;
    align-self: stretch;
}

.aatl{
    align-items:flex-start;
    justify-content: flex-start;
}
.aatc{
    align-items: flex-start;
    justify-content: center;
    text-align: center;
}
.aatr{
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
}
.aacl{
    align-items: center;
    justify-content: flex-start;
}
.aacc{
    align-items:center;
    justify-content: center;
    text-align: center;
}
.aacr{
    align-items:center;
    justify-content: flex-end;
    text-align: right;    
}
.aabl{
    align-items:flex-end;
    justify-content: flex-start;
}
.aabc{
    align-items:flex-end;
    justify-content: center;
    text-align: center;
}
.aabr{
    align-items:flex-end;
    justify-content: flex-end;
    text-align: right;
}

/* Issue #926 Safari sometimes does not fire the events if clicked on 
 * a text. As a workaround we disable the pointer-events for spans
 * and enable it in AntetypeWeb#updateText if the text is editable
 */
cell span {
    pointer-events: none;
}


/* highlight cells with click-events (option/alt if runtool is active) */
.GDClickable {
    background: rgba(178, 215, 255, 0.70) !important;
    z-index: 134217727;
    position: absolute;
    pointer-events: none;
}


svg path, svg rect {
    fill: unset;
}






.NewScreenContainer {
    position: absolute;
    z-index: 100;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}




/* 
    for screen transitions. Safari (12) can't animate with the normal animate.css slideXXXX-animations, 
    but works with margin. 

    see Antetype#gotoScreenWithTransition

*/


@-webkit-keyframes marginInRight {
  from {
    margin-left: 100%;
  }

  to {
    margin-left: 0%;
  }

}

@keyframes marginInRight {
  from {
    margin-left: 100%;
  }

  to {
    margin-left: 0%;
  }
}

.marginInRight {
  -webkit-animation-name: marginInRight;
  animation-name: marginInRight;
}

@-webkit-keyframes marginInLeft {
  from {
    margin-left: -100%;
  }

  to {
    margin-left: 0%;
  }

}

@keyframes marginInLeft {
  from {
    margin-left: -100%;
  }

  to {
    margin-left: 0%;
  }
}

.marginInLeft {
  -webkit-animation-name: marginInLeft;
  animation-name: marginInLeft;
}

@-webkit-keyframes marginInUp {
  from {
    margin-top: 100%;
  }

  to {
    margin-top: 0%;
  }

}

@keyframes marginInUp {
  from {
    margin-top: 100%;
  }

  to {
    margin-top: 0%;
  }
}

.marginInUp {
  -webkit-animation-name: marginInUp;
  animation-name: marginInUp;
}

@-webkit-keyframes marginInDown {
  from {
    margin-top: -100%;
  }

  to {
    margin-top: 0%;
  }

}

@keyframes marginInDown {
  from {
    margin-top: -100%;
  }

  to {
    margin-top: 0%;
  }
}

.marginInDown {
  -webkit-animation-name: marginInDown;
  animation-name: marginInDown;
}




#measure-hor {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2000;
  pointer-events: none;
}

#measure-hor2 {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2000;
  pointer-events: none;
}

#measure-hor-line {
  height: 1px;
  background: #0069FF;
  align-self: stretch;
  pointer-events: none;
}

#measure-hor-number{
  background: #0069FF;
  padding: 2px 5px;
  color: white;
  border-radius: 5px;
  margin-bottom: 2px;
  pointer-events: none;
  font-size: 10px;
  z-index: 2000;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

.numberOffsetLeft {
margin-right: 15px !important;
}

.numberOffsetLeftNo {}

.numberOffsetTop {
margin-bottom: 15px !important;
}

.numberOffsetTopNo {}

  .numberOffsetRight {
  margin-left: 15px !important;
  }

  .numberOffsetRightNo {}

  .numberOffsetBottom {
  margin-top: 15px !important;
  }

  .numberOffsetLeftBottomNo {}

#measure-hor2-line {
  height: 1px;
  background: #0069FF;
  align-self: stretch;
  pointer-events: none;
}

#measure-hor2-number{
  background: #0069FF;
  padding: 2px 5px;
  color: white;
  border-radius: 5px;
  margin-bottom: 2px;
  pointer-events: none;
  font-size: 10px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

#guides-vertical{
  position: absolute;
  border-left: 1px dashed #E20053;
  border-right: 1px dashed #E20053;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

#guides-horziontal{
  position: absolute;
  border-top: 1px dashed #E20053;
  border-bottom: 1px dashed #E20053;
  width: 100%;
  pointer-events: none;
  z-index: 1000;
}

#measure-vert{
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2000;
  pointer-events: none;
}

#measure-vert2 {
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2000;
  pointer-events: none;
}

#measure-vert-line {
   width: 1px;
   background: #0069FF;
   align-self: stretch;
   pointer-events: none;
}

#measure-vert-number{
  background: #0069FF;
  padding: 2px 5px;
  color: white;
  border-radius: 5px;
  margin-right: 2px;
  pointer-events: none;
  font-size: 10px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

#measure-vert2-line {
  width: 1px;
  background: #0069FF;
  align-self: stretch;
  pointer-events: none;
}

#measure-vert2-number{
  background: #0069FF;
  padding: 2px 5px;
  color: white;
  border-radius: 5px;
  margin-right: 2px;
  pointer-events: none;
  font-size: 10px;
  flex: 0 1 auto;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}