/*.login-wrapper .login-bg {background: url('../../images/login-bg.jpg') no-repeat left top; width: 100%; height: 100%;}*/

.sparks-table .class-asc .mat-sort-header-arrow {
  background: url('../../images/icons/sort-asc.svg') no-repeat left top;
  width: 25px;
  height: 25px;
}

.sparks-table .class-desc .mat-sort-header-arrow {
  background: url('../../images/icons/sort-desc.svg') no-repeat left top;
  width: 25px;
  height: 25px;
}

.sparks-stepper .mat-step-header[aria-selected="true"] {
  background: #fff;
}

.sparks-stepper .mat-step-header.green-tick {
  background: url('../../images/icons/check-mark.png') no-repeat right 10px top 6px;
  background-size: 25px auto;
}

.sparks-stepper .mat-step-header.green-tick[aria-selected="true"] {
  background: #fff url('../../images/icons/check-mark.png') no-repeat right 10px top 6px;
  background-size: 25px auto;
}

.sparks-stepper .hideCheck .mat-step-header[ng-reflect-state="edit"] {
  background: transparent;
}

.sparks-stepper .hideCheck .mat-step-header[aria-selected="true"] {
  background: #fff;
}

.sparks-form .route-point.active-route-point {
  background: #42B5BC url(../../images/icons/check-mark.png) no-repeat -4px -4px;
  width: 1.2rem;
  height: 1.2rem;
  background-size: 1.8rem auto;
}

.sparks-form .route-point.inactive-route-point {
  background: #D1D1D1;
  width: 1.2rem;
  height: 1.2rem;
}

/************* reset css ***************/

*, *:before, *:after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6, p, aside, ul, li, a, figure {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a {
  text-decoration: none;
  outline: none;
}

a:hover {
  text-decoration: none;
  outline: none;
}

a:focus {
  text-decoration: none;
  outline: none;
}

img {
  max-width: 100%;
  border: none;
  outline: none;
}

/** For removing cross icon in IE browser */

::-ms-clear {
  display: none;
}

/***************   Row Col     **********/

.container-fluid {
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto
}

.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.row:after {
  content: "";
  display: table;
  clear: both
}

.row .col {
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 .75rem;
  min-height: 1px
}

.row .col[class*="push-"], .row .col[class*="pull-"] {
  position: relative
}

.row .col.s1 {
  width: 8.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto
}

.row .col.s2 {
  width: 16.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto
}

.row .col.s3 {
  width: 25%;
  margin-left: auto;
  left: auto;
  right: auto
}

.row .col.s4 {
  width: 33.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto
}

.row .col.s5 {
  width: 41.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto
}

.row .col.s6 {
  width: 50%;
  margin-left: auto;
  left: auto;
  right: auto
}

.row .col.s7 {
  width: 58.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto
}

.row .col.s8 {
  width: 66.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto
}

.row .col.s9 {
  width: 75%;
  margin-left: auto;
  left: auto;
  right: auto
}

.row .col.s10 {
  width: 83.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto
}

.row .col.s11 {
  width: 91.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto
}

.row .col.s12 {
  width: 100%;
  margin-left: auto;
  left: auto;
  right: auto
}

.row .col.offset-s1 {
  margin-left: 8.3333333333%
}

.row .col.pull-s1 {
  right: 8.3333333333%
}

.row .col.push-s1 {
  left: 8.3333333333%
}

.row .col.offset-s2 {
  margin-left: 16.6666666667%
}

.row .col.pull-s2 {
  right: 16.6666666667%
}

.row .col.push-s2 {
  left: 16.6666666667%
}

.row .col.offset-s3 {
  margin-left: 25%
}

.row .col.pull-s3 {
  right: 25%
}

.row .col.push-s3 {
  left: 25%
}

.row .col.offset-s4 {
  margin-left: 33.3333333333%
}

.row .col.pull-s4 {
  right: 33.3333333333%
}

.row .col.push-s4 {
  left: 33.3333333333%
}

.row .col.offset-s5 {
  margin-left: 41.6666666667%
}

.row .col.pull-s5 {
  right: 41.6666666667%
}

.row .col.push-s5 {
  left: 41.6666666667%
}

.row .col.offset-s6 {
  margin-left: 50%
}

.row .col.pull-s6 {
  right: 50%
}

.row .col.push-s6 {
  left: 50%
}

.row .col.offset-s7 {
  margin-left: 58.3333333333%
}

.row .col.pull-s7 {
  right: 58.3333333333%
}

.row .col.push-s7 {
  left: 58.3333333333%
}

.row .col.offset-s8 {
  margin-left: 66.6666666667%
}

.row .col.pull-s8 {
  right: 66.6666666667%
}

.row .col.push-s8 {
  left: 66.6666666667%
}

.row .col.offset-s9 {
  margin-left: 75%
}

.row .col.pull-s9 {
  right: 75%
}

.row .col.push-s9 {
  left: 75%
}

.row .col.offset-s10 {
  margin-left: 83.3333333333%
}

.row .col.pull-s10 {
  right: 83.3333333333%
}

.row .col.push-s10 {
  left: 83.3333333333%
}

.row .col.offset-s11 {
  margin-left: 91.6666666667%
}

.row .col.pull-s11 {
  right: 91.6666666667%
}

.row .col.push-s11 {
  left: 91.6666666667%
}

.row .col.offset-s12 {
  margin-left: 100%
}

.row .col.pull-s12 {
  right: 100%
}

.row .col.push-s12 {
  left: 100%
}

@media only screen and (min-width: 601px) {
  .row .col.m1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.m2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.m3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.m4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.m5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.m6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.m7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.m8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.m9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.m10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.m11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.m12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.offset-m1 {
    margin-left: 8.3333333333%
  }
  .row .col.pull-m1 {
    right: 8.3333333333%
  }
  .row .col.push-m1 {
    left: 8.3333333333%
  }
  .row .col.offset-m2 {
    margin-left: 16.6666666667%
  }
  .row .col.pull-m2 {
    right: 16.6666666667%
  }
  .row .col.push-m2 {
    left: 16.6666666667%
  }
  .row .col.offset-m3 {
    margin-left: 25%
  }
  .row .col.pull-m3 {
    right: 25%
  }
  .row .col.push-m3 {
    left: 25%
  }
  .row .col.offset-m4 {
    margin-left: 33.3333333333%
  }
  .row .col.pull-m4 {
    right: 33.3333333333%
  }
  .row .col.push-m4 {
    left: 33.3333333333%
  }
  .row .col.offset-m5 {
    margin-left: 41.6666666667%
  }
  .row .col.pull-m5 {
    right: 41.6666666667%
  }
  .row .col.push-m5 {
    left: 41.6666666667%
  }
  .row .col.offset-m6 {
    margin-left: 50%
  }
  .row .col.pull-m6 {
    right: 50%
  }
  .row .col.push-m6 {
    left: 50%
  }
  .row .col.offset-m7 {
    margin-left: 58.3333333333%
  }
  .row .col.pull-m7 {
    right: 58.3333333333%
  }
  .row .col.push-m7 {
    left: 58.3333333333%
  }
  .row .col.offset-m8 {
    margin-left: 66.6666666667%
  }
  .row .col.pull-m8 {
    right: 66.6666666667%
  }
  .row .col.push-m8 {
    left: 66.6666666667%
  }
  .row .col.offset-m9 {
    margin-left: 75%
  }
  .row .col.pull-m9 {
    right: 75%
  }
  .row .col.push-m9 {
    left: 75%
  }
  .row .col.offset-m10 {
    margin-left: 83.3333333333%
  }
  .row .col.pull-m10 {
    right: 83.3333333333%
  }
  .row .col.push-m10 {
    left: 83.3333333333%
  }
  .row .col.offset-m11 {
    margin-left: 91.6666666667%
  }
  .row .col.pull-m11 {
    right: 91.6666666667%
  }
  .row .col.push-m11 {
    left: 91.6666666667%
  }
  .row .col.offset-m12 {
    margin-left: 100%
  }
  .row .col.pull-m12 {
    right: 100%
  }
  .row .col.push-m12 {
    left: 100%
  }
}

@media only screen and (min-width: 993px) {
  .row .col.l1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.l2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.l3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.l4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.l5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.l6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.l7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.l8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.l9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.l10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.l11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.l12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.offset-l1 {
    margin-left: 8.3333333333%
  }
  .row .col.pull-l1 {
    right: 8.3333333333%
  }
  .row .col.push-l1 {
    left: 8.3333333333%
  }
  .row .col.offset-l2 {
    margin-left: 16.6666666667%
  }
  .row .col.pull-l2 {
    right: 16.6666666667%
  }
  .row .col.push-l2 {
    left: 16.6666666667%
  }
  .row .col.offset-l3 {
    margin-left: 25%
  }
  .row .col.pull-l3 {
    right: 25%
  }
  .row .col.push-l3 {
    left: 25%
  }
  .row .col.offset-l4 {
    margin-left: 33.3333333333%
  }
  .row .col.pull-l4 {
    right: 33.3333333333%
  }
  .row .col.push-l4 {
    left: 33.3333333333%
  }
  .row .col.offset-l5 {
    margin-left: 41.6666666667%
  }
  .row .col.pull-l5 {
    right: 41.6666666667%
  }
  .row .col.push-l5 {
    left: 41.6666666667%
  }
  .row .col.offset-l6 {
    margin-left: 50%
  }
  .row .col.pull-l6 {
    right: 50%
  }
  .row .col.push-l6 {
    left: 50%
  }
  .row .col.offset-l7 {
    margin-left: 58.3333333333%
  }
  .row .col.pull-l7 {
    right: 58.3333333333%
  }
  .row .col.push-l7 {
    left: 58.3333333333%
  }
  .row .col.offset-l8 {
    margin-left: 66.6666666667%
  }
  .row .col.pull-l8 {
    right: 66.6666666667%
  }
  .row .col.push-l8 {
    left: 66.6666666667%
  }
  .row .col.offset-l9 {
    margin-left: 75%
  }
  .row .col.pull-l9 {
    right: 75%
  }
  .row .col.push-l9 {
    left: 75%
  }
  .row .col.offset-l10 {
    margin-left: 83.3333333333%
  }
  .row .col.pull-l10 {
    right: 83.3333333333%
  }
  .row .col.push-l10 {
    left: 83.3333333333%
  }
  .row .col.offset-l11 {
    margin-left: 91.6666666667%
  }
  .row .col.pull-l11 {
    right: 91.6666666667%
  }
  .row .col.push-l11 {
    left: 91.6666666667%
  }
  .row .col.offset-l12 {
    margin-left: 100%
  }
  .row .col.pull-l12 {
    right: 100%
  }
  .row .col.push-l12 {
    left: 100%
  }
}

@media only screen and (min-width: 1201px) {
  .row .col.xl1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.xl2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.xl3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.xl4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.xl5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.xl6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.xl7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.xl8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.xl9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.xl10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.xl11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.xl12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto
  }
  .row .col.offset-xl1 {
    margin-left: 8.3333333333%
  }
  .row .col.pull-xl1 {
    right: 8.3333333333%
  }
  .row .col.push-xl1 {
    left: 8.3333333333%
  }
  .row .col.offset-xl2 {
    margin-left: 16.6666666667%
  }
  .row .col.pull-xl2 {
    right: 16.6666666667%
  }
  .row .col.push-xl2 {
    left: 16.6666666667%
  }
  .row .col.offset-xl3 {
    margin-left: 25%
  }
  .row .col.pull-xl3 {
    right: 25%
  }
  .row .col.push-xl3 {
    left: 25%
  }
  .row .col.offset-xl4 {
    margin-left: 33.3333333333%
  }
  .row .col.pull-xl4 {
    right: 33.3333333333%
  }
  .row .col.push-xl4 {
    left: 33.3333333333%
  }
  .row .col.offset-xl5 {
    margin-left: 41.6666666667%
  }
  .row .col.pull-xl5 {
    right: 41.6666666667%
  }
  .row .col.push-xl5 {
    left: 41.6666666667%
  }
  .row .col.offset-xl6 {
    margin-left: 50%
  }
  .row .col.pull-xl6 {
    right: 50%
  }
  .row .col.push-xl6 {
    left: 50%
  }
  .row .col.offset-xl7 {
    margin-left: 58.3333333333%
  }
  .row .col.pull-xl7 {
    right: 58.3333333333%
  }
  .row .col.push-xl7 {
    left: 58.3333333333%
  }
  .row .col.offset-xl8 {
    margin-left: 66.6666666667%
  }
  .row .col.pull-xl8 {
    right: 66.6666666667%
  }
  .row .col.push-xl8 {
    left: 66.6666666667%
  }
  .row .col.offset-xl9 {
    margin-left: 75%
  }
  .row .col.pull-xl9 {
    right: 75%
  }
  .row .col.push-xl9 {
    left: 75%
  }
  .row .col.offset-xl10 {
    margin-left: 83.3333333333%
  }
  .row .col.pull-xl10 {
    right: 83.3333333333%
  }
  .row .col.push-xl10 {
    left: 83.3333333333%
  }
  .row .col.offset-xl11 {
    margin-left: 91.6666666667%
  }
  .row .col.pull-xl11 {
    right: 91.6666666667%
  }
  .row .col.push-xl11 {
    left: 91.6666666667%
  }
  .row .col.offset-xl12 {
    margin-left: 100%
  }
  .row .col.pull-xl12 {
    right: 100%
  }
  .row .col.push-xl12 {
    left: 100%
  }
}

.left {
  float: left;
}

.right {
  float: right;
}

.center {
  text-align: center;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.underline {
  text-decoration: underline;
}

.bold {
  font-weight: bold;
}

.uppercase {
  text-transform: uppercase;
}

.padding-r-0 {
  padding-right: 0 !important;
}

.padding-l-0 {
  padding-left: 0 !important;
}

.padding-r-0 .mat-list-item-content {
  padding-right: 0 !important;
}

.margin-3 {
  margin-top: 3em;
}

.margin-right-1 {
  margin-right: 1rem;
}

.margin-right-2 {
  margin-right: 2em;
}

.margin-right-3 {
  margin-right: 3em;
}

/** Common Global Class*/

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.page-heading {
  font-size: 1.7rem;
  line-height: 1;
  font-family: 'Roboto-Regular';
  color: #616167;
  word-break: break-word;
  width: calc(100% - 5.2rem);
  display: inline-block;
  vertical-align: middle;
}

.float-l {
  float: left;
}

.float-c {
  float: none;
  margin: 0 auto;
}

.float-r {
  float: right;
}

.global-left-right-pad-4 {
  padding-left: 3.6rem!important;
  padding-right: 3.6rem!important;
}

.global-top-bottom-pad-4 {
  padding-top: 1.2rem!important;
  padding-bottom: 0rem!important;
}

.global-left-pad-4 {
  padding-left: 4rem;
}

.global-right-pad-4 {
  padding-right: 4rem;
}

.global-top-pad-1 {
  padding-top: 1rem;
}

.global-bottom-pad-3 {
  padding-bottom: 3rem;
}

.mat-raised-button.blue-bg-btn {
  background: #4583FE!important;
  color: #fff!important;
  cursor: pointer!important;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)!important;
  text-transform: uppercase;
}

.mat-raised-button.blue-bg-btn[disabled] {
  background: #dfdfdf!important;
  color: #9a9494!important;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)!important;
  cursor: default!important;
}

.matStepperPrevious span.mat-button-wrapper:before {
  content: "\2039";
  font-size: 20px;
  margin-right: 5px;
  font-weight: 500;
  line-height: 1;
}

.matStepperNext span.mat-button-wrapper:after {
  content: "\203A";
  font-size: 20px;
  margin-left: 5px;
  font-weight: 500;
  line-height: 1;
}

i.material-icons.red-outline {
  color: #d31e49;
}

.clickable-item {
  cursor: pointer;
}

.border-top-none {
  border-top: none!important;
}

.user-summary-icon {
  width: 3.6rem;
  vertical-align: middle;
  margin-right: 1.2rem;
  padding: 5px;
  background: #49b3aa;
  border-radius: 5px;
  -webkit-box-shadow: 0px 5px 9px 2px rgba(26, 222, 204, 0.3);
  box-shadow: 0px 5px 9px 2px rgba(26, 222, 204, 0.3);
}

/************** Basic Styles *************/

body, html {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  height: 100%;
  font-family: 'Roboto-Regular';
  font-size: 14px;
  color: #616167 !important;
  background: #f5f5f5;
  /* overflow-x: hidden; */
}

header {
  z-index: 200;
  float: left;
  width: 100%;
  min-height: 77px;
}

.content-wrapper {
  float: left;
  width: 100%;
  /** padding-top: 7rem; padding-bottom: 4rem; */
}

.mat-sidenav-container {
  overflow: visible !important;
  height: 100%;
  min-height: 100%;
  width: 100%;
  min-width: 100%;
}

.mat-drawer-content {
  overflow: visible !important;
}

/*.mat-button, .mat-flat-button, .mat-icon-button, .mat-stroked-button {padding: 0 !important; min-width: auto !important;}*/

.mat-raised-button {
  border-radius: 0.3rem !important;
}

.mat-tooltip {
  color: #fff !important;
  background: #4583FE !important;
  word-wrap: break-word;
}

.mat-tooltip:after {
  position: absolute;
  content: " ";
  top: -1rem;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px;
  border-color: transparent transparent #4583FE transparent;
}

.mat-button-focus-overlay {
  background: transparent !important;
}

.mat-datepicker-toggle-default-icon {
  width: 1.2rem !important;
}

.logout-menu {
  position: absolute;
  right: -12px;
  top: 45px;
}

.add-icon {
  position: fixed;
  right: 1.1rem;
  bottom: 6.5rem;
}

.add-icon .mat-fab {
  background: #d31144 !important;
}

.add-icon .mat-fab i {
  font-size: 1.9rem;
}

.mat-option .mat-option-text .material-icons {
  vertical-align: -5px;
  margin-right: .5rem;
  font-size: 1.5rem;
}

.no-contact-action {
  pointer-events: none !important;
}

.hemberg-icon-cls .mat-button-ripple {
  width: 40px;
  height: 40px;
  left: -5px;
}

.main-section, .sparks-table, .sparks-stepper {
  /** padding: 0 4rem; */
}

.overlay {
  z-index: 17;
}

/*.side-nav-list .mat-list-item-content{padding:0px;}*/

/******* Custom layout of Scrollbar CSS **************/

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #999999;
  border-radius: 0.3rem;
}

::-webkit-scrollbar-thumb {
  background: #999999;
  border-radius: 0.3rem;
}

::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.search-results ::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar .search-results {
  display: none;
}

.header-nav.stickyMenu .dashboard-search-sec.mat-list-item {
  height: 38px;
}

/************   Sign In Button    ***********/

.logout-menu .mat-menu-content {
  padding-top: 0px;
  padding-bottom: 0px;
}

/** Budgeting Agency Fee Sec Unassigned Accordian*/

.agency-unassign-right-sec-items {
  display: inline-flex;
  align-items: center;
}

.agency-unassign-right-sec-items .assign-to {
  margin-right: 0!important;
}

.agency-unassign-right-sec-items .filter-list {
  margin-bottom: 0;
  height: inherit;
  margin-right: 0!important;
}

.agency-unassign-right-sec-items .filter-list .mat-list-item .mat-list-item-content {
  padding: 0;
}

.agency-unassign-right-sec-items .filter-list .mat-list-item .mat-list-item-content .search-box {
  margin: 0;
  min-width: auto;
}

.agency-unassign-right-sec-items .dropdown-btn {}

/*.login-wrapper {width: 100%; height: 100vh; float: left;}
.login-wrapper .login-cover {width: 33.35em; position: absolute; top: 15%; left: 32%; height: 33.35em;}
.login-wrapper .g-signin2 {padding-top: 45%;}*/

.mat-drawer-container {
  z-index: 16!important;
}

.login-wrapper .g-signin2 .abcRioButtonBlue {
  margin: 0 auto;
  width: 100%;
}

.g-signin2 {
  /* border: solid 1px #d8d6d6; */
  display: flex;
  justify-content: center;
  text-align: center;
}

.abcRioButtonBlue .abcRioButtonContentWrapper {
  border: 0px!important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: transparent;
}

.abcRioButton.abcRioButtonBlue, .abcRioButton.abcRioButtonBlue:hover {
  width: 100%!important;
  margin: 0px;
  background: none;
  color: #616167;
  text-align: center;
  box-shadow: none;
  padding: 0px 6rem;
}

.abcRioButtonBlue .abcRioButtonIcon {
  background-color: transparent!important;
  padding: 1rem!important;
}

.abcRioButtonContents {
  font-weight: 400;
  margin: 0px!important;
  text-transform: uppercase!important;
  vertical-align: middle!important;
  line-height: 1!important;
  padding-top: 0px;
}

.abcRioButtonSvg {
  width: 25px;
  height: 25px;
}

.right-sec-signup {
  text-align: center;
}

.abcRioButtonIcon>div {
  width: auto!important;
  height: auto!important;
}

/************   Main Section   ************/

.main-section .left .user-summary-icon {
  width: 3.6rem;
  vertical-align: middle;
  margin-right: 1.2rem;
  padding: 5px;
  background: #49b3aa;
  border-radius: 5px;
  box-shadow: 0 3px 3px 2px rgba(73, 179, 170, .3);
}

.main-section .left .summary-title {
  font-size: 1.5rem;
  font-family: 'Roboto-Medium';
  color: #616167;
}

.main-section .left span {
  display: inline-block;
  vertical-align: middle;
}

.main-section .center-buttons {
  font-size: 0;
}

.main-section .sub-router-left {
  border-radius: 1rem 0 0 1rem !important;
  padding: 0.4rem 0rem;
  margin: 0px!important;
  width: 12rem;
  background: #f5f5f5;
  box-shadow: none !important;
  border: solid 1px #eee;
  border-right: 0px;
  font-size: 1.3rem;
  color: #616167;
  font-family: 'Roboto-Regular';
  line-height: 32px;
}

.main-section .sub-router-right {
  border-radius: 0rem 1rem 1rem 0rem !important;
  padding: .4rem 0rem;
  margin: 0px!important;
  width: 12rem;
  font-family: 'Roboto-Regular';
  background: #f5f5f5;
  box-shadow: none !important;
  border: solid 1px #eee;
  border-left: 0px;
  font-size: 1.3rem;
  color: #616167;
  line-height: 32px;
}

