html, body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 2px; /* @see center_page(), ... */
    font-size:62.5%; /* 16px down to 10px */
    background: #DDDDDD;
    position: relative;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: none;
}

.canvas-freehand, #compass-canvas, #id_page_text {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0;
    padding: 0;
    /*transform: scale(2);*/
    z-index: 10200;
    touch-action: none;
}

#id_page_text {
    pointer-events: all;
}

#id_page_text.disabled {
    pointer-events: none;
}

.user_text, .drawn_text {
    position: absolute;
    border: none;
    background: none;
    resize: none;
    font-family: Calibri, sans;
    pointer-events: none;
    width: auto;
    height: auto;
    cursor: default;
    overflow: hidden;
}

#id_page_text.disabled .user_text{
    pointer-events: all;
}

.user_text:focus, .user_text.selected {
    outline: calc(1px/var(--page-scale)) dashed black;
}

.user_text:focus {
    cursor: auto;
}

.canvas-disabled {
    touch-action: none;
    pointer-events: none;
}

#id_note, #id_edit_note {
    position: absolute;
    left: 15vw;
    top: 15vh;
    width: 70vw;
    height: 70vh;
    margin: 0;
    padding: 20px;
    border: 4px solid gray;
    border-radius: 10px;
    background-color: white/*#E6FFF9*/;
    box-shadow: 5px 10px 18px #888888;
    text-align: left;
    font-size: 4em;
    z-index: 10150;
}

.user_link img, .shared_link img {
    width: 100%;
    height: 100%;
}

#id_page_div {
    background: white;
    z-index: -1;
}

#id_page_svg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10100;
    pointer-events: none;
}

#id_page_svg svg {
    position: absolute;
}

#id_page_svg svg.svg_drawing {
    pointer-events: auto;
}

#id_page_svg svg *:not(.svg_select_boundingRect) {
    pointer-events: auto;
}

#id_page_svg svg.svg_drawing *:not(.svg_select_boundingRect) {
    pointer-events: none;
}

#id_workspace {
    position: absolute;
    --page-scale: 1;
    transform-origin: 0 0;
    transform: scale(var(--page-scale));
}

/*#id_page_svg svg * {
    pointer-events: auto;
}*/


/* scrollbar */
 /* width */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f5f4f4;
    border-left: 1px solid #BBB;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #BBB;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #AAA;
}

.text_highlight {
    background: rgba(255,255,0,0.4);
    position: absolute;
    z-index: 10000;
}

.timeline {
    position:absolute;
    padding:5px;
}

.timeline .scroll {
    display: grid;
    overflow: hidden;
    width:100%;
    height:100%;
}

.timeline .scroll img {
    margin: auto;
}

.timeline button {
    position:absolute;
    width:64px;
    height:64px;
    border:none;
    background:rgba(255,255,255,0.1);
    margin:0;
    padding:0;
}

.timeline button:hover {
    background:rgba(0,255,0,0.5);
}

.timeline button img {
    width: 100%;
}

.ruler, .bookmark {
    position: absolute;
    z-index:10202;
    fill: transparent;
    stroke: none;
    pointer-events: none;
}

.ruler-background {
    fill: #00FF00;
    fill-opacity: 0.5;
    stroke: black;
    stroke-width: 1;
    pointer-events: fill;
}

.bookmark-background {
    fill: #FFDE8F;
    stroke: black;
    stroke-width: 1;
    pointer-events: fill;
}

.ruler-fill {
    fill: black;
}

.ruler-stroke {
    stroke: black;
    stroke-width: 1;
}

.ruler-lines, .ruler-numbers {
    pointer-events: none;
}

.ruler-close-mark, .ruler-rotator, .ruler-resizer {
    pointer-events: all;
}

.ruler.disabled .ruler-background,
.ruler.disabled .bookmark-background,
.ruler.disabled .ruler-close-mark,
.ruler.disabled .ruler-rotator,
.ruler.disabled .ruler-resizer {
    pointer-events: none;
}

.rotator {
    width: 48px;
    height: 48px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.trash {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 18vw;
}

.trash.hover {
    transform: scale(1.1);
    transform-origin: 50%;
}

.drawn_svg {
    pointer-events: none;
    touch-action: none;
    position: absolute;
    z-index: 10201;
    fill: none;
}

.text_div2 {
    margin: 8px;
}

.text_div2 span {
    letter-spacing: -0.015em;
}

.svg-map {
    pointer-events: none;
}

.svg-map-action, .svg-map polygon {
    fill: none;
    stroke: none;
    pointer-events: fill;
}

.user_note, .user_link, .shared_note, .shared_link {
    position: absolute;
    z-index: 99900;
    cursor: pointer;
}

.answer {
    z-index: 999999;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.block {
    border: calc(1px / var(--page-scale)) solid #888;
    background-color: #00000040;
    z-index: 9999998;
    position: absolute;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    pointer-events: none;
    box-sizing: border-box;
}

.block.disabled {
    background-color: transparent;
    border: none;
}

.block.selected {
    background-color: #FFFF0088;
    border: none;
}

.block.editor {
    background-color: #00000088;
    border-color: gray;
    cursor: move;
    pointer-events: all;
}

.block.ontop {
    z-index: 9999999;
    border: 2px solid yellow;
}

.block_preview {
    border: 4px dashed black;
    background-color: #00000033;
    position: absolute;
}

.block-menu-button {
    right: 0;
    top: 0;
    position: absolute;
    width: 40px;/*calc(26px / var(--page-scale));*/
    height: 40px;/*calc(26px / var(--page-scale))*/;
    max-width: 100%;
    max-height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../resources/images/video/settings.png');
    background-size: contain;
    z-index: 9999999;
    pointer-events: all;
    /*filter: invert(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(3) opacity(0.6);*/
}

.block-menu-button:hover {
    filter: invert(100%);
    cursor: pointer;
}

.block-menu-button.disabled {
    background-image: url('../resources/images/right2.png');
    background-size: 32px;
    filter: opacity(60%);
}

.block-menu-button.disabled:hover {
    filter: opacity(100%);
    cursor: pointer;
}

.magic-wand {
    stroke: white;
    stroke-dasharray: 20;
    stroke-width: 5;
    animation: dash 0.5s linear;
    animation-iteration-count: infinite;
    pointer-events: fill;
}

.canvas-selection {
    position: absolute;
    pointer-events: none;
}

.canvas-selection canvas {
    position: absolute;
    z-index: 10201;
}

.hidden {
    display: none;
}

@keyframes dash {
  to {
    stroke-dashoffset: 40;
  }
}

@media (orientation: landscape) {

    .trash {
        width: 18vh;
    }
}