main {
    display: flex;
    flex-direction: column;
}

.add-recipe-form {
    position: relative;
}

.collapse-toggler {
    border-bottom: 1px solid var(--bs-body-color);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
}


div:has( > h4, > h3) {
    /*background-color:  rgba(43, 48, 53);*/
    background-color: var(--bs-btn-bg);
}
h3, h4 {
    margin: 0;
}

/*h4 {*/
/*    border-bottom: 1px solid var(--bs-body-color);*/
/*}*/

h3:hover, h4:hover {
    cursor: default;
}

.add-recipe-container {
    display: flex;
    flex-direction: column;

    /*margin-bottom: 6rem;*/
}

.add-recipe-left {
    display: flex;
    flex-direction: column;
}

.form-select {
    width: 75px;
    padding: 0 0 0 5px;
    margin: 0;
}

.was-validated .form-select:valid, .was-validated  .form-select:invalid {
    /*--bs-form-select-bg-icon: '' !important;*/
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/*.add-recipe-ingredients-table {*/
/*    width: 100%;*/
/*}*/

.add-recipe-cook-container {
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: 30px 30px 30px 60%;
    height: 100%;
}

.add-recipe-cook-container textarea {
    min-height: 210px;
    height: 210px;
    max-height: 300px;
    /*overflow-y: scroll;*/
}

.add-recipe-submit-container {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: rgb(24, 24, 24);
}

input[type="submit"] {
    height: 3rem;
    width: 10rem;
}

input[type="text"], select {
    padding-left: 0.2rem;
    height: 30px;
}

.add-recipe-browse {
    position: relative;
}

.add-recipe-browse input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}



.add-recipe-browse label {
    width: 100%;
    height: 100%;
    padding-left: 0.2rem;
}

.add-recipe-instuctions-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.step-container {
    display: grid;
    grid-template-columns: 10px auto 42px;

}

.add-recipe-instuctions-textbox {
    min-height: 30px;
    height: 30px;
    max-height: 50px;

    width: 100%;
}

.form-control, .form-select {
    border-radius: 0;
}
.remove-ingredient-btn, .remove-step-btn {
    /*padding: 5px;*/
    padding: 0 12px 0 12px;
}

@media only screen and (min-width: 768px) { /* md breakpoint */
    main {
        justify-content: center;
    }

    .add-recipe-form {
        min-height: 75vh;
    }

    .add-recipe-test {
        background-color: #cb5816;
    }

    .add-recipe-test1 {
        background-color: #b67753;
    }

    .add-recipe-container {
        height: 100%;

        flex-direction: row;
    }

    .add-recipe-left {
        width: 50%;
    }

    .add-recipe-image {
        grid-area: D;
    }

    .add-recipe-image {
        width: 50%;
        border-left: 1px solid var(--bs-body-color);
    }

    div:has( > h4, > h3) {
        background-color:  rgba(0, 0, 0, 0);
    }

    .add-recipe-cook-container textarea {
        min-height: 300px;
        height: 300px;
        max-height: 450px;
    }

}