.main-section .sub-router-left.sub-router-active {
  /** box-shadow:  0 0px 13px .5px rgba(131, 150, 187, 0.3) !important */
  box-shadow: -2px 0px 15px 0px rgba(131, 150, 187, 0.3) !important;
  z-index: 9;
  font-family: 'Roboto-Medium';
}

.main-section .sub-router-right.sub-router-active {
  /** box-shadow:  0 0px 13px .5px rgba(131, 150, 187, 0.3) !important */
  box-shadow: 0px 0px 15px 0px rgba(131, 150, 187, 0.3) !important;
  z-index: 9;
  font-family: 'Roboto-Medium';
}

.sparks-table {
  /*float: left;*/
  width: 100%;
}

/*********   List Actions    ****************/

.list-actions {
  padding-top: 0 !important;
}

.list-actions .mat-list-item {
  display: inline-block !important;
}

.list-actions .search-box {
  border: solid 1px #ddd;
  border-radius: 50px;
  padding: 5px 10px;
  min-width: 6em;
  position: relative;
}

.list-actions .mat-list-item a {
  cursor: pointer;
}

.list-actions .search-box.white-bg {
  background: #fff;
}

.list-actions .search-box input {
  display: inline-block;
  vertical-align: middle;
  width: 0 !important;
  transition: width .3s linear !important;
  border: none;
  background: transparent;
}

.list-actions .search-box input:focus {
  outline: none !important;
  border: none !important;
}

.list-actions .search-box input.show-input {
  width: 11em !important;
  transition: width .3s linear !important;
  padding-left: 0.6rem;
}

.list-actions .search-box a {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.list-actions .search-box a.seach-icon-link {
  margin-left: -4px;
}

.list-actions .search-box a img {
  width: 1.7rem;
  vertical-align: middle;
  display: inline-block;
  padding: 3px 0;
}

.list-actions .hide-filter {
  display: none !important;
}

.list-actions .show-filter {
  display: inline-block !important;
}

.list-actions .show-filter .has-filter {
  color: #42B5BC;
}

.list-actions .action-link {
  display: inline-block;
  vertical-align: middle;
  width: 25px;
  height: 25px;
}

span.filter-main-icon {
  background: #d31144;
  border-radius: 50px;
  color: #fff;
  width: 17px;
  height: 17px;
  line-height: 17px;
  text-align: center;
  font-size: 9px;
  /* margin-left: 0.5rem; */
  position: absolute;
  top: -1px;
  right: -4px;
  z-index: -1;
}

span.filter-cat-num {
  background: #d31144;
  border-radius: 50px;
  color: #fff;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 11px;
  margin-left: 0.5rem;
}

/***********   Table Styles   *********/

.sparks-table .mat-row {
  /** box-shadow: 1px 1px 5px 0 #ddd, -1px 1px 5px 0 #ddd; margin-bottom: 3px; padding-top: .5rem; padding-bottom: .5rem; */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
  margin-bottom: 6px;
  padding-top: .5rem;
  padding-bottom: .5rem;
  border-radius: 0.3rem;
  border: 0px;
  cursor: pointer;
}

/*.sparks-table .mat-column-id {flex: 0 0 15px !important;}*/

.sparks-table .mat-header-row {
  background: #f5f5f5;
  border: 0px;
  display: flex;
  /*align-items: flex-start;*/
}

.account-search-dialog .sparks-table .mat-header-row {
  align-items: center;
}

.sparks-table.padding-on-stepper-page .mat-header-row {
  background: transparent;
}

.sparks-table .header-arrow .mat-button-wrapper {
  color: #616167;
}

.sparks-table .mat-sort-header-arrow .mat-sort-header-indicator {
  display: none;
}

.sparks-table .mat-sort-header-arrow .mat-sort-header-stem {
  display: none;
}

.sparks-table .mat-header-cell .mat-sort-header-button {
  text-transform: uppercase;
  color: #616167 !important;
  text-align: left;
  font-family: 'Roboto-Regular';
  padding-top: 4px;
  padding-bottom: 4px;
}

.sparks-table .mat-cell {
  font-size: .9rem;
  color: #616167 !important;
}

.sparks-table .mat-cell a {
  color: #4583FE;
  cursor: pointer;
}

/* .table-menu {position: absolute; right: -12px; top: 12px; background: #f5f5f5; padding: 0 0rem; font-size: 1rem;} */

.table-menu {
  background: #f5f5f5;
  padding: 0 0rem;
  font-size: 1rem;
}

.table-menu .mat-menu-content {
  padding-top: 0px;
  padding-bottom: 0px;
}

.table-menu .mat-menu-item {
  height: auto;
  line-height: 40px;
  font-size: 1rem;
  font-family: roboto-regular;
}

.table-menu .mat-menu-item:hover {
  background: transparent;
}

.table-menu.mat-elevation-z2 {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16)!important;
}

.sparks-table.project-account-table-sec .mat-cell:last-child, .sparks-table.project-account-table-sec .mat-header-cell:last-child, .sparks-table.user-summary-page-table-cls .mat-cell:last-child, .sparks-table.user-summary-page-table-cls .mat-header-cell:last-child {
  max-width: 50px;
  /*margin-right: -10px;*/
}

.sparks-table.project-account-table-sec .mat-cell, .sparks-table.project-account-table-sec .mat-header-cell, .sparks-table.user-summary-page-table-cls .mat-cell, .sparks-table.user-summary-page-table-cls .mat-header-cell {
  padding: 0rem 0.5rem
}

.sparks-table.user-summary-page-table-cls .mat-cell, .sparks-table.user-summary-page-table-cls .mat-header-cell {
  width: 18.5%;
}

.sparks-table.user-summary-page-table-cls .mat-cell:last-child, .sparks-table.user-summary-page-table-cls .mat-header-cell:last-child {
  width: 7.5%;
}

.sparks-table.user-summary-page-table-cls .mat-cell, .mat-header-cell {
  flex: auto;
}

.sparks-table.project-account-table-sec span.right.mat-icon-button, .sparks-table.user-summary-page-table-cls span.right.mat-icon-button {
  width: 24px;
  height: 24px;
  line-height: 24px;
}

.sparks-table.audit-table .mat-row {
  background: #f8f8f8;
  border-radius: 5px;
  box-shadow: none;
  border: 1px solid #dedede;
  min-height: 2.858rem;
}

.sparks-table.table-in-card .mat-row:hover, .sparks-table.audit-table .mat-row:hover {
  background: rgba(248, 248, 248, 0.35)!important
}

.sparks-table.table-in-card .mat-row {
  box-shadow: none;
  background: #f8f8f8;
  border: 1px solid #dedede;
  min-height: unset;
}

/************    Card Styles    ***********/

.row.width-manage-inner-padding {
  width: calc(100% + 4.25rem);
  margin-left: -2.25rem;
}

.sparks-card {
  color: #616167;
  /** padding: 0 3.3rem; */
}

.sparks-card .mat-card-title {
  margin-bottom: .5rem;
  font-size: 2rem;
  font-weight: bold;
}

.sparks-card .subtitle-link {
  margin-bottom: .5rem;
}

.sparks-card .subtitle-link a {
  color: #4583FE;
}

.sparks-card .detail-section {
  margin-top: 20px;
}

.sparks-card .info-section {
  margin-bottom: 1rem;
}

.sparks-card .info-section:last-child {
  margin-bottom: 0;
}

.sparks-card .info-section .uppercase {
  font-size: 0.9rem;
  margin-bottom: 0.1rem;
}

.sparks-card .left-detail {
  border-right: solid 1px #ddd;
}

.sparks-card .info-section p {
  margin: 0;
  font-size: .85rem;
}

.sparks-card .info-section p.bold {
  font-size: 1rem;
  font-weight: 500;
  font-family: roboto-medium;
  color: #616167;
}

.sparks-card .info-section img {
  /** width: 1.5rem; height: 1.5rem; */
  margin-right: 1rem;
}

.sparks-card .info-section .left-info {
  display: inline-block;
  vertical-align: middle;
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  text-align: center;
}

.sparks-card .info-section .right-info {
  display: inline-block;
  vertical-align: middle;
}

.sparks-card .card-item {
  margin: 2.25rem 1.5rem;
  padding: 2rem 1rem 2rem;
  position: relative;
  border-radius: 0.3rem;
  box-shadow: 0 0px 10px .5px rgba(0, 0, 0, .1) !important;
  color: #616167;
}

.sparks-card .card-item .header-arrow {
  position: absolute;
  top: .5rem;
  right: .5rem;
}

/*.sparks-card .row > div:nth-child(3n+1) .card-item {margin-left: 0;}
.sparks-card .row > div:nth-child(3n+2) .card-item {margin-left: .4rem; margin-right: .4rem;}
.sparks-card .row > div:nth-child(3n+3) .card-item {margin-right: 0;}*/

.search-results .sparks-card.animated .container {
  overflow-x: hidden;
}

/**********  Status Design ***************/

.status-wrapper {
  padding: 0 0.5rem;
  border-radius: 0.3rem;
  text-transform: uppercase;
  display: inline-block;
  width: 100%;
  max-width: 150px;
  text-align: center;
  font-weight: 500;
  line-height: 1.8rem;
}

.status-wrapper.Active {
  background: rgba(121, 134, 203, .25);
  color: #283595;
}

.status-wrapper.Inactive {
  background: rgba(240, 98, 146, .15);
  color: #a2476b;
}

.status-wrapper.Client {
  background: rgba(77, 182, 172, 0.25);
  color: #00796b;
}

.status-wrapper.Prospect {
  background: rgba(121, 134, 203, .25);
  color: #283595;
}

.status-wrapper.Lost.Account {
  background: rgba(240, 98, 146, .15);
  color: #a2476b;
}

.status-wrapper.Do.not.Contact {
  background: rgba(212, 192, 133, 0.25);
  color: #6d4c41;
}

.status-wrapper.Entered {
  background: #dfd5f0;
  color: #512da8;
}

.status-wrapper.Proposed {
  background: rgba(255, 183, 77, 0.2);
  color: #9c6616;
}

.status-wrapper.Production {
  background: rgba(144, 164, 174, .3);
  color: #455a64;
}

.status-wrapper.Shipped.Not.Billed {
  background: rgba(212, 192, 133, 0.25);
  color: #6d4c41;
}

.status-wrapper.Booked {
  background: #CAEFF2;
  color: #34779A;
}

.status-wrapper.Cancelled {
  background: rgba(240, 98, 146, .15);
  color: #a2476b;
}

.status-wrapper.Lost {
  background: #696969;
  color: #dcdcdc;
}

.status-wrapper.In.Progress {
  background: #F3DCFA;
  color: #6F3581;
}

.status-wrapper.Submitted.Pending.Response {
  background: #D6DEEF;
  color: #1E4493;
}

.status-wrapper.Negotiate {
  background: #E4F4D0;
  color: #476520;
}

.status-wrapper.Verbal.Won {
  background: #BCE2C6;
  color: #0B802A;
}

.status-wrapper.Advance.to.Live.Job {
  background: #CBF4E6;
  color: #1F6C52;
}

.status-wrapper.Won {
  background: #DBF9FD;
  color: #038091;
}

.status-wrapper.Declined {
  background: #FADCDC;
  color: #BE1515;
}

.status-wrapper.On.Hold {
  background: #FAE1D5;
  color: #D64D0B;
}

.status-wrapper.Internal {
  color: #D31144;
  background: rgba(211, 17, 68, 0.3);
}

.status-wrapper.External {
  color: #018AC0;
  background: rgba(1, 138, 192, .3);
}

.status-wrapper.CREATED {
  background: rgb(215, 225, 250);
  color: #3668da;
}

.status-wrapper.PUBLISHED {
  background: rgb(219, 239, 187);
  color: #445628;
}

/*********    Stepper    ***************/

.sparks-stepper .mat-stepper-vertical {
  position: relative;
  background: #f5f5f5;
  padding-top: 4rem;
}

.sparks-stepper .mat-step {
  margin-bottom: .5rem;
  float: left;
  width: 100%;
  text-align: right;
}

.sparks-stepper .mat-step-header {
  width: 12%;
  /** padding: 10px 45px 10px 20px !important; */
  padding: 0px;
  display: block !important;
  text-align: right;
}

.sparks-stepper .mat-step-header[aria-selected="true"] {
  box-shadow: 0 0px 10px 0.5px rgba(0, 0, 0, .1) !important;
  border-radius: 0.3rem;
}

.sparks-stepper .mat-step-header[aria-selected="true"] .mat-step-label {
  color: #4583FE;
}

.sparks-stepper .mat-step-header .mat-step-icon, .sparks-stepper .mat-step-header .mat-step-icon-not-touched {
  display: none !important;
}

.sparks-stepper .mat-stepper-vertical-line::before {
  border: none !important;
}

.sparks-stepper .mat-step-header-ripple {
  /** display: none; */
}

.sparks-stepper .mat-vertical-content-container {
  position: absolute !important;
  top: 0;
  left: 16%;
  width: 85%;
  margin-left: 0 !important;
}

.sparks-stepper .mat-step-icon {
  float: right;
}

.icon-section {
  margin-bottom: 1.4rem;
  display: flex;
}

.mat-raised-button {
  margin: 0rem 0.5rem!important;
}

.icon-section .mat-raised-button.disabled-button {
  background: #ddd;
  cursor: default;
  color: #aaa;
}

.icon-section .mat-button {
  min-width: 70px !important;
}

/************   Sub-Stepper   *************/

.sub-stepper {
  position: absolute;
  left: -30%;
  top: 40px;
}

/************  Form    **************/

.sparks-form {
  margin-bottom: 1rem;
  color: #616167;
  /** min-height: 25rem; */
  padding: 2rem;
  box-shadow: 0 0px 10px 0.5px rgba(0, 0, 0, .1) !important;
}

.sparks-form.form-small-card {
  min-height: 5rem;
}

.update-main-heading .ser-req-header-sec {
  z-index: 7;
  position: relative;
}

.sparks-form .mat-input-wrapper {
  width: 85% !important;
  font-size: 1rem;
  margin-bottom: .5rem;
}

.sparks-form .row {
  /** margin-bottom: 0; */
}

.sparks-form h1 {
  font-weight: normal;
  font-family: "Roboto-Medium";
}

.sparks-form h2 {
  border-bottom: solid 1px #eee;
  padding-bottom: 1rem;
  margin-bottom: 1.2rem;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  font-size: 1.7rem;
  color: #4f5959;
  font-weight: 400;
  font-family: "Roboto-Medium";
}

.sparks-form h2.editUserHeading {
  font-family: 'Roboto-Regular';
  font-style: italic;
  color: #a6abab;
  font-size: 1.4rem;
  line-height: 1;
  margin: 0rem 0.75rem 2.5rem;
}

.sparks-form h3, .sparks-form h4 {
  font-size: 1.142rem;
  font-weight: 500;
  line-height: 1;
  margin: 0 0.75rem 1.5rem;
  color: #4F5959;
}

.sparks-form h4 {
  font-weight: 400;
}

.sparks-form .mat-placeholder-required, .sparks-form .mat-form-field-required-marker {
  color: #d31144;
  font-size: 1rem;
  line-height: 1;
}

