.gap1 {gap: 5px;}
.gap2 {gap: 10px;}
.gap3 {gap: 15px;}
.gap4 {gap: 20px;}

.grid {display: grid;}

.centered {text-align: center;}
.grid.centered {place-items: center;}

.doubC {grid-template-columns: auto auto;}
.doubC-eq {grid-template-columns: 1fr 1fr;}
.doubC-focR {grid-template-columns: auto 1fr;}
.doubC-focL {grid-template-columns: 1fr auto;}

.doubR {grid-template-rows: auto auto;}
.doubR-eq {grid-template-rows: 1fr 1fr;}
.doubR-focT {grid-template-rows: 1fr auto;}
.doubR-focB {grid-template-rows: auto 1fr;}

.sandX {grid-template-columns: auto 1fr auto;}
.sandY {grid-template-rows: auto 1fr auto;}

.ca1a {grid-template-columns: auto 1fr auto;}
.ra1a {grid-template-rows: auto 1fr auto;}
.c1a1 {grid-template-columns: 1fr auto 1fr;}
.r1a1 {grid-template-rows: 1fr auto 1fr;}
.ca1 {grid-template-columns: auto 1fr;}
.ra1 {grid-template-rows: auto 1fr;}
.c1a {grid-template-columns: 1fr auto;}
.r1a {grid-template-rows: 1fr auto;}
.c1 {grid-template-columns: 1fr;}
.r1 {grid-template-rows: 1fr;}

.flowC {grid-auto-flow: column;}
.flowR {grid-auto-flow: row;}

.fillX {width: 100%;}
.fillY {height: 100%;}
.fillXY {
    width: 100%;
    height: 100%;
}

.hidden {display: none !important;}
.transparent {opacity: 0 !important;}

.absolute {position: absolute;}
.relative {position: relative;}

.clickable {cursor: pointer;}

.toolTip {
    position: absolute;
    visibility: hidden;
}
.toolTip.visible {visibility: visible}
.toolTip {
    display: grid;    
    grid-template-rows: auto 1fr;

    color: var(--llllgray);
    background-color: var(--ddddgray);
    border: 1px solid rgb(125,125,125);
    border-radius: 10px;
}
[data-theme="light"] .toolTip {
    color: var(--ddddgray);
    background-color: var(--lllgray);
}
.toolTip > .content {padding: 3px;}
.toolTip > header {padding: 4px;}
.toolTip > header div {
    width: 20px;
    border: 2px solid rgb(202, 200, 134);
    color: rgb(202, 200, 134);
    border-radius: 50%;
    font-size: 0.8em;
    font-weight: bold;
    aspect-ratio: 1/1;
    display: grid;
    place-items: center;
    line-height: 0;
}
[data-theme="light"] .toolTip > header div {
    border-color: rgb(34, 89, 93);
    color: rgb(34, 89, 93);
}