.mode-area {
    margin: 2% 17%;

    display: grid;
    justify-content: center;
}

.main-container {
    margin: 2% 5%;

    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.alert-notification {
    margin: 0.5% 5%;
    display: flex;
}

.alert-notification .alert-contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.alert-notification .close-button {
    margin-left: auto;
    font-size: 150%;
    padding: 0 .375em;
}

.image-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.preview-img {
	width: 200px;
}

/* Main writing UI */

.main-col {
    margin: 0 2vw;
    flex: 1;
}

.main-col > .compartment {
    margin: 1vh 0;
}

.character-area {
    display: flex;
    align-items: center;
}

.character-label {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0.5rem;
    font-size: 1.5rem;
}


.wide-textarea {
    width: 100%;
}

.btn-group-toggle label.btn::after {
    content: "Disabled";
}

.btn-group-toggle label.btn.active::after {
    content: "Enabled";
}

.btn-group-toggle .stage-input {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-group-toggle .stage-input-fadedgreen {
    background-color: #1e7e34;
    border-color: #1e7e34;
	opacity: 0.65;
}

.btn-group-toggle .stage-all-input {
    background-color: #007bff;
    border-color: #007bff;
}

/* incredibly stupid - vis, fix this */

.btn-group-simple .mode-input {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-group-simple .mode-input-fadedgreen {
    background-color: #1e7e34;
    border-color: #1e7e34;
	opacity: 0.65;
}

.btn-group-simple label.btn::after {
    content: "Simple";
}

.btn-group-simple > .btn,
.btn-group-simple > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-simple > .btn input[type="radio"],
.btn-group-simple > .btn input[type="checkbox"],
.btn-group-simple > .btn-group > .btn input[type="radio"],
.btn-group-simple > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.btn-group-advanced .mode-input {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-group-advanced .mode-input-fadedgreen {
    background-color: #1e7e34;
    border-color: #1e7e34;
	opacity: 0.65;
}

.btn-group-advanced label.btn::after {
    content: "Advanced";
}

.btn-group-advanced > .btn,
.btn-group-advanced > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-advanced > .btn input[type="radio"],
.btn-group-advanced > .btn input[type="checkbox"],
.btn-group-advanced > .btn-group > .btn input[type="radio"],
.btn-group-advanced > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.btn-group-expert .mode-input {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-group-expert .mode-input-fadedgreen {
    background-color: #1e7e34;
    border-color: #1e7e34;
	opacity: 0.65;
}

.btn-group-expert label.btn::after {
    content: "Expert";
}

.btn-group-expert > .btn,
.btn-group-expert > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-expert > .btn input[type="radio"],
.btn-group-expert > .btn input[type="checkbox"],
.btn-group-expert > .btn-group > .btn input[type="radio"],
.btn-group-expert > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.btn-group-stage-simple .mode-input {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-group-stage-simple label.btn::after {
    content: "Simple";
}

.btn-group-stage-simple > .btn,
.btn-group-stage-simple > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-stage-simple > .btn input[type="radio"],
.btn-group-stage-simple > .btn input[type="checkbox"],
.btn-group-stage-simple > .btn-group > .btn input[type="radio"],
.btn-group-stage-simple > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.btn-group-stage-precise .mode-input {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-group-stage-precise label.btn::after {
    content: "Precise";
}

.btn-group-stage-precise > .btn,
.btn-group-stage-precise > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-stage-precise > .btn input[type="radio"],
.btn-group-stage-precise > .btn input[type="checkbox"],
.btn-group-stage-precise > .btn-group > .btn input[type="radio"],
.btn-group-stage-precise > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

/* end stupid */

.stages-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
}

.full-stages-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: right;
}

.mode-container {
    display: flex;
    flex-direction: row;
    text-align: center;
}

.targeting-options {
    display: flex;
    flex-direction: row;
}

.options-container {
    display: flex;
    flex-direction: column;
}

.dialogue-option {
    display: flex;
    margin: 0.25rem 0;
    justify-content: center;
}

.option-label {
    font-size: large;
    flex: 1;
}

.desc-label {
    font-size: small;
	font-style: italic;
}

.rnd-label {
    font-size: large;
    flex: 1;
}

.option-input {
    flex: 2;
}

.row-compartment {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.session-container {
    margin-left: auto;
}

.login-label {
    margin-right: 1.5rem;
}

.login-value {
    font-weight: bold;
}

.logout-icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* Submission listing area */

.submission-listing {
    margin: 2% 3%;
    margin-top: 0.5%;
}

.listing-area {
    display: grid;
    grid-column-gap: 1rem;
    column-gap: 1rem;
}

/* Adjust the number of columns per grid row, depending on screen width.
 * These breakpoints are based on the Bootstrap breakpoints, but tweaked
 * slightly (mostly just to make ranges for "medium" and "large" screens
 * a bit larger).
 */

/* Small and extra small widths */
@media (max-width: 768px) {
    .listing-area {
        grid-template-columns: 1fr;
    }
}

/* Medium width */
@media (min-width: 768px) and (max-width: 1050px) {
    .listing-area {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large width */
@media (min-width: 1050px) and (max-width: 1450px) {
    .listing-area {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Extra large width */
@media (min-width: 1450px) {
    .listing-area {
        grid-template-columns: repeat(4, 1fr);
    }
}

.load-next-container {
    text-align: center;
}

.submission-listing .options-area {
    display: flex;
    justify-content: center;
}

.closed-notification {
	text-align: center;
}