.fakepoint {
    fill: rgba(0,0,0,0);
    z-index: -1;
}
.fakepoint:hover {
    cursor: pointer;
}    
#motif {
    width: 100%;
    height: 200px;
    /*border: 1px solid black;*/
}
#motif .line {
    fill: none;
    stroke: black;
    stroke-width: 0.01;
}
#motif .point {
    fill: black;
}
body.busy {
    cursor: wait;
}
#motif .point:hover {
    cursor: pointer;
}
#motif .point.ends {
    cursor: not-allowed;
}
#motif .point.selected {
    fill: red;
}

body {
    overflow: hidden;
    font-family: sans-serif;
    width:100%;
    height: 100%;
    margin: 0;
}
#c {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}

#edit {
    display: inline-block;
    float: right;
    padding: .5em;
    margin-right: .7em;
    margin-top: 0.3em;
    /*
    border-radius: 1em;
    background: #ccc;
    box-shadow: .3em .3em .3em black;
    border-left: .2em solid #eee; border-top: .2em solid #eee; */
    border: 3px solid black;
    border-radius: 1em;
    background: rgba(255,255,255,.9);
    max-width: min-content;
    max-width: -moz-min-content;
    max-width: -webkit-min-content;
}
.box {
    /* border: 3px ridge #fff;*/
    border: 1px solid black;
       position: relative;
       margin-top: .5em;
       padding: .5em .2em .3em;
       padding-top: .5em; padding-left: .2em; padding-right: .2em; padding-bottom: .3em;
     }
.box > div:first-child {
    position: absolute;
    top: -.7em;
    left: .1em;
    padding: .1em;
    /*background: #ccc;*/
    background: white;
    font-weight: 700;
}
input[type=number] {
    width: 3em;
}

.angentry, .lenentry, .connentry {
    position: relative; top: .5em;
}
.angentry.disconnected, .lenentry.disconnected {
    color: gray;
}
.row.selected td.xentry,.row.selected td.yentry {
/*    border: 2px solid red;*/
    background: #f44;
}
.row td.xentry,.row td.yentry {
    cursor: cell;
}
.row.selected td.xentry {
    border-left: none;
}
.row.selected td.yentry {
    border-left: none;
}
.row td {
    text-align: right;
}

canvas#meander { position: absolute; z-index: -1; width: 100%; height: 100% }

input[type=checkbox] {
    /*max-width: min-content;*/
}
input[type=checkbox].connbox {
    display:none;
}
 
input[type=checkbox].connbox + label
{
    background: url(disconnected.svg) content-box center no-repeat;
    width: 36px;
    height: 11px;
    display: inline-block;
    border: 2px solid transparent;
    border-radius: 3px;
}
input[type=checkbox].connbox + label:hover {
    border: 2px inset gray;
}

input[type=checkbox].connbox:checked + label {
    background: url(connected.svg) content-box center no-repeat;
}
td.xentry,td.yentry,td.angentry,td.lenentry { margin: 2px; width:4em;  position: relative;}
table { border-spacing: 0; }

tr > th {
    border-bottom: 1px solid black;
}
input.editbox {
    position: absolute;
    padding: .2em;
    top: -.5em;
    left: -.5em;
    right: .5em;
    bottom: -.5em;
    background: white;
    z-index: 99;
}
.modal {
    position: absolute;
    /* top: 50%; */
    /* left: 50%; */
    /* -webkit-transform: translateX(-50%) translateY(-50%); */
    /* -moz-transform: translateX(-50%) translateY(-50%); */
    /* -ms-transform: translateX(-50%) translateY(-50%); */
    /* transform: translateX(-50%) translateY(-50%); */
    /* max-height: 90%; */
    /* max-width: 90%; */
    top: 5%;
    left: 5%;
    bottom: 5%;
    right: 5%;
    border: 3px solid black;
    border-radius: 1em;
    background: rgba(255,255,255,.9);
    padding: 2.5em 1em 1em 1em;
    z-index: 99;
    text-align: center;
    overflow: hidden;
}
.modal .close {
    position: absolute;
    right: .25em;
    top: .25em;
    width: 1em;
    height: 1em;
    text-align: center;
    vertical-align: center;
    cursor: pointer;
    font-size: 1.5em;
    font-weight: 700;
    border-radius: 1em;
    border: 3px solid transparent;
}
.modal .close:hover {
    border: 3px solid black;
}

.modal .scroller {
    padding: 0 2em 2em 2em;
    height: 90%; /* FIXME */
    overflow-y: scroll;
}

/*::-webkit-scrollbar-track {
   border-radius: 1em;
   background: #ccc;
}

::-webkit-scrollbar-thumb {
   border-radius: 1em;
   background: #444;
}
::-webkit-scrollbar {
   width: 1em;
}
*/

.preset {
    display: inline-block;
    padding: 8px;
    width: 200px;
    text-align: center;
    vertical-align: top;
}
.preset canvas {
    width: 140px;
    height: 120px;
    border: 1px solid black;
}
.preset canvas:hover {
    cursor: pointer;
}

.preset .pname {
    font-style: italic;
    font-family: serif;
    font-size: 1.2em;
}

.about h2 {
    font-style: italic;
    font-family: serif;
}

.about canvas {
    width: 800px;
    height: 400px;
    margin-top: -250px;
}