.sparks-form .list-label {
  display: block;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.sparks-form .list-label.desc-label {
  font-size: .8rem;
}

.sparks-form .list-item {
  margin-bottom: .75rem;
}

.sparks-form .select-button {
  background: #eee;
  font-weight: bold;
  font-size: .8rem;
  width: 10rem;
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 0.4rem!important;
}

.sparks-form .select-label {
  font-size: 1rem;
  margin-right: 1rem;
}

.sparks-form .mat-slide-toggle-content {
  font-size: 1rem;
}

.sparks-form .services-toggle .mat-slide-toggle:last-child {
  margin-right: 0;
}

.sparks-form .edit-icon {
  display: inline-block;
  vertical-align: middle;
}

.sparks-form .edit-icon-text {
  color: #4583FE;
  font-size: 0.85rem;
  font-style: italic;
  display: inline-block;
  vertical-align: middle;
  margin-left: -.7rem;
  cursor: pointer;
}

.sparks-form .add-contact-text {
  font-size: 1rem;
  color: #4583FE;
  padding: 0.5rem 0.8rem 0.5rem;
  float: right;
  width: 30%;
  transition: all 0.3s ease-in-out;
  text-align: right;
}

.sparks-form.on-stepper-page-cls {
  float: left;
  width: 100%;
  box-sizing: border-box;
}

.sparks-form .add-contact-text i {
  font-size: 1.3rem;
  vertical-align: -4px;
}

.sparks-form .add-contact-text a {
  color: #4583FE;
  font-weight: normal;
  cursor: pointer;
}

.sparks-form .delete-contact-text a {
  font-size: .95rem;
  color: #ccc;
  cursor: pointer;
}

.sparks-form .contact-sub-head {
  font-weight: normal;
  font-size: 1.2rem;
  margin-bottom: .5rem;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.sparks-form .upload-div {
  width: 100%;
  height: 12rem;
  position: relative;
  border: solid 1px #eee;
  overflow-y: hidden;
}

.sparks-form .upload-div input[type='file'] {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
  opacity: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
}

.sparks-form .upload-div .upload-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  align-items: center;
  background: #f5f5f5;
}

.sparks-form .upload-div .overlay-inner-top-div, .sparks-form .upload-div .overlay-inner-bottom-div {
  width: 100%;
  text-align: center;
  height: 50%;
}

.sparks-form .upload-div .overlay-inner-top-div .flex-div {
  display: flex;
  align-items: center;
}

.sparks-form .upload-div .overlay-inner-top-div .upload-icon-wrapper {
  width: 100%;
}

.sparks-form .upload-div .overlay-inner-bottom-div {
  padding: 10px;
  float: left;
}

.sparks-form .upload-div .overlay-inner-bottom-div div {
  width: 100%;
  height: 100%;
  background: #fff;
  border: dashed 2px #eee;
  display: flex;
  align-items: center;
  position: relative;
}

.sparks-form .upload-div .overlay-inner-bottom-div span {
  width: 100%;
}

.sparks-form .upload-div .upload-icon-wrapper .image-wrapper {
  padding: 10px;
  margin-top: 10px;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
}

.sparks-form .upload-div .upload-icon-wrapper .image-wrapper img {
  width: 3em;
}

.sparks-form .upload-div .upload-text {
  width: 8em;
}

.sparks-form .uploaded-div {
  width: 100%;
  padding: 10px;
}

.sparks-form .uploaded-div.row {
  width: 100%;
  padding: 10px;
  height: 5rem;
  overflow-y: auto;
}

.sparks-form .uploaded-div .progress-wrapper {
  width: 91%;
  padding-top: 20px;
  position: relative;
}

.sparks-form .uploaded-div .progress-info {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 12px;
}

.sparks-form .uploaded-div .progress-info .cross-icon i {
  font-size: 14px;
  vertical-align: -2px;
}

.sparks-form .uploaded-div .progress-info .cross-icon a {
  cursor: pointer;
}

.sparks-form .uploaded-div .progress-file-name {
  position: absolute;
  left: 0;
  /* top: 0; in EST, top was zero*/
  top: 8px;
  font-size: 12px;
}

.sparks-form .no-upload .upload-div input[type='file'] {
  pointer-events: none;
}

.sparks-form .attachments-heading {
  border-bottom: solid 1px #eee;
  margin-bottom: 0.4em;
  font-size: 1.1em;
  padding-bottom: 0.1rem;
  color: #616167;
}

.sparks-form .attachment-size {
  font-size: .7em;
  font-style: italic;
}

.sparks-form .ckeditor-wrapper .cke {
  box-shadow: none;
  border: solid 1px rgba(0, 0, 0, .42);
}

.sparks-form .ckeditor-wrapper.disabled .cke {
  border: dotted 1px #949494;
}

.sparks-form .ckeditor-wrapper.disabled .cke_top {
  border-bottom: dotted 1px #949494;
}

.sparks-form .ckeditor-wrapper .cke_top {
  /** border: none; */
  border-bottom: solid 1px rgba(0, 0, 0, .42);
  box-shadow: none;
  background: #fff;
}

.sparks-form .ckeditor-wrapper .cke_contents {
  height: 9em !important;
}

.sparks-form .ckeditor-wrapper .cke_bottom {
  display: none;
}

.sparks-form .event-restrict-wrapper {
  margin: 1.5em 0;
}

.sparks-form .event-restrict-wrapper .col {
  padding: 0;
}

.sparks-form .event-restrict.ckeditor-wrapper .cke_contents {
  height: 4.3em !important;
}

.sparks-form .view-attachment-section {
  background: #f5f5f5;
  padding: 1rem;
  height: 12.4rem;
  overflow-y: auto;
}

.sparks-form .view-attachment-section .file-card-div {
  display: inline-block;
}

.sparks-form .view-attachment-section .file-card {
  width: 100%;
  /* height: 6rem; */
  padding: 1rem 0.6rem!important;
  display: inline-block;
  margin: 0.2rem;
  float: left;
  border-radius: 0.3rem;
  max-width: 5.5rem;
}

.sparks-form .view-attachment-section .file-card span {
  float: left;
  width: 100%;
  font-size: 0.9rem;
  word-break: break-word;
}

.sparks-form .view-attachment-section .file-card p {
  font-size: .75rem;
}

.sparks-form .field-edit-wrapper {
  position: relative;
}

.sparks-form .field-edit-wrapper .field-edit-button {
  position: absolute;
  top: 0;
  right: 1.5rem;
}

.sparks-form .team-location-left {
  display: inline-block;
  vertical-align: middle;
  width: 7rem;
  /** margin-left: -1.5rem; */
  padding-left: 0;
  margin-top: .5rem;
}

.sparks-form .team-location-left .list-label {
  font-size: .8rem;
  color: #616167;
}

.sparks-form .team-location-right {
  display: inline-block;
  vertical-align: middle;
}

.sparks-form .team-location-right .mat-checkbox {
  color: #616167;
  font-size: .9rem;
  margin-right: 1.2rem;
}

.sparks-form .routing-path {
  position: relative;
  background: #EEF2FD;
  padding: 1.1rem 2.8rem;
  border-radius: 50px;
  float: left;
  width: 100%;
}

.sparks-form .routing-path ul {
  font-size: 0;
  list-style: none;
  padding: 0;
}

.sparks-form .routing-path ul li {
  background: #D7D9DC;
  display: inline-block;
  height: 1px;
  width: 50%;
}

.sparks-form .routing-path ul li.active-route {
  background: #42B5BC;
}

.sparks-form .route-point {
  position: absolute;
  top: 1.2rem;
  background: #E8E5F6;
  border-radius: 50%;
  font-size: 1px;
  width: 1rem;
  height: 1rem;
  margin-top: -0.6rem;
}

.sparks-form .routing-path .route-1.route-point {
  left: 2rem;
}

.sparks-form .routing-path .route-2.route-point {
  left: calc(50% - 0.6rem);
}

.sparks-form .routing-path .route-3.route-point {
  right: 2rem;
}

.sparks-form .route-section {
  margin-bottom: 2rem;
  margin-top: 1rem;
  float: left;
  width: 100%;
}

.sparks-form .route-section .routing-label {
  /* display: inline-block; */
  width: 10%;
  font-size: 1rem;
  float: left;
  padding-top: 0.7rem;
}

.sparks-form .route-section .route-right-section {
  display: inline-block;
  width: 65%;
}

.sparks-form .routing-info {
  position: relative;
  width: calc(100% - 5.6rem);
  padding: 0px 30px;
  height: 5px;
  margin: 1rem 2.8rem;
  display: inline-block;
}

.sparks-form .routing-info .info {
  /** position: absolute; top: 1rem; text-align: center; */
}

.sparks-form .routing-info .info.info-1 {
  text-align: center;
  display: inline-block;
  width: 240px;
  position: absolute;
  left: 0px;
  margin-right: 0px;
  transform: translateX(-50%);
  word-break: break-word;
}

.sparks-form .routing-info .info.info-2 {
  text-align: center;
  display: inline-block;
  width: 240px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.sparks-form .routing-info .info.info-3 {
  text-align: center;
  margin-left: -50%;
  display: inline-block;
  width: 240px;
  position: absolute;
  right: 0px;
  margin-left: 0px;
  transform: translateX(50%);
}

.sparks-form .routing-info .info-label {
  display: block;
  text-transform: uppercase;
  font-size: .8rem;
}

.sparks-form .routing-info .info-text {
  display: block;
  font-weight: bold;
  font-size: .9rem;
}

.sparks-form .purchase-order-list li {
  margin-bottom: 2rem;
}

.sparks-form .purchase-order-list li:last-child {
  margin-bottom: 0rem;
}

.sparks-form .added-notes-section {
  height: 30rem;
  overflow-y: auto;
}

.sparks-form .added-notes-section .notes-item {
  margin: 1.5rem 0 2rem;
}

.sparks-form .added-notes-section .notes-heading {
  font-size: 1rem;
  font-weight: bold;
}

.sparks-form .added-notes-section .notes-content {
  font-size: 1rem;
}

.sparks-form .new-note-section {
  margin-top: .5rem;
  border-top: double .3rem #ccc;
  padding-top: .5rem;
}

.sparks-form .notes-textarea {
  width: 100%;
}

.sparks-form .notes-textarea .mat-input-wrapper {
  width: 100% !important;
}

.sparks-form .notes-textarea .mat-input-wrapper textarea.mat-input-element {
  resize: none;
}

.sparks-form .notes-textarea .mat-form-field-label-wrapper {
  top: -0.4rem;
}

.sparks-form .project-margin-section {
  display: flex;
  align-items: stretch;
  margin-bottom: 2rem;
}

.sparks-form .project-margin-section .project-margin-left {
  width: 50%;
  padding-right: .2rem;
  display: flex;
}

.sparks-form .project-margin-section .project-margin-right {
  width: 50%;
  padding-left: .2rem;
  display: flex;
}

.sparks-form .project-margin-section .sparks-table {
  padding: 0;
  margin-bottom: 1.5rem;
}

.sparks-form .project-margin-section .sparks-table .mat-header-row {
  background: #fff;
  min-height: auto;
  border-bottom: solid 2px #eee;
  display: flex;
  align-items: center;
}

.sparks-form .project-margin-section .sparks-table .mat-row {
  min-height: 2rem;
  background: #f5f5f5;
  box-shadow: none;
  border-bottom: none;
  margin-bottom: .3rem;
  display: flex;
  align-items: center;
}

.sparks-form .project-margin-section .sparks-table .mat-header-cell {
  text-transform: uppercase;
  color: #aaa;
  font-weight: normal;
  flex: 1;
  overflow: hidden;
  word-wrap: break-word;
}

.sparks-form .project-margin-section .sparks-table .mat-cell.border-bottom {
  border-bottom: solid 1px #ccc;
}

.sparks-form .project-margin-section .sparks-table.second-table .mat-cell {
  flex: 0 0 30%;
  margin-right: 3.5%;
  overflow: hidden;
  word-wrap: break-word;
}

.sparks-form .project-margin-section .sparks-table.first-table .mat-cell {
  flex: 0 0 47%;
  margin-right: 3%;
}

.mat-error.project-margin-error-cls {
  position: absolute;
}

.sparks-form .project-margin-section .contact-sub-head {
  color: #616167;
  margin: .5rem 0 2rem;
  font-weight: 500;
}

.sparks-form .project-margin-section .mat-card {
  padding: 1.3rem;
  width: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

.sparks-form .project-margin-section .mat-checkbox-layout .mat-checkbox-label {
  color: #616167;
}

.sparks-form .project-margin-section .mat-input-wrapper {
  margin-bottom: 0;
  padding-bottom: 0;
}

.sparks-form .project-margin-section .mat-form-field-underline {
  display: none;
}

.sparks-form .project-margin-section .mat-form-field-subscript-wrapper {
  display: none;
}

.sparks-form .project-margin-section .mat-form-field-infix {
  padding: 0;
  margin-top: -.6rem;
}

.sparks-form .project-margin-section .project-margin-select .mat-input-wrapper {
  margin-bottom: .5rem;
  padding-bottom: 1.25em;
  width: 10rem !important;
  margin-top: -1.5rem;
}

.sparks-form .project-margin-section .project-margin-select .mat-form-field-underline {
  display: block;
}

.sparks-form .project-margin-section .project-margin-select .mat-form-field-subscript-wrapper {
  display: block;
}

.sparks-form .project-margin-section .project-margin-select .mat-form-field-infix {
  padding: .4375em 0;
  margin-top: 0;
}

.sparks-form .project-document-select {
  margin-top: -.7rem;
}

.ps-content {
  width: 100%;
  height: 100%;
}

.no-record-section {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.no-record-section .no-record-inner-div {
  width: 100%;
}

.chipIcon {
  padding: 0 0.57rem;
  /*display: flex;*/
  align-items: center;
}

.chipIcon img {
  width: 1rem;
  height: 0.85rem;
}

.sparks-form .mat-form-field-label {
  color: rgba(0, 0, 0, 0.75);
}

.sparks-form .mat-checkbox-disabled .mat-checkbox-label, .sparks-form .mat-radio-disabled .mat-radio-label-content, .sparks-form .mat-select-disabled .mat-select-value, .sparks-form .mat-input-element:disabled {
  color: rgba(0, 0, 0, 0.65);
}

.sparks-form.mat-card, .sparks-form .mat-card {
  color: #616167;
}

/*************** Update Form Styles *****************/

.page-content-wrapper-globally-cls {
  float: left;
  width: 100%;
  box-sizing: border-box;
}

.update-mode-stepper .mat-stepper-vertical {
  padding-top: 0;
}

.update-mode-stepper .update-left-section {
  width: 300px;
  float: left;
  box-sizing: border-box;
  padding-right: 1.5rem;
}

.update-mode-stepper .update-left-section.stickyMenu {
  position: sticky;
  top: 7.8rem;
}

.update-mode-stepper .update-right-section {
  width: calc(100% - 300px);
  float: right;
  /** padding-left: 0; */
  box-sizing: border-box;
}

.update-mode-stepper .header-right-icon {
  width: 4.5rem;
  /* margin-top: -1rem; */
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
}

.update-mode-stepper .header-right-icon img {
  float: left;
  max-width: 100%;
}

.update-mode-stepper .icon-section {
  margin-bottom: 0;
}

.update-mode-stepper .mat-step-header {
  width: 100%;
  float: left;
  box-sizing: border-box;
  border-radius: 0.3rem;
  transition: all 0.3s ease-in-out;
}

.update-mode-stepper .mat-step-header.active {
  width: 100%;
  float: left;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
  background-color: #fff;
  box-shadow: 0 0px 10px 0.5px rgba(0, 0, 0, .1);
  border-radius: 0.3rem;
}

.update-mode-stepper .mat-step-header .mat-step-label {
  /** display:inline-flex; align-items: center; justify-content: flex-end; */
  width: 100%;
}

.update-mode-stepper .mat-step-header .mat-step-label a {
  position: relative;
  float: left;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 3rem 1rem 1rem;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 400;
  color: #616167;
  font-family: roboto-medium;
}

.update-mode-stepper .sparks-form {
  margin-bottom: 0;
  box-shadow: none !important;
}

.update-mode-stepper .stepper-form-section {
  float: left;
  width: 100%;
  /**box-shadow: 0 0px 10px 0.5px rgba(0,0,0,.1);  margin-left: .75rem; margin-bottom: 2rem; */
}

.update-mode-stepper .stepper-form-section .update-form-div {
  float: left;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
  margin-bottom: 3rem;
}

.update-mode-stepper .stepper-form-section .update-form-div>.col {
  /** padding: 0; */
}

.update-mode-stepper .update-main-heading {
  background: rgb(238, 251, 255);
  padding: 0rem;
}

.update-mode-stepper .update-main-heading h1 {
  color: #00495e;
  padding: 30px 24px;
  font-size: 1.7rem;
  line-height: 1;
  margin: 0rem 0.75rem;
  font-weight: 400;
  font-family: roboto-medium;
  position: relative;
}

.update-mode-stepper .sparks-form h2 {
  font-family: 'Roboto-Regular';
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1;
  border-bottom: solid 1px #eee;
  padding-bottom: 1rem;
  margin: 0rem 0.75rem 2.5rem;
  color: #a6abab;
}

.update-main-heading .sparks-form h2 {
  font-family: 'Roboto-Regular';
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1;
  border-bottom: solid 1px #eee;
  padding-bottom: 1rem;
  margin: 0rem 0.75rem 2.5rem;
  width: calc(100% - 1.5rem);
}

.update-mode-stepper .update-main-heading h4 {
  color: #616167;
  padding: 0px;
  font-size: 1.2rem;
  line-height: 22px;
  margin: 0rem;
}

.update-mode-stepper .edit-icon {
  display: inline-block;
  vertical-align: middle;
}

.update-mode-stepper .edit-icon-text {
  color: #4583FE;
  font-size: 0.9rem;
  font-style: italic;
  display: inline-block;
  vertical-align: middle;
  margin-left: -.2rem;
  cursor: pointer;
  font-weight: normal;
}

.ser-req-header-sec {
  box-shadow: 0 0px 10px 0.5px rgba(0, 0, 0, .1);
  position: relative;
  z-index: 999;
}

.update-mode-stepper a {
  cursor: pointer;
}

.update-mode-stepper .sparks-form.client-purchase-order {
  float: left;
  width: 100%;
}

.stepper-right-section .sparks-table.padding-on-stepper-page {
  padding: 0rem 0.75rem;
}

.stepper-right-section .mat-header-cell {
  text-transform: uppercase;
  font-weight: 700;
}

/**************  Form View Mode  *************/

.sparks-stepper.view-mode .sparks-form .mat-form-field-disabled .mat-form-field-underline {
  background-image: none;
}

.sparks-stepper.view-mode .sparks-form .mat-form-field-disabled .mat-select-arrow-wrapper .mat-select-arrow {
  border: none;
}

.sparks-stepper.view-mode .sparks-form .mat-form-field-disabled .mat-form-field-infix {
  text-transform: uppercase;
}

.sparks-stepper .sparks-form .no-contact-action .add-contact-text a {
  pointer-events: none;
}

.sparks-stepper .sparks-form .no-contact-action .delete-contact-text a {
  pointer-events: none;
}

/**************   Dialog Box ****************/

/*.mat-dialog-container {padding: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; border-radius: 3px !important;}*/

/**********    List Filter     ***********/

.list-filter {
  background: #f5f5f5;
  position: absolute;
  right: 0;
  top: 115%;
  z-index: 16;
  background: #fff;
  width: 20rem;
  color: #616167;
  box-shadow: 1px 1px 5px 0 #ddd, -1px 1px 5px 0 #ddd;
  min-height: 27.7rem;
}

.list-filter .filter-header {
  background: #d31144;
  color: #fff;
  padding-top: 3px;
  padding-bottom: 3px;
}

.list-filter .mat-dialog-title {
  margin: 4px 0 0;
  font-size: 14px;
  padding-left: 15px;
}

.list-filter .mat-dialog-content .col {
  padding: 0;
  color: #616167;
}

.list-filter .search-box {
  width: 100%;
  margin: 0 auto;
  padding: 0 .5em;
  background: #fff;
  color: #616167;
  border: solid 1px #eee;
  border-radius: 50px;
  margin: 0.65em 0;
}

.list-filter .search-box input {
  vertical-align: middle;
  display: inline-block;
  float: none;
  width: 15.3rem !important;
  padding: .5rem;
}

.list-filter .expansion-panel-wrapper .search-box input {
  float: left;
  width: calc(100% - 2rem) !important;
}

.list-filter .expansion-panel-wrapper .search-box input.small-input {
  width: calc(100% - 4.5rem) !important;
}

.list-filter .search-box a {
  display: inline-block;
  vertical-align: middle;
  width: 2rem;
}

.list-filter .search-box .search-icon {
  width: 25px;
  display: inline-block;
}

.list-filter .mat-dialog-actions {
  padding: 5px;
}

.list-filter .tab-section {
  padding: 0;
}

.list-filter .tab-row {
  margin-bottom: 0;
}

.list-filter .tab-section .mat-tab-label .mat-mini-fab {
  box-shadow: none;
  background: #616167;
  color: #fff;
  font-size: 9px;
  width: 18px;
  height: 18px;
  line-height: 12px;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  padding-top: 1px;
}

.list-filter .tab-section .mat-tab-label-active .mat-mini-fab {
  background: #4583FE;
}

.list-filter .tab-section .mat-mini-fab .mat-button-wrapper {
  line-height: 12px;
  padding: 0;
}

.list-filter .mat-tab-header {
  border-bottom: none;
}

.list-filter .mat-ink-bar {
  background-color: #fff !important;
}

.list-filter .mat-tab-label-container {
  padding-top: 5px;
}

.list-filter .mat-tab-label-content {
  font-size: 20px;
}

.list-filter .mat-tab-group .mat-tab-label-active {
  border: solid 1px #eee;
  border-bottom: none;
  box-shadow: 0 0px 5px 2px rgba(0, 0, 0, .2);
  background: #fff;
  color: #4583FE;
}

.list-filter .mat-tab-body {
  border-top: solid 1px #eee;
  padding-top: 15px;
  color: #616167;
  background: #fff;
  width: 800px;
  height: 255px;
}

.list-filter .mat-tab-body.mat-tab-body-active {
  border-top: none;
}

.list-filter .checkbox-section {
  padding-top: 1rem;
  background: #f5f5f5;
  padding-bottom: 2rem;
  overflow-y: auto;
  /** height: 18rem; */
  height: calc(100% - 4.5em);
  width: 100%;
}

.list-filter .checkbox-item {
  margin-bottom: 10px;
  display: inline-block;
  padding: 0 1em;
}

.list-filter .button-section {
  margin-bottom: 0;
  padding: 1.5em 1.5rem 1em;
  background: #fff;
}

.list-filter .button-section .mat-raised-button {
  margin-right: 10px;
  background: #4583FE;
  color: #fff;
}

.list-filter .filter-top-section {
  padding: 1rem 2rem;
  border-bottom: solid 1px #eee;
}

.list-filter .filter-top-section h3 {
  font-weight: normal;
  font-family: 'Roboto-Medium';
}

.list-filter .filter-top-section p {
  font-size: 12px;
}

.list-filter .filter-bottom-section {
  padding: 0 1.5rem;
  /*position: relative;*/
}

.list-filter .mat-expansion-panel {
  /** position: relative; */
  box-shadow: none !important;
  border-bottom: solid 1px #eee;
  transition: none !important;
}

.list-filter .mat-expansion-panel-header {
  padding: 0 1rem 0 .5rem;
  margin-top: 0rem;
  height: 48px !important;
}

.list-filter .mat-expansion-panel-header:hover, .list-filter .mat-expansion-panel-header.mat-expanded {
  background: #eee !important;
}

.list-filter .mat-expansion-indicator::after {
  color: #ccc !important;
}

.list-filter .mat-expansion-panel-header span.mat-content {
  align-items: center;
  justify-content: space-between;
  padding-right: 0.5rem;
}

.list-filter .mat-expansion-panel-body {
  position: absolute;
  top: 0;
  right: 100%;
  width: 20rem;
  z-index: 10;
  background: #fff;
  /** box-shadow: 1px 1px 5px 0 #ddd, -1px 1px 5px 0 #ddd; */
  padding: .5em;
  border-right: solid 3px #4583FE;
  background: #f5f5f5;
  color: #616167;
  height: 100%;
}

/**.list-filter .mat-expansion-panel-body::after {/**content: ""; position: absolute; top: 28%; right: -18px; border-width: 8px; border-style: solid; 
border-color: transparent transparent transparent #4583FE; */


.list-filter .mat-expanded .mat-expansion-panel-header {
  position: relative;
}

.list-filter .mat-expanded .mat-expansion-panel-header::after {
  content: "";
  position: absolute;
  top: 15px;
  left: -21px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent #4583FE;
}

.list-filter .mat-expansion-panel-spacing {
  margin: 0;
}

.list-filter .expansion-panel-wrapper {
  /** height: 22.6rem; overflow: hidden; */
  height: 100%;
}

.list-filter .mat-checkbox-frame {
  border-color: #b1b1b1 !important;
  border-radius: 5px !important;
  background: #fff;
}

.list-filter .mat-checkbox-checked.mat-accent .mat-checkbox-background, .list-filter .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #d31144 !important;
  border-radius: 5px !important;
}

.project-list-filter .mat-expansion-panel-body {
  width: 28rem!important;
}

.project-list-filter .project-list-action.list-actions[_ngcontent-c14] {
  width: 371px!important;
}

/*************  Account Search Dialog    **************/

.cdk-overlay-pane.custom-dialogbox .mat-dialog-container {
  padding: 0px!important;
  border-radius: 0.3rem;
  max-height: 80vh
}

.cdk-overlay-pane.custom-dialogbox .mat-dialog-container .account-search-dialog {
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
}

.account-search-dialog {
  padding: 2rem;
  background: #fff;
  width: 45rem;
  min-height: 25rem;
}

.account-search-dialog h5 {
  font-size: 1rem;
  font-weight: normal;
  padding-left: 0;
  margin-bottom: 1rem;
}

.account-search-dialog .close-button {
  color: #d31144;
  font-size: .75rem;
  text-transform: uppercase;
  position: relative;
  margin-right: 1rem;
  cursor: pointer;
}

.account-search-dialog .close-button a {
  color: #d31144;
}

.account-search-dialog .close-button i {
  position: absolute;
  right: -.3rem;
  bottom: -1.3rem;
}

.account-search-dialog .search-box {
  width: 100%;
  margin: 0 auto;
  padding: .3rem .5rem;
  background: #fff;
  color: #616167;
  border: solid 1px rgb(97, 97, 103, 0.5);
  border-radius: 50px;
  margin: .5rem 0 1.5rem;
}

.account-search-dialog .search-box input {
  width: 92% !important;
  vertical-align: middle;
  display: inline-block;
  float: none;
  padding-left: 1rem;
}

.account-search-dialog .search-box a {
  display: inline-block;
  vertical-align: middle;
}

.account-search-dialog .search-box .search-icon {
  width: 25px;
  display: inline-block;
}

.account-search-dialog .sparks-table {
  padding: 0;
  margin: .5rem 0;
}

.account-search-dialog .sparks-table .mat-row {
  box-shadow: none;
  margin-bottom: 0;
  border-bottom: solid 1px #eee;
  min-height: 2rem;
  cursor: pointer;
}

.account-search-dialog .sparks-table .mat-row:hover {
  background: #fff;
}

.account-search-dialog .sparks-table .mat-header-row {
  background: #eefbff;
}

.account-search-dialog .no-account-text {
  text-align: center;
  margin-top: 3.5rem;
}

.account-search-dialog .no-account-text .mat-raised-button {
  background: #4583FE;
  color: #fff;
  margin-left: 1rem;
}

.account-search-dialog .no-account-text .mat-raised-button a {
  color: #fff;
}

.account-search-auto.mat-autocomplete-panel .mat-option {
  border-top: solid 1px #eee;
  height: 2.8rem !important;
}

.account-search-auto.mat-autocomplete-panel {
  /** box-shadow: none !important; margin-left: .6rem; margin-top: 0.8rem; margin-right: -2.6rem; */
}

.account-search-auto.text-wrap.mat-autocomplete-panel .mat-option {
  height: auto !important;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  white-space: normal;
  line-height: normal;
}

.wrapped-content-dropdown {}

.account-search-auto.mat-autocomplete-panel.wrapped-content-dropdown .wrapped-content-option.mat-option {
  height: auto !important;
}

.mat-autocomplete-panel.wrapped-content-dropdown .wrapped-content-option .mat-option-text {
  display: inline-flex;
  flex-grow: unset;
  overflow: visible;
  text-overflow: initial;
  width: 100%;
  word-break: break-all;
  white-space: normal;
  line-height: normal;
  min-height: 42px;
  align-items: center;
  padding: 7px 0px;
}

/*************  Add Term Dialog    **************/

.add-term-dialog {
  padding: 1rem 2rem;
  width: 35rem;
  min-height: 17rem;
  height: 17rem;
  margin-bottom: 0;
}

.add-term-dialog h4 {
  font-size: 1.1rem;
  margin-bottom: .5rem;
}

.add-term-dialog .icon-section {
  margin-bottom: 0;
  margin-top: 5rem;
}

/************** Final Invoice Page Design CSS And DEPOSIT INVOICE PAGE DESIGN *************/

.right-sec-table-row-content-right .deposit-total {
  text-align: right;
}

.right-sec-table-row-content-right .deposit-total .mat-input-wrapper.mat-form-field-wrapper {
  width: 90%!important;
  margin-left: 10%;
  margin-right: 0;
}

.component-accordian-table-cls.deposit-invoice-table-cls .doc-ckeditor-wrapper, .component-accordian-table-cls.final-invoice-table-cls .doc-ckeditor-wrapper, .component-accordian-table-cls .estimate-table-cls .doc-ckeditor-wrapper {
  padding-bottom: 1.25rem;
}

.component-accordian-table-cls.deposit-invoice-table-cls .cke_chrome, .component-accordian-table-cls.final-invoice-table-cls .cke_chrome, .component-accordian-table-cls .estimate-table-cls .cke_chrome {
  border-left: none;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid rgba(0, 0, 0, .42);
}

.component-accordian-table-cls.final-invoice-table-cls .mat-cell:nth-child(5) input.mat-input-element, .component-accordian-table-cls.final-invoice-table-cls .mat-cell:nth-child(6) input.mat-input-element {
  text-align: right;
}

.component-accordian-table-cls.deposit-invoice-table-cls .mat-cell:nth-child(3) input.mat-input-element, .component-accordian-table-cls.deposit-invoice-table-cls .mat-cell:nth-child(4) input.mat-input-element {
  text-align: right;
}

.component-accordian-table-cls.deposit-invoice-table-cls .cke_contents.cke_reset, .component-accordian-table-cls.final-invoice-table-cls .cke_contents.cke_reset, .component-accordian-table-cls .estimate-table-cls .cke_contents.cke_reset {
  max-height: 4rem;
  padding-top: 1rem;
}

.component-accordian-table-cls.deposit-invoice-table-cls .cke_contents.cke_reset, .component-accordian-table-cls.final-invoice-table-cls .cke_contents.cke_reset {
  max-height: auto;
}

/*.component-accordian-table-cls.final-invoice-table-cls .mat-cell:nth-child(1) .cke_chrome,
.component-accordian-table-cls.final-invoice-table-cls .mat-cell:nth-child(2) .cke_chrome,
.component-accordian-table-cls.deposit-invoice-table-cls .mat-cell:nth-child(1) .cke_chrome,
.component-accordian-table-cls.deposit-invoice-table-cls .mat-cell:nth-child(2) .cke_chrome{border-left:none; border-top:none; border-right:none; border-bottom:1px solid #d1d1d1;}*/

.component-accordian-table-cls.final-invoice-table-cls .mat-cell:nth-child(1) .cke_inner, .component-accordian-table-cls.final-invoice-table-cls .mat-cell:nth-child(2) .cke_inner, .component-accordian-table-cls.deposit-invoice-table-cls .mat-cell:nth-child(1) .cke_inner, .component-accordian-table-cls.deposit-invoice-table-cls .mat-cell:nth-child(2) .cke_inner, .component-accordian-table-cls .estimate-table-cls .cke_inner {
  background: none;
}

.component-accordian-table-cls.final-invoice-table-cls .mat-cell:nth-child(1) .cke_wysiwyg_frame, .component-accordian-table-cls.final-invoice-table-cls .mat-cell:nth-child(1) .cke_wysiwyg_div, .component-accordian-table-cls.final-invoice-table-cls .mat-cell.mat-column-description .cke_wysiwyg_frame, .component-accordian-table-cls.final-invoice-table-cls .mat-cell.mat-column-description .cke_wysiwyg_div, .component-accordian-table-cls.deposit-invoice-table-cls .mat-cell:nth-child(1) .cke_wysiwyg_frame, .component-accordian-table-cls.deposit-invoice-table-cls .mat-cell:nth-child(2) .cke_wysiwyg_frame, .component-accordian-table-cls.deposit-invoice-table-cls .mat-cell:nth-child(1) .cke_wysiwyg_div, .component-accordian-table-cls.deposit-invoice-table-cls .mat-cell:nth-child(2) .cke_wysiwyg_div, .component-accordian-table-cls .estimate-table-cls .cke_wysiwyg_div, .component-accordian-table-cls .estimate-table-cls .cke_wysiwyg_frame {
  background: none;
}

.component-accordian-table-cls .estimate-table-cls .cke_wysiwyg_div {
  padding: 0px;
}

.component-accordian-table-cls .estimate-table-cls .mat-cell:nth-child(3) .mat-form-field-infix {
  padding-bottom: 2.7rem;
}

.component-accordian-table-cls.final-invoice-table-cls .mat-cell:nth-child(1) .mat-error {
  left: 4px;
  bottom: 0px;
}

.component-accordian-table-cls.final-invoice-table-cls .mat-header-cell:nth-child(6), .component-accordian-table-cls.deposit-invoice-table-cls .mat-header-cell:nth-child(4), .component-accordian-table-cls.purchase-ordr-page-component .mat-header-cell:nth-child(7) {
  position: relative;
  pointer-events: auto;
}

.component-accordian-table-cls.final-invoice-table-cls .cke_wysiwyg_div, .component-accordian-table-cls.deposit-invoice-table-cls .cke_wysiwyg_div {
  padding: 0px;
}

.component-accordian-table-cls.final-invoice-table-cls .mat-cell:nth-child(1) .cke_contents.cke_reset, .component-accordian-table-cls.final-invoice-table-cls .mat-cell:nth-child(2) .cke_contents.cke_reset, .component-accordian-table-cls.deposit-invoice-table-cls .mat-cell:nth-child(1) .cke_contents.cke_reset, .component-accordian-table-cls.deposit-invoice-table-cls .mat-cell:nth-child(2) .cke_contents.cke_reset {
  max-height: 4.25rem;
  padding-top: 1rem;
}

.component-accordian-table-cls.final-invoice-table-cls .mat-cell:nth-child(1) span.ckeditor-placeholder, .component-accordian-table-cls.final-invoice-table-cls .mat-cell:nth-child(2) span.ckeditor-placeholder {
  top: 0;
  transform: none;
  padding-top: 1.36rem;
  color: #a9a9a9;
}

/* .left-right-padding-cls.left-sec-title-cls{ padding: 0rem 0.55rem 0rem 0rem!important; width: 80%!important;}

.section-deletion-btn{width: 5%!important; text-align: center!important; padding-right: 0%!important;} */

.title-box {
  display: flex;
  padding: 0 1.3rem;
}

.title-box .left-sec-title-cls {
  flex: 1;
}

.title-box .section-deletion-btn {
  display: flex;
  align-items: center;
  margin: 0 0 0 1.785rem;
}

.title-box .section-deletion-btn img {
  width: 1.428rem;
  height: 1.428rem;
  display: block;
}

.add-component-box .add-component-btn, .title-box .add-component-btn {
  display: flex;
  align-items: center;
  margin: auto;
}

.add-component-box .add-component-btn span, .title-box .add-component-btn span {
  display: block;
  cursor: pointer;
  line-height: 1.428rem;
  color: #4583FE;
}

.add-component-box .add-component-btn img, .title-box .add-component-btn img {
  width: 1.428rem;
  height: 1.428rem;
  vertical-align: middle;
}

.action-button {
  display: inline-block;
  margin-left: 1rem;
}

.action-button:first-child {
  margin-left: 0;
}

.action-button img {
  width: 15px;
  height: 15px;
  display: block;
}

.description-label {
  color: rgba(97, 97, 103, 0.65);
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  text-transform: uppercase
}

.description-label .action-button {
  height: 12px;
  width: 12px;
  margin-left: 10px;
  opacity: 0;
}

.description-content p, .description-content ul, .description-content ol {
  margin-bottom: 0.75rem;
}

.description-content ul {
  list-style-type: circle;
  padding-left: 25px;
}

.description-content ol {
  list-style-type: decimal;
  padding-left: 25px;
}

.description-content li {
  margin-bottom: 0.25rem;
  list-style-type: inherit;
}

.add-component-box {
  display: flex;
  align-items: center;
  text-align: center;
  padding: 7rem 0 4rem 0;
}

.component-accordian-table-cls.final-invoice-table-cls .cke_wysiwyg_frame, .component-accordian-table-cls.deposit-invoice-table-cls .cke_wysiwyg_div, .component-accordian-table-cls.final-invoice-table-cls .mat-table, .component-accordian-table-cls.deposit-invoice-table-cls .mat-table, .component-accordian-table-cls.final-invoice-table-cls .cke_inner, .component-accordian-table-cls.deposit-invoice-table-cls .cke_inner {
  background: none;
}

/*.final-invoice-page-dynamic-component-panel .component-accordian-table-cls .mat-cell:nth-child(1){border-bottom: solid 1px rgba(0,0,0,.12); border-left: none; border-right: none; border-top: none;}*/

/************** WORK ORDER Page Design CSS *************/

.left-component-content-cls.wordk-order-stepper-content-table-container .mat-cell:nth-child(4) .cke_inner, .left-component-content-cls.wordk-order-stepper-content-table-container .mat-cell:nth-child(4) .cke_wysiwyg_div {
  background: none;
}

.left-component-content-cls.wordk-order-stepper-content-table-container .mat-cell:nth-child(4) .cke_chrome {
  border-left: none;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid #d1d1d1;
}

.left-component-content-cls.wordk-order-stepper-content-table-container .mat-cell:nth-child(4) .cke_contents.cke_reset {
  max-height: 3.8rem;
}

.left-component-content-cls.wordk-order-stepper-content-table-container .mat-header-row {
  background: #eefbff;
  margin-top: 0rem;
}

/************** Change Order Page Design CSS *************/

.component-accordian-table-cls.sales-proposal-and-change-order-page-component .mat-cell:nth-child(4) input.mat-input-element {
  text-align: right;
}

.component-accordian-table-cls.sales-proposal-and-change-order-page-component .mat-cell:nth-child(2) .cke_inner, .component-accordian-table-cls.sales-proposal-and-change-order-page-component .mat-cell:nth-child(2) .cke_wysiwyg_div, .component-accordian-table-cls.sales-proposal-and-change-order-page-component .mat-cell:nth-child(3) .cke_inner, .component-accordian-table-cls.sales-proposal-and-change-order-page-component .mat-cell:nth-child(3) .cke_wysiwyg_div {
  background: none;
}

.component-accordian-table-cls.sales-proposal-and-change-order-page-component .mat-cell:nth-child(2) .cke_chrome, .component-accordian-table-cls.sales-proposal-and-change-order-page-component .mat-cell:nth-child(3) .cke_chrome {
  border-left: none;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid rgba(0, 0, 0, .42);
}

.component-accordian-table-cls.sales-proposal-and-change-order-page-component .mat-cell:nth-child(2) .cke_contents.cke_reset, .component-accordian-table-cls.sales-proposal-and-change-order-page-component .mat-cell:nth-child(3) .cke_contents.cke_reset {
  max-height: 4rem;
  padding-top: 1rem;
}

.component-accordian-table-cls.sales-proposal-and-change-order-page-component .doc-ckeditor .cke_focus .cke_top {
  top: -40px;
}

.right-component-content-cls {
  padding: 1rem 1rem 1rem;
}

.component-accordian-table-cls.sales-proposal-and-change-order-page-component .mat-form-field-infix, .component-accordian-table-cls.sales-proposal-and-change-order-page-component .mat-form-field-infix {
  padding-bottom: 2.7rem;
}

.component-accordian-table-cls.sales-proposal-and-change-order-page-component .mat-table, .component-accordian-table-cls.sales-proposal-and-change-order-page-component .cke_inner, .component-accordian-table-cls.sales-proposal-and-change-order-page-component .cke_wysiwyg_div {
  background: none;
}

.component-accordian-table-cls.sales-proposal-and-change-order-page-component .mat-cell.mat-column-description .cke_chrome {
  border-left: none;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid rgba(0, 0, 0, .42);
}

.component-accordian-table-cls.sales-proposal-and-change-order-page-component .cke_contents.cke_reset {
  max-height: auto;
}

.component-accordian-table-cls.sales-proposal-and-change-order-page-component .doc-ckeditor-wrapper {
  padding-bottom: 1.25rem;
}

.component-accordian-table-cls.sales-proposal-and-change-order-page-component .mat-cell.mat-column-description .cke_contents.cke_reset {
  max-height: 4rem;
  padding-top: 1rem;
}

.component-accordian-table-cls.sales-proposal-and-change-order-page-component .mat-cell:nth-child(2) .cke_wysiwyg_div, .component-accordian-table-cls.sales-proposal-and-change-order-page-component .mat-cell.mat-column-description .cke_wysiwyg_div {
  padding: 0px;
}

/************** Sales Proposal Page Design CSS *************/

.row.title-n-button-sec {
  width: 100%;
  margin: 0rem 0rem 1rem 0rem;
  box-sizing: border-box;
  background: #f5f5f5;
  /** padding:0rem; */
}

.page-title-n-button-group-sec {
  display: flex;
}

.icon-n-title-sec {
  width: 50%;
  box-sizing: border-box;
}

.btn-group-sec {
  width: 50%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-end;
}

span.page-heading-icon {
  display: inline-block;
}

.sales-proposal-page-accordian .mat-content {
  order: 2;
  padding-left: 1rem;
  /* font-size: 1.4rem; in EST */
  font-size: 20px;
  line-height: 2.7rem;
}

.sales-proposal-page-accordian .mat-expansion-panel-header {
  order: 1;
  /* box-shadow: 0 2px 3px rgba(55, 117, 162, 0.2) in EST */
  box-shadow: 0px 3px 5px #0000001A
}

.sales-proposal-page-accordian .mat-expansion-indicator::after {
  color: #616167;
  padding: 3px;
  /* margin-top: -9px; in EST */
  margin-top: -6px;
}

.sales-proposal-page-accordian .mat-expansion-panel:not([class*=mat-elevation-z]) {
  box-shadow: none;
}

.sales-proposal-page-accordian .mat-expansion-panel {
  float: left;
  width: 100%;
}

.mat-form-field-required-marker {
  color: #f44336;
}

.mat-form-field {
  width: 100%;
}

.sales-proposal-page-accordian .mat-expansion-panel-body {
  padding: 20px 0px 6px!important;
}

.sales-proposal-page-accordian .mat-expansion-panel, .sales-proposal-page-accordian .mat-expansion-panel-spacing {
  margin: 4px 0px!important;
}

/* .sales-proposal-page-accordian .mat-header-row{padding: 0rem 0.75rem; border-bottom: transparent;}
.sales-proposal-page-accordian .mat-row{padding: 2rem 0.75rem 1rem; background: #fff;}
.sales-proposal-page-accordian .mat-row:last-child { border-bottom: none;}  */

/*.input-width-cls.float-l .custom-title-style span.mat-form-field-label-wrapper{overflow: visible;}*/

.custom-title-style.mat-focused .mat-form-field-infix, .custom-title-style.ng-valid .mat-form-field-infix, .custom-title-style.mat-form-field-disabled .mat-form-field-infix {
  position: inherit!important;
}

.custom-title-style.mat-form-field-should-float.mat-focused .mat-form-field-label.mat-input-placeholder.mat-form-field-placeholder, .custom-title-style.ng-valid .mat-form-field-label.mat-input-placeholder.mat-form-field-placeholder, .custom-title-style.mat-form-field-disabled .mat-form-field-label.mat-input-placeholder.mat-form-field-placeholder {
  position: absolute;
  left: 0rem;
  top: 2.0rem;
}

.custom-title-style.mat-form-field-disabled .mat-form-field-label.mat-empty.mat-input-placeholder.mat-form-field-placeholder, .custom-title-style.ng-valid .mat-form-field-label.mat-empty.mat-input-placeholder.mat-form-field-placeholder {
  left: 1.5rem;
  top: 2.17rem;
}

.custom-title-style.mat-form-field-should-float.mat-focused .mat-form-field-label.mat-empty.mat-input-placeholder.mat-form-field-placeholder {
  left: 0rem;
  top: 2rem;
}

.custom-title-style.mat-form-field-disabled div.mat-input-prefix.mat-form-field-prefix span {
  color: rgba(0, 0, 0, .65);
}

.sales-proposal-page-accordian .mat-expansion-panel-header {
  max-height: 3.5rem!important;
}

.component-accordian-table-cls .mat-cell {
  position: relative;
  overflow: initial;
}

.component-accordian-table-cls .mat-cell .mat-error {
  position: absolute;
  left: 0;
  bottom: -5px;
  line-height: 1;
  font-size: 75%;
}

/*************    Message Box     ***********/

.eror-message {
  color: #DD5676;
  border: solid 2px #DD5676;
  width: 35rem;
}

/*.eror-message .close-button {background: #DD5676; color: rgba(255,255,255,.7);}*/

.success-message {
  color: #0FA7B2;
  border: solid 2px #0FA7B2;
  width: 37rem;
}

.success-message .close-button {
  /** background: #0FA7B2; */
  color: rgba(255, 255, 255, .7);
}

.message-box {
  padding: 2rem 3rem;
  border-radius: 0.3rem;
  min-height: 10.5rem;
}

.message-box .message-section {
  text-align: right;
  width: calc(100% - 10rem);
  float: right;
}

.message-box .margin-right-1 {
  margin-right: 15px;
  display: inline-block;
  width: calc(100% - 57px);
  vertical-align: middle;
  text-align: right;
  font-family: roboto-regular;
  font-weight: 400;
}

.message-box .error-wrapper {
  display: flex;
  align-items: center;
  letter-spacing: 1px;
}

.message-box .error-wrapper .mat-icon-button {
  cursor: default !important;
  display: inline-block;
  vertical-align: middle;
}

.message-box .error-heading {
  text-transform: uppercase;
  font-family: 'Roboto-bold';
  font-size: 1.7rem;
  padding-right: 1rem;
  letter-spacing: 2px;
  float: left;
  width: 10rem;
  box-sizing: border-box;
}

/*.message-box .close-button {border-radius: 50%; font-size: 1.2rem; width: 2.5rem; height: 2.5rem; padding: .4rem;}*/

.message-box .close-text-wrapper {
  margin-top: 1.5rem;
  padding-right: .7rem;
  display: inline-block;
  width: 100%;
}

.message-box .close-text {
  position: relative;
  text-transform: uppercase;
  padding-left: 2rem;
  font-family: roboto-medium;
}

.message-box .close-text a {
  cursor: pointer;
}

.message-box .close-text i {
  position: absolute;
  right: -.25rem;
  bottom: -1.25rem;
}

span.cross-icon-in-error-popup {
  width: 37px;
  height: 37px;
  line-height: 37px;
  background: #ee4e74;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

span.check-icon-in-success-popup {
  width: 37px;
  height: 37px;
  line-height: 37px;
  background: #00adbb;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

span.cross-icon-in-error-popup i.material-icons.close-button {
  color: #fff;
}

a.alert-popup-btn-cls {
  position: relative;
}

a.alert-popup-btn-cls:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  height: 2px;
  width: 20px;
  background: #ee4e73a1;
}

.success-message a.alert-popup-btn-cls:after {
  background: #0FA7B2;
}

/************   Loader Styles    *************/

.spinner-three-bounce {
  position: fixed !important;
}

.loader-relative {
  width: 100%;
  height: 100%;
}

.backdrop {
  position: fixed !important;
}

.filter-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  /* z-index: 15; in EST*/
  z-index: 999;
}

/********** Custom errors for datepicker ************/

.custom-error-sec {
  position: relative;
}

.custom-error-cls {
  position: absolute;
  top: 3.1rem;
  left: 0rem;
  font-size: 75%;
}

/************    Animations   **************/

.animated {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/*****  ZoomIn    **********/

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

/****    FadeIn   ******/

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}

/******************** Custom component styles  ****************/

.project-document-table.sparks-table .mat-header-cell .mat-sort-header-container .mat-sort-header-button {
  color: #616167 !important;
}

.btn-list-container {
  position: relative;
}

/********************* PROJECT and ACCOUNT PAGE CSS *************/

.icon-n-title-sec-full-width {
  width: 100%;
  box-sizing: border-box;
}

/* temp fix for scroll */

.ckeditor-wrapper.desc-ckeditor .cke_contents.cke_reset {
  max-height: 10rem
}

/* fix for description ckeditor */

.cdk-global-scrollblock {
  top: 0 !important;
  left: 0 !important;
}

/****  Inline CKEditor styles for document components  ******/

span.ckeditor-placeholder {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}

.doc-ckeditor .cke_top {
  display: none;
  border: none;
  box-shadow: none;
  background: #fff;
  padding: 0px;
}

.doc-ckeditor .cke_focus .cke_top {
  display: inline-block;
  position: absolute;
  left: 0;
  right: 0;
  top: -70px;
  width: 100%;
  max-width: 30rem;
}

.ckeditor-wrapper .cke_bottom, .doc-ckeditor .cke_bottom {
  display: none;
}

.cke_contents.cke_reset {
  max-height: 3.3rem;
}

.term-condition-content-sec .cke_contents.cke_reset, .stepper-right-section .cke_contents.cke_reset {
  max-height: 6.8rem;
}

.mat-cell body {
  margin: 0px;
}

/************** Email Template CSS ******/

.email-con-sec .cke_contents.cke_reset {
  max-height: 15rem;
}

/******************WORK ORDER CSS ************************/

.mat-chip-list-wrapper {
  max-height: 6.5rem;
  overflow: auto;
  padding-left: 1rem;
}

.mat-chip:not(.mat-basic-chip) {
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  display: inline-flex;
  padding: 6px 12px!important;
  border-radius: 25px!important;
  align-items: center;
  cursor: default!important;
  margin: 3px!important;
  font-size: 0.9rem;
  color: #616167!important;
  background-color: #f5f5f5!important;
}

.work-order-stepper-sec {
  float: left;
  width: 100%;
  box-sizing: border-box;
}

.work-order-stepper-sec .mat-stepper-horizontal {
  float: left;
  width: 100%;
  box-sizing: border-box;
}

.work-order-stepper-sec .mat-horizontal-stepper-header-container {
  display: block;
  float: left;
  width: 200px;
  box-sizing: border-box;
  /* margin-right: 1%; */
  margin-top: 0.6rem;
  padding-right: 1.5rem;
}

.work-order-stepper-sec .mat-horizontal-content-container {
  padding: 0rem;
  width: calc(100% - 200px);
  float: right;
  padding: 0.5rem;
  box-sizing: border-box;
}

.work-order-stepper-sec .mat-stepper-horizontal-line {
  border-top-width: 0px;
}

.work-order-stepper-sec .mat-step-header .mat-step-icon, .work-order-stepper-sec .mat-step-header .mat-step-icon-not-touched, .work-order-stepper-sec .mat-icon.material-icons.ng-star-inserted {
  display: none;
}

.work-order-stepper-sec .mat-step-label-active.mat-step-label-selected .mat-icon.material-icons.ng-star-inserted {
  display: inline-block;
  color: #4bb5ab;
  margin-left: 1rem;
}

.work-order-stepper-sec .mat-step-label.mat-step-label-active {
  width: 100%;
  justify-content: flex-end;
  display: inline-flex;
  align-content: center;
  padding: 1rem 1rem;
  color: #616167!important;
  font-size: 1.2rem;
  font-weight: 500;
}

.work-order-stepper-sec .mat-step-label.mat-step-label-active.mat-step-label-selected {
  box-shadow: 0 0px 10px 0.5px rgba(0, 0, 0, .1) !important;
  width: 100%;
  justify-content: flex-end;
  display: inline-flex;
  align-content: center;
  padding: 1rem 1rem;
  color: #6c96f1!important;
  font-size: 1.2rem;
}

.work-order-stepper-sec .mat-horizontal-stepper-header {
  display: inline-block;
  height: auto;
  overflow: hidden;
  align-items: center;
  padding: 0px;
  width: 100%;
}

.work-order-stepper-sec .mat-horizontal-stepper-header.cdk-focused, .work-order-stepper-sec .mat-horizontal-stepper-header .mat-step-label-selected {
  box-shadow: 0 0px 10px 0.5px rgba(0, 0, 0, .1) !important;
}

.work-order-stepper-sec .mat-horizontal-content-container .mat-horizontal-stepper-content {
  box-shadow: none !important;
  margin: 0rem;
  border: 1px solid #dedede;
}

.work-order-stepper-sec .mat-horizontal-content-container .sales-proposal-components-accordian-content-cls {
  box-shadow: none !important;
  margin: 0px;
  width: 100%;
  padding: 0;
}

/* .sales-proposal-page-accordian .left-component-content-cls.wordk-order-stepper-content-table-container .mat-row,
.sales-proposal-page-accordian .left-component-content-cls.wordk-order-stepper-content-table-container .mat-header-row{display:block; width:100%; float:left;}
.sales-proposal-page-accordian .left-component-content-cls.wordk-order-stepper-content-table-container .mat-cell:nth-child(6) .cke_chrome{border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: 1px solid #d1d1d1;}
.sales-proposal-page-accordian .left-component-content-cls.wordk-order-stepper-content-table-container .mat-cell:nth-child(6) .cke_contents.cke_reset{max-height:4.5rem;}

.sales-proposal-page-accordian .left-component-content-cls.wordk-order-stepper-content-table-container .mat-cell:nth-child(6) .cke_inner,
.sales-proposal-page-accordian .left-component-content-cls.wordk-order-stepper-content-table-container .mat-cell:nth-child(6) .cke_wysiwyg_div{background: none;} */

/*********************** Purchase Order Requisition **************************/

.component-accordian-table-cls.purchase-ordr-page-component .mat-cell:nth-child(2) .cke_chrome {
  border-left: none;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid #d1d1d1;
}

.component-accordian-table-cls.purchase-ordr-page-component .mat-cell:nth-child(2) .cke_contents.cke_reset {
  max-height: 4.5rem;
}

.component-accordian-table-cls.purchase-ordr-page-component .mat-cell:nth-child(2) .cke_inner, .component-accordian-table-cls.purchase-ordr-page-component .mat-cell:nth-child(2) .cke_wysiwyg_div {
  background: none;
}

.component-accordian-table-cls.purchase-ordr-page-component .mat-cell:nth-child(2) .cke_contents.cke_reset {
  max-height: 4rem;
  padding-top: 1rem;
}

.component-accordian-table-cls.purchase-ordr-page-component .mat-form-field-infix {
  padding-bottom: 2.7rem;
}

.component-accordian-table-cls.purchase-ordr-page-component .doc-ckeditor .cke_focus .cke_top {
  top: -60px;
}

.component-accordian-table-cls.purchase-ordr-page-component .mat-cell:nth-child(8) .doc-ckeditor-wrapper {
  padding-bottom: 1.25rem;
}

.component-accordian-table-cls.purchase-ordr-page-component .cke_chrome {
  border-left: none;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid rgba(0, 0, 0, .42);
}

.component-accordian-table-cls.purchase-ordr-page-component .cke_contents.cke_reset {
  max-height: 4rem;
  padding-top: 1rem;
}

.component-accordian-table-cls.purchase-ordr-page-component .mat-table, .component-accordian-table-cls.purchase-ordr-page-component .cke_wysiwyg_frame, .component-accordian-table-cls.purchase-ordr-page-component .cke_wysiwyg_div, .component-accordian-table-cls.purchase-ordr-page-component .cke_inner {
  background: none;
}

.component-accordian-table-cls.wishlist-class .mat-form-field-infix {
  padding: .4375em 0!important;
}

/***********************GAP REPORT ***********************/

.error-setting-cls {
  position: relative;
}

.error-setting-cls .mat-error {
  position: absolute;
  bottom: 0rem;
  left: 0.75rem;
}

/* .mat-datepicker-toggle { display: block;} */

.cus-calendar-img-sec.mat-icon {
  width: 1.3em!important;
  height: 1.3rem !important;
  line-height: 1.3rem !important;
  margin-bottom: 0.2rem;
}

.gap-report-page-cls {
  width: 100%;
  box-sizing: border-box;
}

.gap-report-page-cls .input-width-cls {
  width: 85%;
}

.gap-report-page-cls .input-width-100-cls {
  width: 100%;
}

.gap-report-page-cls .input-width-100-cls .mat-input-wrapper {
  width: 100% !important;
}

.position-relative {
  position: relative;
}

.select-all {
  position: absolute;
  top: 0;
  right: 0;
}

ul.inlucde-project-list {
  float: left;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1rem;
}

ul.inlucde-project-list li {
  margin: 0.5rem 0rem;
}

.gap-report-page-cls label.list-label {
  float: left;
  width: 100%;
  box-sizing: border-box;
  font-weight: 400;
  color: #616167;
  font-family: roboto-regular;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}

.gap-report-page-cls .mat-radio-button {
  display: inline-block;
  margin: 0.5rem 4rem 0.5rem 0rem;
}

.gap-report-page-cls .cust-chk-list {
  display: inline-flex;
  align-items: flex-end;
  width: 100%;
  height: 40px;
}

.gap-report-page-cls .mat-checkbox-layout .mat-checkbox-label, .gap-report-page-cls .mat-radio-label-content {
  color: #616167;
  font-size: 1rem;
  font-family: roboto-regular;
  font-weight: 400;
}

/********************* Sticky Section *********************************/

.title-n-button-sec.stickyMenu {
  /** position:sticky; top:4rem; */
  position: fixed;
  top: 58px;
  background: #f5f5f5;
  z-index: 11;
  /** box-shadow: 0px 4px 9px 0px rgba(0,0,0,.2); */
  padding-top: 0.8rem;
  padding-bottom: 0.6rem;
  transition: all 0.3s ease-in-out;
}

.title-n-button-sec.stickyMenu .user-summary-icon {
  width: 2.0rem;
  margin-right: 0.6rem;
  transition: all 0.3s ease-in-out;
}

.title-n-button-sec.stickyMenu span.page-heading-icon {
  float: left;
}

.title-n-button-sec.stickyMenu .page-heading {
  font-size: 1.3rem;
  transition: all 0.3s ease-in-out;
  float: left;
  padding-top: 0.4rem;
}

.title-n-button-sec.stickyMenu .mat-raised-button, .title-n-button-sec.stickyMenu .mat-button {
  min-width: 80px;
  line-height: 30px;
  transition: all 0.3s ease-in-out;
}

.title-n-button-sec.stickyMenu .user-summary-icon {
  box-shadow: 0px 3px 5px 2px rgba(26, 222, 204, 0.3);
  transition: all 0.3s ease-in-out;
}

/* .page-content-wrapper-globally-cls.stickyMenu, .sales-proposal-page-content-sec.stickyMenu { padding-top:8.17rem !important;} */

.inner-wrapper-sec.stickyMenu, .page-content-wrapper-globally-cls.stickyMenu, .sales-proposal-page-content-sec.stickyMenu {
  padding-top: 5.8rem !important;
}

/********************* MODAL POPUP *********************************/

.cdk-overlay-pane {
  max-width: 65vw!important;
  max-height: 80vh;
  /*margin-right: 30px; In EST */ 
  margin-right: 0px;
}

.cdk-overlay-pane.custom-dialogbox {
  max-width: 84vw!important; 
  max-height:80vh; 
  margin-right: 0px; 
}

.cdk-overlay-pane.export-custom-dialog {
  max-width: 83vw!important;
}

.cdk-overlay-pane.export-custom-dialog .mat-dialog-container {
  padding: 0px!important;
  border-radius: 0.3rem;
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
}

.add-component-popup {
  /** padding: 1rem 1.5rem; Work Order Issue */
  padding: 0rem;
  float: left;
  width: 100%;
  box-sizing: border-box;
}

.add-component-popup.sec-padding {
  padding: 0rem;
}

.add-component-popup .close-btn-sec {
  float: right;
}

.close-btn-sec .close-popup-btn {
  position: relative;
  color: #d31e49;
  padding: 0px;
  text-align: right;
  text-transform: uppercase;
  line-height: 2rem;
}

.add-component-popup .close-btn-sec .close-popup-btn {
  min-width: auto;
}

.close-btn-sec .close-popup-btn:after {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "";
  width: 20px;
  border-bottom: solid 2px #e46684;
}

.left-component-content-cls {
  float: left;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.add-component-popup .popup-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #616167;
  line-height: 1;
  float: left;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 0rem 1.5rem;
  letter-spacing: 1px;
}

.add-component-popup mat-header-row.mat-header-row {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eefbff;
}

.add-component-popup .component-accordian-table-cls {
  max-height: 35vh!important;
}

.add-component-popup .mat-table {
  background: transparent!important;
}

.add-component-popup .mat-header-row, .add-component-popup .mat-row {
  border-bottom-width: 0px;
}

.add-component-popup .add-component-link {
  float: right;
  box-sizing: border-box;
  font-size: 14px;
  line-height: inherit;
  font-weight: normal;
}

.add-component-popup .add-component-link a {
  display: inline-block;
  cursor: pointer;
  color: #4583FE;
}

.footer-btn-sec {
  float: left;
  width: 100%;
  box-sizing: border-box;
  text-align: right;
  padding: 0.5rem 0rem 0.5rem;
}

.add-component-popup .filteration-criteria-sec, .add-component-popup .component-tab-selection, .add-component-popup .component-selected-tab-content-cls, .add-component-popup .component-selected-tab-content-cls {
  float: left;
  width: 100%;
  box-sizing: border-box;
}

.add-component-popup .component-tab-selection {
  padding: 0.5rem 0rem;
}

.add-component-popup .component-selected-tab-content-cls {
  padding: 1rem 0rem 0.5rem;
}

.add-component-popup .component-tab-left {
  float: left;
  width: 30%;
  box-sizing: border-box;
  margin-right: 5%;
}

.add-component-popup .mat-radio-button {
  margin-right: 2rem;
}

.add-component-popup .mat-radio-button:last-child {
  margin-right: 0rem;
}

/********************* LOGIN PAGE START *********************************/

.login-page-sec {
  float: left;
  width: 100%;
  height: 100vh;
  padding: 0rem;
  margin: 0rem;
}

.left-login-page-sec {
  float: left;
  width: 60%;
  height: 100%;
  position: relative;
}

.left-sec-content-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 3;
  opacity: 0.3;
}

.left-login-page-sec .left-sec-content {
  display: flex;
  align-content: center;
  justify-content: center;
  height: 100%;
  flex-wrap: wrap;
  background: url('./../../../assets/images/login_banner_2.jpg') no-repeat 0 0;
  background-size: cover;
  padding-left: 15%;
}

span.main-heading {
  font-size: 7rem;
  line-height: 1;
  font-weight: 300;
  color: #ffffff;
  z-index: 4;
  width: 100%;
  padding: 1rem 0rem;
}

span.sub-heading {
  font-size: 2rem;
  line-height: 1;
  font-weight: 300;
  color: #ffffff;
  z-index: 4;
  width: 100%;
  padding: 1rem 0rem
}

.right-login-page-sec {
  float: right;
  width: 40%;
  height: 100%;
}

.right-login-page-sec .right-sec-content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  height: 100%;
}

.right-sec-logo {
  margin-bottom: 2rem;
}

.right-sec-logo img {
  max-width: 300px;
}

/********************* LOGIN PAGE END *********************************/

/*************************** DASHBOARD ***********************************/

.dashboard-first-row-sec .mat-header-row {
  border-bottom-width: 0px;
  text-transform: uppercase;
  font-weight: 500;
}

.dashboard-first-row-sec .mat-row {
  display: flex;
  align-items: center;
  padding: 0.4rem 24px;
  box-sizing: border-box;
  box-shadow: none;
  margin-bottom: 7px;
  border-radius: 0.3rem;
  background: #f8f8f8;
  border: 1px solid #dedede;
}

.dashboard-first-row-sec .mat-row:hover {
  background: rgba(248, 248, 248, 0.35);
  cursor: pointer
}

.dashboard-right-content .mat-table, .dashboard-left-content .mat-table {
  height: 29rem;
  overflow-y: auto;
  padding: 0.75rem;
}

.dashboard-right-content .mat-table a, .dashboard-left-content .mat-table a {
  color: #4583fe;
  font-weight: 500;
}

.dashboard-box-sec .mat-mini-fab .mat-button-wrapper {
  padding: 0px;
}

.dashboard-first-row-sec .no-record-msg-alert {
  float: left;
  width: 100%;
  box-sizing: border-box;
  height: 29rem;
  padding: 0.75rem 0.75rem;
}

.dashboard-second-row-sec .no-record-msg-alert {
  float: left;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.75rem;
}

.dashboard-first-row-sec .no-record-msg-alert p {
  text-align: center;
  font-weight: 500;
  margin-top: 1rem;
  font-size: 1.3rem;
}

.dashboard-first-row-sec .no-record-msg-alert p img {
  margin-top: 3rem;
}

.dashboard-second-row-sec .no-record-msg-alert p {
  text-align: center;
  font-weight: 500;
  font-size: 1.3rem;
}

.dashboard-first-row-sec h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #616167;
  margin: 0rem 0.75rem;
  width: calc(100% - 1.5rem);
}

