.config-field-wrapper {
    width: 100%;
    display: flex;

    .form-item {
        flex: 2;
    }

    .mat-form-field {
        .mat-form-field-subscript-wrapper {
            position: static;
        }
        .mat-form-field-underline {
            display: none;
        }
    }

    /* Full width form fields */
    .mat-form-field {
        width: 100%;
    }

    .datetimepicker-container {
        margin-left: -20px;
        display: flex;

        .mat-form-field {
            flex: 1;
            box-sizing: border-box;
            padding-left: 20px;

            .suffix-wrapper {
                display: flex;
                align-items: center;

                .mat-datepicker-toggle {
                    padding-left: 4px;
                    padding-right: 4px;

                    .mat-datepicker-toggle-default-icon {
                        width: 20px;
                        margin-bottom: 10px;
                    }
                }

                .ngx-material-timepicker-toggle {
                    width: 28px;
                }
            }
        }
    }

    /* limit the color bar of color inputs */
    input[type='color'] {
        max-width: 100px;
    }

    /* Spacing between config entries */
    .config-form-group {
        margin-bottom: 15px;
    }
}
