/*
    So that the controls are placed next to each other.
*/
.minMax {
    display: flex;
}

/* 
    Default text with padding makes the label go to 38px rather than 34px (form control). Reduce the font size.
*/
    .minMax .input-group-text {
        font-size: 0.75rem; 
    }

    /*
        End up with a double border, so remove the one on the textbox so it doesn't look overly thick.
    */
    .minMax .min .riTextBox {
        border-right: none;
    }

    /* 
        On date pickers, as we've taken the border away we need to adjust the absolute positioning so we don't have a white space.
    */
    .minMax .min .rcSelect {
        right: 0;
    }

    /*
        Switch the border radius off so the max button is flush with the min content.
    */
    .minMax .max .input-group-text {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    /*
        Make the inputs use all the available space. Use this rather than inbuilt bootstrap (i.e. flex-grow-1) as when it goes
        down to mobile it starts wrapping onto two lines. According to https://css-tricks.com/snippets/css/a-guide-to-flexbox/, using
        flex with one value intelligently sets all the values (grow, shrinke and basis).
    */
    .minMax .RadInput, 
    .minMax .RadPicker {
        flex: 1;
    }