.main-container {
    width: 90%;
    margin: 0 auto;

    display: flex;
    justify-content: space-around;
}

.main-container>div {
    flex: 1;
    margin: 2rem;
}

#control-info {
    display: none;
}

.lineset-container, #control-info {
    margin-top: 1rem;
}

.lineset-title {
    margin-bottom: 0;
}

.line-container {
    margin-top: 1rem;
}

.line-container:first-child {
    margin-top: 0;
}

.situation-container {
    padding: .5rem 1rem;
}

.situation-stages::before {
    content: "Stages: ";
    font-weight: bold;
}

.situation-triggers::before {
    content: "Situations: ";
    font-weight: bold;
}

.situation-targets::before {
    content: "Targets: ";
    font-weight: bold;
}

.situation-triggers {
    margin-left: 1rem;
}

.situation-targets {
    margin-left: 1rem;
}

.diff-container {
    display: grid;
    grid-template-columns: max-content auto;
}

.diff-label {
    font-weight: bold;
    margin-right: 0.25rem;
}

.diff-inserted {
    background-color: lightgreen;
}

.diff-deleted {
    background-color: lightcoral;
}

.mr-deck {
    display: grid;
    column-gap: 1rem;
    row-gap: 1rem;
}

@media (max-width: 768px) {
    .mr-deck {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .mr-deck {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .mr-deck {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .mr-deck {
        grid-template-columns: repeat(4, 1fr);
    }
}

.mr-view-btn {
    margin: auto 1.25rem 1.25rem;
}

.btn-spinner {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 1rem;
}

.mr-labels::before {
    content: "Labels: ";
    font-weight: bold;
}

.mr-target::before {
    content: "Target Branch: ";
    font-weight: bold;
}

.mr-character::before {
    content: "Character: ";
    font-weight: bold;
}