/* Base styles */
body {
    margin: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    border-bottom: 1px solid #ccc;
}

.title {
    font-size: 2em;
    font-weight: bold;
    padding: 20px 0;
}

.buildStyle,
.buildTitle {
    font-size: 150%;
}

.buildTitle {
    margin: 0 0 5px;
    font-weight: bold;
}

/* Flex layouts */
.flex,
.containWrap,
.occFlex,
.flexPatternBox {
    display: flex;
}

.occFlex {
    align-items: center;
}

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

.flexTextBox {
    flex-grow: 0;
}

/* Occurrence styles */
.occStyle,
#occ {
    margin: 10px 0;
}

.occStyle {
    font-weight: normal;
    font-size: 100%;
}

.occTitle {
    margin: 10px 0;
    display: flex;
    align-items: center;
}

/* Container styles */
.containWrap {
    padding: 10px 0 0 0;
}

.currentContainer {
    align-items: flex-end;
    flex-grow: 1;
    overflow-x: scroll;
}

.currentDisplay {
    margin: 0;
    white-space: nowrap;
    overflow: scroll;
}

/* Display text styles */
.displayText,
.displayTextIndex {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}

.charBlock {
    border: 1px solid #000;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    flex-shrink: 0;
}

.indexBlock {
    border: 1px solid white;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    flex-shrink: 0;
}

/* Sidebar styles */
#sidebar {
    min-width: 258px;
}

.sidbarConstruction {
    width: 200px;
}

/* Element positioning */
.staticElement {
    position: static;
    padding: 0;
}

.fixElement {
    position: fixed;
    top: 0;
    padding: 20px 0 0 0;
}

/* Canvas styles */
.staticCanvas {
    margin: 0;
}

.fixCanvas {
    margin: 0 0 0 258px;
}

.canvasScroll {
    overflow: scroll;
    white-space: nowrap;
}

/* Button styles */
button {
    height: 30px;
}

.suffixLinkButton {
    margin: 5px 10px 0 0;
}

/*# sourceMappingURL=main.css.map*/