:root {
    --gp-web-form-color: #3F51B5;
    --gp-form-field-error-color: #f44336;

    /* New colors - Neutral White */
    --gp-neutral-white: #ffffff;
    --gp-neutral-white-25: #FAFAFC;
    --gp-neutral-white-50: #F0F1F5;
    --gp-neutral-white-100: #E2E3EB;
    --gp-neutral-white-150: #D3D5E2;
    --gp-neutral-white-200: #C4C7D8;
    --gp-neutral-white-300: #A7ACC4;
    --gp-neutral-white-400: #8990B1;
    --gp-neutral-white-500: #6C749D;
    --gp-neutral-white-600: #585F80;
    --gp-neutral-white-700: #444963;
    --gp-neutral-white-800: #303446;
    --gp-neutral-white-850: #262938;
    --gp-neutral-white-900: #1C1E29;
    --gp-neutral-white-950: #12141B;
    --gp-neutral-white-1000: #08090C;

    /* Accent-blue */
    --gp-accent-blue-05: #EBEDF8;
    --gp-accent-blue-10: #D8DBF0;
    --gp-accent-blue-20: #B2B9E1;
    --gp-accent-blue-30: #8B96D3;
    --gp-accent-blue-40: #6574C4;
    --gp-accent-blue-50: #3F51B5;
    --gp-accent-blue-60: #324191;
    --gp-accent-blue-70: #26316D;
    --gp-accent-blue-80: #192048;
    --gp-accent-blue-90: #0D1024;

    --mdc-circular-progress-active-indicator-color: var(--gp-web-form-color) !important;

    --mdc-filled-text-field-error-focus-label-text-color: #f44336;
    --mdc-filled-text-field-error-label-text-color: #f44336;
    --mdc-filled-text-field-error-active-indicator-color: #f44336;
    --mdc-filled-text-field-error-focus-active-indicator-color: #f44336;
    --mdc-outlined-text-field-error-focus-label-text-color: #f44336;
    --mdc-outlined-text-field-error-label-text-color: #f44336;
    --mdc-outlined-text-field-error-focus-outline-color: #f44336;
    --mdc-outlined-text-field-error-outline-color: #f44336;
    --mat-form-field-error-text-color: #f44336;
    --mat-form-field-error-trailing-icon-color: #f44336;
    --mat-form-field-error-focus-trailing-icon-color: #f44336;
    --mat-select-invalid-arrow-color: #f44336;

    /* button letter spacing */
    --mdc-outlined-button-label-text-tracking: .006rem;
    --mat-standard-button-toggle-label-text-tracking: .006rem;
    --mdc-outlined-button-label-text-tracking: .006rem;
    --mdc-filled-button-label-text-tracking: .006rem;
    --mdc-protected-button-label-text-tracking: .006rem;
    --mdc-text-button-label-text-tracking: .006rem;
    --mat-form-field-subscript-text-tracking: .006rem;
    --mat-select-trigger-text-tracking: .006rem;

    --mat-form-field-container-text-size: 14px;
    --mat-form-field-subscript-text-size: 10.5px;
    --mat-form-field-container-vertical-padding: 6px;
    --mat-form-field-container-height: 35px;
    --mat-form-field-container-text-line-height: 1.25rem;
    --mat-form-field-outlined-label-text-populated-size: 14px;
    --mat-form-field-container-text-tracking: normal;
    --mdc-outlined-text-field-label-text-tracking: normal;
    --mdc-outlined-text-field-label-text-size: 13px;

    --mat-option-selected-state-label-text-color: #131c2b;
    --mat-option-label-text-color: #1a1b1f;
    --mat-option-hover-state-layer-color: rgba(87, 88, 92, 0.08);
    --mat-option-focus-state-layer-color: rgba(26, 27, 31, .12);
    --mat-option-selected-state-layer-color: #dae2f9;
    --mat-option-label-text-font: inherit !important;
    --mat-option-label-text-line-height: 1.25rem !important;
    --mat-option-label-text-size: 13px;
    --mat-option-label-text-tracking: .006rem !important;
    --mat-option-label-text-weight: 400;
    --mat-select-trigger-text-size: 14px;
    --mat-optgroup-label-text-size: 14px;
    --mat-optgroup-label-text-weight: 500;
    --mat-optgroup-label-text-tracking: normal !important;

    --mat-select-panel-background-color: var(--gp-neutral-white) !important;
    --mat-option-selected-state-layer-color: var(--gp-neutral-white-100) !important;
    
    --mdc-chip-container-height: 22px !important;
    --mdc-chip-label-text-size: 12px !important;
    --mdc-chip-label-text-tracking: 0.006rem !important;
    --mdc-chip-outline-color: transparent !important;
    /* --mdc-chip-disabled-outline-color: transparent !important;
    --mdc-chip-focus-outline-color: transparent !important;
    --mdc-chip-outline-width: 0 !important;
    --mdc-chip-flat-selected-outline-width: 0 !important; */

    --mdc-snackbar-supporting-text-color: #f2f0f4;
    --mdc-snackbar-supporting-text-font: Roboto, sans-serif;
    --mdc-snackbar-supporting-text-line-height: 1.25rem;
    --mdc-snackbar-supporting-text-size: 14px;
    --mat-snack-bar-button-color: var(--gp-web-form-color);
}

a {
    color: var(--gp-web-form-color);
    text-decoration: none;
    cursor: pointer;
}

.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,
.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,
.mat-mdc-standard-chip .mat-mdc-chip-action-label {
    overflow: hidden !important;
}

