*:not(head,span,title) {
    box-sizing: border-box;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

body, html {
    height: 100%;
    width: 100%;
}

body {
    margin: auto;
    max-width: 720pt;
}

body,div,.div {
    align-items: flex-start;
    display: flex;
    flex-basis: max-content;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: hidden;
}

div,.div {
    max-width: 100%;
}

input[type="checkbox"] {
    width: 14pt;
    height: 14pt;
}

.center {
    align-items: center;
}

.gap-small {
    gap: 7pt;
}

.gap-medium {
    gap: 12pt;
}

.gap-large {
    gap: 21pt;
}

.grow {
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
}

.wrap {
    flex-wrap: wrap;
}

.img-small {
    height: 32pt;
    width: 32pt;
}

.img-medium {
    height: 48pt;
    width: 48pt;
}

.img-large {
    height: 120pt;
    width: 120pt;
}

.middle {
    justify-content: center;
}

.pad-small {
    padding: 7pt;
}

.pad-medium {
    padding: 12pt;
}

.pad-large {
    padding: 21pt;
}

.row {
    flex-direction: row;
}

.flex-end {
    align-items: flex-end;
}

.scroll {
    overflow-y: auto;
}

.stretch {
    align-items: stretch;
}

.tab {
    display: none;
}

.tab.active {
    display: flex;
}

.tab-controls > label {
    height: 24pt;
    text-align: center;
    vertical-align: middle;
    width: 96pt;
}

.tab-controls > input {
    display: none;
}

.hide {
    display: none;
}

.hide.active {
    display: flex;
}

@media (max-width: 320pt) {
    .hide-s {
        display: none;
    }

    .col-s {
        flex-direction: column;
    }

    .row-s {
        flex-direction: row;
    }
}