.mix {
    width: 600px;
}

p {
    display: inline;
}

.mixContainer {
    display: flex;
    padding: 20px 0;
    border-style: solid;
    border-width: 1px 0;
    border-color: #555555;
}

.mixContainer:first-child {
    border-top-color: white;
}

.mixContainer:last-child {
    border-bottom-color: white;
}

.mixContainer .mixInfo {
    width: 130px;
    text-align: left;
}

.mixContainer .mix {
    max-width: 600px;
}

.mixContainer .mixActionsContainer {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
}

.mix td, .mix th {
    padding: 0 5px;
}

.notEnough td {
    background-color: #ffb3b3;
}

.quantityColumn, .mix input {
    width: 50px;
}

.totalQuantityLabel {
    padding-right: 10px;
    text-align: right;
    vertical-align: middle;
}

.inventoryQuantity {
    display: none;
}

.inventoryQuantityColumn {
    min-width: auto !important;
    width: auto !important;
}

.unitsColumn {
    width: 25px !important;
    min-width: 0 !important;
    max-width: 25px !important;
}

.calculationColumn {
    max-width: 125px !important;
    min-width: 100px;
}

.calculation {
    color: dimgrey;
}

.calculation span {
    color: darkgreen;
}

.materialCodeColumn {
    min-width: 100px;
}

.recipeLocation {
    width: 55px;
}

.recipeDescription {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.recipeDescription div {
    border-color: #555555;
    border-width: 1px 0;
    border-style: solid;
    padding: 10px 0;
}

.recipeDescription div:first-child {
    border-top-color: white;
}

.recipeDescription div:nth-last-child(2) {
    border-bottom-color: white;
}

.recipeDescription div b {
    float: left;
}

.recipeDescription div :not(b) {
    float: right;
    margin: 0 0 0 20px;
    max-width: 350px;
}

.steps {
    text-align: left;
}

.steps li {
    padding: 5px;
}

.steps li:nth-child(even) {
    background-color: #f5f5f5;
    margin: 0;
}

.steps li:nth-child(odd) {
    background-color: #fafafa;
}

.imagesContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.imagesContainer img {
    margin: 10px;
    border: 1px solid #7a7a7a;
    transition: all 0.5s;
}

.imagesContainer .recipeImage:hover {
    width: 420px;
}

.imagesContainer.hovering .recipeImage:not(:hover) {
    opacity: 0.5;
}

@media only screen and (max-width: 1900px) {
    .imagesContainer {
        width: 50%;
    }
}
