body{
    margin: 3.5px;
    width: fit-content;
}
main{
    font-size: 10px;
    display: flex;
    flex-direction: row;
}
@media (max-width: 600px){
    main{
        flex-direction: column;
    }
}
h1{
    margin-top: 0px;
    margin-bottom: 0px;
}
h2{
    line-height: 0.5em;
    background-color: #fff;
    padding: 4px;
    margin: 0;
    color: #88f;
    position: absolute;
    left: 5%;
    top: -10px;
}
.col{
    display: inline-block;
    position: relative; 
    vertical-align: top;
    border: dashed 1px #fff;
    margin: 0 2px 0 2px;
}
.box{
    position: relative;
    width: 295px;
    border:solid 2px;
    border-color: #88f;
    padding-top: 8px;
    padding-bottom: 4px;
    margin: 0 0 20px 0;
}
.elemLine{
    display: flex;
    justify-content: space-between;
    margin: 4px 4px 0 4px;
}
.off{
    margin: 0;
    padding: 0;
    font-weight: bolder;
    cursor: pointer;
    background-color: #aaa;
    color: #fff;
    border: none;
    border-radius: 0;
}
.on{
    margin: 0;
    padding: 0;
    font-weight: bolder;
    cursor: pointer;
    background-color: #c24;
    color: #fff;
    border: none;
    border-radius: 0;
}
:disabled{
    background: #ccc;
}
.single{
    width: 100%;
}
.double{
    width: calc(50% - 2px);
}
.quarter{
    width: calc(25% - 3px);
}
details{
    background-color: #ffc;
}
.sub_details{
    background-color: #fd8;
}
summary{
    color: #00f;
    cursor: pointer;
}
td,th{
    background: #fff;
    font-size: 10px;
}
.fix,
.corner{
    position: sticky;
    top: 0;
    left: 0;
    &:before{
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        width: 100%;
        height: 100%;
        border: 1px solid #888;
    }
}
.fix{
    z-index: 1;
}
.corner{
    z-index: 2;
}

/* inside SVG part */
.background{
    fill:#ccc;
}
.blankPref{fill:#fff;stroke:#000;stroke-width:0.8;stroke-miterlimit:10;}
.activePref{fill:#f88;stroke:#f00;stroke-width:0.8;stroke-miterlimit:10;}
.regionPolygon{fill:none;stroke:#0ae;stroke-width:2;stroke-miterlimit:10;}
.zonePolygon{fill:none;stroke:#3b7;stroke-miterlimit:10;}
.blankZone{fill:#3b7;stroke:none;}
.blankRegion {fill:#0ae;stroke:none;position: relative;}
.activeZone,
.activeRegion{fill:#c22;stroke:none;}
.regionText{
    fill: #fff;
    font-weight: bold;
    font-size: 25px;
    cursor: pointer;
}
.zoneText{
    fill: #fff;
    font-size: 12px;
    cursor: pointer;
}