.dashboard-second-row-sec h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #616167;
  margin: 0rem 0rem;
  width: 100%;
}

.dashboard-search-sec .search-box {
  border: solid 1px transparent;
  min-width: 2rem;
  padding: 0px;
}

.dashboard-search-sec .search-box.white-bg {
  border: solid 1px #ddd;
  min-width: 2rem;
  padding: 5px 10px;
}

.dashboard-search-sec .search-box.white-bg input.show-input {
  width: 6.5rem !important;
  text-align: left;
}

.dashboard-search-sec>.mat-list-item-content {
  padding: 0px!important;
}

.mat-autocomplete-panel.dashboard-search-list-sec {
  min-width: 170px!important;
  max-height: 290px!important;
}

/* .mat-option.list-see-more{color: #4584ff;} */

span.list-see-more {
  color: #4584ff;
  padding: 0 16px;
  display: flex;
  box-sizing: border-box;
  line-height: 48px;
  cursor: pointer;
}

/*************************** ADD PROJECT STEPPER ***********************************/

.sparks-stepper.add-project-stepper {
  float: left;
  width: 100%;
  box-sizing: border-box;
}

.sparks-stepper.add-project-stepper .mat-stepper-horizontal {
  float: left;
  width: 100%;
  box-sizing: border-box;
  background: none;
}

