.DateRangeModal {
    .ReactModal-body {
        height: 600px;
        width: 700px;
    }

    .ReactModal-footer {
        text-align: right;
    }

    .Start-date {
        margin-right: 10px;
    }

    .Date-field {
        display: inline-block;
        .Date-field-label {
            color: var(--gray-400);
            font-size: 12px;
            font-weight: 500;
            margin-bottom: 4px;
            text-transform: uppercase;
        }
    }

    .Cancel-button {
        margin-right: 10px;
    }

    /* stylelint-disable selector-class-pattern */
    .alert.alert-danger {
        background-color: $red-alert-background;
        border: none;
        border-radius: 4px;
        color: $red-alert;

        .invalid-date-range-header {
            color: $red-alert;
            font-weight: 500;
            margin-top: 0;
        }
    }

    .react-date-field {
        display: inline-block;
        width: 325px;
    }

    .date-error {
        .form-control:focus {
            border-color: $red-alert;
            box-shadow: inset 0 1px 1px rgba($black, .07), 0 0 8px rgba($red-alert, .6);
        }
    }
    /* stylelint-enable selector-class-pattern */
}