:root {
    --gp-primary-color: #3F51B5;
    --gp-primary-color-400: #737EBA;
    --gp-primary-color-300: #8D95C7;
    --gp-primary-color-200:  #B3B9D9;
    --gp-primary-color-100: #CCD0E6;
    --gp-primary-color-50: #E6E8F2;
    --gp-primary-color-25: #F2F3F9;

    --gp-primary-color-600: #3949AB;
    --gp-primary-color-700: #303F9F;
    --gp-primary-color-800: #283593;
    --gp-primary-color-900: #1A237E;
    --gp-primary-color-A100: #A7B4F0;
    --gp-primary-color-A200: #6F88EE;
    --gp-primary-color-A400: #506CE8;
    --gp-primary-color-A700: #2A46B2;

    --gp-accent-color-250: #dcd39d;
    --gp-accent-color-50: #f7f5eb;
    --gp-dark-grey-color: #616161;
    --gp-form-field-error-color: #f44336;
    --gp-accent-indico-pink-color-50: #ffb5cc;
}

html, body { height: 100%; }

body {
    margin: 0;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    background-color:  var(--gp-primary-color-25);
}

a {
    color: var(--gp-primary-color);
    text-decoration: none;
    cursor: pointer;
}
a:hover {
    color: #1a1f36;
}

.handsetFooter {
    background: var(--gp-primary-color-25) !important;
    border-top: 1px var(--gp-primary-color-100) solid !important;
    height: 30px;
}

.footer {
    background: var(--gp-primary-color-25) !important;
    border-top: 1px var(--gp-primary-color-100) solid !important;
    height: 40px;
}

.footer a:hover{
    text-decoration: none;
}

.plain-footer{
    background: var(--gp-primary-color-25) !important;
    height: 20px;
}

.page-sub-header-wrap {
    background-color: var(--gp-primary-color-25) !important;
    height: 50px;
    position: relative;
}

.page-header-wrap {
    background-color: #ffffff;
    height: 50px;
    position: relative;
    border-bottom: 1px solid #ededf1;
}

.page-header-wrap.is_sticky {
    position: fixed;
    top: 0;
    right: 0;
    left: 50px;
    border-bottom: 1px solid #ededf1;
    margin: 0
}

.page-header-font {
    letter-spacing: normal;
    font-size: 20px;
    font-weight: 500;
}

.page-header-wrap.is_sticky.has-no_border {
    border: 0
}

.page-header-wrap.is_sticky.has-no_bg {
    background-color: transparent
}

.page-header-wrap.is_sticky {
    z-index: 90
}

.gp-white-card{
    background-color: white;
}

.gp-avatar-large-font{
    display: inline-block;
    color: white;
    font-size: 25px;
    text-transform: uppercase;
    margin-top: 8px;
}

.gp-button-row button,
.gp-button-row a,
.gp-button-row input,
.gp-button-row .mat-mdc-checkbox,
.gp-button-row .mat-mdc-form-field {
  margin-right: 15px;
}

.gp-contract-checkbox .mat-mdc-checkbox {
    margin-right: 240px;
    color: grey;
}

.gp-txt-grey {
    color: rgba(0,0,0,.54);
}

.gp-dark-grey {
    color: var(--gp-dark-grey-color);
}

.gp-head-button-row {
    border-radius: 0 !important;
    background: var(--gp-primary-color-25) !important;
    /* border-bottom: 1px var(--gp-primary-color-100) solid !important; */
    height: 56px;
    padding-left: 20px;
    padding-right: 20px;
}

.gp-head-button-row .mat-mdc-paginator,
.gp-head-button-row .mat-mdc-card {
    background: var(--gp-primary-color-25) !important;
}

.gp-no-border-radius {
    border-radius: 0 !important;
}

.gp-mat-card {
    margin-top: 10px;
    margin-bottom: 10px;
}

.gp-sidebar-title {
    /* color: #183247; */
    color: rgba(0,0,0,.54);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .2px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-top: 25px;
}

.gp-tkt-side-menu{
    font-size: 14px !important;
    padding-left: 15px !important;
    box-sizing: border-box;
}

.error-box {
    background-color: rgb(243, 150, 150);
    border: 1px solid rgb(247, 4, 4);
    border-radius: 4px;
    padding: 20px;
    margin: 20px;
}

.gp-tkt-side-divider{
    margin-bottom: 10px !important;
    margin-top: 10px !important;
    margin-left: 5px !important;
    width: 170px !important;
}


.gp-tkt-details-main {
    background-color: var(--gp-primary-color-50);
}

.gp-tktlist-card {
    padding: 0px !important;
    margin: 0px 10px 10px 10px !important;
}