.sparks-stepper.add-project-stepper .mat-horizontal-stepper-header-container {
  width: 300px;
  float: left;
  box-sizing: border-box;
  padding-right: 1.5rem;
  display: inline-block;
  position: sticky;
  top: 7.8rem;
}

.sparks-stepper.add-project-stepper .mat-horizontal-content-container {
  width: calc(100% - 300px);
  float: right;
  padding: 0;
  box-sizing: border-box;
  margin-top: -4rem;
  /** Will removed after button sepration */
}

.sparks-stepper.add-project-stepper .mat-step-header {
  width: 100%;
  /** padding: 1rem 3rem; */
  padding: 1rem 3rem 1rem 1rem;
  box-sizing: border-box;
  height: auto;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease-in-out;
}

.mat-step-header.cdk-keyboard-focused, .mat-step-header.cdk-program-focused, .mat-step-header:hover {
  border-radius: 0.3rem;
}

.sparks-stepper.add-project-stepper .mat-stepper-horizontal-line {
  display: none;
}

.sparks-stepper.add-project-stepper .mat-step-header[aria-selected="true"] {
  background: #fff;
  box-shadow: 0 0px 10px 0.5px rgba(0, 0, 0, .1);
}

.sparks-stepper.add-project-stepper .mat-step-header.green-tick {
  background: url('../../images/icons/check-mark.png') no-repeat right 0.5rem center;
  background-size: 30px 30px;
}

.sparks-stepper.add-project-stepper .mat-step-header.green-tick[aria-selected="true"] {
  background: #fff url('../../images/icons/check-mark.png') no-repeat right 0.5rem center;
  background-size: 30px 30px;
  box-shadow: 0 0px 10px 0.5px rgba(0, 0, 0, .1);
}

.sparks-stepper.add-project-stepper .mat-step-header .mat-step-label {
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 400;
  color: #616167;
  font-family: roboto-medium;
}

.sparks-stepper.add-project-stepper .mat-step-header .mat-step-label.mat-step-label-selected {
  color: #4583fe;
}

div.on-edit-user-page-custom-design {
  float: left;
  width: 100%;
  z-index: 999;
  position: relative;
  background: rgb(238, 251, 255);
  margin-bottom: 2rem;
  box-sizing: border-box;
  padding: 0rem 0.75rem;
}

div.on-edit-user-page-custom-design h1 {
  padding: 30px 24px;
  position: relative;
  float: left;
  width: 100%;
}

div.on-edit-user-page-custom-design h1 span.on-edit-user-page-custom-title {
  float: left;
  color: #4f5959;
  font-size: 1.7rem;
  line-height: 1;
  font-weight: 400;
  font-family: roboto-medium;
}

div.on-edit-user-page-custom-design h1 span.right.header-right-icon {
  width: 4.5rem;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
}

div.on-edit-user-page-custom-design h1 span.right.header-right-icon img {
  float: left;
  max-width: 100%;
}

/************* VIEW PROJECT CARD VIEW ****************/

.sparks-table.project-document-table .mat-header-cell:nth-child(1), .sparks-table.project-document-table .mat-cell:nth-child(1) {
  max-width: 28%;
  margin-left: 1%;
  margin-right: 1%;
  padding: 0px;
}

.sparks-table.project-document-table .mat-header-cell:nth-child(2), .sparks-table.project-document-table .mat-cell:nth-child(2) {
  max-width: 18%;
  margin-left: 1%;
  margin-right: 1%;
  padding: 0px;
}

.sparks-table.project-document-table .mat-header-cell:nth-child(3), .sparks-table.project-document-table .mat-cell:nth-child(3) {
  max-width: 18%;
  margin-left: 1%;
  margin-right: 1%;
  padding: 0px;
}

.sparks-table.project-document-table .mat-header-cell:nth-child(4), .sparks-table.project-document-table .mat-cell:nth-child(4) {
  max-width: 18%;
  margin-left: 1%;
  margin-right: 1%;
  padding: 0px;
}

.sparks-table.project-document-table .mat-header-cell:nth-child(5), .sparks-table.project-document-table .mat-cell:nth-child(5) {
  max-width: 9%;
  margin-left: 1%;
  margin-right: 0%;
  padding: 0px;
}

.all-card-container {
  float: left;
  width: calc(100% + 3rem);
  box-sizing: border-box;
  background: transparent;
  margin-bottom: 3rem;
}

ul.view-card-list-sec {
  float: left;
  width: 100%;
  box-sizing: border-box;
  margin-top: 1rem;
  margin-left: -1.5rem;
}

ul.view-card-list-sec li {
  float: left;
  width: 33.333%;
  box-sizing: border-box;
  padding: 1.5rem;
}

/*ul.view-card-list-sec li:nth-child(3n){padding:0rem 0rem 3rem 0rem;}*/