.ticket-field-label {
    color: gray !important;
    text-align: start;
}

.mat-mdc-form-field {
    margin-bottom: 16px;
}

::ng-deep .mat-mdc-raised-button:not(:disabled) {
    --mdc-protected-button-container-color: var(--gp-web-form-color);
    --mdc-protected-button-label-text-color: white;
    background: var(--mdc-protected-button-container-color) !important;
    color: var(--mdc-protected-button-label-text-color) !important;
}

/* Form Field css ---------------*/

.mdc-text-field__input {
    margin-top: 2px;
}
.mdc-text-field--outlined {
    padding: 0 0.75em !important; 
    align-items: center !important;
}

::ng-deep .mdc-text-field--filled {
    background-color: transparent !important;
    padding: 0px 4px 0px 0px;
}

::ng-deep .mat-mdc-text-field-wrapper {
    background-color: white;
    border-radius: 7.5px;
}

.mat-mdc-form-field-error-wrapper {
    top: -5px !important;
    padding: 0px !important;
}

.mat-mdc-form-field-hint-wrapper {
    padding: 0px !important;
}

.mat-mdc-form-field-subscript-wrapper {
    height: 0px !important;
}

.mat-mdc-option {
    min-height: 0px !important;
}

/* Form Field icon css ---------------*/
:host ::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon {
    padding: 0px;
}

:host ::ng-deep .mat-mdc-form-field-icon-suffix>.mat-icon {
    padding: 0px;
}

/* date field in form */
.mat-mdc-icon-button.mat-mdc-button-base {
    --mdc-icon-button-state-layer-size: 35px !important;
    --mdc-icon-button-icon-size: 21px;
    padding: 7px !important;
}

.mat-mdc-raised-button {
    transition: box-shadow 250ms ease-in-out !important;
    border-radius: 6px !important;
    /* border: 1px solid var(--gp-accent-blue-40) !important;
    background: linear-gradient(180deg, var(--gp-accent-blue-50) 0%, var(--gp-accent-blue-60) 100%) !important; */
    border: 1px solid var(--gp-web-form-color-700) !important;
    background: linear-gradient(180deg, var(--gp-web-form-color) 0%, var(--gp-web-form-color-700) 100%) !important;
    box-shadow: 0px 1px 4px 0px rgba(48, 52, 70, 0.16) !important;
    color: var(--gp-neutral-white-50) !important;
    height: 32px !important;

    /* for spinner color in button */
    --mdc-circular-progress-active-indicator-color: white !important;

    &:hover {
        /* border: 1px solid var(--gp-accent-blue-70) !important; */
        /* background: var(--gp-accent-blue-60) !important; */
        border: 1px solid var(--gp-web-form-color-900) !important;
        background: var(--gp-web-form-color-600) !important; 
        box-shadow: none !important;
    }
    &:active {
        /* border: 1px solid var(--gp-accent-blue-90) !important;
        background: var(--gp-accent-blue-60) !important; */
        border: 1px solid var(--gp-web-form-color-900) !important;
        background: var(--gp-web-form-color-800) !important;
        box-shadow: none !important;
    }

    &[disabled] {
        opacity: 0.5;
    }

    .mat-mdc-button-touch-target {
        height: 0px;
        width: 0px;
    }
}

/* date field in form */
.mat-mdc-icon-button.mat-mdc-button-base {
    --mdc-icon-button-state-layer-size: 35px !important;
    --mdc-icon-button-icon-size: 21px;
    padding: 7px !important;
}

/* Change the border color */
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: lightgray !important;
}

/* Change the border focused color */
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: var(--gp-primary-color) !important;
}

/* Change the border hover color */
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
    border-color: black !important;
}

/* Change the border invalid color */
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mdc-notched-outline__trailing {
    border-color: #f44336 !important;
}

.mat-mdc-form-field .mdc-notched-outline__notch {
    border-left: none !important
}


/* select-panel css */
div.mat-mdc-select-panel {
    padding: 0px !important;
    background-color: var(--gp-neutral-white) !important;
}

.mat-mdc-option {
    height: 30px !important;
}

.gp-mat-chip {
    border-radius: 10px !important;
    background-color: #E6E8F2 !important;
    min-height: 24px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    border: none !important;
}

.mat-mdc-snack-bar-container {
    --mdc-snackbar-container-color: white;
    --mdc-snackbar-supporting-text-color: #2f3033;
    color: var(--mdc-snackbar-supporting-text-color);
    background-color: var(--mdc-snackbar-container-color);
    border-top: 4px solid var(--gp-web-form-color) !important;
    letter-spacing: .006rem !important;
}

::ng-deep .mat-mdc-tooltip-panel .mdc-tooltip__surface,
::ng-deep .mdc-tooltip__surface,
::ng-deep div[class*="mat-mdc-tooltip-panel"] .mdc-tooltip__surface {
    font-size: 13px;
    background-color: var(--gp-web-form-color);
    border: none !important;
    border-radius: 4px;
}

.gp-cn-center-center {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.gp-cn-stretch-center {
    display: flex;
    flex-flow: column nowrap;
    justify-content: stretch;
    align-items: center;
    box-sizing: border-box;
}

.gp-rn-flex-start-center {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
}

.gp-rn-center-center {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.gp-cn-flex-start-center {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
}

.gp-cn-space-between-stretch {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: stretch;
    box-sizing: border-box;
}

.gp-cn-flex-start-flex-start {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
}

.gp-rn-flex-start-flex-start {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
}