/** Use for custom form field only */ 
.mat-form-field-appearance-outline {
    &.ng-dirty {
        .mat-form-field-outline {
            .mat-form-field-outline-start, 
            .mat-form-field-outline-gap, 
            .mat-form-field-outline-end {
                background-color: #fbf5f1;
            }
        }
    }

    &.mat-form-field-disabled{
        .mat-form-field-outline {
            color: #fff;
            border-bottom: 1px dashed #a0a0a0;

            .mat-form-field-outline-start, 
            .mat-form-field-outline-gap, 
            .mat-form-field-outline-end {
                border: 0;
            }
        }

        .mat-form-field-infix{
            &::after{
                color: #303030;
            }

            .mat-input-element{
                &:disabled{
                    color: #303030;
                }
            }
        }
    }

    &.mat-form-field-can-float{
        
        &.mat-form-field-should-float{
            .mat-form-field-label{
                transform: translateY(-1.19375em) scale(0.77) !important;
            }
        }

        .mat-input-server{
            &:focus{
                &+.mat-form-field-label-wrapper{
                    .mat-form-field-label{
                        transform: translateY(-1.19375em) scale(0.77) !important;
                    }
                }
            }
        }
    }

    &.mat_border_left {
        .mat-form-field-wrapper {
            .mat-form-field-flex {
                .mat-form-field-outline {
                    .mat-form-field-outline-start {
                        border-left: 4px solid red !important;
                    }
                }
            }
        }
    }

    &.mat_input_require {
        .mat-form-field-wrapper {
            .mat-form-field-flex {
                .mat-form-field-outline {
                    // border: 4px solid purple !important;
                    .mat-form-field-outline-start {
                        border-left: 4px solid red !important;
                        border-top: 1px solid #f0f2f5 !important;
                        border-bottom: 1px solid #f0f2f5 !important;
                    } 
                    
                    .mat-form-field-outline-end {
                        border-top: 1px solid #f0f2f5 !important;
                        border-bottom: 1px solid #f0f2f5 !important;
                        border-right: 1px solid #f0f2f5 !important;
                    }
                }
            }
        }
    }
    &.mat-focused {
        .mat-form-field-outline-thick {
            color: $primary !important;
        }
    } 

    .mat-form-field-wrapper {
        padding-bottom: 0.5rem !important;

        .mat-form-field-subscript-wrapper{
            position: relative !important;
        }
    }

    .mat-select-arrow-wrapper {
        transform: translateY(-5%) !important;
    } 

    .mat-form-field-prefix, 
    .mat-form-field-suffix {
        top: 0em !important;
    }

    .mat-form-field-infix {
        padding: 0.1em 0 0.3em 0 !important;
        
        span{
            label{
                mat-label{
                    color: #6c757d !important;
                }
            }
        }

        input {
            line-height: 1.8 !important;
        }

        mat-select {
            line-height: 1.75 !important;
        }

        .mat-form-field-label-wrapper {
            top: -1.3em !important;
            padding-top: 0.84375em !important;

            .mat-form-field-label{
                .mat-form-field-required-marker{
                    color: red;
                }
            }
        }
    }  
}
.mat-form-field{
    width: 100%;
}