.card-view-cls {
  float: left;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 0.4rem;
  padding: 2rem 0rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

.card-top-row-sec {
  float: left;
  width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: 0rem;
  /** padding: 0rem 2rem; */
}

.card-top-row-label-sec {
  float: left;
  width: 70%;
  box-sizing: border-box;
  text-align: left;
  padding-left: 2rem;
}

.card-top-row-link-sec {
  float: right;
  width: 30%;
  box-sizing: border-box;
  text-align: right;
  padding-right: 0.8rem;
}

.card-top-row-link-sec .header-arrow.mat-button {
  width: 20px;
  max-width: 20px;
  padding: 0px;
  min-width: 20px;
}

.card-mid-content-sec {
  float: left;
  width: 100%;
  text-align: center;
  margin: 1rem 0rem;
  height: 8rem;
  border-bottom: solid 1px #e0e0e0;
  padding: 0rem 2rem;
}

.card-mid-content-sec h5 {
  float: left;
  width: 100%;
  text-align: center;
  color: #616167;
  font-family: roboto-medium;
  font-size: 1.7rem;
  line-height: 1;
  font-weight: 500;
  max-height: 55px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0.3rem 0rem;
  word-break: break-word;
}

.card-mid-content-sec a {
  display: inline-block;
  text-align: center;
  color: #4583fe;
  font-family: roboto-regular;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 500;
}

.card-mid-content-sec p {
  float: left;
  width: 100%;
  text-align: center;
  color: #616167;
  font-family: roboto-regular;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 500;
  margin: 0.3rem 0rem;
  word-break: break-word;
}

.card-bottom-content-sec {
  float: left;
  width: 100%;
  box-sizing: border-box;
  margin-top: 1rem;
  padding: 0rem 2rem;
}

.card-bottom-50 {
  float: left;
  width: 50%;
  box-sizing: border-box;
  text-align: left;
}

.card-bottom-50.card-bottom-left-content-sec {
  border-right: solid 1px #c8c6c7;
}

.card-bottom-50.card-bottom-right-content-sec {
  padding-left: 1.5rem;
}

/************** DRAG AND DROP STYLE FOR HEADER ******/

.gu-mirror {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

.gu-transit {
  background: #aaa !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16) !important;
}

.customRowDragDrop.mat-table {
  position: relative;
}

.customRowDragDrop .mat-header-row {
  position: absolute !important;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
  -moz-user-drag: none;
  width: 100%;
  top: 0;
  background: rgb(238, 251, 255);
  border-bottom: none;
  text-transform: uppercase;
}

.customRowDragDrop .mat-header-row .mat-header-cell:last-child {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.customRowDragDrop .mat-header-row+.mat-row {
  padding-top: 5rem;
}

/******* GLOBAL CSS FOR THE ENTIRE PROJECT ***/

.mat-error {
  color: #f44336;
  font-size: 11px;
  font-weight: 400;
  font-family: roboto-medium;
}

.error-pad-bottom {
  margin-bottom: 1.4rem;
}

.mat-menu-panel.mat-menu-after.mat-menu-below {
  transform-origin: right top!important;
}

.mat-drawer-container .mat-nav-list .mat-list-item .mat-list-item-content {
  padding: 0px;
}

.custom-dots-link-effect.mat-mini-fab:not([class*=mat-elevation-z]), .mat-mini-fab:not([disabled]):active:not([class*=mat-elevation-z]) {
  box-shadow: none!important;
  background-color: transparent;
}

.doc-ckeditor-wrapper ul li {
  list-style-type: initial;
}

.doc-ckeditor-wrapper ol, .doc-ckeditor-wrapper ul {
  padding-left: 1rem;
}

.doc-ckeditor-wrapper ol li {
  list-style-type: decimal;
}

.mat-header-row .mat-header-cell {
  font-size: 12px!important;
  font-weight: 400!important;
  color: #616167!important;
  padding: 0px 5px;
  font-family: 'Roboto-Regular';
}

.mat-header-row {
  min-height: 40px!important;
}

.mat-row {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

.component-content-cls .mat-row {
  box-shadow: none!important;
}

.mat-row .mat-cell {
  font-size: 14px!important;
  line-height: 18px;
  font-weight: 500!important;
  color: #616167!important;
  padding: 0px 5px;
  font-family: roboto-regular;
}

.mat-row .mat-cell a {
  color: #4583fe!important;
  font-weight: 500!important;
}

.work-order-txt-area .mat-chip-list-wrapper {
  max-height: 6.5rem;
  overflow: auto;
}

.mat-card {
  padding: 35px 24px!important;
  color: inherit;
}

/*.mat-card:not([class*=mat-elevation-z]) {box-shadow: 0 2px 10px rgba(0,0,0,0.16)!important;}*/

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb, .mat-radio-button.mat-accent .mat-radio-inner-circle, .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #d31144!important;
}

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
  border-color: #d31144!important;
}

.mat-radio-button.mat-accent.mat-radio-checked.mat-radio-disabled .mat-radio-inner-circle {
  background-color: rgb(176, 176, 176)!important;
}

.mat-radio-button.mat-accent.mat-radio-checked.mat-radio-disabled .mat-radio-outer-circle {
  border-color: rgb(176, 176, 176)!important;
}

.mat-select-arrow {
  color: #616167!important;
}

.mat-checkbox-checked.mat-accent.mat-checkbox-disabled .mat-checkbox-background {
  background-color: rgb(176, 176, 176)!important;
}

.mat-select.mat-select-disabled .mat-select-arrow {
  color: rgb(176, 176, 176)!important;
}

textarea.mat-input-element {
  resize: none!important;
}

.mat-button {
  text-transform: uppercase;
}

.drop-down-content-wrap-cls.mat-option {
  height: auto!important;
  min-height: 3rem;
  padding-bottom: .5rem;
  padding-top: .5rem;
}

.drop-down-content-wrap-cls .mat-option-text {
  display: inline-block;
  flex-grow: 1;
  overflow: visible;
  text-overflow: inherit;
  width: 100%;
  word-break: break-all;
  /* white-space: pre-wrap; */
  white-space: normal;
  line-height: 1;
}

.cdk-overlay-container {
  z-index: 9999;
  /* z-index: 1!important; */
}

.close-icon-cls {
  float: left;
  font-size: 0;
  display: block;
}

.close-icon-cls .mat-icon.material-icons {
  color: #a7a2a2;
  width: 1em;
  height: 1em;
  font-size: 21px;
}

.clear-search-cls .mat-icon.material-icons {
  color: #a7a2a2;
  line-height: 1.5;
}

/******* END GLOBAL CSS FOR THE ENTIRE PROJECT ***/

.left .mat-mini-fab .mat-button-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.left.icon-n-title-sec-full-width .today-button.mat-mini-fab.mat-accent:hover {
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12)!important;
}

/*********** fix for radio button validation on next stel click *******************/

.sparks-stepper.add-project-stepper#add-project .mat-step-header#cdk-step-label-0-2 {
  padding: 0;
}

.sparks-stepper.add-project-stepper#add-project .mat-step-header#cdk-step-label-0-2 .mat-step-label {
  width: 100%;
}

.sparks-stepper.add-project-stepper#add-project .mat-step-header#cdk-step-label-0-2 .mat-step-label .project-schedule-label {
  width: 100%;
  padding: 1rem 3rem 1rem 1rem;
}

/****************************** ESTIMATE CSS START HERE **************************/

.estimator-tab-content>.mat-expansion-panel-content>.mat-expansion-panel-body {
  width: 100%;
  overflow: auto;
}

.estimator-tab-content.rental-tab-sec>.mat-expansion-panel-content>.mat-expansion-panel-body {
  overflow: visible!important;
}

.estimate-add-new-component-sec .custom-ckeditor.ckeditor-description .cke_contents.cke_reset {
  max-height: 10rem!important;
}

.mat-expansion-panel:not(.mat-expanded) .estimator-tab-accordian.mat-expansion-panel-header:not([aria-disabled=true]).cdk-keyboard-focused, .mat-expansion-panel:not(.mat-expanded) .estimator-tab-accordian.mat-expansion-panel-header:not([aria-disabled=true]).cdk-program-focused, .mat-expansion-panel:not(.mat-expanded) .estimator-tab-accordian.mat-expansion-panel-header:not([aria-disabled=true]):hover {
  background: #EFFBFF!important;
}

.estimator-tab-accordian, .estimator-tab-accordian.mat-expansion-panel-header.mat-expanded:focus, .estimator-tab-accordian.mat-expansion-panel-header.mat-expanded:hover {
  background-color: #EFFBFF;
}

.estimator-tab-accordian.mat-expansion-panel-header {
  padding: 0 1rem;
}

.estimator-tab-content.mat-expansion-panel.mat-expanded.mat-expansion-panel-spacing {
  margin-top: 0px!important;
  margin-bottom: 0px!important;
}

.estimator-tab-content .mat-expansion-panel-content .mat-expansion-panel-body {
  padding: 0rem 0.5rem 0px;
}

.list-filter {
  z-index: 9999 !important;
}

.custom-estimate-tabbing-sec .mat-tab-group .mat-tab-header .mat-tab-label-container .mat-tab-list .mat-tab-labels {
  background: #f5f5f5;
}

.custom-estimate-tabbing-sec .mat-tab-group .mat-tab-header .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label.mat-tab-label-active {
  background: #fff;
  box-shadow: 0px 3px 10px #0000001A;
}

.del-btn-cls.mat-mini-fab {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}

.del-btn-cls.mat-mini-fab .mat-button-wrapper {
  padding: 0px 0;
  display: inline-block;
  line-height: 0px;
}

.del-btn-cls.mat-mini-fab .mat-button-wrapper .material-icons {
  font-size: 18px;
}

/** Show full text after wrap in drop down*/

.show-full-text.mat-option .mat-option-text {
  display: inline-block;
  flex-grow: 0;
  overflow: visible;
  text-overflow: unset;
  width: 100%;
  white-space: normal;
  line-height: 1;
}

.show-full-text.mat-checkbox .mat-checkbox-layout .mat-checkbox-label {
  line-height: 24px;
  /* display: inline-flex; */
  width: 100%;
  white-space: normal;
  line-height: 1;
}

/*********** Budgeting new css sprnt 40 start here *********/

  .unAssignChargesAllocationPopup table.unAssignChargesAllocationTable tbody tr td > .mat-form-field > .mat-form-field-wrapper{padding-bottom: 0px!important;}

  

/******************** RESPONSIVE CSS START HERE **********************/

@media screen and (max-width: 1650px) {
  span.main-heading {
    font-size: 5rem;
    padding: 0.2rem 0rem;
  }
}

@media screen and (max-width: 1450px) {

  .sparks-card .card-item {
    margin: 1.25rem 0.5rem;
  }
  /******* Login Page *************/
  span.main-heading {
    font-size: 5rem;
    padding: 0.2rem 0rem;
  }
  span.sub-heading {
    font-size: 1.5rem;
    padding: 0.7rem 0rem;
  }
  .right-sec-logo img {
    max-width: 200px;
  }
  .right-sec-logo {
    margin-bottom: 1rem;
  }
  .abcRioButton.abcRioButtonBlue, .abcRioButton.abcRioButtonBlue:hover {
    padding: 0px 3rem;
    height: 40px!important;
  }
  .abcRioButtonSvg {
    width: 20px;
    height: 20px;
  }
  .abcRioButtonContents {
    font-size: 15px!important;
  }
  .msgNotificationContainer.active {
    right: -10px!important;
  }
  .msgDropDownContent {
    max-height: 358px!important;
  }
  .dashboard-box-sec {
    /* padding: 2rem 1.5rem!important;
    min-height: 9.5rem !important; */
    padding: 1rem 1.5rem!important;
    min-height: 7.5rem !important;
  }
  .other-action-box-left-sec {
    max-width: 75px!important;
    padding-right: 1.5rem!important;
  }
  .other-action-box-right-sec {
    width: calc(100% - 75px)!important;
  }
  /******************POPUP CSS ********************/
  .add-component-popup {
    /*max-height:30rem;*/
    overflow-y: auto;
  }
  /*************** GLOBAL CSS CHANGES *************/
  .side-nav .toggle-button {
    margin-bottom: 2rem!important;
  }
  .side-nav .side-list-item {
    height: 42px!important;
  }
  .side-nav a {
    padding: 6px 16px!important;
  }
  .side-nav {
    width: 17rem!important;
  }
  .side-nav .side-list-item {
    /* margin-bottom: 0.5rem!important; */
    /* commented previous margin to accomodate another menu option (PO Approval) for 
      this media query */
    margin-bottom: 0.1rem!important;
  }
  .page-heading, .update-mode-stepper .update-main-heading h1, .dashboard-first-row-sec h2, .dashboard-second-row-sec h2, div.on-edit-user-page-custom-design h1 span.on-edit-user-page-custom-title {
    font-size: 1.5rem;
  }
  .update-mode-stepper .mat-step-header .mat-step-label a, .update-mode-stepper .sparks-form h2, .sparks-stepper.add-project-stepper .mat-step-header .mat-step-label {
    font-size: 1.2rem;
  }
  .global-right-pad-4 {
    padding-right: 3rem;
  }
  .global-left-pad-4 {
    padding-left: 3rem;
  }
  /* .global-top-bottom-pad-4 {padding-top: 3.0rem!important; padding-bottom: 3.0rem!important;} */
  div.user-profile-btn-cls span.name-letter {
    width: 2.8rem!important;
    height: 2.8rem!important;
    line-height: 2.8rem!important;
    font-size: 1.3rem!important;
  }
  .dashboard-left-content .mat-header-row {
    min-height: 24px!important;
  }
  .dashboard-first-row-sec {
    /* margin-bottom: 1.7rem!important; */
    margin-bottom: 1rem!important;
  }
  .dashboard-left-content-sec {
    /* padding-right: 1rem!important; */
    padding-right: 0.5rem!important;
  }
  .dashboard-right-content-sec {
    /* padding-left: 1rem!important; */
    padding-left: 0.5rem!important;
  }
  .dashboard-left-content, .dashboard-right-content {
    /* padding: 1.7rem 1.7rem 1.0rem 1.7rem!important; */
    padding: 0.75rem!important;
  }
  .dashboard-second-row-sec {
    /* padding: 1.7rem 2.5rem!important; */
    padding: 0.75rem 1.75rem!important;
  }
  ul.other-action-content-sec{
    margin-top: 0.75rem!important;
  }
  .dashboard-right-content .mat-table, .dashboard-left-content .mat-table, .dashboard-first-row-sec .no-record-msg-alert {
    height: 23rem;
  }
  .mat-row {
    min-height: 37px!important;
  }
  .dashboard-first-row-sec .mat-row {
    margin-bottom: 5px;
  }
  .dashboard-first-row-sec .mat-row:last-child {
    margin-bottom: 0;
    padding-bottom:0;
}
.dashboard-right-content .mat-table, .dashboard-left-content .mat-table{
  padding: 0.75rem 0.75rem 0 0.75rem;
}
  .main-section .left .user-summary-icon, .user-summary-icon {
    width: 3rem;
    margin-right: 1rem;
  }
  .main-section .sub-router-left, .main-section .sub-router-right {
    font-size: 1.2rem;
    width: 10rem;
    padding: 0.1rem 0rem;
  }
  .list-actions .search-box {
    /** padding: 1px 10px; */
  }
  .sparks-stepper.add-project-stepper .mat-horizontal-stepper-header-container, .update-mode-stepper .update-left-section {
    width: 260px;
    padding-right: 0.5rem;
  }
  .sparks-stepper.add-project-stepper .mat-horizontal-content-container, .update-mode-stepper .update-right-section {
    width: calc(100% - 260px);
  }
  .update-mode-stepper .update-main-heading h1 {
    padding: 20px 24px;
  }
  .update-mode-stepper .update-main-heading h1.no-padding {
    padding-left: 0;
    padding-right: 0;
  }
  .update-mode-stepper .header-right-icon {
    width: 3rem;
  }
  div.on-edit-user-page-custom-design h1 span.right.header-right-icon {
    width: 3rem;
  }
  div.on-edit-user-page-custom-design h1 span.on-edit-user-page-custom-title {
    padding-top: 0.4rem;
  }
  .sparks-form h2.editUserHeading, .update-mode-stepper .sparks-form h2 {
    font-size: 1.2rem;
    margin: 0rem 0.75rem 1.5rem;
  }
  .update-mode-stepper .stepper-form-section .update-form-div {
    margin-bottom: 1.5rem;
  }
  .mat-card {
    padding: 21px 24px!important;
  }
  .all-card-container {
    width: calc(100% + 2rem);
  }
  ul.view-card-list-sec {
    margin-left: -1.0rem;
  }
  ul.view-card-list-sec li {
    padding: 1rem;
  }
  .card-view-cls {
    padding: 1rem 0rem;
  }
  .card-mid-content-sec {
    margin: 1rem 0rem;
    height: 6rem;
  }
  .card-mid-content-sec h5 {
    font-size: 1.5rem;
    margin: 0.1rem 0rem;
  }
  .card-mid-content-sec p {
    margin: 0.2rem 0rem;
    font-size: 1rem;
  }
  .card-mid-content-sec a {
    font-size: 1rem;
  }
  .sparks-card .info-section {
    margin-bottom: 0.5rem;
  }
  .status-wrapper {
    max-width: 135px;
  }
  .card-bottom-content-sec {
    margin-top: 0rem;
  }
  .sparks-card .info-section .left-info {
    width: 32px;
  }
  .sparks-card .info-section .left-info img {
    max-width: 25px;
  }
  .add-component-popup .popup-title {
    font-size: 1.2rem;
    padding: 0.5rem 0rem 1rem;
  }
  .sparks-form .route-section .routing-label {
    width: 15%;
  }
  .sparks-form .routing-info .info.info-1, .sparks-form .routing-info .info.info-2, .sparks-form .routing-info .info.info-3 {
    width: 200px;
  }
  .component-accordian-table-cls.sales-proposal-and-change-order-page-component .doc-ckeditor .cke_focus .cke_top {
    top: -55px;
  }
  /* sonar-ignore-start */
  /****** Edge browser hack for Purchase order requisition page form *******/
  _:-ms-lang(x), .sales-proposal-page-content-sec.purchase-order-req .sales-proposal-page-accordian .col.s4.m4.l4 {
    min-height: 57.27px;
  }
  /*****************  Estimation Module*****************/
  /* sonar-ignore-end */
  .dialog-box.add-component-popup.on-site-supervisor-popup {
    width: 100%;
    min-width: 60vw!important;
  }
  .maintenanceBg .landing-pg-sign-in-sec .sign-in-sec.main-container .main-logo-sec-main img {
    max-width: 200px;
  }
}

@media screen and (max-width: 1026px) {
  /**************** GLOBAL CSS *********************/
  .row {
    margin-bottom: 15px;
  }
  .list-filter .checkbox-section {
    height: 21.9rem;
  }
  .left-nav .mat-icon.material-icons {
    font-size: 25px!important;
    margin-right: 5px!important;
  }
  .header-nav .left-nav {
    margin-left: -27px!important;
  }
  .top-header-sec-part.top-right-header-sec {
    margin-right: -27px!important;
  }
  /* .global-top-bottom-pad-4 {padding-top: 2.5rem!important; padding-bottom: 2.5rem!important;} */
  .global-left-pad-4 {
    padding-left: 2.5rem;
  }
  .global-right-pad-4 {
    padding-right: 2.5rem;
  }
  .main-section .left .user-summary-icon, .user-summary-icon {
    width: 2.5rem;
    margin-right: 0.5rem;
  }
  .sparks-stepper.add-project-stepper .mat-horizontal-content-container, .update-mode-stepper .update-right-section {
    width: calc(100% - 250px);
  }
  .page-heading, .update-mode-stepper .update-main-heading h1, .dashboard-first-row-sec h2, .dashboard-second-row-sec h2, div.on-edit-user-page-custom-design h1 span.on-edit-user-page-custom-title {
    font-size: 1.4rem;
  }
  .update-mode-stepper .mat-step-header .mat-step-label a, .update-mode-stepper .sparks-form h2, .sparks-stepper.add-project-stepper .mat-step-header .mat-step-label {
    font-size: 1.1rem;
  }
  .update-mode-stepper .mat-step-header .mat-step-label a {
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
  }
  .sparks-stepper.add-project-stepper .mat-horizontal-stepper-header-container, .update-mode-stepper .update-left-section {
    width: 250px;
    padding-right: 0rem;
  }
  .margin-right-3 {
    margin-right: 1em;
  }
  .sparks-form .mat-input-wrapper {
    width: 95% !important;
  }
  .gap-report-page-cls .input-width-cls {
    width: 95%;
  }
  .input-width-cls {
    width: 95%!important;
  }
  .sales-proposal-page-accordian .mat-content {
    font-size: 1.3rem;
  }
  /******* Dashboard Page *************/
  .dashboard-left-content, .dashboard-right-content {
    padding: 1.4rem!important;
  }
  .dashboard-second-row-sec {
    padding: 1.4rem 2.15rem!important;
  }
  .dashboard-left-content-sec {
    padding-right: 0.5rem!important;
  }
  .dashboard-first-row-sec {
    margin-bottom: 1.0rem!important;
  }
  .dashboard-right-content-sec {
    padding-left: 0.5rem!important;
  }
  .dashboard-right-content .mat-table, .dashboard-left-content .mat-table {
    padding: 0.5rem 0.75rem;
  }
  ul.other-action-content-sec {
    margin-top: 1.5rem!important;
  }
  .dashboard-box-sec {
    padding: 1rem 1.0rem!important;
    min-height: 7rem !important;
  }
  .other-action-box-left-sec {
    max-width: 50px!important;
    padding-right: 0.5rem!important;
  }
  .other-action-box-right-sec {
    width: calc(100% - 50px)!important;
  }
  .other-action-box-right-sec h4 {
    font-size: 1.1rem!important;
  }
  .other-action-box-right-sec h5 {
    font-size: 1.3rem!important;
  }
  /***************VIEW PROJECT ************/
  .all-card-container {
    width: calc(100% + 1rem);
  }
  ul.view-card-list-sec {
    margin-left: -0.5rem;
  }
  ul.view-card-list-sec li {
    padding: 0.5rem;
  }
  .card-top-row-label-sec {
    padding-left: 1.0rem;
  }
  .card-top-row-link-sec {
    padding-right: 0.1rem;
  }
  .card-mid-content-sec, .card-bottom-content-sec {
    padding: 0rem 1rem;
  }
  .card-bottom-50.card-bottom-right-content-sec {
    padding-left: 1rem;
  }
  .card-mid-content-sec h5 {
    font-size: 1.4rem;
  }
  .sparks-card .info-section .uppercase {
    font-size: 0.8rem;
  }
  .sparks-card .info-section p.bold, .status-wrapper {
    font-size: 0.9rem;
  }
  .sparks-card .info-section .left-info {
    width: 20px;
  }
  .sparks-card .info-section .left-info img {
    max-width: 17px;
  }
  .card-view-cls {
    padding: 0.5rem 0rem 1rem;
  }
  .sparks-form .route-section .route-right-section {
    width: 80%;
  }
  /******* Login Page *************/
  span.main-heading {
    font-size: 3rem;
    padding: 0.2rem 0rem;
  }
  span.sub-heading {
    font-size: 1.2rem;
    padding: 0.4rem 0rem;
  }
  .right-sec-logo img {
    max-width: 170px;
  }
  .right-sec-logo {
    margin-bottom: 0.5rem;
  }
  .abcRioButton.abcRioButtonBlue, .abcRioButton.abcRioButtonBlue:hover {
    padding: 0px 2rem;
    height: 40px!important;
  }
  .maintenanceBg .landing-pg-sign-in-sec .sign-in-sec.main-container .main-logo-sec-main img {
    max-width: 170px;
  }
}