.gp-main-card-bkgrnd{
    background-color: var(--gp-primary-color-25) !important;
}

.gp-main-card {
    background-color: white !important;
}

.gp-table-header {
    background-color: #f5f7f9 !important;
}

.gp-table-row {
    color: #454560;
}

.gp-table-row:hover {
    background-color: #f5f7f9;
}

.gp-fin-table-row {
    color: #454560;
}

.gp-fin-table-row:hover .mat-mdc-cell {
    color: var(--gp-primary-color);
    cursor: pointer;
    background-color: var(--gp-primary-color-25);
}

.gp-fin-table-row:hover a {
    text-decoration: underline;
}

.gp-trial-expiry {
    font: 400 16px/28px Roboto, "Helvetica Neue", sans-serif;
}
/* .gp-table-row a{
    color: #454560;
    text-decoration: none;
  }

.gp-table-row a:hover{
    color: #1976d2;
  }  */


.gp-pointer {
    cursor: pointer;
}

.gp-rhs-custom-view {
    background:  #f5f7f9 !important;
    /* border-left: 1px solid #cfd7df; */
    border-bottom: 1px solid #cfd7df;
    border-radius: 0 !important;
    padding: 16px;
}

.gp-filter-items {
    padding: 5px 15px 5px 15px;
    background: white !important;
    border: 1px solid #edf1f7;
}

.gp-filters-card {
    background:  #f5f7f9 !important;
    border-left: 1px solid #cfd7df;
}

.gp-filter-container{
    background:  #f5f7f9 !important;
    /* border-left: 1px solid #cfd7df; */
    margin-bottom: 16px !important;
}

.gp-filters-title {
    color: rgba(0,0,0,.54);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .2px;
    padding: 16px;
    /* border-left: 1px solid #cfd7df; */
}

.gp-cviews-title {
    color: rgba(0,0,0,.54);
    font-size: 14px;
    letter-spacing: .2px;
}

.gp-cviews-hint {
    color: rgba(0,0,0,.54);
    font-size: 10px;
}

.gp-cveiws-lh {
    line-height: 1.2;
}

.close-button{
  float: right;
  top:auto;
  right:auto;
}

.error-box {
    background-color: rgb(243, 150, 150);
    border: 1px solid rgb(247, 4, 4);
    border-radius: 4px;
    padding: 20px;
    margin: 20px;
}

.profile-item{
    font: 400 16px/28px Roboto, "Helvetica Neue", sans-serif;
}
.profile-header{
   font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
}
.gp-left-panel {
    border-right: 1px solid #ededf1;
    background:  white !important;
    width: 200px;
}

.gp-left-panel .mat-mdc-list-item:hover {
    font-size: 16px !important;
    box-sizing: border-box;
    color: var(--gp-primary-color) !important;
}

.gp-left-panel .mat-mdc-list-item:hover .mat-icon {
    color: var(--gp-primary-color) !important;
}


.gp-filters-card .mat-mdc-card {
    background:  #f5f7f9 !important;
}


