css/App.css
.recipe-item:hover {
    background-color: #AAA;
    color: white;
}

.recipe-item.selected {
    background-color: #60a363 !important;
    color: white !important;
}

.bg-selected {
    background-color: #60a363 !important;
    color: white !important;
}

.raw-text-selection {
    font-size: 1.1em !important;
}

/* 32px is the height of the image icon */
.raw-text-selection div::after {
    content: '';
    display: block;
    height: 32px;
}

.pro-mode-speedup:hover,
.pro-mode-speedup.bg-selected {
    text-shadow: 0 0 3px #fb7, 0 0 5px #fb7, 0 0 8px #fda, 0 0 10px #fda;
}

.pro-mode-extra-products:hover,
.pro-mode-extra-products.bg-selected {
    text-shadow: 0 0 3px #5cf, 0 0 5px #5cf, 0 0 8px #8df, 0 0 10px #8df;
}

.text-recipe-time {
    color: #444;
}

.recipe-item.selected .text-recipe-time {
    color: #F8F8F8 !important;
}

.border-recipe-item {
    border: 1px dashed #1aa179 !important;
}

.bg-unselected {
    background-color: #AAA !important;
    color: white !important;
}

.bg-unselected:hover {
    background-color: #CCC !important;
}

.bg-transparent:hover {
    background-color: #CCC !important;
}

.w-fit {
    width: fit-content;
}

.mw-fit {
    max-width: fit-content;
}

.h-fit {
    height: fit-content;
}

.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform 0.1s ease-out;
    -moz-transition: -moz-transform 0.1s ease-out;
    -ms-transition: -ms-transform 0.1s ease-out;
    -o-transition: -o-transform 0.1s ease-out;
    transition: transform 0.1s ease-out;
}

.cursor-pointer {
    cursor: pointer;
}

.a-href {
    text-decoration: underline;
    cursor: pointer;
}

.ssmall {
    font-size: 0.8em;
}

.hover-bg-opacity-50:hover {
    --bs-bg-opacity: 0.5;
}

.hover-bg-opacity-50 {
    transition: 0.05s linear all;
}

.fast-tooltip {
    position: relative;
}

.fast-tooltip:hover::after {
    z-index: 10000;
    position: absolute;
    display: block;
    content: attr(data-tooltip);
    top: 120%;
    left: 62%;
    width: max-content;
    background-color: #333;
    color: white;
    padding: .15em .4em;
}

.border-between {
    border-left: solid 1px;
}

.border-between:first-child {
    border-left: none;
}

fieldset,
legend {
    all: revert;
}

.result-table tr td {
    padding-left: 0.75em;
}

.result-table tr td:first-child {
    padding-left: 0;
}

.mineralize-btn {
    margin: 0 0.25em;
    font-size: 0.75em;
    padding: 0.1em 0.4em;
}

/* auto-sized input */
.auto-sized-input {
    display: inline-block;
    position: relative;
    min-width: 1em;
    min-height: 1.4em;
}

.auto-sized-input > span {
    /* max-width : could be wised to set a maximum width and overflow:hidden; */
    white-space: pre;
    padding-left: 5px;
    padding-right: 5px;
    visibility: hidden;
}

.auto-sized-input > input {
    padding: 0;
    margin: 0;
    border: 1px dashed var(--bs-border-color);
    border-radius: 5px;

    text-align: center;
    font-family: inherit;
    font-size: inherit;
    position: absolute;
    vertical-align: top;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
}

.auto-sized-input > input:focus {
    border: 1px solid black;
    outline: 0.5px solid black;
}

.auto-sized-input > input.valid {
    border-color: var(--bs-form-valid-border-color);
    outline-color: var(--bs-form-valid-border-color);
}

.auto-sized-input > input.invalid {
    border-color: var(--bs-form-invalid-border-color);
    outline-color: var(--bs-form-invalid-border-color);
}