@media screen and (max-width: 1023px) {
  .page-heading, .update-mode-stepper .update-main-heading h1, .dashboard-first-row-sec h2, .dashboard-second-row-sec h2, div.on-edit-user-page-custom-design h1 span.on-edit-user-page-custom-title {
    font-size: 1.2rem;
  }
  .side-nav .toggle-button {
    margin-bottom: 2rem;
  }
  .side-nav .toggle-button a {
    margin-top: 1rem!important;
  }
  .side-nav p a {
    padding: 9px 0px!important;
  }
  .side-nav .side-list-item img {
    margin-right: 0.75rem!important;
  }
  .side-nav .copyright-text {
    bottom: 0.7rem!important;
    line-height: 16px!important;
    left: 15px!important;
  }
  .side-nav a {
    padding: 4px 10px!important;
  }
  .mat-list .mat-list-item, .mat-list .mat-list-option, .mat-nav-list .mat-list-item, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-item, .mat-selection-list .mat-list-option {
    height: 38px!important;
  }
  .mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item {
    font-size: 14px!important;
  }
  .left-nav span.hemberg-txt-cls, .header-nav.stickyMenu .left-nav span.hemberg-txt-cls, div.user-profile-btn-cls .name-block, div.user-profile-btn-cls span.profile-drop-down-arrow, .dashboard-second-row-sec, .edit-icon, span.edit-icon-text, span.add-contact-text.right, span.delete-contact-text {
    display: none!important;
  }
  .top-header-sec-part.top-right-header-sec, .left-nav .mat-icon.material-icons, div.user-profile-btn-cls span.name-letter {
    margin-right: 0px!important;
  }
  /*.top-header-sec-part.top-left-header-sec{width:55px!important;}*/
  .header-nav .left-nav {
    margin-left: -10px!important;
  }
  .top-header-sec-part.top-center-header-sec {
    width: calc(100% - 140px)!important;
  }
  .header-nav .right-nav li {
    margin: 0rem 0.3rem!important;
  }
  .top-header-sec-part.top-left-header-sec, .top-header-sec-part.top-right-header-sec {
    width: 85px!important;
  }
  .header-nav .right-nav li:last-child {
    margin-right: 0px!important;
  }
  div.user-profile-btn-cls span.name-letter {
    width: 2rem!important;
    height: 2rem!important;
    line-height: 2rem!important;
    font-size: 1.1rem!important;
  }
  .header-nav .brand-logo img {
    max-width: 150px!important;
  }
  .header-nav.stickyMenu .top-header-sec {
    padding-top: 0.5rem!important;
    padding-bottom: 0.4rem!important;
    transition: all 0.2s ease-in-out;
  }
  .side-nav {
    width: 100%!important;
  }
  .list-filter .mat-expansion-panel-body {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
  }
  /* .global-top-bottom-pad-4 {padding-top: 1.5rem!important; padding-bottom: 1.5rem!important;} */
  .global-left-pad-4 {
    padding-left: 1.0rem;
  }
  .global-right-pad-4 {
    padding-right: 1.0rem;
  }
  .mat-row {
    min-height: 27px!important;
  }
  .dashboard-first-row-sec .mat-header-row, .dashboard-first-row-sec .mat-row {
    padding: 0.4rem 10px;
  }
  .mat-row .mat-cell, .mat-header-row .mat-header-cell {
    font-size: 11px!important;
    line-height: 14px;
  }
  .dashboard-first-row-sec .no-record-msg-alert p {
    margin-top: 0.5rem;
    font-size: 1rem;
  }
  .dashboard-right-content .mat-table, .dashboard-left-content .mat-table, .dashboard-first-row-sec .no-record-msg-alert {
    height: auto;
  }
  .dashboard-left-content .mat-table {
    min-width: 50rem;
  }
  .notification-sec-heading span.clear-notification-cls {
    padding-top: 0.2rem;
  }
  span.page-heading, .mobile-show-hide-cls {
    display: none!important;
  }
  ul.view-card-list-sec li {
    width: 100%;
    padding: 0rem 0rem 0.5rem 0rem;
  }
  .card-mid-content-sec, .card-bottom-content-sec {
    padding: 0rem 0.75rem;
  }
  .card-bottom-50.card-bottom-right-content-sec {
    padding-left: 0.75rem;
  }
  .card-top-row-label-sec {
    padding-left: 0.75rem;
  }
  .view-card-list-sec .mat-button-wrapper i.material-icons {
    font-size: 20px;
  }
  .card-mid-content-sec {
    margin: 0.5rem 0rem;
    height: 5.5rem;
  }
  .card-mid-content-sec h5 {
    font-size: 1.2rem;
  }
  .all-card-container {
    width: 100%;
  }
  ul.view-card-list-sec {
    margin-left: 0rem;
  }
  .list-filter .filter-top-section {
    padding: 1rem;
  }
  .list-filter .filter-bottom-section {
    padding: 0 1.0rem;
  }
  .list-filter .mat-expanded .mat-expansion-panel-header::after {
    border-color: transparent;
    top: 0px;
    left: 0px;
  }
  .list-filter {
    height: auto;
  }
  .list-filter .checkbox-section {
    padding-top: 1rem;
    background: #f5f5f5;
    padding-bottom: 0rem;
    overflow-y: hidden;
    height: auto;
  }
  .list-filter .mat-expansion-panel-header {
    height: 38px !important;
  }
  .list-filter .mat-expansion-panel-header {
    padding: 0rem 0.5rem 0rem .5rem;
  }
  .list-filter .button-section {
    padding: 1em 0.5rem 1em;
  }
  .list-filter .filter-top-section h3 {
    font-size: 1.2rem;
  }
  .mat-expansion-panel-header {
    font-size: 14px!important;
  }
  .sparks-stepper .mat-step {
    margin-bottom: 0rem;
    float: none;
    width: auto;
    text-align: right;
    display: inline-block;
  }
  .update-mode-stepper .mat-step-header .mat-step-label a {
    padding: 0.5rem;
  }
  .sparks-stepper.add-project-stepper .mat-horizontal-content-container, .update-mode-stepper .update-right-section {
    width: 100%;
  }
  .sparks-form .add-contact-text, .sparks-form .add-contact-text {
    width: 40%;
  }
  .input-width-cls {
    width: 100%!important;
  }
  .mat-card {
    padding: 15px 10px!important;
  }
  .stepper-right-section .row .col.s4.m4.l4, .stepper-right-section .row.col.s4.m4.l4.con-add-mob-cls, .col.s4.status-mob-cls {
    width: 100%;
  }
  .dashboard-right-content .mat-table {
    padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  }
  .dashboard-left-content .mat-table {
    padding: 0.5rem 1.25rem 0.5rem 0.75rem;
  }
  .list-filter .mat-expansion-panel-body {
    border-right: none;
    border-bottom: solid 3px #4583FE;
  }
  .list-filter .checkbox-item {
    margin-bottom: 5px;
    padding: 0 0.5em;
  }
  .list-actions .search-box {
    min-width: 5em;
  }
  .list-actions .search-box input.show-input {
    width: calc(100% - 30px) !important;
  }
  .sparks-stepper .col.update-right-section {
    padding: 0px;
  }
  .update-mode-stepper .stepper-form-section .update-form-div {
    margin-bottom: 0.75rem;
  }
  .title-n-button-sec.stickyMenu {
    position: relative;
    top: 130px;
  }
  .update-mode-stepper .update-left-section {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 0.5rem;
  }
  .update-mode-stepper .mat-stepper-vertical {
    white-space: nowrap;
  }
}

@media screen and (max-width: 1023px) and (orientation: portrait) {
  .dashboard-left-content-sec {
    width: 100%!important;
    padding: 0px!important;
  }
  .dashboard-right-content-sec {
    float: left!important;
    width: 100%!important;
    padding-left: 0rem!important;
    margin-top: 1rem;
  }
  .dashboard-left-content, .dashboard-right-content {
    padding: 1rem 0.5rem 0.5rem!important;
    overflow-x: auto;
  }
  ul.inlucde-project-list .col.s4.list-item {
    width: 100%;
  }
  .cust-chk-list .mat-checkbox-layout .mat-checkbox-label {
    line-height: 1;
    white-space: normal;
    word-break: break-word;
    max-width: 100px;
  }
  .msgNotificationContainer.active {
    width: 260px!important;
  }
  .notification-content-row a p.msg-content-detail span.msg-content {
    font-size: 0.9rem!important;
  }
  .notification-content-row a span.msg-first-letter {
    width: 30px!important;
    height: 30px!important;
    line-height: 30px!important;
    font-size: 1rem!important;
  }
  .notification-content-row a p.msg-content-detail {
    width: calc(100% - 40px)!important;
  }
  .msgDropDownContent .notification-content-row {
    padding: 0.75rem 0.75rem!important;
  }
  .mat-menu-content button.mat-menu-item {
    width: auto!important;
    min-width: auto!important;
    line-height: 35px;
    height: 35px;
  }
  .card-mid-content-sec {
    height: auto;
  }
  .update-mode-stepper .update-left-section.stickyMenu {
    position: relative;
    top: 0;
  }
  .update-mode-stepper .update-main-heading h1 {
    padding: 20px 10px;
  }
  .update-mode-stepper .mat-step-header .mat-step-label a, .update-mode-stepper .sparks-form h2, .sparks-stepper.add-project-stepper .mat-step-header .mat-step-label {
    font-size: 1rem;
  }
  .sparks-form .mat-input-wrapper {
    width: 100% !important;
  }
  .update-mode-stepper .header-right-icon {
    right: 10px;
  }
  .mat-header-row, .mat-row {
    padding: 0 10px!important;
  }
  .mat-radio-button {
    margin-bottom: 3px;
  }
  .sparks-form .route-section .route-right-section, .sparks-form .route-section .routing-label {
    width: 100%;
  }
  .sparks-form .routing-info .info.info-1, .sparks-form .routing-info .info.info-2, .sparks-form .routing-info .info.info-3 {
    width: 48%;
  }
  mat-form-field.project-document-select.mat-input-container {
    display: none;
  }
  .sparks-form .project-margin-section {
    display: block;
    /* align-items: stretch; */
    margin-bottom: 2rem;
  }
  .sparks-form .project-margin-section .project-margin-left {
    width: 100%;
    padding-right: 0px;
    display: block;
    margin-bottom: 0.5rem;
  }
  .sparks-form .project-margin-section .project-margin-right {
    width: 100%;
    padding-left: 0px;
    display: block;
  }
  .margin-3 {
    margin-top: 1.5em;
  }
  .sparks-form .list-label {
    margin-bottom: 0.5rem;
  }
  div.sparks-table.project-document-table {
    overflow-x: auto;
  }
  div.sparks-table.project-document-table>.mat-table {
    min-width: 500px;
  }
}

/* .content-wrapper {min-height: 800px;} */

.login-div.content-wrapper {
  min-height: auto;
}

@media screen and (width: 768px) and (orientation: portrait) {
  body>app-root {
    display: none;
  }
  body:after {
    content: "Please rotate to portrait mode for the best experience.";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #616167;
    font-size: 0.95rem;
  }
}

@media screen and (max-width: 1023px) and (orientation: landscape) {
  body>app-root {
    display: none;
  }
  body:after {
    content: "Please rotate to portrait mode for the best experience.";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #616167;
    font-size: 0.95rem;
  }
}

.sparks-table .mat-row:hover {
  background: rgba(85, 216, 254, 0.1);
}

.alignInput .mat-form-field-infix {
  border-top: 0 solid transparent;
}

.scheduler_default_event_delete {
  display: none !important;
}

/* Department Page Css */

.sparks-table.user-summary-page-table-cls.department-team-table-cls .mat-cell, .sparks-table.user-summary-page-table-cls.department-team-table-cls .mat-header-cell {
  width: 17.5%;
  flex: auto;
}

.sparks-table.user-summary-page-table-cls.department-team-table-cls .mat-cell.mat-column-skills, .sparks-table.user-summary-page-table-cls.department-team-table-cls .mat-header-cell.mat-column-skills {
  width: calc(47.5% - 50px);
}

.sparks-table.user-summary-page-table-cls.department-team-table-cls .mat-chip-list-wrapper {
  padding-left: 0;
}

.sparks-table.user-summary-page-table-cls.department-team-table-cls .mat-row {
  cursor: default;
}

.sparks-table.user-summary-page-table-cls.department-team-table-cls .mat-cell.mat-column-skills {
  display: flex;
  align-items: center;
}

.mat-column-skills .show-others {
  position: relative;
  display: block;
  top: auto;
  right: auto;
  margin-left: 10px;
  flex: none;
}

.mat-column-skills .show-others.show-more span.text {
  display: block;
}

.mat-column-skills .show-others.show-more span.numbers {
  display: none;
}

.mat-column-skills .mat-chip-list-wrapper {
  max-height: unset;
}

mat-chip-list.mat-chip-list {
  outline: none;
}

.mat-primary .mat-pseudo-checkbox-checked, .mat-primary .mat-pseudo-checkbox-indeterminate {
  background: #d31144 !important;
}

.department-position .input-box-with-icons {
  width: 150px;
  flex: 1 0 150px;
  display: flex;
}

.department-position .input-box-with-icons input.mat-chip-input {
  max-width: 150px;
  flex: none;
  width: calc(100% - 70px);
}

/* .department-position .mat-chip-list-wrapper { max-height: none; overflow: unset;} */

/* Add Skills Dialog css
.add-skills-dialog { padding: 1rem; width: 600px; margin: 0; box-shadow: none !important;}
.add-skills-dialog h3 { border-bottom: 1px solid rgba(112, 112, 112, 0.2); padding-bottom: 0.43rem; font-size: 1.17rem;line-height: normal;font-weight: 700;margin: 0;}
.add-skills-dialog h3 a {cursor: pointer; display: inline-block;}
.add-skills-dialog h3 a img {display: inline-block; vertical-align: middle;}
.add-skills-dialog .mat-input-wrapper { width: 100% !important; margin-bottom: 0;}
.add-skills-dialog h3 .edit-icon-text{color: #4583FE;font-size: 0.9rem;font-style: italic;display: inline-block;vertical-align: middle;margin-left: -.2rem;font-weight: normal;}
.add-skills-dialog .mat-chip-list-wrapper { padding-left: 0;} 
.add-skills-dialog .mat-raised-button { margin: 0 !important;}

.add-skills-dialog .mat-chip:not(.mat-basic-chip) { background-color: rgba(216,218,217,0.5) !important; cursor: pointer !important;}
.add-skills-dialog .mat-chip:not(.mat-basic-chip):hover { background-color: rgba(216,218,217,1) !important;}
.add-skill-input .mat-form-field-suffix{ display: flex;}
 */

/* Dialog Box */

.no-margin-bottom {
  margin-bottom: 0;
}

.text-align-right {
  text-align: right;
}

.dialog-box {
  margin: 0;
  padding: 0;
  width: 600px;
}

.dialog-heading {
  margin: 0 0 1.2rem 0;
  padding: 0 1.43rem;
  background: rgb(238, 251, 255);
  height: 3.5rem;
  line-height: 3.5rem;
  position: relative;
  box-shadow: 0px 3px 5px #0000001A;
  /* line added for budget module*/
}

.dialog-heading h3 {
  line-height: inherit;
  font-size: 1.14rem;
  color: #00495e;
  margin: 0;
}

.dialog-heading h3 a {
  cursor: pointer;
  display: inline-block;
}

.dialog-heading h3 a img {
  display: inline-block;
  vertical-align: middle;
}

.dialog-heading h3 .edit-icon-text {
  color: #4583FE;
  font-size: 0.9rem;
  font-style: italic;
  display: inline-block;
  vertical-align: middle;
  margin-left: -.2rem;
  font-weight: normal;
}

.dialog-heading.with-note {
  height: 4rem;
}

.message-note {
  font-size: 11px;
  font-weight: 400;
  position: absolute;
  bottom: 0.4rem;
  line-height: normal;
  font-style: italic;
}

.dialog-heading .dialog-close {
  position: absolute;
  top: 50%;
  right: 1.43rem;
  margin-top: -0.715rem;
  display: block;
  cursor: pointer;
}

.dialog-heading .dialog-close img {
  width: 1.43rem;
  height: 1.43rem;
  display: block;
}

.dialog-body {
  margin: 0;
  padding: 0 0.68rem 2.5rem 0.68rem;
}

.dialog-body.sparks-form {
  box-shadow: none !important;
}

.dialog-body.sparks-form .mat-input-wrapper {
  width: 100% !important;
  margin-bottom: 0;
}

.dialog-body.sparks-form .mat-form-field-underline {
  background-color: #E8E9EC;
}

.dialog-body .mat-chip-list-wrapper {
  padding-left: 0;
}

.dialog-box.settings-dialog-disclaimer {
  width: 100%;
}

.dialog-box.settings-dialog-disclaimer .cke-form-field {
  padding-bottom: 1.25em;
  position: relative;
}

.dialog-box.settings-dialog-disclaimer .cke-form-field>label {
  font-size: 11px;
}

.dialog-box.settings-dialog-disclaimer .cke-form-field .mat-error {
  position: absolute;
  bottom: 0;
}

.dialog-box.settings-dialog-disclaimer .ckeditor-wrapper.desc-ckeditor .cke_contents.cke_reset {
  max-height: 8rem;
}

.dialog-box.add-component-popup {
  width: 100%;
}

.dialog-box.add-component-popup.on-site-supervisor-popup {
  width: 100%;
  min-width: 50vw;
}

.dialog-box.add-component-popup .dialog-body {
  overflow: hidden;
  padding: 0 1.43rem 2.5rem 1.43rem
}

/* .dialog-box.add-component { width: 930px; max-width: 64vw; } */

.dialog-box.add-component {
  width: 1100px;
  max-width: 83vw;
}

.dialog-box.add-component .add-component-btn {
  display: flex;
  margin: 0.5rem 0;
}

.dialog-box.add-component .add-component-btn a {
  display: flex;
  cursor: pointer;
  line-height: 1.428rem;
  color: #4583FE;
  margin: 0 0 0 auto;
}

.dialog-box.add-component .add-component-btn img {
  width: 1.428rem;
  height: 1.428rem;
  vertical-align: middle;
  margin-right: 0.5rem;
}

.custom-ckeditor {
  position: relative;
}

.custom-ckeditor label {
  font-size: 0.75rem;
  display: block;
  margin-bottom: 0.25rem;
}

.custom-ckeditor label span {
  color: #d31144;
  line-height: 1;
}

.custom-ckeditor.ckeditor-description .cke_contents.cke_reset {
  max-height: 16rem;
  height: 16rem !important;
}

.custom-ckeditor .cke_wysiwyg_div {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.custom-ckeditor .cke_wysiwyg_div p, .custom-ckeditor .cke_wysiwyg_div ul, .custom-ckeditor .cke_wysiwyg_div ol {
  margin-bottom: 0.75rem;
}

.custom-ckeditor .cke_wysiwyg_div ul {
  list-style-type: circle;
  padding-left: 25px;
}

.custom-ckeditor .cke_wysiwyg_div ol {
  list-style-type: decimal;
  padding-left: 25px;
}

.custom-ckeditor .cke_wysiwyg_div li {
  margin-bottom: 0.25rem;
  list-style-type: inherit;
}

.sparks-form .custom-ckeditor .ckeditor-wrapper .cke, .sparks-form .custom-ckeditor .ckeditor-wrapper .cke_top {
  border-color: #E8E9EC;
}

/* Edit Schedule Modal css */

/* .edit-schedule-modal .modal { margin: 0 auto !important; padding: 0 !important; z-index: 99; width:30%; min-width: 28.5rem;} */

.edit-schedule-modal {
  display: none;
}

.edit-schedule {
  padding: 0;
  z-index: 99;
  width: 28.5rem;
  position: absolute;
  background: #fff;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.edit-schedule-inner {
  background: #fff;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 2;
  padding: 1.43rem 0;
}

.edit-schedule h2 {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(112, 112, 112, 1);
  margin-bottom: 0.72rem
}

.edit-schedule h3 {
  font-size: 1rem;
  color: rgba(112, 112, 112, 0.5);
  margin-bottom: 0.72rem;
  font-weight: normal;
}

.remove-add-action li {
  border-bottom: 1px solid rgba(216, 218, 217, 0.5);
  font-size: 1rem;
}

.remove-add-action li.active {
  background: #F8F8F8;
}

.remove-add-action li:last-child {
  border-bottom: 1px solid rgba(216, 218, 217, 0);
}

.remove-add-action li a {
  display: flex;
  padding: 0.56rem 0;
  cursor: pointer;
}

.remove-add-action li .mat-icon {
  font-size: 1.2rem;
  height: 1.2rem;
  width: 1.2rem;
  margin-right: 1rem
}

.remove-confirmation {
  padding: 1rem 0;
}

.remove-confirmation p {
  padding-bottom: 1rem;
}

.small-buttons {
  text-align: right;
}

.edit-schedule .mat-radio-group, .remove-add-action {
  margin-bottom: 0.72rem;
  display: block;
}

.edit-schedule .mat-radio-group .mat-radio-button {
  margin-right: 0.5rem;
}

.padding-left-right {
  padding-left: 1.43rem;
  padding-right: 1.43rem;
}

.datepicker-icon {
  width: 1.143rem;
  height: 1.143rem;
  margin-right: 1rem;
}

.edit-schedule .mat-form-field-wrapper {
  padding-bottom: 0;
}

.edit-schedule .mat-form-field-underline {
  opacity: 0;
  bottom: 0;
}

/* Create Schedule Modal css */

/* .create-schedule-modal .modal {margin: 0 auto !important; padding: 0 !important; z-index: 99; width:30%; min-width: 28.5rem;} */

.create-schedule-modal {
  display: none;
}

.create-schedule {
  padding: 0;
  z-index: 99;
  width: 28.5rem;
  position: absolute;
  background: #fff;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.create-schedule-inner {
  background: #fff;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 2;
}

.create-schedule-header-box {
  background: #EDEFF0;
  padding: 0.8rem 1.43rem;
}

.create-schedule .search-box {
  border: solid 1px #E4E7EC;
  border-radius: 50px;
  padding: 0px 10px;
  min-width: 6em;
  position: relative;
  display: flex;
  background: #fff;
  height: 30px;
}

.create-schedule .search-box input {
  display: inline-block;
  vertical-align: middle;
  border: none;
  background: transparent;
  padding-right: 30px;
}

.create-schedule .search-box a {
  margin-left: 0;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  right: 10px;
}

.create-schedule .search-box a img {
  width: 1.7rem;
  vertical-align: middle;
  display: inline-block;
  padding: 3px 0;
}

.create-schedule-body-box {
  padding: 1.78rem 0;
}

.create-schedule-body-box h3 {
  padding-bottom: 0.5rem;
  font-size: 1rem;
  color: rgba(112, 112, 112, 0.5);
  font-weight: normal;
}

.create-schedule-body-box .mat-expansion-panel {
  box-shadow: none !important;
}

.create-schedule-body-box .mat-expansion-panel-header-title {
  color: #616167;
  padding-left: 2.3rem;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}

.create-schedule-body-box .mat-expansion-panel-header-title .color-box-icon, .other-assignable-list .color-box-icon {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  background: #00B5EB;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -0.5rem;
}

.create-schedule-body-box .mat-expansion-panel-spacing {
  margin: 0;
}

.create-schedule-body-box .mat-expanded {
  background: #F8F8F8;
}

.create-schedule-body-box .phase-list {
  padding-left: 2.3rem;
  color: #616167;
}

.create-schedule-body-box .phase-list .mat-radio-container, .create-schedule-body-box .phase-list .mat-radio-inner-circle {
  width: 14px;
  height: 14px;
}

.create-schedule-body-box .phase-list .mat-radio-outer-circle {
  width: 14px;
  height: 14px;
  border-width: 1px;
}

/* .create-schedule-body-box .phase-list .mat-radio-container .mat-radio-outer-circle{ background-color: #fff;} */

.other-assignable {
  padding-top: 0.5rem;
}
.cus-mat-chip-list-wrapper .mat-chip-list-wrapper{padding-left:0;}
.mat-chip:not(.mat-basic-chip) {
    transition: box-shadow 280ms cubic-bezier(.4,0,.2,1);
    display: inline-flex;
       padding: 6px 12px!important;
    border-radius: 25px!important;
    align-items: center;
    cursor: default!important;
    margin: 3px!important;
    font-size: 0.9rem;
    color: #616167!important;
    background-color: #f5f5f5!important;
}

.other-assignable-list li {
  color: #616167;
  line-height: 30px;
  cursor: pointer;
}

.other-assignable-list li a {
  display: block;
}

.other-assignable-list li:not(.note-class):hover {
  background: rgba(0, 0, 0, .04);
}

.padding-left {
  padding-left: 2.3rem;
  position: relative;
}

/* .color-box-icon.green { background: #4BB08D;} */

.color-box-icon.green {
  background: #35d672;
}

.color-box-icon.orange {
  background: #FFA116;
}

div#edit-arrow, div#create-arrow {
  position: absolute;
  height: 20px;
  width: 20px;
  margin: 0;
  padding: 0;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
  z-index: 1;
}

