.adminSettingsDialog {

}

.ft-dialog-buttonpane .dialogError {
    flex-basis: 100%;
    margin-bottom: 0;
}

/* Overview Presentation Schematics */
/* Miniatures for the two mode cards. The grid draws rectangular thumbs with
   the title inside (like .hypervideoTitle), the map draws round markers with
   the title below (like .overviewMapMarkerLabel). */

.schematicOverview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    padding: 8px;
    box-sizing: border-box;
}

.schematicOverviewTitle {
    display: block;
    height: 3px;
    border-radius: 1px;
    background: var(--primary-fg-color);
    opacity: 0.5;
}

.schematicOverviewGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 21px;
    gap: 4px;
    padding: 6px;
    align-content: start;
}

.schematicOverviewGrid .schematicOverviewTile {
    display: flex;
    align-items: flex-end;
    padding: 3px;
    box-sizing: border-box;
    background: var(--primary-fg-color);
    border: 1px solid rgba(127, 127, 127, 0.25);
    opacity: 0.5;
}

.schematicOverviewGrid .schematicOverviewTitle {
    width: 70%;
    background: var(--primary-bg-color);
    opacity: 0.65;
}

.schematicOverviewMap {
    background: rgba(127, 127, 127, 0.18);
}

.schematicOverviewMap .schematicOverviewMarker {
    position: absolute;
    transform: translate(-50%, -50%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--primary-fg-color);
    border: 1px solid rgba(127, 127, 127, 0.25);
    opacity: 0.6;
}

.schematicOverviewMap .schematicOverviewTitle {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    width: 130%;
}