Financial Input Form - Copy this Angular, Css Component to your project

.shapeData { border-radius: 4px; background-color: #ffffff; border: solid 1px #ecf8e0; padding-top: 16px; padding-bottom: 16px; } :host::ng-deep .mat-input-underline { background-color: #e7e6e6 !important; } :host::ng-deep .mat-input-ripple { background-color: #009a44 !important; } :host::ng-deep .mat-input-placeholder { font-size: 16px !important; font-weight: normal !important; font-style: normal !important; font-stretch: normal !important; line-height: 1.5 !important; letter-spacing: 0.5px !important; color: #989898 !important; } .mat-select { display: block !important; margin-bottom: 14px; } :host::ng-deep .mat-select-trigger { display: block !important; height: 10px; } :host::ng-deep .mat-select-value-text { font-family: "Rubik", sans-serif !important; font-size: 16px !important; font-weight: 500 !important; color: #777776 !important; letter-spacing: 0.5px !important; line-height: 24px !important; } :host::ng-deep .mat-option-text { font-family: "Rubik", sans-serif !important; font-size: 16px !important; font-weight: 500 !important; color: #777776 !important; letter-spacing: 0.5px !important; line-height: 24px !important; } :host::ng-deep .ng-clear-wrapper { color: #777776 !important; } :host::ng-deep .ng-input>input { font-family: "Rubik", sans-serif; font-size: 20px; color: #777776 !important; } .direction-container { display: flex; } .direction-content { max-width: 120px; width: 100%; margin: 0px 10px 0px 0px; } .text-label-input { padding: 0px 0px 35px 0px; } .text-not-label-input { padding-bottom: 43px; } .update-direction-button { max-width: 300px; width: 100%; margin: 34px 0px 0px 10px; } .update-direction-button button { border-radius: 5px; } .client-data-wrap { display: flex; flex-flow: row wrap; } .client-data-no-mdm { width: 33.33333%; } .client-data-dependents-mdm { width: 33.33333%; margin-left: 5px; } .client-data-dependents-mdm-text, .client-data-wrap-input { width: 95%; } .ethnicGroups-wrap { display: flex; flex-flow: column wrap; margin-left: 17%; margin-top: 3px; width: 33.333333333%; } .ethnicGroups-wrap-selected { width: 95%; } ::ng-deep .ethnicGroups-wrap-selected .ng-select-container { min-height: 0px; } ::ng-deep .ethnicGroups-wrap-selected .ng-select-container .ng-value-container { padding: 0px; border-top: 0px; } .text-select-message-EthnicGroup { position: absolute; top: calc(100% - 1.66667em); } .occupation-select-wrap { margin-left: 11px; width: 33.33333%; } .occupation-select-wrap-text { width: 95%; } .monthly-income-wrap { width: 33.333333333%; } .monthly-income-input-wrap { display: flex; flex-flow: column wrap; width: 100%; } .monthly-income-input { min-height: 0px; } .expenses-income-wrap { display: flex; flex-flow: row wrap; width: 100%; } .assets-wrap-input { width: 95%; } ::ng-deep .assets-wrap .textIcon, ::ng-deep .client-data-no-mdm .textIcon { left: 94%; } .additional-revenues-wrap { display: flex; margin-left: 17%; width: 33.333333%; flex-flow: column wrap; } ::ng-deep .additional-revenues-wrap .textIcon { left: 94%; } .additional-revenues-wrap-input { width: 95%; } .monthly-expenses-wrap { width: 33.33333%; } .assets-wrap { width: 33.3333%; margin-left: 17%; } .debts-main-wrap { display: flex; width: 34.3333%; } .debts-wrap { width: 100%; margin-left: 15px; } .approved-btn-wrap { align-items: center; display: flex; flex-flow: column wrap; justify-content: center; margin-top: 20px; width: 100%; } @media (max-width: 720px) { .direction-container { display: block; } .direction-content { max-width: 600px; } } @media (max-width: 576px) { .client-data-no-mdm, .client-data-wrap-input, .ethnicGroups-wrap-selected, .monthly-income-wrap, .additional-revenues-wrap, .additional-revenues-wrap-input, .monthly-expenses-wrap, .assets-wrap, .assets-wrap-input, .debts-main-wrap, .client-data-dependents-mdm, .occupation-select-wrap, .occupation-select-wrap-text, .client-data-dependents-mdm-text{ width: 100%; } .assets-wrap .textIcon, .client-data-no-mdm .textIcon, .additional-revenues-wrap .textIcon { left: 99%; } .ethnicGroups-wrap { width: 100%; margin-left: 0%; } .expenses-income-wrap { flex-flow: column wrap; } .additional-revenues-wrap, .assets-wrap, .client-data-dependents-mdm, .occupation-select-wrap { margin-left: 0%; } .debts-main-wrap, .debts-wrap { margin-right: 0px; margin-left: 0px; } }