/* 
    Additional styling for the jQuery datepicker.
    ***
    The textbox that the datapicker is based on should be tagged with the jsdatepicker class.
    ***
    If the calendar icon button is required then the javascript should look like the following:
    
    $(selector).datepicker({
        buttonImage: ResolveWebAppUrl('~/Images/calender-icon.png'),
        showOn: 'button',
        ...
    });

    ***
    In order to auto select an accompanying time box after selection of the date, use this:

    $(selector).datepicker({
        onClose: function (selectedDate) {
            $(time-selector).focus();
        }
    });
*/

.jq-date-time-container {
    width: 100%;
    display: flex;
    flex-direction: row;
}

    .jq-date-time-container > .jq-datepicker-input {
        flex-grow: 1;
        flex-shrink: 1;
        margin-right: 0px !important;
        width: 90px;
    }

    .jq-date-time-container > .jq-datepicker-trigger {
        flex-grow: 0;
        flex-shrink: 0;
        width: 23px;
        height: 21px;
        margin-right: 10px;
        position: relative;
        left: -5px;
        border-radius: 2px;
        border-width: 1px;

        background-image: url("../img/glyphicons-halflings.png");
        background-position: -188px -117px;
        background-repeat: no-repeat;
    }

    .jq-date-time-container span.ui-spinner {
        border-color: rgb(118, 118, 118);
    }

    .jq-date-time-container .jq-timespinner-input {
        width: 65px;
        flex-grow: 0;
        color: #222222;
    }