--bs-body-font-family {
    font-family: 'Noto Sans', sans-serif!important;
}

html, body {
    height: 100%;
}

body {
    padding-top: 56px;
}

/* General */
.container-960 {
    max-width: 960px;
    /* margin: 0 auto; */
}

.container-720 {
    max-width: 720px;
    margin: 0 auto;
}

.full-height-minus-navbar {
    height: calc(100vh - 56px);
}

.full-width {
    width: 100%;
}

a.no-underline {
    text-decoration: none;
}

.bi-button {
    vertical-align: -0.125em
}

/* Navbar */

@media screen and (max-width: 769px) {
    .collapse-item-mobile {
        display: block;
        max-width: 200px;
        margin-left: auto;
        margin-right: auto!important;;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 993px) {
    .collapse-item-mobile {
        display: block;
        max-width: 200px;
        margin-left: auto;
        margin-right: auto!important;;
        margin-bottom: 10px;
    }
}

#navbarUserMenu::after {
    content: none;
}

/* Generate Form */

.language-select-row {
    margin-bottom: 2rem;
}

.generate-form,
#storyFinderForm
{
    text-align: center;
}

.generate-form .generate-form-step,
#storyFinderForm
{
    max-width: 700px;
    margin-bottom: 2rem;
}

.generate-form .first-step label,
#storyFinderForm label {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.generate-form .first-step select,
#storyFinderLanguageSelect select {
    max-width: 200px;
    display: inline-block;
    font-size: 1.1rem;
}

.generate-form .btn {
    margin-left: 0.5rem;
    margin-bottom: 0.5rem;
}

.generate-form .tag {
    border: 1px solid;
}

.generate-form .tag.selected {
    /* border: 1px solid black; */
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-tertiary-color);
}

/* Settings Step */

.generate-form-toggle {
    height: 1.75rem;
}

.generate-form-toggle input{
    height: 1.75rem;
    width: 3rem !important;
    margin-top: 0px;
    float: unset !important;
    margin-right: 0.75rem;
}

.generate-form-toggle label {
    /* vertical-align: text-top; */
    height: 1.75rem;
    font-size: 1.2rem;
}

.simple-icon-button {
    background-color: rgba(255, 255, 255, 1);
    border: 0px;
    padding: 0px;
    width: 30px;
    height: 30px;
    cursor: pointer
}

/* Generate Step */

.generate-step .credits-container {
    margin-bottom: 0.5rem;
}


/* Home Story Finder */

/* Favorite Menu */

.favorite-menu button, #thumb-up-down-menu button {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.favorite-menu .unfavorite-button {
    display: none;
}

.favorite-menu.favorited .unfavorite-button {
    display: inline-block;
}

.favorite-menu.favorited .favorite-button {
    display: none;
}

/* Thumbs Up/Down menu */

#thumb-up-down-menu .thumb-down-button .thumbs-down-full {
    display: none;
}

#thumb-up-down-menu .thumb-up-button .thumbs-up-full {
    display: none;
}

#thumb-up-down-menu .thumb-down-button.thumbed-down  .thumbs-down-full {
    display: unset;
}

#thumb-up-down-menu .thumb-down-button.thumbed-down  .thumbs-down-empty {
    display: none;
}

#thumb-up-down-menu .thumb-up-button.thumbed-up .thumbs-up-full {
    display: unset;
}

#thumb-up-down-menu .thumb-up-button.thumbed-up .thumbs-up-empty {
    display: none;
}

/* List */
.story-list {
    font-size: 1.1rem;
}

.story-list .favorite-menu, .story-list .trash-menu {
    /* margin-top: 1rem; */
    display: inline-block
}

.story-list-item {
    padding-left: 0px;
    padding-right: 0px;
}

.story-list-item-menu .simple-icon-button {
    width: 24px;
    margin-left: 0.5rem;
}



.flash {
    animation: flash 0.5s;

}

@keyframes flash {
    0% {
        box-shadow: 0 0 0 0 rgba(13,110,253,.25);
    }
    50% {
        box-shadow: 0 0 0 0.3rem rgba(13,110,253,.25);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(13,110,253,.25);
    }
}

@keyframes flashs {
    0% {
        box-shadow: 0 0 0 0 rgba(13,110,253,.25);
    }
    25% {
        box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
    }
    50% {
        box-shadow: 0 0 0 0 rgba(13,110,253,.25);
    }
    75% {
        box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(13,110,253,.25);
    }
}