#drawing{
    /* border: 1px solid black; */
    z-index: 1;
}
#drawing2{
    z-index: 2;
}
#text-prev{
    z-index: 3;
}
#img-prev{
    /* border: 1px solid black; */
    z-index: 4;
}
#drawing, #drawing2, #img-prev {
    cursor: crosshair;
}
.fixed-size > div:first-child {
    pointer-events: none;
}
canvas {
    cursor: crosshair;
}
#sidebar{
    padding:3px;
}
.fixed-size{
    width:600px;
    height:600px;
}
.preview{
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 20px;
    width: 100%;
    height: fit-content;
    font-size: small;
}
#canvas{
    width:fit-content;
    height:fit-content;
    display: inline flow-root;
}
#parent{
    position: relative;
}
#parent > *{
    position: absolute;
}
.manip-circle{
    border: lightblue 3px solid;
    width: 10px;
    height:10px;
    border-radius:5px;
    background-color:aliceblue;
}
.top{
    top: 0;
}
.bottom{
    bottom: 0;
}
.left{
    left: 0;
}
.right{
    right: 0;
}
.infobox{
    color:white;
    border-radius: 10px;
    padding: 5px;
    margin: 5px;
}
.infobox-active{
    background-color:cadetblue;
}
.infobox-inactive{
    background-color:lightgray;
    color: black;
}
.toolbutton{
    position: relative;
}

/* shamelessly taken from w3schools */ 
.tooltiptext {
    --width-proper: 130px;
    visibility: hidden;
    width: var(--width-proper);
    top: 100%;
    left: 50%;
    margin-left: calc(var(--width-proper) / -2);
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 10;
}   
.toolbutton:hover .tooltiptext {
    visibility: visible;
}
.settings{
    padding: 10px;
    margin: 20px;
    margin-top: 30px;
    border-radius: 20px;
    background-color: #666;
}
#popupbutton{
    /* button should be positioned at least 10px lower than text */
    position: absolute;
    display: inline-flex;
    /* top: 210px;
    left: 50px; */
    z-index: 10;
}
#popupbutton > *{
    margin: 5px;
}