.gp-mat-divider{
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.contact-and-cc-link {
    color: var(--gp-primary-color);
    text-align: right;
    cursor: pointer;
}


.ql-container {
    height: 75% !important;
}

.gp-table{
    max-width: 940px;
    margin-left: 100px;
}

.gp-page-title{
    margin-left: 20px;
}

.gp-dialog-title{
    border-bottom: 1px solid #cfd7df;
    background:  #f5f7f9;
    padding: 10px;
    margin-bottom: 15px;
}

.gp-contract-table-row-input{
    border-bottom: 1px solid #cfd7df !important;
    width: 75px !important;
}

.gp-dialog-actions {
    margin-top: 30px;
}

.gp-dialog-input {
    width: 400px;
}

.gp-left-tile {
    position: absolute;
    left: 5px;
}

.gp-spacer {
    flex: 1 1 auto;
}

.gp-icon-btn {
    padding: 3px;
    cursor: pointer;
    color: var(--gp-primary-color);
}

.gp-icon-btn:hover {
    background-color: var(--gp-primary-color-50);
}

.page-title {
    margin: 15px 0;
}

.gp-right-tile {
    position: absolute;
    right: 5px;
}

/* .mat-mdc-tooltip.gp-tooltip {
	font-size: 13px;
    background-color: var(--gp-primary-color);
    border: 1px solid;
    border-radius: 5px;
}

.mat-mdc-tooltip.gp-tooltip-sidenav {
    font-size: 16px;
    background-color: var(--gp-primary-color);
    border: 1px solid;
    border-radius: 5px;
} */

.mat-mdc-tooltip.gp-tooltip {
    border: none;
}

.gp-main-nav-icon{
    color: #f5f7f9;
    opacity: 0.75;
}

.gp-nav-icon {
    margin-top: -10px;
    margin-left: 50px;
    vertical-align: middle;
}

.sidenav-container {
    height: 100%;
}

.sidenav {
width: 55px;
background-color: #455a64 !important;
}

.sidenav .mat-mdc-list-item {
    padding-left: 8px !important;
}

.sidenav .mat-mdc-list-item:hover {
    background-color: var(--gp-primary-color) !important;
}

.sidenav .mat-mdc-list-item:hover .mat-icon {
    color: #f5f7f9 !important;
    opacity: 1;
}


.mat-nav-list a.active {
    background: blue;
}

.gp-highlight {
    background-color: rgba(205, 205, 205, 0.45);
    font-size: 16px !important;
    color: var(--gp-primary-color) !important;
}

.sidenav .mat-toolbar {
    background: inherit;
}

.sidenav  .mat-drawer-inner-container {
    overflow-x: hidden !important;
}



.mat-toolbar.mat-primary {
    position: sticky;
    top: 0;
    z-index: 1;
  }


.mat-toolbar-row, .mat-toolbar-single-row {
    padding: 8px !important;
}

hr {
    width: 100%;
    border:1px solid lightgray;
}

/* Height styles */

.gp_full_height {
    min-height: calc(100vh - 75px);
}

/* Typgraphy styles and Colors */

.gp-primary-color {
    color: --gp-primary-color !important;
}

.gp-lightgray-icon {
    color: lightgray;
}
/* Note: If you're using an SVG icon, you should make the class target the `<svg>` element */
.gp-lightgray-icon svg {
    fill: lightgray;
}

.gp-light-primary-icon {
    color: #B0BEC5;
}

.gp-white-icon {
    color: white;
}

.gp-gray-color {
    color: rgba(0,0,0,.54);
}

.gp-help-heading {
    font-weight: 700;
    font-size: 20px;
    color: rgba(0,0,0,.54);
    margin-bottom: 16px;
}

.gp-help-subheading {
    font-weight: 700;
    color: rgba(0,0,0,.54);
    margin-top:20px;
    margin-bottom: 5px;
}

.gp-help-text {
    line-height: 1.6em;
    font-size: 14px;
}

.gp-ticket-state {
    display: inline;
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
    background-color: #e5f2fd;
    color: var(--gp-primary-color);
    border: 1px solid #bbdcfe;
    text-align: center;
}

.gp-state-new {
    color: var(--gp-primary-color);
}

.gp-state-overdue {
    background-color: #f8cecc;
    color: #D32F2F;
    border: 1px solid #d68e8e;
}

.gp-state-cust {
    color: turquoise;
}

.gp-state-noSLA {
    color: green;
}

.gp-dashboard-card {
    background-color: var(--gp-primary-color-50) !important;
    padding: 25px !important;
}

.gp-avatar-navbar-font{
    display: inline-block;
    color: white;
    font-size: 25px;
    text-transform: uppercase;
    margin-top: 8px;
}

.gp-avatar-agent-navbar{
    background-color: var(--gp-primary-color);
    text-align: center;
    border-radius: 4px;
    height: 35px;
    width: 35px;
}

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

.gp-source-type-color{
    /* color: #607D8B; */
    color: var(--gp-primary-color-100);
}

.gp-tkt-dtls-src-type{
    margin-top:5px;
    color: var(--gp-primary-color-100);
}


.gp-signup-card {
    background-color:#ffffff;
    border-radius: 8px;
    border: 1px solid var(--gp-primary-color-400);
    width: 410px;
}

::ng-deep .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-primary-color) !important;
}

::ng-deep .mat-mdc-snack-bar-action {
    color: var(--gp-primary-color-400) !important;
}

.gp-subtitle-right, .gp-subtitle-right-kb {
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 80px solid var(--gp-primary-color-50);
}

@media (max-width: 767px) {
    .gp-subtitle-right-kb {
        border-left: 50px solid var(--gp-primary-color-50);
    }
}

.gp-subtitle {
    background-color: var(--gp-primary-color-50);
    height: 40px;
    padding-left: 10px;
}

.gp-subtitle-text {
    padding-top: 4px;
}

.gp-subtitle-text-150 {
	padding-top: 10px;
    padding-left: 10px;
}

.gp-show-pwd {
    color: gray;
    cursor: pointer;
}

.gp-show-pwd:hover {
    color: var(--gp-primary-color);
}

::ng-deep .ql-editor p {
    margin: 0px;
}

