@import url('OrderDetailsStyle.css');

.ng-dd-select {
    height: 50px;
    width: 100%;
    border-radius: 7px;
    font-size: 16px;
}

.ng-text-input {
    height: 50px;
    width: 100%;
    border-radius: 7px;
    font-size: 16px;
}

.ng-checkbox{

}

.ng-search-btn {
    height: 50px;
    width: 85px;
    border-radius: 7px;
}

.ng-close-btn{

}

.ng-next-step-btn {
    font-size: 16pt;
    border-radius: 7px;
}

.ng-prev-step-btn {
    font-size: 16pt;
    border-radius: 7px;
}
    
    
    .order-main-wrapper, .orderflow-footer {
    max-width: 1800px;
    position: relative;
    margin: auto;
    } 

    .order-main-wrapper {
    min-height: calc(100% - 80px);
    }

.orderContentWrapper {
    margin: auto;
    justify-content: center;
    margin: 25px;
}

.orderContentBody {
    justify-items: center;
}

.contentWidthAdjustment {
    display: grid;
    grid-template-columns: 1fr 9fr 1fr; /* Creates 3 columns with content in the middle */
    grid-template-rows: auto 1fr;
    width: 100%;
}


/* Content wrapper uses middle column to match stepper content */
.orderContentWrapper {
    grid-column: 2 / 3;
    grid-row: 2;
    width: 100%;
    margin: 0;
}

/* For smaller screens, use full width */
@media (max-width: 850px) {
    .contentWidthAdjustment {
        display: flex;
        flex-direction: column;
    }

    .orderContentWrapper {
        grid-column: unset;
        grid-row: unset;
        width: 100%;
        margin: 0;
    }
}