.scansion-character.selected-char {
    /* outline: 1px solid black; */
    background-color: black;
    color: white;
}

td {
    padding-inline: 10px;
    pre {
        margin: 0px;
    }
}
#typebox {
    margin: 0px;
    padding: 0px;
}

.scansion-character {
    /* border: 1px solid transparent; */
    padding: 0.5em 0px;
}

.scansion-character-container:hover .scansion-character {
    outline: 1px solid black
}
.scansion-character-container {
    padding: 0.5em 0px;
}
.word {
    /*margin: 0.5em;*/
    display: inline;
    align-content: center
}

.scansion-line {
    display: flex;
    padding: 0;
    margin: 0;
    align-content: center;
}
.word .scansion-character-container {
    &:last-child {
    padding-inline-end: 0.5em;
    }
    &:first-child {
        padding-inline-start: 0.5em;
    }
}
.scansion-line .word:last-child {
    flex-grow: 1;
    display: flex;

    .scansion-character-container:last-child {
        flex-grow: 1;
        padding-inline-end: 0;
    }
}


.meter-decoration {
    margin-inline: 0em;
    display: inline
}
.elision-start::before {
    content: "(";
}
.elision-end::after {
    content: ")"
}
#notation-area {
    &:focus {
        outline: 2px solid red;
    }
    outline: 1px solid black;
    padding: 2em 0px;
}
#text-input {
    width: 100%;
    box-sizing: border-box;
    height: 4em
}
#load-button {
    width: 3em;
    height: 3em;
    
}
.load-button-container {
   display: flex;
   justify-content: center;
}
/* 
span:last-child.foot-break {
    margin-inline-start: 0.5em
} */