div#edit-arrow.top, div#create-arrow.top {
  top: -10px;
  left: 50%;
}

div#edit-arrow.bottom, div#create-arrow.bottom {
  bottom: -10px;
  left: 50%;
}

div#edit-arrow.left, div#create-arrow.left {
  right: -10px;
}

div#edit-arrow.right, div#create-arrow.right {
  left: -10px;
}

/* Project Calender */

.project-calender {
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  display: block;
  position: relative;
  background: #fff;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
  margin-bottom: 7rem;
}

.project-calender-header {
  display: flex;
}

.project-name {
  width: 20%;
  width: 250px;
  padding: 0.8rem 2rem;
  border-right: 1px solid rgba(112, 112, 112, 0.2);
  position: relative;
}

.project-name::after {
  content: '';
  display: block;
  width: 5px;
  height: 100%;
  background: #00B5EB;
  position: absolute;
  top: 0;
  left: 0;
}

.project-calender-body .project-calender-row-parent:nth-child(even) .project-calender-row .project-name::after {
  background: #7BD6F2;
}

.project-calender-body .project-calender-row-parent .project-calender-row.pto .project-name::after {
  background: rgba(255, 161, 22, 1);
}

.project-calender-body .project-calender-row-parent .project-calender-row.reserve .project-name::after {
  background: rgba(75, 176, 141, 1);
}

.project-calender-header .project-name::after {
  display: none;
}

.project-resources {
  padding: 0.8rem 2rem;
  flex: 1;
  position: relative;
}

.project-calender-row .project-resources {
  padding: 0 2rem;
}

.project-calender-row {
  display: flex;
  border-top: 1px solid rgba(112, 112, 112, 0.2);
}

.project-calender-row p {
  padding: 0.2rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-calender-body .project-calender-row-parent:nth-child(even) .project-calender-row {
  background: rgba(245, 247, 250, .5);
}

.project-calender-body .project-calender-row-parent .project-calender-row.pto {
  background: rgba(255, 161, 22, 0.1);
}

.project-calender-body .project-calender-row-parent .project-calender-row.reserve {
  background: rgba(75, 176, 141, 0.1);
}

.project-resource-list {
  display: flex;
  width: 100%;
  flex-flow: wrap;
}

.project-resource-list .resource-card {
  width: 29%;
  display: flex;
  align-items: center;
  padding: 0.8rem 0;
}

.resource-initials {
  width: 3.2rem;
  height: 3.2rem;
  line-height: 3.2rem;
  text-align: center;
  border-radius: 50%;
  font-size: 1.33rem;
  background: #fff;
  border: 1px solid;
  color: #4583FE;
}

.resource-details {
  flex: 1;
  padding: 0 2rem 0 1rem;
}

.project-resource-list .resource-card.hide-details {
  width: 1.6rem;
  display: block
}

.project-resource-list .resource-card.hide-details .resource-details {
  display: none;
}

.project-resource-list .resource-card.hide-complete {
  display: none;
}

.position-2 {
  z-index: 3;
}

.position-3 {
  z-index: 2;
}

.position-4 {
  z-index: 1;
}

.show-others {
  color: #4583FE;
  position: absolute;
  top: 2rem;
  right: 2rem;
  height: 16px;
  padding-right: 1.67rem;
  cursor: pointer;
  user-select: none;
}

.show-others span.text {
  display: none;
}

.show-others::before {
  content: '';
  display: block;
  top: 0;
  right: 0;
  position: absolute;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid;
}

.show-others::after {
  content: '';
  display: block;
  bottom: 0;
  right: 0;
  position: absolute;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid;
}

.show-more .project-resource-list .resource-card.hide-details {
  width: 29%;
  display: flex
}

.show-more .project-resource-list .resource-card.hide-details .resource-details {
  display: block;
}

.show-more .project-resource-list .resource-card.hide-complete {
  display: flex;
}

.show-more .show-others span.numbers {
  display: none;
}

.show-more .show-others span.text {
  display: inline;
}

.show-more .show-others::before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid;
  border-bottom: none
}

.show-more .show-others::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid;
  border-top: none
}

.project-month-arrows {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 600;
}
/***************Sprint 38 css start here**************/
.notes-ans-sec .leave-msg-sec .mat-input-wrapper{width:100%!important}
.sparks-form.survey-form .padding-right-0-cls .mat-form-field .mat-input-wrapper{margin-left:15%;}
.sparks-form.survey-form .padding-equal-0-cls .mat-input-wrapper{margin-left:7.5%;}
.sparks-form.survey-form .mat-radio-label-content{font-size:13.5px}
.error-setting-cls .mat-chip-list-wrapper{padding-left:0!important; padding-right: 6.5rem; box-sizing: border-box;}
.error-setting-cls.no-r-pad .mat-chip-list-wrapper{padding-left:0!important; padding-right: 0rem; box-sizing: border-box;}

/***************Sprint 38 css end here**************/
/******************** RESPONSIVE CSS START HERE **********************/

.project-month-arrows li {
  padding: 0 0.5rem 0 0
}

.project-month-arrows .mat-form-field-wrapper {
  padding: 0;
}

.project-month-arrows .mat-form-field-underline {
  display: none;
}

.project-month-arrows .mat-form-field-infix {
  border: none;
  width: 130px;
}

.project-month-arrows .mat-input-element {
  text-align: center;
}

/* People Calender */

.align-center {
  display: flex;
  align-items: center;
}

.calendar-wrapper .scheduler_default_corner>div:nth-child(2) {
  display: none;
}

.calendar-view.mat-button-toggle-group {
  box-shadow: none;
  border: 1px solid #E4E7EC;
  border-radius: 5px;
  overflow: visible;
}

.calendar-view .mat-button-toggle-label-content {
  line-height: 2.6rem;
  padding: 0 1.3rem;
}

.calendar-view .mat-button-toggle {
  border-right: 1px solid #E4E7EC;
  color: #616167;
}

.calendar-view .mat-button-toggle:first-child {
  border-radius: 5px 0 0 5px;
}

.calendar-view .mat-button-toggle:last-child {
  border-right: none;
  border-radius: 0 5px 5px 0;
}

.calendar-view .mat-button-toggle-checked {
  background: #fff;
  box-shadow: -2px 0px 15px 0px rgba(131, 150, 187, 0.3);
}

.calendar-view .mat-button-toggle-focus-overlay {
  display: none;
}

.calendar-wrapper {
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  display: block;
  position: relative;
  background: #fff;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.calendar-wrapper .scheduler_default_rowheader, .calendar-wrapper .scheduler_default_corner, .calendar-wrapper .scheduler_default_timeheadergroup, .calendar-wrapper .scheduler_default_timeheadercol {
  background: #fff;
  color: #616167;
}

.calendar-wrapper .scheduler_default_timeheadercol {
  display: flex;
  align-items: center;
}

.calendar-wrapper .scheduler_default_timeheadercol_inner {
  border-right: 1px solid rgba(192, 192, 192, 0);
  position: relative;
  text-align: center;
  width: 100%;
}

.calendar-wrapper .scheduler_default_main {
  border-color: rgba(0, 0, 0, 0);
  font-family: Roboto;
  font-size: 1rem;
}

.calendar-wrapper .scheduler_default_timeheader_float {
  display: flex;
  align-items: center;
}

.calendar-wrapper .scheduler_default_timeheader_float_inner {
  width: 100%;
  text-align: center;
}

/* .calendar-wrapper .scheduler_default_rowheader_inner > div{ margin-left: 35px !important;} */

.calendar-wrapper .scheduler_default_tree_image_collapse, .calendar-wrapper .scheduler_default_tree_image_no_children {
  display: none;
}

.calendar-wrapper .scheduler_default_event {
  font-size: inherit;
}

.calendar-wrapper .scheduler_default_event_inner {
  background: #CBEFFA;
  margin: 8px 0;
  padding: 0 0 0 15px;
  line-height: 34px;
  border: none;
  border-left: 2px solid;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
  color: #0E2C57;
  width: calc(100% - 5px);
  box-sizing: border-box;
}

.calendar-wrapper .scheduler_default_event_inner::after {
  content: '';
  width: 20px;
  height: 100%;
  background-color: inherit;
  background-image: url(../../images/icons/dots.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 8px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.calendar-wrapper .available .scheduler_default_event_inner {
  background: #F0F0F0;
  color: #434343;
}

.calendar-wrapper .available .scheduler_default_event_inner::after {
  background-image: url(../../images/icons/dots-available.svg)
}

.calendar-wrapper .project .scheduler_default_event_inner {
  background: #CBEFFA;
  color: #0E2C57;
}

.calendar-wrapper .pto .scheduler_default_event_inner {
  background: #FFEACB;
  color: #7E4F09;
}

.calendar-wrapper .pto .scheduler_default_event_inner::after {
  background-image: url(../../images/icons/dots-pto.svg)
}

.calendar-wrapper .reserve .scheduler_default_event_inner {
  background: #d7f7e3;
  color: #28603d;
}

.calendar-wrapper .reserve .scheduler_default_event_inner::after {
  background-image: url(../../images/icons/dots-reserve.svg)
}

.calendar-wrapper .overallocation {
  overflow: visible !important;
}

.calendar-wrapper .overallocation .scheduler_default_event_inner {
  bottom: auto;
  top: -8px;
  height: 12px;
  border-radius: 3px;
  background: #D31144;
  text-align: center;
  color: #fff;
  font-size: 10px;
  line-height: 12px;
  border-left: 0;
  padding: 0;
  width: 100%;
  margin: 0;
  box-shadow: none;
}

.calendar-wrapper .overallocation .scheduler_default_event_inner::after {
  display: none;
}

.calendar-wrapper .scheduler_default_event_float_inner {
  line-height: 36px;
  width: calc(100% - 15px);
  overflow: hidden;
  margin: 8px 0;
  padding: 0 0 0 8px;
  position: relative;
}

.calendar-wrapper .scheduler_default_event_float_inner::after {
  top: 13px;
}

.calendar-wrapper .scheduler_default_rowheader_inner {
  color: #616167;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0;
  display: flex;
  align-items: center;
}

.calendar-wrapper .scheduler_default_rowheader_inner .resource-span {
  font-weight: 400;
  text-transform: none;
  max-width: 205px;
  display: block;
  /*overflow: hidden; text-overflow: ellipsis; white-space: nowrap;*/
}

/* .calendar-wrapper div[aria-label='Internal Resources'] .scheduler_default_rowheader_inner,
.calendar-wrapper div[aria-label='External Resources'] .scheduler_default_rowheader_inner { padding: 8px 0;} */

.calendar-wrapper .scheduler_default_cellparent {
  background: #F0F7FB !important;
}

/* //rgb(249,249,249) */

.calendar-wrapper .scheduler_default_matrix_vertical_line, .calendar-wrapper .scheduler_default_matrix_horizontal_line, .calendar-wrapper .scheduler_default_divider, .calendar-wrapper .scheduler_default_splitter, .calendar-wrapper .scheduler_default_resourcedivider {
  background: rgba(112, 112, 112, 0.2);
}

.calendar-wrapper .over-utilization, .calendar-wrapper .no-utilization {
  position: absolute;
  height: 12px;
  top: 3px;
  left: 0;
  border-radius: 3px;
  background: #D31144;
  text-align: center;
  color: #fff;
  font-size: 11px;
  line-height: 13px;
  width: 100%;
}

.calendar-wrapper .no-utilization {
  background: #F0F0F0!important;
  color: #434343;
}

.calendar-wrapper .under-utilization {
  position: absolute;
  height: 12px;
  top: 3px;
  left: 0;
  border-radius: 3px;
  background: #D31144;
  text-align: center;
  color: #FFFFFF;
  font-size: 11px;
  line-height: 13px;
  width: 100%;
}

.calendar-wrapper .under-utilization {
  background: #24A73C;
  color: #FFFFFF;
}

.calendar-wrapper .scheduler_default_shadow_inner {
  background-color: rgba(0, 0, 0, 0.2);
}

.rnr_resource .scheduler_default_event_float {
  color: #ffffffe6;
  cursor: default;
}

.rnr_resource .scheduler_default_event_inner {
  cursor: default;
}

.rnr_resource_published .scheduler_default_event_float {
  cursor: default;
}

.rnr_resource_published .scheduler_default_event_inner {
  cursor: default;
}

.today-button.mat-button {
  text-transform: none;
  color: #4583FE !important;
  padding: 0 10px;
  min-width: unset;
  font-weight: normal
}

.today-button.mat-button .mat-button-wrapper {
  text-decoration: underline;
}

.today-button.mat-button:hover .mat-button-wrapper {
  text-decoration: none;
}

.today-button.mat-button .mat-button-ripple {
  display: none;
}

/* .calendar-wrapper [class*="scheduler_default_event_line"] .scheduler_default_event_bar { display: none; }
.calendar-wrapper .scheduler_default_event_line0 .scheduler_default_event_bar{display: block;height: 12px;top: -8px;border-radius: 3px;background: #D31144; text-align: center;color: #fff;font-size: 10px;line-height: 12px;}
.calendar-wrapper .scheduler_default_event_line0 .scheduler_default_event_bar::before { content: '100%'; display: inline; }
.calendar-wrapper .scheduler_default_event_bar_inner { display: none;}
 */

/* Settings Screen*/

.overflow-hidden {
  overflow: hidden;
}

.inner-wrapper-sec .mat-list .mat-list-item {
  height: 36px;
}

.textarea-content {
  max-height: 8em;
  border-bottom: 1px solid rgba(0, 0, 0, .42);
  padding: 1em 0;
  float: left;
  width: 100%;
  overflow: auto;
}

.chip-list-align .mat-chip-list-wrapper {
  padding-left: 0;
}

.chip-list-align input.mat-chip-input {
  margin: 7px;
}

.chip-list-align .mat-form-field-infix {
  padding: 0;
}

.chip-list-align .mat-chip:not(.mat-basic-chip) {
  padding: 2px 10px !important;
  font-size: 0.8rem;
  margin-left: 0 !important;
  margin-bottom: 2px !important;
}

.sparks-form .full-width-cls .mat-input-wrapper {
  width: 95% !important;
}

.set-header-color .scheduler_default_timeheader_float {
  background-color: #EFEFEF!important;
}

.set-header-color {
  background: #EFEFEF!important;
}

.note-textarea textarea {
  border: solid 0.5px #6161676b!important;
  min-height: 100px;
}

.mat-optgroup-label {
  font-weight: 700!important;
  color: #616167!important;
}

.history-button {
  float: right;
  color: blue;
  display: flex;
  font-size: 1.07rem;
  align-items: center;
  margin-top: 0.75rem;
  cursor: pointer;
}

.history-button i {
  margin-right: 0.5rem;
}

.history-button i img {
  width: 1rem;
  display: block;
}

.grey-text {
  color: #a6abab!important;
}

/** Budgeting additional css start here */

.dashboard-search-sec>.mat-list-item-content {
  padding: 0px!important;
}

.dashboard-search-sec .search-box {
  border: solid 1px transparent;
  min-width: 2rem;
  padding: 0px;
}

.dashboard-search-sec .search-box.white-bg {
  border: solid 1px #ddd;
  min-width: 2rem;
  padding: 5px 10px;
}

.dashboard-search-sec .search-box.white-bg input.show-input {
  text-align: left;
}

/** Color added for utilization when it is exact 8 hours for Resource Calendar */

.calendar-wrapper .utilization {
  position: absolute;
  height: 12px;
  top: 3px;
  left: 0;
  border-radius: 3px;
  background: #D31144;
  text-align: center;
  color: #FFFFFF;
  font-size: 11px;
  line-height: 13px;
  width: 100%;
}

.calendar-wrapper .utilization {
  background: #e1ad01!important;
  color: #FFFFFF;
}

.estimator-sec-item.custom-error-sec.section-based-markup {
  display: flex;
  max-width: 160px;
  margin-top: 2rem;
  width: 100%;
  box-sizing: border-box;
  padding-left: 15px;
}

.symbol-color{color: #616167}

.stepper-form-section app-project-detail h1.pos-abs-cls{position: absolute;
  left: -10px;
  top: 0;
  width: 100%;
  background: #eefbff;
  padding: 20px 33px;
  justify-content: flex-start;
  border-bottom: 0;
}
.stepper-form-section app-project-detail h1.pos-abs-cls a{
  margin-left: 7px;
}

.ag-header-container{z-index:1!important;}
.dashboard-right-content{position:relative;}
.pending-sec-loader{
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
}
.pending-sec-loader .overlay-content-inner > .mat-spinner{width: 50px!important;
  height:50px!important;}
.pending-sec-loader .overlay-content-inner .mat-spinner > svg{width: 50px!important;
  height: 50px!important;}
  .pending-backdrop{   
    width: 100%;
    height: 100%;
    margin-left: 1.5rem;
    z-index: 1;
  }

.sparks-table.audit-table .mat-row {
  cursor: default;
}

.select-sales-proposal .list-filter {
  min-height: 15rem;
}

.cdk-overlay-pane.custom-dialogbox.import-drag-drop {
  width: 95vw;
  max-width: 100vw!important;
  height: 95vh;
    max-height: 95vh;
}

.cdk-overlay-pane.custom-dialogbox.import-drag-drop .mat-dialog-container {
  padding: 0px!important;
  border-radius: 0.3rem;
  max-height: 95vh;
}

.cdk-overlay-pane.custom-dialogbox.import-drag-drop .dialog-box.add-component {
  width: 100%;
  max-width: 100%;
}

.enableBanner {
  min-height: 9rem;
}

.maintenanceBg {
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('./../../../assets/images/maintenance-bg.png') no-repeat center center;
  background-size:cover;
}

.maintenanceBg .landing-pg-sign-in-sec {
  float: right; 
  box-sizing: border-box; 
}

.maintenanceBg .landing-pg-sign-in-sec .sign-in-sec {
  background: #ffffff;;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 3px 7px 46px 2px rgba(0, 0, 0, 0.5490196078431373);
}

.maintenanceBg .landing-pg-sign-in-sec .sign-in-sec.main-container {
  display:flex;
  flex-direction: row;
  margin: 0 auto;
  width: 80%;
  justify-content: space-between;
  width: 1062px;
  height: 417px;
}

.maintenanceBg .landing-pg-sign-in-sec .sign-in-sec.main-container .maintenance-logo {
  margin-left: 142px;
}

.maintenanceBg .landing-pg-sign-in-sec .sign-in-sec.main-container .main-logo-sec {
  padding: 0rem 25%;
  text-align: center;
  padding-bottom: 2rem;
}

.maintenanceBg .landing-pg-sign-in-sec .sign-in-sec.main-container .main-logo-sec img {
  float: none;
}

.maintenanceBg .landing-pg-sign-in-sec .sign-in-sec.main-container .main-logo-sec-main {
  text-align: center;
}

.maintenanceBg .landing-pg-sign-in-sec .landing-content-sec-main {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-right: 142px;
  height: 254px;
  padding-top: 4.4rem;
  color: #373737;
}

.maintenanceBg .landing-pg-sign-in-sec .sign-in-sec.main-container .main-logo-sec-main {
  float: left;
  width: 100%;
  box-sizing: border-box;
}

.maintenanceBg .landing-pg-sign-in-sec .sign-in-sec.main-container .main-logo-sec-main img {
  max-width: 200px;
  margin-bottom: 1rem;
}

.maintenanceBg .landing-pg-sign-in-sec .landing-content-sec-main .landing-text-sec {
  text-align: center;
  margin: 0.5rem 0rem 0rem;
  line-height: 14px;
  font-size: 16px;
}

.maintenanceBg .landing-pg-sign-in-sec .landing-content-sec-main .landing-text-sec.other-maintenance-message.help-text {
  padding-top: 3.3rem;
}

.maintenanceBg .landing-pg-sign-in-sec .landing-content-sec-main .landing-text-sec.other-maintenance-message {
  color: #373737;
}

.routing-info-container {
  margin-bottom: 100px;
}

.is-remit {
  margin-top: 11px;
}