.sp-max-width {
    max-width: 1200px !important;
    width: 100%;
}

.gp-msteams-logo {
    opacity: 0.33;
}

.gp-mat-chip {
    border-radius: 10px !important;
    background-color:var(--gp-primary-color-50) !important;
    min-height: 24px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

.gp-btn-icon{
    font-size: 16px !important;
    margin-top: 7px;
    margin-left: -5px;
}

.txt-overflow-ellipsis {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.gp-ePHI-label {
    display: inline;
    border-radius: 4px;
    padding: 0px 6px;
    font-size: 11px;
    margin-right: 5px;
    font-weight: 500;
    background-color: var(--gp-primary-color-50);
    color: var(--gp-primary-color);
    border: 1px solid var(--gp-primary-color-250);
    text-align: center;
}

.gp-custom-dialog-container .mat-mdc-dialog-container {
    padding: 0px;
}

.dialog-heading-underline{
    border-bottom: 1px solid var(--gp-primary-color-50);
}

/* .gp-search-icon {
	font-size: 18px;
    height: 18px;
    width: 18px;
    position: relative;
    top: 2px;
    left: 9px;
    padding: 6px;
	cursor: pointer;
	color: var(--gp-primary-color-400);
}

.gp-search-input-field:hover .gp-search-icon {
    background: rgba(0,0,0,.04);
    border-radius: 2px;
    color: var(--gp-primary-color);
} */

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

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

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

.gp-cn-flex-start-flex-start {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start; /* justify-content - for mainAxis alignment  */
    align-items: flex-start;     /* align-items     - for crossAxis alignment */
    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-center-flex-start {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
}

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

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

.gp-rw-space-between-center {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

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

.gp-cn-space-between-flex-start {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-start;
    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-space-between-center {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

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

.gp-cn-flex-end-flex-end {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: flex-end;
    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;
}

.gp-rn-flex-start-flex-end {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-end;
    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-flex-start-stretch {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    box-sizing: border-box;
}

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

.gp-rn-flex-start-baseline {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: baseline;
    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-rn-center-flex-start {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
}

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

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

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

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

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

.gp-cw-stretch-stretch {
    display: flex;
    flex-flow: column wrap;
    justify-content: stretch;
    align-items: stretch;
    box-sizing: border-box;
}

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

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

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

.gp-spacer {
    flex: 1 1 auto;
    box-sizing: border-box;
}
.main-header{
    display:flex;
    height: 30px;
}
.main-header-container{
    display: flex;
    padding:16px 24px;
}
.main-content{
    border-top: 1px solid #d4d4d4;
    padding: 16px 24px 24px 24px;
    text-align: left;
    font-size: 14px;
}
.main-footer-container{
    padding: 20px 24px;
    background-color: var(--gp-primary-color-25);

}
.main-footer{
    background-color: var(--gp-primary-color) !important;
    color: white !important;
    height: 36px !important;
    padding:6px 16px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    box-shadow: 0px 2px 2px rgba(91, 102, 165, 0.2) !important;

}
.main-header-border{
    border-top: 4px solid var(--gp-primary-color);
 }
 .main-header-icon{

     margin-right:8px ;
     margin-top: 1.5px;
     color:var(--gp-primary-color) ;
     font-size:28px !important;
 }
 .gp-cn-space-between-normal{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: normal;
    box-sizing: border-box;
 }
 .main-footer-change{
    height: 36px;
   padding:6px 16px;
   display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1.5px solid var(--gp-primary-color) !important;
    box-shadow: 0px 2px 2px rgba(91, 102, 165, 0.2) !important;

}

:host ::ng-deep .mat-mdc-paginator-icon {
    border: 1px solid var(--gp-primary-color);
    border-radius: 4px;
    box-sizing: border-box;
  }

  /* For disabled paginator icons */
:host  ::ng-deep .mat-mdc-icon-button[disabled] .mat-mdc-paginator-icon  {
    border: 1px solid #d4d4d4 !important;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: not-allowed;
  }

:root {
--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;

--mat-badge-background-color: var(--gp-primary-color);


--mat-form-field-container-text-size: 14px;
--mat-form-field-subscript-text-size: 10.5px;
--mat-form-field-container-vertical-padding: 5px;
--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-table-header-headline-color:rgb(134, 131, 131) !important;
--mat-table-row-item-outline-color:rgb(217, 212, 212) !important;
--mat-table-header-headline-size:12px !important;
--mat-table-row-item-container-height:48px !important;

--mdc-text-button-container-shape: 4px;
--mat-standard-button-toggle-shape: 4px;
--mdc-outlined-button-container-shape: 4px;
--mdc-filled-button-container-shape: 4px;
--mdc-protected-button-container-shape: 4px;

/* 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;

--mdc-filled-text-field-input-text-placeholder-color: #9b9d9b;
--mdc-outlined-text-field-input-text-placeholder-color: #9b9d9b;
--mat-form-field-disabled-input-text-placeholder-color: #9b9d9b;
--mat-select-placeholder-text-color: #9b9d9b;

--mdc-switch-track-height: 26px;
--mdc-switch-track-shape: 9999px;
--mdc-switch-track-width: 45px;

--mat-menu-item-label-text-size: 14px;
--mat-menu-item-label-text-tracking: .006rem;
--mat-menu-item-spacing: 8px;

--mat-option-selected-state-label-text-color: #131c2b;
--mat-option-label-text-color: #1a1b1f;
--mat-option-hover-state-layer-color: rgba(26, 27, 31, .08);
--mat-option-focus-state-layer-color: rgba(26, 27, 31, .12);
--mat-option-selected-state-layer-color: #dae2f9;
--mat-option-label-text-font: Roboto, sans-serif;
--mat-option-label-text-line-height: 1.25rem;
--mat-option-label-text-size: 13px;
--mat-option-label-text-tracking: .006rem;
--mat-option-label-text-weight: 400;
--mat-select-trigger-text-size: 14px;

/* tooltip css */
--mdc-plain-tooltip-container-color: var(--gp-primary-color);
--mdc-plain-tooltip-supporting-text-color: #f2f0f4;
--mdc-plain-tooltip-supporting-text-size: 13px;
--mdc-plain-tooltip-supporting-text-tracking: .006rem;
--mdc-plain-tooltip-container-shape: 4px;

/* mat-list css */
--mdc-list-list-item-label-text-size: 14px;
--mdc-list-list-item-label-text-tracking: .006rem;
--mdc-list-list-item-label-text-line-height: 19px;
--mat-list-active-indicator-shape: 0px;

/* paginator css */
--mat-paginator-enabled-icon-color: var(--gp-primary-color);
--mat-paginator-container-text-color: rgba(0,0,0,.54);
/* Define custom variables for paginator icon border colors */
--mat-paginator-enabled-icon-border-color: var(--gp-primary-color);
--mat-paginator-disabled-icon-border-color: #d4d4d4;

/* table css */
--mat-table-row-item-label-text-tracking: .006rem;

/* checkbox css */
--mdc-checkbox-state-layer-size: 20px;
}

/* button icon css ---------------*/
:host ::ng-deep .mat-mdc-outlined-button>.mat-icon {
    margin-right: 0px;
    margin-left: 0px;
    font-size: 22px;
    height: 22px;
    width: 22px;
}
/* ---------------*/

/* 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;
}
/* ---------------*/


/* Progress bar ---------------*/

:host ::ng-deep .mat-mdc-progress-bar {
    --mdc-linear-progress-track-color: var(--gp-primary-color-100);
}
/* ---------------*/


/* Form Field css ---------------*/
:host ::ng-deep .mdc-text-field--outlined {
    padding: 0 0.75em;
    align-items: center
}

:host ::ng-deep .mat-mdc-form-field-error-wrapper {
    top: -5px;
    padding: 0px;
}

:host ::ng-deep .mat-mdc-form-field-subscript-wrapper {
    height: 0px;
}

:host ::ng-deep .mdc-text-field--outlined .mat-mdc-form-field-infix, .mdc-text-field--no-label .mat-mdc-form-field-infix {
    padding-top: 7px;
}

/* 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: var(--gp-primary-color-200) !important;
}

.mdc-text-field--outlined .mdc-notched-outline__leading {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

.mdc-text-field--outlined .mdc-notched-outline__trailing {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background {
  border-color: var(--gp-primary-color) !important;
  background-color: var(--gp-primary-color) !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: var(--gp-primary-color-400) !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;
}
/*---------------*/

:host ::ng-deep .mdc-list {
    padding: 0px;
}

.mat-typography{
    letter-spacing: normal !important;
}
.mat-typography h2{
    font-weight: 500;
    letter-spacing: normal !important;
}
.mat-typography h3{
    letter-spacing: normal !important;
}
.mat-mdc-standard-chip .mdc-evolution-chip__text-label{
    --mdc-chip-label-text-size:12px;
    --mdc-chip-label-text-tracking:0.006rem;
    font-size:var(--mdc-chip-label-text-size);
}

::ng-deep .mdc-notched-outline__trailing {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

::ng-deep .mat-mdc-raised-button {
  border-radius: 8px;
}

::ng-deep .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;
}