.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
}

.loader-image {
  width: 200px;
  height: 200px;
  background-position: center center;
  background-size: contain;
}

#cssload-pgloading:after {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#cssload-pgloading .cssload-loadingwrap {
  position: absolute;
  top: 45%;
  bottom: 45%;
  left: 25%;
  right: 25%;
}

#cssload-pgloading .cssload-bokeh {
  font-size: 97px;
  width: 1em;
  height: 1em;
  position: relative;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

#cssload-pgloading .cssload-bokeh li {
  position: absolute;
  width: .2em;
  height: .2em;
  border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

#cssload-pgloading .cssload-bokeh li:nth-child(1) {
  left: 50%;
  top: 0;
  margin: 0 0 0 -.1em;
  background: #00c176;
  transform-origin: 50% 250%;
  -o-transform-origin: 50% 250%;
  -ms-transform-origin: 50% 250%;
  -webkit-transform-origin: 50% 250%;
  -moz-transform-origin: 50% 250%;
  animation: cssload-rota 1.3s linear infinite, cssload-opa 4.22s ease-in-out infinite alternate;
  -o-animation: cssload-rota 1.3s linear infinite, cssload-opa 4.22s ease-in-out infinite alternate;
  -ms-animation: cssload-rota 1.3s linear infinite, cssload-opa 4.22s ease-in-out infinite alternate;
  -webkit-animation: cssload-rota 1.3s linear infinite, cssload-opa 4.22s ease-in-out infinite alternate;
  -moz-animation: cssload-rota 1.3s linear infinite, cssload-opa 4.22s ease-in-out infinite alternate;
}

#cssload-pgloading .cssload-bokeh li:nth-child(2) {
  top: 50%;
  right: 0;
  margin: -.1em 0 0 0;
  background: #ff003c;
  transform-origin: -150% 50%;
  -o-transform-origin: -150% 50%;
  -ms-transform-origin: -150% 50%;
  -webkit-transform-origin: -150% 50%;
  -moz-transform-origin: -150% 50%;
  animation: cssload-rota 2.14s linear infinite, cssload-opa 4.93s ease-in-out infinite alternate;
  -o-animation: cssload-rota 2.14s linear infinite, cssload-opa 4.93s ease-in-out infinite alternate;
  -ms-animation: cssload-rota 2.14s linear infinite, cssload-opa 4.93s ease-in-out infinite alternate;
  -webkit-animation: cssload-rota 2.14s linear infinite, cssload-opa 4.93s ease-in-out infinite alternate;
  -moz-animation: cssload-rota 2.14s linear infinite, cssload-opa 4.93s ease-in-out infinite alternate;
}

#cssload-pgloading .cssload-bokeh li:nth-child(3) {
  left: 50%;
  bottom: 0;
  margin: 0 0 0 -.1em;
  background: #fabe28;
  transform-origin: 50% -150%;
  -o-transform-origin: 50% -150%;
  -ms-transform-origin: 50% -150%;
  -webkit-transform-origin: 50% -150%;
  -moz-transform-origin: 50% -150%;
  animation: cssload-rota 1.67s linear infinite, cssload-opa 5.89s ease-in-out infinite alternate;
  -o-animation: cssload-rota 1.67s linear infinite, cssload-opa 5.89s ease-in-out infinite alternate;
  -ms-animation: cssload-rota 1.67s linear infinite, cssload-opa 5.89s ease-in-out infinite alternate;
  -webkit-animation: cssload-rota 1.67s linear infinite, cssload-opa 5.89s ease-in-out infinite alternate;
  -moz-animation: cssload-rota 1.67s linear infinite, cssload-opa 5.89s ease-in-out infinite alternate;
}

#cssload-pgloading .cssload-bokeh li:nth-child(4) {
  top: 50%;
  left: 0;
  margin: -.1em 0 0 0;
  background: #88c100;
  transform-origin: 250% 50%;
  -o-transform-origin: 250% 50%;
  -ms-transform-origin: 250% 50%;
  -webkit-transform-origin: 250% 50%;
  -moz-transform-origin: 250% 50%;
  animation: cssload-rota 1.98s linear infinite, cssload-opa 6.04s ease-in-out infinite alternate;
  -o-animation: cssload-rota 1.98s linear infinite, cssload-opa 6.04s ease-in-out infinite alternate;
  -ms-animation: cssload-rota 1.98s linear infinite, cssload-opa 6.04s ease-in-out infinite alternate;
  -webkit-animation: cssload-rota 1.98s linear infinite, cssload-opa 6.04s ease-in-out infinite alternate;
  -moz-animation: cssload-rota 1.98s linear infinite, cssload-opa 6.04s ease-in-out infinite alternate;
}

@keyframes cssload-rota {
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes cssload-rota {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes cssload-opa {
  12.0% {
    opacity: 0.80;
  }
  19.5% {
    opacity: 0.88;
  }
  37.2% {
    opacity: 0.64;
  }
  40.5% {
    opacity: 0.52;
  }
  52.7% {
    opacity: 0.69;
  }
  60.2% {
    opacity: 0.60;
  }
  66.6% {
    opacity: 0.52;
  }
  70.0% {
    opacity: 0.63;
  }
  79.9% {
    opacity: 0.60;
  }
  84.2% {
    opacity: 0.75;
  }
  91.0% {
    opacity: 0.87;
  }
}

@-webkit-keyframes cssload-opa {
  12.0% {
    opacity: 0.80;
  }
  19.5% {
    opacity: 0.88;
  }
  37.2% {
    opacity: 0.64;
  }
  40.5% {
    opacity: 0.52;
  }
  52.7% {
    opacity: 0.69;
  }
  60.2% {
    opacity: 0.60;
  }
  66.6% {
    opacity: 0.52;
  }
  70.0% {
    opacity: 0.63;
  }
  79.9% {
    opacity: 0.60;
  }
  84.2% {
    opacity: 0.75;
  }
  91.0% {
    opacity: 0.87;
  }
}.popup-container {
  height: 500px;
  width: 570px;
  background: #F5F6FA;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  border-radius: 20px;
}

.popup-logo-container {
  height: 50%;
}

.popup-text {
  position: relative;
  text-align: center;
}

.popup-text__highlighted {
  color: #747386;
  font-size: 35px;
  text-align: center;
  display: block;
  margin-bottom: 20px;
}

span.popup-text__secondary {
  color: #9190A0;
  display: block;
  font-size: 17px;
}

.popup-text__link {
  display: inline-block;
  margin-top: 40px;
  font-size: 20px;
  color: #747386;
  position: relative;
}

.popup-text__link:after {
  content: '';
  display: block;
  background: #747386;
  height: 2px;
  width: 100%;
  margin: 0 auto;
}

@-webkit-keyframes rotate-forever {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-forever {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.kat-login-board__data__logo__holder {
  height: 139px;
  width: 177px;
  background-size: contain;
  background: url(/dist/smile@1x.png) no-repeat;
  margin: 10px auto;
}

.kat-login-board__data__heading-primary {
  color: #56B256;
  font-size: 20px;
  text-align: center;
}

.kat-login-board__data__heading-primary h1 {
  font-weight: 500;
}

.kat-login-board__data__heading-secondary {
  margin-top: 80px;
  text-align: center;
  color: #AEB0B4;
  font-size: 16px;
}

.kat-login-board__data__link {
  text-align: center;
  text-decoration: underline;
  font-size: 17px;
  margin-top: 20px;
}

.kat-login-board__data__link a {
  color: #545269;
}

.kat-login-board__data__secondary-data input {
  background: none;
  font-size: 14px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #D8DADF;
  color: #757575;
}

.kat-login-board__data__secondary-data__bar__action-button {
  position: absolute;
  right: 0;
  top: 0;
  font-weight: bold;
  font-size: 14px;
}

.kat-login-board__data__secondary-data__bar__action-button__active {
  color: #82C484;
}

.kat-login-board__data__secondary-data__info-message-container {
  position: absolute;
  bottom: -20px;
}

.half-width {
  width: 45%;
}

.kat-login-container {
  height: 100%;
  background: #413F59;
}

.kat-login-board {
  width: 998px;
  height: 570px;
  background: #F5F6FA;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0;
  left: 0;
  box-shadow: 0 0 80px -20px #141321;
  border-radius: 4px;
  overflow: hidden;
  border-left: 1px solid rgba(0, 0, 0, 0.47);
}

.kat-login-board.sm-size {
  height: 550px;
}

.kat-login-board__image {
  height: 100%;
  width: 42%;
  background: url(/dist/pic@2x.png) no-repeat;
  background-size: cover;
}

.kat-login-board__data {
  padding: 35px;
  width: 58%;
  height: 100%;
  position: relative;
}

.kat-login-board__data__nav-icon > span:before {
  margin: 0 !important;
  font-size: 30px;
  color: #848492;
}

.kat-login-board__data__primary-data {
  padding: 0 55px 0;
}

.kat-login-board__data__primary-data.lg-width {
  padding: 44px 48px 44px;
}

.kat-login-board__data__primary-data span {
  font-size: 13px;
  color: #8F909D;
  margin-left: 2px;
}

.kat-login-board__data span.kat-back-icon.flaticon-arrows {
  margin: 0 25px 0 19px;
}

.kat-login-board__data .input-group.two-col {
  width: 47%;
}

.kat-login-board__data__primary-data > h1 {
  font-family: sf-compact;
  color: #848492;
  font-size: 38px;
  font-weight: 400;
}

.kat-login-board__data__primary-data__emphasized-heading {
  color: #242b39 !important;
  font-size: 50px !important;
  margin: 0;
  font-weight: 700 !important;
}

.kat-login-board__data__secondary-data__caption {
  width: 100%;
  display: inline-block;
  color: #848492;
  padding: 8px 0;
  font-size: 12px;
  font-weight: bold;
}

.kat-login-board__data__secondary-data__info-message__header {
  color: #9A9AA7;
  font-size: 13px;
  margin-bottom: 7px;
}

.kat-login-board__data__secondary-data__info-message {
  color: #848492;
  font-size: 16px;
  margin-bottom: 3px;
  display: block;
}

.kat-login-board__data__secondary-data__info-message__highlighted {
  color: #656479;
}

.global-error {
  position: absolute;
  bottom: -60px;
  font-size: 13px;
  left: 0;
  right: 0;
  font-weight: 500;
  color: #D86162;
}

.global-error__symbol, .kat-login-board__data__secondary-data__info-message__header__alert-symbol {
  border: 1px solid;
  border-radius: 50%;
  padding: 0 5px;
}

.global-error__symbol, .kat-login-board__data__secondary-data__info-message__header__alert-symbol {
  margin-right: 5px;
}

.kat-login-board__data__secondary-data__info-message__header__alert-symbol {
  padding: 0 6px;
}

.kat-login-board__data__secondary-data {
  margin: 25px 55px 0;
  position: relative;
}

.kat-login-board__data__secondary-data__input {
  font-family: sf-compact;
  display: inline-block;
  width: 100%;
  border: none;
  background: none;
  border-bottom: 1px solid grey;
  padding: 5px 0;
  font-size: 16px;
}

.kat-login-board__data__secondary-data__input__caption {
  font-size: 12px;
  color: #848492;
  font-family: sf-compact;
}

.forgot-password {
  font-family: sf-compact;
  font-size: 12px;
  display: inline-block;
  padding: 25px 0 0;
  color: grey;
  cursor: pointer;
}

.forgot-password:hover {
  color: #242b39;
}

.login-button {
  background: #57b557 !important;
  padding: 12px 15px !important;
  margin-top: 18px;
  color: white;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
}

.login-button:hover {
  background: #54A24D !important;
}

.kat-login-board__data__secondary-data__info-message-container {
  position: relative;
  top: 0;
}

.kat-login-board__data__nav-button, .kat-login-board__data__nav-button__active {
  font-family: sf-compact;
  margin: 0 55px 0;
  bottom: 10px;
  position: relative;
}

.kat-login-board__data__secondary-data__non-animated-group {
  margin-bottom: 70px;
}

.kat-login-board__data__secondary-data__info-message-container_non-animated-group {
  position: relative;
  top: -30px;
}
.kat-login-board__data__nav-button button{
  pointer-events: none;
  cursor: pointer;
}
.kat-login-board__data__nav-button button, .kat-login-board__data__nav-button__active button {
  background: #BDC4D2 !important;
  color: #ECF5EC;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 2px;
  font-family: sf-compact;
  height: 40px;
}

.kat-login-board__data__nav-button__active button {
  background: #58B358 !important;
  color: #ECF5EC;
}

.kat-login-board__data__login-button button {
  font-weight: 700;
  background: #58B358 !important;
  color: #ECF5EC;
  padding: 15px 25px;
  font-size: 12px; /* font-weight: bold; */
  border-radius: 2px;
}

.kat-login-board__data__login-button button:hover {
  background: #457745 !important;
}

.finish-button {
  padding: 15px 30px !important;
}

.kat-login-board__data__login-button {
  margin-top: 70px;
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
}

.kat-login-board__data__nav-button__icon {
  transform: rotate(-180deg);
  display: inline-block;
  padding-right: 7px;
  padding-bottom: 4px;
}

.kat-login-board__data__nav-button__icon:before {
  font-size: 14px !important;
  position: relative;
  top: 3px;
}

.kat-login-board__data__nav-button__icon:before {
  margin-left: 0 !important;
}

.kat-login-board__data__page-indicator {
  margin: 0 55px;
  bottom: 10px;
  position: relative;
}

.input-group__error-message-non-animated-group {
  position: absolute;
  top: 60px;
  font-size: 11px;
  color: #D86162;
}

.kat-login-board__data__page-indicator__list__item {
  height: 6px;
  width: 6px;
  background: #BDC4D2;
  border-radius: 50%;
  display: inline-block; /* padding: 0 5px; */
  margin-left: 5px;
}

.kat-login-board__data__page-indicator__list__item.active {
  background: #58B358;
}

ul.kat-login-board__data__page-indicator__list {
  display: inline-block; /* display: table-cell; */
  padding: 3px 21px;
}

.kat-login-board__data__footer-note {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 20px;
  font-size: 13px;
  color: #848492;
  font-family: sf-compact;
}

.kat-login-board__login-info {
  width: 55%;
  height: 100%;
  background: #F5F6FA;
}

.kat-login-board__login-info__logo {
  height: 285px;
  position: relative;
}

.kat-login-board__login-info__data__heading {
  color: #434159;
  margin-bottom: 7px;
  font-size: 35px;
}

.kat-login-board__login-info__logo__holder {
  background: #434159;
  height: 130px;
  width: 130px;
  border-radius: 10px;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 135px;
  display: flex;
  align-items: center;
}

.kat-login-board__login-info__logo__holder-letter {
  color: white;
  font-size: 50px;
  flex: 1;
}

.kat-login-board__login-info__data {
  text-align: center;
  padding: 0 20px;
}

.kat-login-board__login-info__link {
  color: #434159;
  display: block;
  margin-bottom: 45px;
  font-size: 15px;
}

.kat-login-board__login-info__text {
  color: #9A9DA1;
  text-align: center;
  display: block;
}

.kat-login-board__login-info__text__nav-icon.flaticon-arrows:before {
  margin-left: 0;
}

.kat-login-board__login-info__text__nav-icon {
  transform: rotate(180deg);
  display: inline-block;
}

.kat-login-board__login-info__text__nav-icon:before {
  font-size: 14px !important;
}

.kat-login-board__login-info__form {
  width: 45%;
  height: 100%;
  padding: 78px 40px 0 40px;
  background: #fff;
}

.kat-login-board__login-info__form__group-holder {
  position: relative;
  height: 100%;
}

.kat-login-board__login-info__form__group-holder input {
  background: none;
  font-size: 16px;
  padding: 13px 0 7px 0;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #D8DADF;
  color: #757575;
}

.kat-login-board__login-info__form__group {
  position: relative;
  margin-bottom: 10px;
}

.kat-login-board__login-info__form__group-holder input:focus {
  outline: none;
}

/* LABEL ======================================= */
.kat-login-board__login-info__form__group-holder label {
  color: #999;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 15px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

/* active state */
.kat-login-board__login-info__form__group-holder input:focus ~ .kat-login-board__data__secondary-data__-error-bar:before, .kat-login-board__login-info__form__group-holder input:focus ~ .kat-login-board__data__secondary-data__-error-bar:after {
  width: 50%;
}

.kat-login-board__login-info__form__group-holder input:focus ~ .kat-login-board__data__secondary-data__bar:before, .kat-login-board__login-info__form__group-holder input:focus ~ .kat-login-board__data__secondary-data__bar:after {
  width: 50%;
}

.kat-login-board__login-info__form__group-holder input:focus ~ .kat-login-board__data__secondary-data__highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

.kat-login-board__login-info__form__group-holder input:focus ~ label, .kat-login-board__login-info__form__group-holder input:valid ~ label {
  top: -10px;
  font-size: 14px;
  color: #000;
}

.kat-login-board__data__secondary-data__group-wrapper.two-elements .kat-login-board__data__secondary-data__group {
  width: calc(50% - 15px);
}

.kat-login-board__data__secondary-data__group-wrapper.two-elements .kat-login-board__data__secondary-data__group:first-child {
  margin-right: 15px;
}

.kat-login-board__data__secondary-data__group-wrapper.two-elements .kat-login-board__data__secondary-data__group:last-child {
  margin-left: 15px;
}

.kat-login-board__login-info__form__group-holder .kat-default-button {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 2px;
  margin-top: 10px;
}

span.kat-login-board__data__secondary-data__error-message {
  position: absolute;
  margin-top: 6px;
}

.kat-login-board-pre-txt {
  font-size: 14px;
  color: #242b39;
  text-transform: uppercase;
}

.kat-login-board-pre-url {
  padding: 10px;
  background: #e9ecf3;
  border-radius: 3px;
  margin-top: 5px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kat-login-board__data_email_suggestion {
  margin-top: -20px;
  min-height: 100px;
}

.kat-login-board__data_email_suggestion_email {
  font-size: 14px;
  line-height: 19px;
}

.kat-login-board__data_email_suggestion_hdr {
  font-size: 12px;
}

.kat-login-board__data_email_suggestion_txt1 {
  color: #242b39;
}

.login-width-changes ~ .kat-login-board__data ~ .kat-login-board {
  width: 1062px;
  height: 632px;
}

.kat-login-board__data__login-button span {
  margin-top: 30px;
  color: #7f7f8f;
  font-size: 15px;
  font-weight: 600;
}

.kat-login-board__data__wrapper {
  transform: translateY(-50%);
  top: 50%;
  position: absolute;
  width: calc(100% - 80px);
}* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: sf-compact, 'Roboto', sans-serif;
}

html, body {
  height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

body {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  font-size: 14px;
  color: #7f7e8b;
  font-weight: 400;
}

ul, li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

select, option:hover, button {
  cursor: pointer;
}

/* :::::::::: COMMONLY USED CLASSES :::::::::: */
.fleft {
  float: left;
}

.fright {
  float: right;
}

.clearall {
  clear: both;
}

.clearfix:after {
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.kat-block__relative {
  position: relative;
}

.kat-cursor__pointer {
  cursor: pointer;
}

.kat-cursor__move {
  cursor: move !important;
}

.kat-cursor__pointer__disable {
  cursor: no-drop;
}

.kat-button__disable {
  opacity: 0.4 !important;
  cursor: default !important;
}

.no-transition {
  transition: none !important;
}

.kat_border__none {
  border: none !important;
}

.kat_border-bottom__none {
  border-bottom: none !important;
}

.kat-overflow__none {
  overflow: none !important;
}

.kat-overflow__hidden {
  overflow: hidden !important;
}

.kat-overflow__visible {
  overflow: visible !important;
}

.kat-height-auto {
  height: auto !important;
}

.kat-display-none {
  display: none;
}

.kat-display-inline-block {
  display: inline-block !important;
}

.bold-text {
  font-weight: 700;
}

.kat-display-block {
  display: block !important;
  height: auto !important;
}

.kat-margin-left-0 {
  margin-left: 0 !important;
}

.kat-margin-bottom-0 {
  margin-bottom: 0 !important;
}

.kat-margin-bottom-20px {
  margin-bottom: 20px !important;
}

.kat-margin-bottom-35px {
  margin-bottom: 35px !important;
}

.kat-margin-left-10px {
  margin-left: 10px !important;
}

.kat-margin-right-0px {
  margin-right: 0 !important;
}

.kat-margin-right-12px {
  margin-right: 12px !important;
}

.kat-margin-top-5px {
  margin-top: 5px !important;
}

.kat-margin-top-15px {
  margin-top: 15px !important;
}

.kat-margin-bottom-15px {
  margin-bottom: 15px !important;
}

.kat-right-20px {
  right: 20px !important;
}

.kat-margin-0px {
  margin: 0 !important;
}

.kat-padding-0px {
  padding: 0 !important;
}

.kat-padding-left-0px {
  padding-left: 0 !important;
}

.kat-padding-right-0px {
  padding-right: 0 !important;
}

.kat-padding-top-0px {
  padding-top: 0 !important;
}

.kat-padding-bottom-0px {
  padding-bottom: 0 !important;
}

.kat-width-100per {
  width: 100% !important;
}

.kat-max-width-100per {
  max-width: 100% !important;
}

.kat-width-50per {
  width: 50% !important;
}

.kat-width-30per {
  width: 30% !important;
}

.kat-height-100per {
  height: 100% !important;
}

.kat-half-opacity {
  opacity: 0.5;
}

.kat-full-opacity {
  opacity: 0;
}

.kat-minus-zindex {
  z-index: -1 !important;
}

.input-clear-wrapper {
  position: relative;
}

.kat-overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kat-overflow-visible {
  overflow: visible !important;
}

.kat-align-center {
  text-align: center;
}

.kat-width-75-perc {
  width: 75% !important;
}

.kat-width-25-perc {
  width: 25% !important;
}

.kat-width-50-perc {
  width: 50% !important;
}

.kat-width-auto {
  width: auto !important;
}

.kat-disabled {
  color: #d0d1d2 !important;
  cursor: no-drop;
  border: none !important;
}

.kat-bold-text {
  font-weight: 600 !important;
}/* :::::::::: COMMONLY USED CLASSES :::::::::: */
.fleft {
  float: left;
}

.fright {
  float: right;
}

.clearall {
  clear: both;
}

.clearfix:after {
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.font-12{
  font-size:12px;
}
.kat-block__relative {
  position: relative;
}

.kat-block__absolute {
  position: absolute;
}

.kat-cursor__pointer {
  cursor: pointer;
}

.kat-cursor__move {
  cursor: move !important;
}

.kat-cursor__pointer__disable {
  cursor: no-drop;
}

.kat-button__disable {
  opacity: 0.4 !important;
  cursor: default !important;
}

.no-transition {
  transition: none !important;
}

.kat_border__none {
  border: none !important;
}

.kat_border-bottom__none {
  border-bottom: none !important;
}

.kat-cursor-default {
  cursor: default;
}

.kat-cursor-default:before {
  cursor: default !important;
}

.kat-overflow__none {
  overflow: none !important;
}

.kat-overflow__hidden {
  overflow: hidden !important;
}

.kat-overflow__visible {
  overflow: visible !important;
}

.kat-height-auto {
  height: auto !important;
}

.kat-display-none {
  display: none;
}

.kat-display-inline-block {
  display: inline-block !important;
}

.bold-text {
  font-weight: 700;
}

.kat-strike-through {
  text-decoration: line-through;
}

.kat-display-block {
  display: block !important;
  height: auto !important;
}

.kat-margin-left-0 {
  margin-left: 0 !important;
}

.kat-margin-bottom-0 {
  margin-bottom: 0 !important;
}

.kat-margin-left-10px {
  margin-left: 10px !important;
}

.kat-margin-right-0px {
  margin-right: 0 !important;
}

.kat-margin-right-12px {
  margin-right: 12px !important;
}

.kat-margin-top-5px {
  margin-top: 5px !important;
}

.kat-margin-top-10px {
  margin-top: 10px !important;
}

.kat-margin-top-15px {
  margin-top: 15px !important;
}

.kat-margin-bottom-15px {
  margin-bottom: 15px !important;
}

.kat-right-20px {
  right: 20px !important;
}

.kat-margin-0px {
  margin: 0 !important;
}

.kat-padding-0px {
  padding: 0 !important;
}

.kat-padding-left-0px {
  padding-left: 0 !important;
}

.kat-padding-left-10px {
  padding-left: 10px !important;
}

.kat-padding-right-0px {
  padding-right: 0 !important;
}

.kat-padding-top-0px {
  padding-top: 0 !important;
}

.kat-padding-bottom-0px {
  padding-bottom: 0 !important;
}

.kat-width-100per {
  width: 100% !important;
}

.kat-max-width-100per {
  max-width: 100% !important;
}

.kat-width-50per {
  width: 50% !important;
}

.kat-width-30per {
  width: 30% !important;
}

.kat-height-100per {
  height: 100% !important;
}

.kat-half-opacity {
  opacity: 0.5;
}

.kat-full-opacity {
  opacity: 0;
}

.kat-minus-zindex {
  z-index: -1 !important;
}

.input-clear-wrapper {
  position: relative;
}

.kat-overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kat-overflow-visible {
  overflow: visible !important;
}

.kat-align-center {
  text-align: center;
}

.kat-width-75-perc {
  width: 75% !important;
}

.kat-width-25-perc {
  width: 25% !important;
}

.kat-width-50-perc {
  width: 50% !important;
}

.kat-width-auto {
  width: auto !important;
}

.kat-disabled {
  color: #d0d1d2 !important;
  cursor: no-drop;
  border: none !important;
}

.kat-bold-text {
  font-weight: 600 !important;
}

.kat-login-board__data__secondary-data label {
  color: #999;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}




/* active state */
.kat-login-board__data__secondary-data input:focus ~ label, .kat-login-board__data__secondary-data input:valid ~ label, .kat-personal-data-date-ip.active label {
  top: -10px;
  font-size: 14px;
}

/* BOTTOM BARS ================================= */
.kat-login-board__data__secondary-data__-error-bar, .kat-login-board__data__secondary-data__bar {
  position: relative;
  display: block;
  width: 100%;
}

.kat-login-board__data__secondary-data__-error-bar:before, .kat-login-board__data__secondary-data__bar:before, .kat-login-board__data__secondary-data__-error-bar:after, .kat-login-board__data__secondary-data__bar:after {
  content: '';
  height: 1px;
  width: 0;
  bottom: 1px;
  position: absolute;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.kat-login-board__data__secondary-data__-error-bar:before, .kat-login-board__data__secondary-data__-error-bar:after {
  background: #D86162;
}

.kat-login-board__data__secondary-data__bar:before, .kat-login-board__data__secondary-data__bar:after {
  background: #000;
}

.kat-login-board__data__secondary-data__-error-bar:before, .kat-login-board__data__secondary-data__bar:before {
  left: 50%;
}

.kat-login-board__data__secondary-data__-error-bar:after, .kat-login-board__data__secondary-data__bar:after {
  right: 50%;
}

/* active state */
.kat-login-board__data__secondary-data input:focus ~ .kat-login-board__data__secondary-data__-error-bar:before, .kat-login-board__data__secondary-data input:focus ~ .kat-login-board__data__secondary-data__-error-bar:after, .kat-personal-data-date-ip.active .kat-login-board__data__secondary-data__-error-bar:before, .kat-personal-data-date-ip.active .kat-login-board__data__secondary-data__-error-bar:after {
  width: 50%;
}

.kat-login-board__data__secondary-data input:focus ~ .kat-login-board__data__secondary-data__bar:before, .kat-login-board__data__secondary-data input:focus ~ .kat-login-board__data__secondary-data__bar:after, .kat-personal-data-date-ip.active .kat-login-board__data__secondary-data__bar:before, .kat-personal-data-date-ip.active .kat-login-board__data__secondary-data__bar:after {
  width: 50%;
}

.kat-personal-data-date-ip.active .kat-login-board__data__secondary-data__bar:before, .kat-personal-data-date-ip.active .kat-login-board__data__secondary-data__bar:after {
  bottom: -34px;
}

/* HIGHLIGHTER ================================== */
.kat-login-board__data__secondary-data__highlight {
  position: absolute;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

/* active state */
.kat-login-board__data__secondary-data input:focus ~ .kat-login-board__data__secondary-data__highlight, .kat-personal-data-date-ip.active .kat-login-board__data__secondary-data__highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
  from {
    background: #5264AE;
  }
  to {
    width: 0;
    background: transparent;
  }
}

@keyframes inputHighlighter {
  from {
    background: #5264AE;
  }
  to {
    width: 0;
    background: transparent;
  }
}

.kat-background-none {
  background: none !important;
  width: 75px;
  margin: 0 auto;
}

.kat-login-board__data__secondary-data {
  position: relative;
}

.kat-login-board__data__secondary-data__input {
  font-family: sf-compact;
  display: inline-block;
  width: 100%;
  border: none;
  background: none;
  border-bottom: 1px solid grey;
  padding: 5px 0;
  font-size: 16px;
}

input.kat-login-board__data__secondary-data__error-input {
  border-bottom-color: #D86162;
}

.kat-login-board__data__secondary-data__input__caption {
  font-size: 12px;
  color: #848492;
  font-family: sf-compact;
}

.kat-login-board__data__secondary-data input, .kat-login-board__data__secondary-data textarea {
  background: none;
  font-size: 14px;
  padding: 10px 0 10px 0;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #D8DADF;
  color: #757575;
}

/* form starting stylings ---------------------------- */
.input-group {
  position: relative;
  margin-bottom: 47px;
}

.input__non-animated-group__label {
  color: #5E6268;
}

.input-group textarea {
  resize: none;
  height: 75px;
}

.input-group input, .input-group textarea {
  background: none;
  font-size: 16px;
  padding: 8px 0 7px 0;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #D8DADF;
  color: #757575;
}

.input__non-animated-group__input-container {
  border-bottom: 1px solid #D8DADF;
}

.input__non-animated-group__input-container input, .input__non-animated-group__input-container div.content-edit {
  width: 134px !important;
  color: #514F67;
  border: none !important;
  display: inline-block !important;
  padding-left: 5px;
  font-size: 16px !important;
}

.input-group__non-animated-group__input-container__text {
  color: #848492;
}

.input-group__error {
  border-bottom-color: #D86162 !important;
}

.input-group input:focus, .input-group textarea:focus {
  outline: none;
}

.input-group__error-message {
  position: absolute;
  top: 40px;
  font-size: 11px;
  color: #D86162;
}

.kat-login-board__data__secondary-data__info-message__header {
  color: #9A9AA7;
  font-size: 13px;
  margin-bottom: 7px;
  margin-top: 6px;
  display: inline-block;
}

.kat-login-board__data__secondary-data__info-message {
  color: #848492;
  font-size: 16px;
  margin-bottom: 3px;
  display: block;
}

.kat-login-board__data__secondary-data__info-message__highlighted {
  color: #656479;
}

.global-error {
  position: absolute;
  bottom: -45px;
  font-size: 11px;
  left: 50%;
  transform: translateX(-50%);
  right: 0;
  font-weight: 500;
}

.global-error__symbol, .kat-login-board__data__secondary-data__info-message__header__alert-symbol {
  border: 1px solid;
  border-radius: 50%;
  padding: 0 5px;
}

.global-error__symbol, .kat-login-board__data__secondary-data__info-message__header__alert-symbol {
  margin-right: 5px;
}

.kat-login-board__data__secondary-data__info-message__header__alert-symbol {
  padding: 0 6px;
}

/* LABEL ======================================= */
.input-group label {
  color: #8F909D;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

/* active state */
.input-group input:focus ~ label, .input-group input:valid ~ label, .input-group textarea:focus ~ label, .input-group textarea:valid ~ label, .kat-personal-data-date-ip.active label {
  top: -14px;
  font-size: 14px;
  text-transform: uppercase;
}

.input-group.disabled {
  margin-bottom: 33px;
  pointer-events: none;
  opacity: .7;
}

.input-group.disabled label {
  top: -20px;
  font-size: 14px;
  color: #242b39;
}

/* BOTTOM BARS ================================= */
.input-group__error-bar, .input-group__bar {
  position: relative;
  display: block;
  width: 100%;
}

.input-group__error-bar:before, .input-group__bar:before, .input-group__error-bar:after, .input-group__bar:after {
  content: '';
  height: 1px;
  width: 0;
  bottom: 1px;
  position: absolute;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.input-group__error-bar:before, .input-group__error-bar:after {
  background: #D86162;
}

.input-group__bar:before, .input-group__bar:after {
  background: #000;
}

.input-group__error-bar:before, .input-group__bar:before {
  left: 50%;
}

.input-group__error-bar:after, .input-group__bar:after {
  right: 50%;
}

/* active state */
.input-group input:focus ~ .input-group__error-bar:before, .input-group input:focus ~ .input-group__error-bar:after, .input-group textarea:focus ~ .input-group__error-bar:before, .input-group textarea:focus ~ .input-group__error-bar:after, .kat-personal-data-date-ip.active .input-group__error-bar:before, .kat-personal-data-date-ip.active .input-group__error-bar:after {
  width: 50%;
}

.input-group input:focus ~ .kat-login-board__data__secondary-data__bar:before, .input-group input:focus ~ .kat-login-board__data__secondary-data__bar:after, .input-group textarea:focus ~ .kat-login-board__data__secondary-data__bar:before, .input-group textarea:focus ~ .kat-login-board__data__secondary-data__bar:after, .kat-personal-data-date-ip.active .kat-login-board__data__secondary-data__bar:before, .kat-personal-data-date-ip.active .kat-login-board__data__secondary-data__bar:after {
  width: 50%;
}

.kat-personal-data-date-ip.active .kat-login-board__data__secondary-data__bar:before, .kat-personal-data-date-ip.active .kat-login-board__data__secondary-data__bar:after {
  bottom: -34px;
}

/* HIGHLIGHTER ================================== */
.kat-login-board__data__secondary-data__highlight {
  position: absolute;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

/* active state */
.input-group input:focus ~ .kat-login-board__data__secondary-data__highlight, .input-group textarea:focus ~ .kat-login-board__data__secondary-data__highlight, .kat-personal-data-date-ip.active .kat-login-board__data__secondary-data__highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
  from {
    background: #5264AE;
  }
  to {
    width: 0;
    background: transparent;
  }
}

@keyframes inputHighlighter {
  from {
    background: #5264AE;
  }
  to {
    width: 0;
    background: transparent;
  }
}

input[type="search"] {
  -webkit-appearance: textfield;
}

/* scrollbar custom starts ================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  cursor: pointer;
}

::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
  height: 0;
  display: block;
  width: 0;
  background-color: transparent;
}

::-webkit-scrollbar-track-piece {
  -webkit-box-shadow: none;
  -webkit-border: none;
  background: rgba(243, 243, 243, 0.5);
}

.kat-user-timeline-list-grid-section-scroll::-webkit-scrollbar-track-piece {
  background: rgba(180, 182, 189, 0.5);
}

::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
  height: 50px;
  border-radius: 5px;
  background: rgba(54, 54, 53, 0.5);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* scrollbar custom ends ================ */
.flaticon-arrow-right-1.kat-flaticon-arrow-right1:before {
  position: absolute;
  left: 27px;
  margin-left: 0;
  font-size: 14px;
  font-weight: 600;
}

.flaticon-music.kat-flaticon-music-checkinout:before {
  position: absolute;
  left: 8px;
  margin-left: 0;
  font-size: 14px;
  font-weight: 400;
}

.flaticon-arrow-right.kat-flaticon-arrow-right-1:before {
  position: absolute;
  left: 10px;
  font-size: 14px;
  margin-left: 0;
}

.flaticon-pause-1.kat-flaticon-pause-1-btn:before {
  position: absolute;
  left: 9px;
  font-size: 14px;
  margin-left: 0;
}

.flaticon-music.kat-flaticon-music-checkinout-btn:before {
  position: absolute;
  left: 24px;
  margin-left: 0;
  font-size: 14px;
}

.kat-padding-top-10px {
  padding-top: 10px !important;
}

.block-cards-info.kat-checkinout-block-card-info {
  margin-right: 9px;
  width: 56%;
}

.kat-clear-both {
  clear: both;
}

.kat-margin-auto {
  margin: auto;
}

.kat-margin-right-15px {
  margin-right: 15px !important;
}

.kat-margin-leftright-10px {
  margin: 0 10px;
}

.kat-btn-disable {
  pointer-events: none;
  opacity: .6;
}

.kat-height-35px {
  height: 35px;
}

.kat-height-auto{
  height: auto !important;
}

.content-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-grey {
  background: #cfd5e1 !important;
}

.kat-billable-cell:before {
  background: #c8ccd5;
}

.kat-billable-cell {
  display: inline-block;
  padding: 7px 4px;
  position: relative;
  cursor: pointer;
  width: 50%;
  height: 100%;
  color: #fff;
}

.kat-billable-cell.active:before {
  background: #a1d046;
}

.kat-billable-cell.tab2.active:before {
  background: #5c88a1;
}

.kat-billable-cell span {
  position: relative;
  float: left;
  padding: 2px 0 0 3px;
}

.kat-billable-cell:before {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: -2px;
  bottom: 0;
  transform: skewX(-17deg);
  background: #e3e5ea;
}

.block-cards-info.billable-wrap {
  padding: 0;
}

.kat-billable-cell.tab1:before {
  border-right: 1px solid #737373;
}

span.billable-txt {
  width: calc(100% - 22px);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-align: left;
  padding-top: 3px;
}

.flaticon-non-billable.non-billable-flaticon:before {
  margin-left: 0;
  font-size: 18px;
  position:relative;
  top:-3px;
}

.kat-text-align-right {
  text-align: right !important;
}

.kat-margin-bottom-0px {
  margin-bottom: 0 !important;
}

.kat-height-90px {
  height: 90px !important;
}

.kat-opacity-5 {
  opacity: 0.5;
}

.kat-margin-bottom-14px {
  margin-bottom: 14px !important;
}

.kat-max-height-220px {
  max-height: 220px !important;
}

.kat-project-details__status__progress-cont svg text.units-label {
  text-anchor: middle;
}
@-moz-document url-prefix() {
  .kat-billable-cell::before{
    width: 100%;
    left: 0px;
    right: -12px;
    top: -2px;
    /* transform: skewX(-17deg) */
    transform: rotate(180deg);
  }
  span.billable-txt {
    width: 60%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    text-align: left;
    padding-top: 3px;
  }
  .kat-billable-cell.tab1:before {
    border-right: none;
  }
}

/*plus button selected-avatars in dashboard section*/
.plus-button{
  display: block !important;
  cursor:  pointer !important;
  
}
.datepickerLable1{
  margin-left: 50px;
  float: left;
  margin-top: 10px;
  padding-right: 10px;

}
.datepickerLable2{
  float: left;
  margin-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.att-submit{
  padding: 8px 17px;
  float: left;
  width: 75px;
  height: 33px;
  border: none;
  color: #fff;
  background-color:#59BD50;
  font-weight: 700;
  margin-left: 25px;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}

.searchInput{
  padding-left:10px;
  position: relative;
  left: 38px;
  height: 35px;
  border-radius: 3px;
  width: 200px;
  border: 1px solid lightgray;
  border-radius: 5px
}
.searchResult{
  position: absolute;
  padding-left:10px;
  margin: 34px 0px 0px 138px;
  width: auto;
  min-width: 200px;
  height: auto;
  max-height: 120px;
  z-index: 1;
  background: white;
  background-color: white;
  border: 1px solid lightgray;
  /* overflow: hidden; */
  color: black;
  border-bottom: 1px solid lightgray;
  overflow: auto;
  border-radius: 5px;
  cursor:  pointer;
}
.selectType{
  padding-left:10px;
	width: 100px;
  height: 35px;
  border-radius: 3px;
  text-align: center;
  position: relative;
  border-color: lightgray;
  }
  
  .nameListDropdown{
    border-bottom: 1px solid lightgray;
    padding: 5px;
  }
  .employeeDetailsCellHeaders{
    text-align: left;
    padding: 5px;
    border: 1px solid lightgray;
    cursor: pointer;
    width: 139px;
  }

  .employeeCountTable{
    position: absolute;
    top: 100px;
    text-align: left;
    border-collapse: collapse;
    width: 234px;

  }

  .headerText{
    font-weight: bold;
    padding: 1px;
  }

  .forInData{
    width: 114px;
    height: 40px;
    border: 2px solid #5ABD50;
    border-radius: 4px;
    display: block;
    font-weight: bold;
    padding: 10px;
    cursor: pointer;
    margin-top: 4px;
  }
  .forOutData{
    width: 114px;
    height: 40px;
    border: 2px solid #DE0404;
    border-radius: 4px;
    display: inline-block;
    font-weight: bold;
    padding: 10px;
    cursor: pointer;
    float: right;
    bottom: 40px;
    position: relative;
  }
  .countPosition{
    position: relative;
    left: 41px;
  }
  .employeeCountDet{
    margin-top: 100px ;
    position: absolute;
    margin-left: 250px;

  }
  .employeeCountHeader{
    padding: 5px;
    text-align: center;
    border: 1px solid lightgrey;
    font-weight: 600
  }

  .EmpInList{
    margin-left: 50px;
    padding: 10px;
  }
  .empInColumn{
    float: left;
    margin-left: 61px; 
  }

  .todayDay{
    background: #59BD50;
    color: white;
    width: 150px;
    height: 30px;
    position: absolute;
    left: 475px;
    top: 40px;
    font-size: 12px;
  }
  .refreshCurrentTime{
    width: 40px;
    height: 30px;
    background: #59BD50;
    color: white;
    font-size: 12px;
    position: absolute;
    top: 40px;
    left: 634px;
  }

  .currentTime{
    font-size: 12px;
    font-weight: normal;
    position: absolute;
    top: 40px;
    height: 30px;
    background: #59BD50;
    color: white;
    left: 315px;
  }

  .downloadReport{
    width: 135px;
    max-height: 35px;
    height: auto;
    right:0px;
    top:36px;
    position: absolute;
    color: #fff;
    background-color: #59BD50;
    bottom: 104px;
    font-size: 12px;
    border-radius: 3px;
  }
  #inOutNames{
    -moz-column-count: 5;
    -moz-column-gap: 10px;
    -webkit-column-count: 5;
    -webkit-column-gap: 10px;
    column-count: 5;
    column-gap: 10px;
    padding-top: 10px;
    padding-left: 10px;
  }
  .list-contain {
    position: absolute;
    top:100px;
    left:315px;
    height: 183px;
    border : 1px solid lightgray;
    overflow-y: scroll;
    background: #F8F8F8;
    width: 826px;
  }
  
  #inOutNames > ol > li{
    margin-bottom: 10px;
  }

  .firstTimer{
    font-weight: bold;
    margin-left: 73%;
  }
  .employeeCountTable > tr > td > a:link {
    color: green;
    background-color: transparent;
    text-decoration: underline;
  }
  .employeeCountTable > tr > td >a:visited {
    color: blue;
    background-color: transparent;
    text-decoration: underline;
  }
  .employeeCountTable > tr > td >a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
  }
  .employeeCountTable > tr > td >a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
  }
  .datepickerLable1 ~ .calendar-wrapper-div > .date-filter-option {
    padding-top: 0px;
    height: 35px;
  }
  .inOutTable{
    cursor: pointer;
  }
  .indivalName{
    display: inline;
    font-size: large;
    font-weight: bold;
  }

  .paddingTop{
    padding-top: 10px !important;
  }
  .refreshImage{
    width: auto;
    height: 34px;
  }
  .dateTimePicker{
    position: absolute;
    top: 39px;
  }
  
  .emptyContainer{
    -moz-column-count: 5;
         column-count: 5;
    -webkit-column-gap: 10px;
    position: absolute;
    top: 100px;
    left: 315px;
    border: 1px solid lightgray;
    background: #F8F8F8;
    width: 826px;
    height: 183px;
  }

  .containerText{
    font-size: large;
    position: absolute;
    left: 180px;
    top: 75px;
    color: #222222;
    opacity: 0.3;
  }

  .changeButtonColor{
    background: #59BD50;
    color: white;
    width: 114px;
    height: 40px;
    border: 2px solid #5ABD50;
    border-radius: 4px;
    display: block;
    font-weight: bold;
    padding: 10px;
    cursor: pointer;
    margin-top: 4px;
  }
  .changeOutButtonColor{
    color: white;
    background: #DE0404;
    width: 114px;
    height: 40px;
    border: 2px solid #DE0404;
    border-radius: 4px;
    display: inline-block;
    font-weight: bold;
    padding: 10px;
    cursor: pointer;
    float: right;
    bottom: 40px;
    position: relative;

  }
  .rdt {
    position: relative;
  }
  .rdtPicker {
    display: none;
    position: absolute;
    width: 250px;
    padding: 4px;
    margin-top: 1px;
    z-index: 99999 !important;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    border: 1px solid #f9f9f9;
  }
  .rdtOpen .rdtPicker {
    display: block;
  }
  .rdtStatic .rdtPicker {
    box-shadow: none;
    position: static;
  }
  
  .rdtPicker .rdtTimeToggle {
    text-align: center;
  }
  
  .rdtPicker table {
    width: 100%;
    margin: 0;
  }
  .rdtPicker td,
  .rdtPicker th {
    text-align: center;
    height: 28px;
  }
  .rdtPicker td {
    cursor: pointer;
  }
  .rdtPicker td.rdtDay:hover,
  .rdtPicker td.rdtHour:hover,
  .rdtPicker td.rdtMinute:hover,
  .rdtPicker td.rdtSecond:hover,
  .rdtPicker .rdtTimeToggle:hover {
    background: #eeeeee;
    cursor: pointer;
  }
  .rdtPicker td.rdtOld,
  .rdtPicker td.rdtNew {
    color: #999999;
  }
  .rdtPicker td.rdtToday {
    position: relative;
  }
  .rdtPicker td.rdtToday:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #428bca;
    border-top-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 4px;
    right: 4px;
  }
  .rdtPicker td.rdtActive,
  .rdtPicker td.rdtActive:hover {
    background-color: #428bca;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  }
  .rdtPicker td.rdtActive.rdtToday:before {
    border-bottom-color: #fff;
  }
  .rdtPicker td.rdtDisabled,
  .rdtPicker td.rdtDisabled:hover {
    background: none;
    color: #999999;
    cursor: not-allowed;
  }
  
  .rdtPicker td span.rdtOld {
    color: #999999;
  }
  .rdtPicker td span.rdtDisabled,
  .rdtPicker td span.rdtDisabled:hover {
    background: none;
    color: #999999;
    cursor: not-allowed;
  }
  .rdtPicker th {
    border-bottom: 1px solid #f9f9f9;
  }
  .rdtPicker .dow {
    width: 14.2857%;
    border-bottom: none;
  }
  .rdtPicker th.rdtSwitch {
    width: 100px;
  }
  .rdtPicker th.rdtNext,
  .rdtPicker th.rdtPrev {
    font-size: 21px;
    vertical-align: top;
  }
  
  .rdtPrev span,
  .rdtNext span {
    display: block;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */    /* Konqueror */
    -moz-user-select: none;      /* Firefox */       /* Internet Explorer/Edge */
    user-select: none;
  }
  
  .rdtPicker th.rdtDisabled,
  .rdtPicker th.rdtDisabled:hover {
    background: none;
    color: #999999;
    cursor: not-allowed;
  }
  .rdtPicker thead tr:first-child th {
    cursor: pointer;
  }
  .rdtPicker thead tr:first-child th:hover {
    background: #eeeeee;
  }
  
  .rdtPicker tfoot {
    border-top: 1px solid #f9f9f9;
  }
  
  .rdtPicker button {
    border: none;
    background: none;
    cursor: pointer;
  }
  .rdtPicker button:hover {
    background-color: #eee;
  }
  
  .rdtPicker thead button {
    width: 100%;
    height: 100%;
  }
  
  td.rdtMonth,
  td.rdtYear {
    height: 50px;
    width: 25%;
    cursor: pointer;
  }
  td.rdtMonth:hover,
  td.rdtYear:hover {
    background: #eee;
  }
  
  .rdtCounters {
    display: inline-block;
  }
  
  .rdtCounters > div {
    float: left;
  }
  
  .rdtCounter {
    height: 100px;
  }
  
  .rdtCounter {
    width: 40px;
  }
  
  .rdtCounterSeparator {
    line-height: 100px;
  }
  
  .rdtCounter .rdtBtn {
    height: 40%;
    line-height: 40px;
    cursor: pointer;
    display: block;
  
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */    /* Konqueror */
    -moz-user-select: none;      /* Firefox */       /* Internet Explorer/Edge */
    user-select: none;
  }
  .rdtCounter .rdtBtn:hover {
    background: #eee;
  }
  .rdtCounter .rdtCount {
    height: 20%;
    font-size: 1.2em;
  }
  
  .rdtMilli {
    vertical-align: middle;
    padding-left: 8px;
    width: 48px;
  }
  
  .rdtMilli input {
    width: 100%;
    font-size: 1.2em;
    margin-top: 37px;
  }

  .rdt > .form-control{
    height:30px;
    width: 165px;
    background: #27bfe9;
    padding: 6px 12px;
    border: none;
    color:white;
    margin-right: 8px;
    transition: 0.2s all ease;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
  }
  .rdt > .form-control::-moz-placeholder {
    color:white;
  }
  .rdt > .form-control::placeholder {
    color:white;
  }
  
  .rdt > .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: white;
  }
  
  .rdt > .form-control::-ms-input-placeholder { /* Microsoft Edge */
   color: white;
  }
  .datetimeposition{
    top: 4px;
    position: absolute;
    left: 120px;
    color:white;
  }
  .inOutSubmit{
    position: absolute;
    padding: 8px 10px;
    float: left;
    width: 60px;
    height: 30px;
    border: none;
    color: #fff;
    background-color:#59BD50;
    font-weight: 700;
    margin-left: 25px;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    left: 169px;
    top: 40px;
  }
 


/* #labels {
  border: 1px solid #b7b7b7;
}

.label {
  border-top: 1px solid #b7b7b7;
  font-family: Arial;
  font-size: 13px;
  text-align: right;
  padding-left: 8px;
  padding-right: 8px;
}

.label:first-child {
  border: none;
}

.label:nth-child(even) {
	background-color: #e6e6e6;
}

.label:nth-child(odd) {
	background-color: #ffffff;
}

.scroll {
  max-width: 100%;
   -webkit-overflow-scrolling: touch;
   height: 100%;
  overflow-y: scroll;
}

.inline {
  display: inline-block;
  vertical-align: top;
 -webkit-overflow-scrolling: touch;
  
}

.nowrap {
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden; 
} */
.TeamReportdatepicker{
  float:left;
}
.TeamReportdatepicker > .calendar-wrapper-div > .date-filter-option {
  height: 45px;
}
.TeamReportdatepicker > .calendar-wrapper-div >.date-filter-option.calendar-wrapper > .primary-txt{
  margin-top: 5px;
}
.TeamReportdatepicker > .calendar-wrapper-div >.date-filter-option.calendar-wrapper >.flaticon-calendar-icon::before{
  top: 3px;
}
.temreportSubmit{
  padding: 15px 17px;
  height:43px;
}
.TRdatepickerLable1{
  margin-left: 50px;
    float: left;
    margin-top: 14px;
    padding-right: 10px;
}
.TRdatepickerLable2{
    float: left;
    margin-top: 14px;
    padding-left: 10px;
    padding-right: 10px;
}
.leaves-table{
  position: relative;
  top: 30px;
  border-collapse: collapse;
  width: 100%;
}
.leaves-table td, .leaves-table th{
  border: 1px solid #dddddd;
  text-align: left;
  width: 11%;
}
.leaves-table tr:nth-child(even) {
  background-color: #dddddd;
}
.leaves-table .theadForAll{
  display: table;
  width: calc(100% - 8px);
  table-layout: fixed;
}
.leaves-table .tbodyForAll{
  display: block;
  overflow-y: scroll;
  height: 30px;
  width: 100%;
}
.leaves-table .theadForIndividual{
  width: calc(100% - 8px);
  table-layout: fixed;
}
.leaves-table .tbodyForIndividual{
  overflow-y: scroll;
  height: 300px;
  width: 100%;
}
.leavesTable-container{
  height: 300px;
  width: 100%;
  position: relative;
  top: 20px;
}
.leaves-container{
  position: relative;
  top: 20px;
  height: 450px;
}
.leaves-header{
  position: relative;
    float: right;
    font-size: 16px;
    font-weight: 600;
    top: 15px;
}
.leaves-header span{
  margin-right: 20px;
}
.leaves-popup{
  position: absolute;  
  left: 25%;  
  right: 25%;  
  top: 25%;  
  bottom: 25%;  
  margin: auto;  
  border-radius: 10px;  
  background-color: rgba(248,248,248, 1);
  border: 1px solid #c8c8c8;
  box-shadow: 0px 3px 10px 0px; 
  overflow-y: auto;
  height: 240px;
}
.leaves-close{
  position: relative;
  float: right;
  right: 3px;
  top: 2px;
  cursor: pointer;
}
.leaves-popupContainer{
  position: relative;
  top: 25px;
  padding: 0px 5px 0px 20px;
  width: 100%;
  height: 150px;
}
.leaves-dateContainer{
  height: 130px;
  overflow-y: auto;
  width: 100%;
  padding-bottom: 20px;
}
.addOpacity{
  opacity: 0.5;
}
.leaves-cursor{
  cursor: pointer;
}
.leavesTable-container span{
  width:100px;
}
.leavesTableContainer{
  position: absolute;
  top: 70px;
  width: -webkit-fill-available;
}
.headerCell{
  float: left;
  width: 20%;
  border: 1px solid #dddddd;
  padding: 8px;
}
.headerDiv{
  width:calc(100% - 8px);
  font-size: 16px;
  font-weight: 700;
  border-right: none;
}
.headerDivInd{
  width:100%;
}
.bodyDiv{
  width:100%;
  overflow-y:auto;
  height:300px;
}
.bodyDiv div{
  height: 34px;
}
.bodyDiv div span{
  border-right: none;
  border-bottom: none;
}
.bodyDiv div span:last-child{
  border-right: 1px solid #dddddd;
}
.bodyDiv div:last-child span{
  border-bottom: 1px solid #dddddd;
}
.bodyDiv div:nth-child(odd) {
  background-color: #dddddd;
}
.headerDiv div{
  border-right: none;
  border-bottom: none;
}
.headerDiv div:last-child{
  border-right: 1px solid #dddddd;;
}
.popup-padding{
  padding-bottom: 5px;
}
.popup-date-padding{
  padding-bottom: 4px;
}
.displayRed{
  color: red !important;
}
.spinner{
  display: block;
  margin: auto;
}
.spinnerLeaves{
  position: absolute;
  top: 50%;
  left: 50%;
}.kat-container {
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(/dist/bg-image.png);
}

.kat-page-wrapper {
  height: 100%;
  margin-left: 0;
  transition: margin 0.25s ease-in-out;
  position:relative;
}

.kat-page-wrapper.left-panel-enabled {
  margin-left: 400px;
}
.kat-page-wrapper.right-panel-enabled {
  margin-right: 490px !important;
}
.kat-page-wrapper.left-panel-enabled.weekly{
  margin-left:673px;
  transition:margin 0s ease-in-out;
}
.kat-page-wrapper, .kat-workstream-wrapper, .kat-profile-wrapper {
  flex: 1;
}

.kat-profile-wrapper {
  display: flex;
  z-index: 9;
  height: 100%;
  flex: 1;
}

.kat-workstream-wrapper {
  height: calc(100% - 156px);
  flex: 1;
}

.kat-workstream.project {
  height: calc(100% - 45px);
}

.kat-workstream.project .kat-workstream__foot ul.kat-workstream__foot__category li.kat-workstream__foot__category {
  cursor: default;
}

.kat-workstream, .kat-profile__item {
  height: calc(100% - 49px);
}

.kat-workstream.kat-footer-enabled, .kat-profile__item.kat-footer-enabled {
  height: calc(100% - 90px);
}

.kat-workstream__body {
  height: auto !important;
}

.kat-profile__main-item .kat-profile__body {
  height: 97%;
}

.kat-layout-wrapper, .kat-page-wrapper {
  display: flex;
  flex-direction: column;
}

.kat-header {
  flex: 0 0 58px;
}

.kat-task-bar {
  flex: 0 0 74px;
}

.kat-page-header {
  flex: 0 0 98px;
}

@media only screen and (min-width: 1366px) {
  .kat-workstream-wrapper {
    height: 98%;
    flex: 1;
  }
  .kat-workstream.project {
    height: calc(100% - 50px);
  }
}.kat-default-button, .kat-secondary-button {
  background: #59BD50;
  border: none;
  padding: 6px 12px;
  color: #fff;
  font-weight: 700;
}

.kat-secondary-button {
  background: #2BBEE8;
}

.kat-default-button:hover, .kat-secondary-button:hover {
  background: #54A24D;
}

.kat-secondary-button:hover {
  background: #1B8FB1;
}

.kat-default-button.disabled, .disabled.kat-secondary-button {
  background: #c8ccd5;
  color: #fff;
  cursor: default;
}

button {
  padding: 6px 12px;
  border: none;
  background: none;
  color: #94989E;
  margin-right: 8px;
  transition: 0.2s all ease;
  border-radius: 3px;
  font-size: 12px;
}

.kat-button.cancel:hover {
  background: rgba(148, 152, 158, 0.13);
}

.kat-profile-thumbnail__alphabet {
  height: 35px;
  width: 35px;
  border-radius: 100%;
  background: #242B39;
  display: inline-block;
  position: relative;
  margin-right: 10px;
  color: #fff;
  font-weight: 700;
  line-height: 34px;
  text-align: center;
}

button.lg-size {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: bold;
}

input.disabled {
  background: #F5F6FA !important;
  border-bottom: 1px solid transparent !important;
  padding: 7px !important;
  border-radius: 4px !important;
}

.loading-spinner, .small-spinner, .large-spinner {
  position: absolute;
  border-radius: 50%;
  -webkit-animation: rotate-forever 3s infinite;
  animation: rotate-forever 3s infinite;
  color: #848492;
  display: inline-block;
}

.small-spinner {
  height: 30px;
  width: 30px;
  border: 4px solid #848492;
  border-right-color: transparent;
  top: 7px;
  right: -50px;
}

.large-spinner {
  height: 140px;
  width: 140px;
  border: 15px solid #848492;
  border-right-color: transparent;
  right: 0;
  left: 0;
  margin: auto;
  top: 50px;
}

.DayPicker-Day {
  border: none !important;
}

.DayPicker.DayPicker--en {
  position: absolute;
  box-shadow: 0 0 8px rgba(67, 65, 90, 0.42);
  background: #fff;
  transform-origin: top;
  -webkit-animation: dropdownEntry 0.16s ease-in-out;
          animation: dropdownEntry 0.16s ease-in-out;
  z-index: 150;
  height:305px;
  font-size:14px;
}

.DayPicker-NavButton {
  border-radius: 50%;
  opacity: 0.7;
  background-size: 7px;
  background-position: 8px;
}/*file to import local fonts*/
@font-face {
  font-family: 'sf-compact';
  src: url(/dist/aa3ef3b7a530e57cd0be38ef1f5309fb.otf);
  font-weight: 400;
}

@font-face {
  font-family: 'sf-compact';
  src: url(/dist/0d718cf5a649b130178a4ce6c1b341c9.otf);
  font-weight: 100;
}

@font-face {
  font-family: 'sf-compact';
  src: url(/dist/384ff4ff72d5f190ff45e10af2a589ef.otf);
  font-weight: 500;
}

@font-face {
  font-family: 'sf-compact';
  src: url(/dist/de8702183656c2d1d7b736f10e20f9bc.otf);
  font-weight: 700;
}

@font-face {
  font-family: 'sf-compact';
  src: url(/dist/f86b081a9ed4fa3cd9a0f615f6229e36.otf);
  font-weight: 800;
}

@font-face {
  font-family: 'sf-ui';
  src: url(/dist/5b838b00736ea2f7108a8479a6ea6a6a.otf);
  font-weight: 400;
}

@font-face {
  font-family: 'oswald';
  src: url(/dist/8dece29a87d3dd3a60cac0023952f1ac.ttf);
  font-weight: 100;
}

@font-face {
  font-family: 'oswald';
  src: url(/dist/dab2e777c19906ddc8d3ad983ca79cf0.ttf);
  font-weight: 400;
}

@font-face {
  font-family: 'oswald';
  src: url(/dist/8993e4d87124a3808ae68d2e52d27f87.ttf);
  font-weight: 800;
}/* Flaticon icon font: Flaticon Creation date: 07/10/2016 13:18 */
@font-face {
  font-family: "Flaticon";
  src: url(/dist/528dab6fc6c746ea91b8b363890a0665.eot);
  src: url(/dist/528dab6fc6c746ea91b8b363890a0665.eot?#iefix) format("embedded-opentype"), url(data:application/font-woff;base64,d09GRgABAAAAACFgAA0AAAAAM9AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAhRAAAABoAAAAcfl/9IE9TLzIAAAGgAAAASQAAAGBP+11oY21hcAAAAjgAAABKAAABSuI5Ff9jdnQgAAAChAAAAAQAAAAEABEBRGdhc3AAACE8AAAACAAAAAj//wADZ2x5ZgAAAyAAABvpAAAqePLRxNNoZWFkAAABMAAAADAAAAA2DFQ2fmhoZWEAAAFgAAAAIAAAACQD9gHBaG10eAAAAewAAABKAAAAngXZAitsb2NhAAACiAAAAJYAAACWaZdeNm1heHAAAAGAAAAAIAAAACAAlwEWbmFtZQAAHwwAAAEhAAACCv3h0yFwb3N0AAAgMAAAAQwAAALmAKFja3jaY2BkYGAAYv8HoRXx/DZfGbiZGEDg6uyq/zD6/4//u5nYGE8AuRwMYGkAcGcOCXjaY2BkYGA88X83gx4Tw/8fDAxMbAxAERTACgB/ngS6AAEAAABKAOUACwAAAAAAAgAAAAEAAQAAAEAALgAAAAB42mNgYfzNOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGAQYECEhzTWFoYFD46Mp44P8BBj3GEwyuIDVIShQYGAFRowwGAAAAeNpj2M0gyAACq4D4BAMDE5D6/58BGcgjsS2A+ACDKEMtXE0DA07w/yeUYQzEtWhyfxgcgJQp2DY+IMuOgRtIsjOoI6sCAFBGEAEAAHjaY2BgYGaAYBkGRgYQcAHyGMF8FgYNIM0GpBkZmBgUPrr+/w/kK3xk+P///2N+Fqh6IGBkY4BzGJmABBMDKmCEWDGcAQARRgkrAAAAEQFEAAAAKgAqACoAKgCGALYBXgGSAa4B4gIiAnACigKkAr4C1gL0AwYDJgNOA3YD4gRMBHwEsgUGBaIF3gYQBwQHKAesB84IAgimCM4JEgloCZAJ0AoaClAKhgq0Ct4LOgwQDCwMag2qDdgOPg5uDp4PGg9SD5AP4hBEEKgQ5hGUEgISuhMKE2wToBPSFBYUfBSaFNAU+hU8AAB42o16C3QcxZluVXV3VT+ne2a6p2ckzVua0egxkuYpoYfH8vshW2DjBOLFwiZybJJgWHCCAyfe6wAmJgss2ATu2VwS9pCEEM7is8luSDgoTxLncXezIY+77FnCSUgCm7A35JLcZbd1/+qekWSSnL2a7nr+9eiqv/7/+/8SIiiMEHoQX44ExFD5SYxGps4zEf2y8iSVnp86LxBIoicFXizx4vOM4v+YOo95eTVcDRer4Xz49HsWF/Hl3qfCuAq9iQgtLxGEl1Aa5dEYaiGEq2Gb5rO5Qj1cbUxix45VGtO42okrQjgbjubKeBrXGpVYEtsUaHmm6udCGHskangtI0qYm+np71mCN+O6XmteYqJiqCruYorCmCLKeNE7YUSjBr7drdg9PXYlCL1DGC0j/DZRFt/OSdcEUATTRsKyt/wiwfgjyIBV6UFIitnMn3Uz2qikcd6tskqjXivkKEwcL2MsUM+mVHhd0IXEpDzgmJFIMhoJCRKRVAk/Kkn3fmJf1DSj/EVIhTFUWJfjqBvWpYim0Ty6Br0THUPvRbcg1FeBLx2EtRnEuWmch7c2ievwQnkhV+ALYxfzsYrr8Fnlinx9ZkgzVq00U7i5prDRjPEiaU0eaPyFLEAfFPoCgnzvmjR+nrFBOQSvPMhC8rlLBgYuGchtk9ZdQQs7d/ZJiuUaiXQm0d13pxgrl2NizLT6TMv1zrjlIVewLTMSNa3E/lwikUvEe8Uh/J58PJ6Pu33C0JXMZIPQPY+g+z8vTZZKk5JzME4FyxKkhBGPaMS2SX9fSCCqSoSQ5WJNw24edlUMMnErJNyT4L0P6RPtGDi2w2cMmSgJjNdeJZKjnLFqNDeCC+twI2ZiN8bw0e+dO/e9c3/5tbvu+tpd32HCXsb2UoPu3k1p6xyvwlfcxeueFi6n9HKqs11Qw/mCwDg/gHE+iShwBupj9Sz8+pxi08k6BB3xjuJz3nePHMHnan+yeWTTI5uvgojz0381PxH2Zx0uFhppDFO8aH7ebxihdNcuqlM+mzdNkNLdu1hQ83vjDCIUae9sBMYAZrX7eJ5zFuWHKs9nwTnLP2l+x+ceeerUqadO4RY/DvNKSJnvJPCST+B99hSneNfaqiDRPu8/g3PzIHJQFg2jCYSaeX7U4fhmKzHHP/qM5oqCY0MBcCScKWDGtWngckgD528eUUIw7Hd5uIw20AgbkHCfJHn/JK3EX+fPZEjFZdUwVO+7amgnY3iLIUmGtGM15JuHUXr5C/jH+CtIg52D8yxRf2Iufk7Xvev0REL/vtwj/4yZIfydkMmQ36azntAGM5cVWbFZbLpNgl58MdV58MdefDH54x8n/ZDvAQJewNf6chTaTeOs01eHN+tkCfJQ53UmJu4eH392oj3Oy9DmnD83Vs9RNiM06wQ9e+2DdW146/Vbv/PsTVu2jx9865R2fZsPV/f593Y52MnHP3HzzZ+4ubNt37iZZ9tj/Se0PYUk2B3s4mLzEVwreY88UtrdjqH/8eUl/HXoX+FawQWZzNkmV8BOtl5tVt3L8b6c+xM3h2/wbjiU/PMk4zI/ns3iL09M9PT4a3CS8KH4/NzVGXYkTUf6wA8e/KgfPRRkUFC45oH+lmA+rfb3Qn+ofX7oiuQKYtzlN7lyTXPc8uNFP3wo6E9EDvT3CvRnoCgaQZfCSgCb1mZAAcUcUDLNfApXGq7zx6RwtcIc210Vqw0XZGfDTWG3ANQ0CeT0perW7ES2BkHiJjE7mP2OUlXCclVRqnIYkp8SBqq3zarTw4IwdO0QEXvHFcrCqpnTzG9sreYmsltr0Hx7KBL5tzWteB+USklJKw1vlDDJZAgWx/KiqeVMfv5vXX4Gn4LvmkIb0HbYbAemlOLnnU+12MmFMPOLYPJloe7rVjdF3HqZQKZZr8Hn1UNcN7vODHxyAYe7CiFdjxgJJqfTvSHL6qrlqaqw5GDKiIQ0S6CqHc4O9zSrlpVx3Fgj0d2NH+8WrLDRBe260uphxQgZBbenkhZmTEPTNohOOmvpUVVxnIh0oxIbyA42pC7nmQPUdmz7sndJaRie8+uyh7YSEU9wudkH0pHCgQISOkIAJoBMT+IszBoEJ/5PJh/SvZeoIBzChIiLBqAHQdz/DcYWjVA5a1AsCIuCLBwywoODjBDhSn6WlpeXXwOZ9SFkoQwMV4EhQpjr+hHMGaLPzTZnMOw6jABhDP/cUrBD1LB3jaURB+safkbydjNiaXu6Ilak6wktgg3DeMnggaLI4/asZkbMiB7Ix9fgXHwIEEAB8NAE1/WpQBzDwgd4J98GPDAYfF0wcFWo+BvB1UWjfcoxcvLOcGt4+JdOKuV4izycMSVLMp/ww7vzk7kdR3fs+Lmpaab6mt3rpIeH1w3PpZyfcVIIzBETHu8lIKzvANIvq5wU1kRbkS/9gEz2orei/WgBEMo7fIxyo79KIMyDZeJCdEWJVN8UR8O1wqq+eXMM8Clsx0D6N/rqVYe13yq8xfbrrknj5yIJzda9fZFEIrIJ9M5C+52n0trsJglOCH5Mot49Lf43uibE9yQi3u26rSUi+EQkkeGaK7M29N6GT0j098up5N0O/b48OjrvP5344U4i0BcnQa6chHUbaiNdvjzBUpDgm9tIV+BbmMRhnqnjhcz8wvzU1qn+0f6MHbchggxuLaPR+flRjDK9U1O9L2Ti/f3xF17QbVvPLPmZzDLiNRfrg55VaQsirJkFpdV0mVT2V9tOtdU8RlefEbzfjOobZvURrAtnrj50V+vdHWXx8duvHtE3zuplfPXtdx1a/+5WW7d/Fcb4PHDEX6CPoccAFefhBI5g0AyAroB/i2WBI1E4lGXSWEcqbnOGAP+mcJrzMbCxTZmbEnwYb+IUpibJFVmIFKtA7cbcJhw5YPlmvTBCmtAdNXnHxTzQgfBisTS0osyJpQmDjhrroMsUaebKBNBvW3A32oAK9zQkyTRilyiiWBA1U+lKGoQm84qui4SUJHXSMQwq/SGiVE6xdCyUqOLT1AdkixSkwXCKRoklDlnWkGSRKE2FB8Uijsh+tTi0ploMt6sLAP5lN5KNm2Y8G+mrxUvieH//eP8kTWaVLqFPlNNZW9VkUaxJNGQ4iW5TFPpxQs6lJJrMyT5JKreWJJNmok+RpDFrULRIhCYj/VIBJlJiFi6Kg1ZSsmEig1anOlyC6rASVA+Eg2rdjZ4OxTO9mXio1hvvjz9UbBSLDbSCIXFb10Z+H10ANwU89NjjJ048fuKepaUO23ztBC/52rFjvB/AXMs/B375MOjYBBpF69AudABOBdc2Kc4BXCOxnK9y+AguFxd5brqMcONvhlab7RIGgq8I7MBlJG/rjDqUUTeEwRryabmQrMZwfSht5214wqb4VrPH1odmhoZwcQJLA1vXbZREphpWOKp+oX8cS33ryr09+MfpIb9NkkaG8+V6k473t4iE8Vx60M6V8jYb/jPd7jGBamZImuifExwHkzk1GrYMVRbnxvt3kagQL05pXQUJSOycI7q9+iZtqugKYYJ39Y8X/LP5KqzDvYC3AEvhLMCnqpQV8s18Pe/k3Tx+wWtlTrZe8DIEtZZOtuC3hEcXWi3vhZOt1snOWj4PffxVG1NagK8ToDv4yYZXgiANhl+xD+SnK0AO/48Hr37woX33XOH9dt99V7Cxg/fhyn0H3w2Fr181f2B5+1t26Nv37TjbNf/427q73/b4PO65aveBtXJfA5SVBst0ENBRFTXRQbSI3odQtN6xynMFMVBTfjbgEEgHKqqCnXzdAZHd7Ih1gPVOvqMrVo3+FCAp3+xPibDV9ayUr1fdwEZp+wCgiiRxC8Q6t0FcP3qYq7Wjg+Pz4+Pz3g9brQwI9iXh6adN2zaNaFd0CWiMqCEpMpVIxnsYA8ExLsVbYN8rTKCigI/5Fg4P2hEEv+Hd7vgE73act3m41Vrwn6SQcUK4K+RY3J1gWdA/RILImCLdCgR8QOgauhFEKoyuOUMEyYAwkdN0iwC1GQQx2wTIDd/FxvrxwBHv+0Mb8Md2S3Trka1UZq3xsRv8UroBP7GbWhIv9vt7Dvr7FJzINOwI179roUJV+i/y+JeypslegYf4f/2R9GOqfIhpGjskq49q8kFeBsHH/QK/yuflbwJ/fAbl0AzwZduWzPt7xcN6AAV8ccxRspDCa+cBiiEACtCIEaTLSV2RVECzqgRpgTJR0ZPyqGbYIe8dIdvQ7na71r97fZeL32PpSUWnCk1KCpX1pChLoq4kvWeEiF4L2XaopkeE4e7LSjM7dsyULut+sy28xgZpvEmeXXjn9u3v3B5bazO1tvOyCxdZTtyGjEN/72ifwShKAYaDE5F1pPaL2n27q5jObg/2AXyL13mRm3XdbFiNqn6CP7h7bu7Wubnb5uawXxAf1CJamCdu9/MX+dJ0FIeRK/4Xgc4T8oGqrxXyuRCGIxVpe8p8fM9NreC8Qho+qGtk3a6Bo6D/9586tX/68OTk4UWfd5nyluCILZ07OrBr3UgXfPnfnvq7U5OHTxyexDtU9lmJSRAydSXg2Pl3y58HbP51kGxZjs5DYrGMi4UZAmYGbdRGAswK43N4/oZi9F2ybe/wzutCRmnv+2Z3XncyqrwFzquyoP56aN+Wqbyphq7bOfu+vSUjdJ0X7VL3/Sk/bycNdUG5aD8jfLSODwUHKr9eK2M371txHHTAsrfdKMvoqttu+8Jt00f6L1A4n5IAkdJ2o8xBxW1XTR+Z/rVCBUkUFF3p2P2vw1gf5Giqj+OXbKM5IzYLbeZlKQn/bbyPUg/19SqaEb9kkFgxi/RWXJOZl8XLqtbsVaa3bG1QiWqWpVFJ6qvOjFcu8ikkudW5cmYC2HyRfyYiyZLGnlct9Xl+LnniCSiSO1lTCxLAm1XAnd/2+yz68noS9C1Yf/kApvvSFGQvqJyqPxwfqwhAu+abqwDSi1kOxaGiGK6u/PC389hMu99y0ybOH+7tmu/qfey0pc9r4W8T79ck/638q7kq/PAtm2TZ+5VbiMcLLo4wZZPhZjIuN4BkwwCej8gyJwDKsPdq54W1gMVevgBr8VnQZlW0Be0GK+MougXdhz4KJ6vWbNSKBQjrtQp3atou98I6dq75R2uiFbDWmW+XcGSaz9WqWQYYmNsYfZw3mg3ffrddEEpF7rydxLDQTlAFRL604qZfUFcBs9jXUGCy5KYxg/54rubT/QsTQQOI4XY0C5sMhofVjn4gy5JEwor3XqbLRJJkGV8ICd5bRKLh06p3Z0+/SGhLFiRhmqQdjAcmo4KI75cPbarscfaFKnmbEn2wmV53Rbf1LkUZblnb8aihK2FZTxiyIsv/H2nvR2FLMahKrXBS15XP9ScNXZLroZBI9zDA05o2fOPUQLZLlPdtPlQfvt9J5CtSz6B75bq5vCznL1itYa4fa9t8vr11+Uf4v+FPc8+nS9c4LNnDYkjStG9+U3O17+t6VpI0/cIF3dWf08HmlWGP/x72+K9BZpogNV3U7d8GFLmFxN1JgcWHw9kw50gG75tjfOQBDz1Q/EDRe4Cgx9evX/8ZUPifgRjfsndvrVbzMnjM+5+vrV9/48VPW2ZyPXwQfQ89j37CTzNp2x9gQsTAwvABJ8QhkTu4uL0RYFDuWyjwKFBcgD8LPKqCOQ7ximEDVotfloIewUCp1/JgqhT44jRGcC6fA/zKs9AvdO8AmIXfCK7leZqvHWRN7PtAwQCCH0woDWi2UuXd8oK07xKtgz0Ev04VdMez63Bl1Xff9gq8xHQGTy9VHEbkjGKoSjIcoVikTBHLWoTQiJWSVUPJyIQ6itSnmabWK7WpQ6rMqYkckocZaAMaiawQxxSaJcMKYbpEuzDOYPjrY3IsDkWYDAsyVuKOLPdhkiG4G/QzI8owIcMqocaaFiCBRcdVsEzKZKUJ9mu7qBQ08l7dv379/tbOjaOjG0dfh9mwMgvBFMKRpOrCNGHitFeUmSjA3KnsUJigq/ozj2jDOv/IcEoBStX/xPaSSOoq4Z7VwQnJdEtSZ7aK0JktIX2ybCdgpsIwkYnidogJ0WmbOFiMgNSJA+lpmHZr/8lRPvM3YZCuP+CP9wE8iKnJtl3+ka+cOfOVM1gwFheNXb9QlF90bKtPnuE1T4UWF0O7I+giPNCNyoAGtq96ZTgjcykfzrYVCSBAIZD7PvcH6LoJJ6sJfNq+BViFCYzm8GuSDDD5ZcoY/WevJqsgzAxZOg/SikAEILfrw01FuXcPJ7gBAo3dK2p4SZa8LqgEevyt50HkSb+gzDPOA9iDluclWZQ++WG/oazxhpxiz73Cmm+RAUmstW3ydSlwYFQdt6OVni7F9+6Nl7Z7f99OlGuDtX8YSOzdmxjI5drxqx03+8Vrtdp/p9uVgaKd/v8y6OKQd6id+PLQ4NATJZ4u9fa2Y+9XawYQ1thNFXRFB5kRvrR9ORA0tcCv6uv4NjZs3x7yA85vEkkFJIyPi9t7toKUfWxTLNR9dQXMUNp4oMYB3ORi8tpCjxpSewoQJPuTAsZvWKc+fPNi6jp8UYWMXw9PcWBXO7CxdO57N02O1QlJDdMEx3EJOpzisZNMOqpCyK3Fwf2nvNnpSlMS/xCNqWNyojQ8dZiv6/Iby/8CBvNHfXuRy3XAgCv3pG6kURQKObC3QP0W25Yg/g/ZtLyGZco/ZRn2jxL5qaAKPwX9iC/8NhKJyEZ3t4HPAGo4oIj4jCh6N4nKwb/5m+FIxF/nFuAc+MEeZlDJRzig/zlw8jVJrcm9inUMULAYAk6vhsHEtmPuDKiA+vHjde8kD3F9eMx1x4Zffnmuv38OLznHZ5rNmeNOJ/bOOCNJRUmOOMfxwvHj6UnLmgx8bN8mFH8ONFeNnzXYx5Wr7Pb9VuARXXFqQvkMiHjs3z6C7Mb4WZEJ5Yz3bKZczuAJKotU9J61k0kbTzhJecxWvR+Iunip5qhbQLeMALX3RkCbKcsUsikb6FMpG0uScqdPLl6m2kCd4nzIUH35GfxNWJ8+WB3uX55G69GmwF4k+ZXp5gOnCRcJQsUJrta5so3yix6YOZj5/mUcPxL59os/btop2/R+5UcbFYbxR+GLmPLo7du8nws4IqQE77zwk8xR+OEP2GZX2vs8t8jxpnSXaQ8xBWOFDfX09Hgb8Cbv8wI+3CUIXd5nMPX+vfNedJYcNIg2wNw54Kb81hD0KIdpTWCtWJgfmiJwF7+n4Bcv/Ga7UXRBo/LVbtYKY8F9Tkpw8L/admlh9PDogRIkDkBiITVdq56o1aYikcmB0sh0tX52l6aJhrhXwhisIQK2AMG9o7XayEK/4/QvjNTqIwd4yvtWbXr6cDqVSh+eLpcGJ0E/pj++G9qKeyQZ4/tFJmIwMgj/HwKwFwnYi/w/CIq+TIDZcXONm0jNRqxjsjl2Izjp3GT79KMfzBESrq3fPdB8+1yMkNynFzZsGE03UqXBmUE7B5bU4Su2SVLv1EC8tG1UkrZ9ccPChlQjPRqeGRxMA4HvLwrBOfk1rOE4oOoD6O3oGHo/Qtmms8qwvhsGxL7vfoH9Z3luR02uxhye8FUFJCMERb6RRfLFXJkEDORPu9r2NYA4Y9WaGGNCMepDIlxbh10f3nBXXx2nNxvAsIphKOMx85gZa6rGtiUuVj6Z/iCPbsAUE6IBTBEz6tO85AtMFYDpz3KPjcIsN+OGwXajYyEV53EfEb46/FWBCkKP97+xPgxyCSAEIeTQXf7F8WnFGLQcxxo0lLl3gCAcUg2VKGoW9BhWABRCkQqySRI2EFBZLapYrmspFBLXqYzNKqL3Uhp3i9j2vk5IJBMmWMFE4HIARYE/34ViaCdwZ3C7xhcVRDz3V7n+dVpgkAL+o0UesSDim+0AExB/7essgNEcRAModPDdI7Nbxrx/G9uSS20Zm+6VlXRD6a26/XGYraQNxDVVY1rJjUOBZnHP7XurYkjUdeDdXbqrVbEobBqtbN5cyU5YY5vGcOpl37mLlViCCKodh7QA8oXFM5He2oeqoqhDO2gNTT/E5YeMZoBvvgR8k0IDqAGY4q3oGnQTOrWCLYhvWQX8w2wnDwIjX6sXOz477qFdmy40QL01Z3x0TPM+ri6seEe4pb6WuFhJScEhgFw0V1i5/aJ5/GTACd5HRFlS2aV0As9MUJfzyPGLg9OqKapZ0TAEcZgfSFlKSKMA/kzHkqj63ArdlbDzkiBgqFItq4syrBP1hEp0YHz831XmbREAXQJiwZ9jakKUvCP4AUlM3KKaKjxHOfOE1KsVLOl1KrAQ3SZjlqTboTuOp2GO4rGAVMaCABahwHRqOibuUui4oozTtp9Bg/X+d/xFkNUoBp/dxFy22SYBxqgXasF/rIB568T4MQTEAMoEAAGQgVr50rU7Clju2dXd0/1/BHPIsqz3KxHl/WBqu/Lv7NKE7f02Nb0vhWUo9X7X2nEtp+7p3tXzG8E0MTQIyF0Zy/Jv7YkSp983nW7TX4ybIqgfjYIuQX22b8L418ltiCLZbmPVNRJzg3+MitmBSSLEmpVmWSjCF4UEgsolIm698k+2EDwwCmDGi8+aW5ypvVOxzdbsnUunHyq3yuXW9ev2XNrC1Monejb3xPMWXZq4plfEl0xi3Ls4cfTcuaMHZuf6k9mBqamB3q7+uQ1XLZw+XV5fhsd7uYqrWrw3b8Qcvbc3DueVwRr/3zZmANzn/ysXt/nyKxcKdm/Hg5TP4av/QpIkJkv312f33Hjjnsb+unfuwB0LQzuGNt5wn2QC29xfvOmvbqrvb+y69/aFAxuhIvjfoCKM8yMYx79HjrbxAefttf//spJ/Uotobvhg2HXD2A+D5JIWUb1dXBTh8zxcTbf344uwH88gBewJrh9RE5iE8ZNVaLJCsR5zC8VmDHCtf4y4SHJCAgibaqXxvP1n27AWD7sXhkdnrjhAQXnR6Wnp7OKRB+48lGuNJm+8dOexJVff/YGY+w9DJXFaemlmZHB2X+qau88eeft9dFrIVjb3zV9/BK2xq0MgBafQVoSkupPz/5eAH+jVf7sqrIJYruz8BQezu9hWfLFqYBDxFfHXB6O28/HcOXXpjjuW7vjK5jGmsnwln0/kx8byxS45Kkd6rB6L5y8Fu0RlLV1vezX5xebP7uDtXhvJSoxJbiZTzpRnAc5Zim0mTBcye5iE9/FK7zHpIh4P/Lom8EjnwpnbAzx2XnnlFQ+9MvDKyZMnP3X2rHeW4/6zZ9fcu7rcI4nrLqvDh5E05tdaM+IkdpsgIbMOvHjh4YePJ7I6Bczk9FrxVCohy/+Y8TK45b2AH8YLUL9Qnp11Xa10/VhqpMdWxKXMMsIvZLyFwG+IsjDWAd966YBNly8fv30F8VDhVwv4Zd/h4x08yIwIu5PSO1nEYAe/byhQeohGDXaaReA1ovSQ74t8BvbxS9yTDUg1BMKvCCGHq+sARM0Q/59auAgCMcxFUAy/IWHxsmpv9qlQf6gvRMwfWoQUpmEiskSnVbVHS6ozkoUvjcWrlwok9EOTmH2hfuOpXF92pihgiZhAltR6VCCDtf9/1FwqfAAAAHjafZCxasMwFEWvEjtNlpC5k4YOCcRGNqGGbCZguraF7MYY22AiozhDIGO/p5/Sn+kP9FpWO3SIQbyjp/vevRjAEp8QGL9HPDsWmKNwPMEDbo6neMKXYw9z4Tv2sRLK8Yz9dyqFt+BtZ6cGFljh1fGEvq3jKV7w4dij5tuxDymWjmfcn+IAjQ5XGDSoUKOHxJo5N6wxFCIk2JJTqnL2a5TAQXdX01R1L9fFRsYqSrYy7fKi5lvGEDnXNBRrnNho874pNOmNsxUuVmB4LatLm5thZBD2thoqSusd0l1iz/N/5diN+R8Cpgv+ciLTpz7TpiplHCq5l7/WxHgXJMGQ9G7CI70NznwafZTdHNo6pMGxNOeGC5WKQqWUvLftB7NoTZUAAAB42m3NyVJTARRF0bcTlEbpBYxKj/RN7r0vQGwhQKzyT5w48//8M6R0Dz1Vp/ZwNZ3m7x5/N73mf/v+dJpO06VDlwme8ZxJpphmhhe8ZJY55llgkSWWecUKq6zxmh5veMs71tlgky222WGXPd6zzwGHHHHMCaeccc4FfYKkaBlwyRXXDPnARz7xmS985YZbRtxxzwNjvk3++vljHP2+DZu2bGsH9tJe2Ws7tLd2ZO/svX2w438N/dAP/dAP/dAP/dAP/dAP/dAP/dAP/dBP/dRP/dRP/dRP/dRP/dRP/dRP/dRP/dQv/dIv/dIv/dIv/dIv/dIv/dIv/dIv/dJv9Vv9Vr/Vb/XbwR+5QKb3AAAAAf//AAJ42mNgYGBkAILLmuyKIPrq7Kr/MBoAO+MG+AAA) format("woff"), url(/dist/6087555b92b9903b11cc42cdd3589daa.ttf) format("truetype"), url(/dist/7e8e076d830ea314783a258723091714.svg#Flaticon) format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "Flaticon";
    src: url(/dist/7e8e076d830ea314783a258723091714.svg#Flaticon) format("svg");
  }
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
  font-family: Flaticon;
  font-size: 20px;
  font-style: normal;
  margin-left: 20px;
}

.flaticon-empty-calendar:before { content: "\F100"; }
.flaticon-caution-signal:before { content: "\F101"; }
.flaticon-sign-1:before { content: "\F102"; }
.flaticon-arrows-circle-left:before { content: "\F103"; }
.flaticon-switch-arrow:before { content: "\F104"; }
.flaticon-arrows-circle-right:before { content: "\F105"; }
.flaticon-cross:before { content: "\F106"; }
.flaticon-comment:before { content: "\F107"; }
.flaticon-arrow:before { content: "\F108"; }
.flaticon-cross-icon:before { content: "\F109"; }
.flaticon-menu:before { content: "\F10A"; }
.flaticon-assign-arrow:before { content: "\F10B"; }
.flaticon-round:before { content: "\F10C"; }
.flaticon-tick-thin:before { content: "\F10D"; }
.flaticon-delete:before { content: "\F10E"; }
.flaticon-three:before { content: "\F10F"; }
.flaticon-more-vertical:before { content: "\F110"; }
.flaticon-add-user-icon:before { content: "\F111"; }
.flaticon-dollar-sign-1:before { content: "\F112"; }
.flaticon-expand-arrows:before { content: "\F113"; }
.flaticon-folder:before { content: "\F114"; }
.flaticon-camera:before { content: "\F115"; }
.flaticon-calendar-icon:before { content: "\F116"; }
.flaticon-attachment-icon:before { content: "\F117"; }
.flaticon-logout:before { content: "\F118"; }
.flaticon-settings-1:before { content: "\F119"; }
.flaticon-music:before { content: "\F11A"; }
.flaticon-people:before { content: "\F11B"; }
.flaticon-folder-icon2:before { content: "\F11C"; }
.flaticon-dropbox-logo:before { content: "\F11D"; }
.flaticon-clock-1:before { content: "\F11E"; }
.flaticon-edit-pen:before { content: "\F11F"; }
.flaticon-list-icon-thick:before { content: "\F120"; }
.flaticon-invite-user:before { content: "\F121"; }
.flaticon-radio-active:before { content: "\F122"; }
.flaticon-list-icon:before { content: "\F123"; }
.flaticon-pause-1:before { content: "\F124"; }
.flaticon-clock-filled-icon:before { content: "\F125"; }
.flaticon-line:before { content: "\F126"; }
.flaticon-notification-icon:before { content: "\F127"; }
.flaticon-sign:before { content: "\F128"; }
.flaticon-trash:before { content: "\F129"; }
.flaticon-coffee-cup:before { content: "\F12A"; }
.flaticon-arrow-right-1:before { content: "\F12B"; }
.flaticon-calendar-filled:before { content: "\F12C"; }
.flaticon-settings:before { content: "\F12D"; }
.flaticon-flaticon-arrow-right:before { content: "\F12E"; }
.flaticon-expand-icon:before { content: "\F12F"; }
.flaticon-resize-expand:before { content: "\F130"; }
.flaticon-resize-collapse:before { content: "\F131"; }
.flaticon-non-billable:before { content: "\F132"; }
.flaticon-warning:before { content: "\F133"; }
.flaticon-hourglass:before { content: "\F134"; }
.flaticon-check:before { content: "\F135"; }
.flaticon-delete-1:before { content: "\F136"; }
.flaticon-clock-view:before { content: "\F137"; }
.flaticon-view-icon:before { content: "\F138"; }
.flaticon-notes:before { content: "\F139"; }
.flaticon-cloud-upload:before { content: "\F13A"; }
.flaticon-checklist:before { content: "\F13B"; }
.flaticon-attachment-icon-2:before { content: "\F13C"; }
.flaticon-profile:before { content: "\F13D"; }
.flaticon-search-icon:before { content: "\F13E"; }
.flaticon-pause:before { content: "\F13F"; }
.flaticon-clock:before { content: "\F140"; }
.flaticon-dollar-icon:before { content: "\F141"; }
.flaticon-tabular-icon:before { content: "\F142"; }
.flaticon-share-link:before { content: "\F143"; }
.flaticon-arrows:before { content: "\F144"; }
.flaticon-wrench:before { content: "\F145"; }.kat-userlist__dropdown {
  position: absolute;
  text-align: left;
  width: 100%;
  background: #fff;
  z-index: 999;
  box-shadow: 0 0 8px rgba(67, 65, 90, 0.42);
  color: grey;
  -webkit-animation: dropdownEntry 0.16s ease-in-out;
          animation: dropdownEntry 0.16s ease-in-out;
  transform-origin: top center;
  left: 0;
  min-width: 195px;
  overflow: hidden;
  line-height: normal;
}

.kat-userlist__dropdown.my-day {
  left: -315px;
  width: 347px;
  top: 40px;
}
.kat-userlist__dropdown.kat-userlist__dropdown__content-add-dropdown-top.my-day{
  width: 347px !important;
  left:-78px;
  bottom: calc(100% + 10px);
  top:auto;
}
.kat-userlist__dropdown.kat-userlist__dropdown__content-add-dropdown-top.my-day .kat-userlist-dropdown__search,.kat-userlist__dropdown.kat-userlist__dropdown__content-add-dropdown-bottom.my-day .kat-userlist-dropdown__search{
    width: 332px;
}

.kat-userlist__dropdown.report {
  top: 47px;
  left: -4px;
}

.kat-userlist__dropdown__list .kat-profile-thumbnail__alphabet.report {
  margin-left: 0;
}

.kat-dropdown-report-sub-name {
  margin-left: 5px;
}

.kat-userlist__dropdown__content-add-dropdown-bottom.myday {
  top: 36px;
  left: -164px;
  width: 300px;
}

.kat-userlist__dropdown__content-add-dropdown {
  margin-bottom: 30px;
  width: 280px !important;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  position: absolute;
  margin-left: 23px;
}

.kat-userlist__dropdown__content-add-dropdown-top {
  bottom: calc(100% + 10px);
  width: 280px !important;
  transform: translateY(-1%);
  transform-origin: top center;
  position: absolute;
  margin-left: -236px;
}

.kat-userlist__dropdown-sectionhdr {
  padding: 8px 15px 0;
  border-bottom: 1px solid #D9DDE4;
  height: 45px;
}

.kat-userlist-dropdown__input-holder {
  position: relative;
}

.kat-userlist-dropdown__search {
  width: 210px;
  transition: all .5s ease;
  padding: 7px 25px;
  background: none;
  border: none;
  color: black;
  font-size: 15px;
  -webkit-appearance: textfield;
}

.kat-userlist-dropdown__input-holder .flaticon-search-icon::before {
  font-size: 15px;
  position: absolute;
  top: 8px;
  left: -20px;
}

ul.kat-userlist__dropdown__list {
  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
}

ul.kat-userlist__dropdown__list li {
  padding: 10px 15px 0 15px;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-top: 1px solid transparent;
  overflow: hidden;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  position: relative;
  min-height: 36px;
}

ul.kat-userlist__dropdown__list li:last-child {
  padding-bottom: 10px;
}

.kat-userlist__dropdown__items_icon:not(.flaticon-check).checkbox {
  display: inline-block;
  border: 1px solid #B4B7BB;
  border-radius: 3px;
  position: relative;
  top: 2px;
  left: -2px;
  margin-left: 0;
  margin-top: 3px;
  width: 17px;
  height: 17px;
}

.kat-userlist__dropdown span.flaticon-tick-thin {
  margin-top: 4px;
}

span.kat-userlist__dropdown__items_icon {
  cursor: pointer;
  position: relative;
}

.kat-userlist__dropdown span.flaticon-tick-thin:before {
  font-size: 11px !important;
  padding: 2px;
  margin-left: 0 !important;
  background: green;
  color: #fff;
  border: 1px solid green;
  border-radius: 3px;
  position: relative;
  left: -1px;
}

span.kat-userlist__dropdown__items_icon:before {
  font-size: 24px !important;
  margin-left: 15px !important;
  opacity: 0.7;
}

.kat-profile-thumbnail__alphabet, .kat-profile-thumbnail__alphabet.myday {
  height: 35px;
  width: 35px;
  border-radius: 100%;
  background: #242B39;
  display: inline-block;
  position: relative;
  margin: 0 6px;
  color: #fff;
  font-weight: 700;
  line-height: 34px;
  text-align: center;
  top: -2px;
}

.kat-userlist__dropdown__list .kat-profile-thumbnail__alphabet {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

.kat-userlist__dropdown .kat-userlist__dropdown__list__text {
  color: #1d2533;
  position: relative;
  font-size: 14px;
}

.kat-userlist__dropdown .kat-userlist__dropdown__list__text_email {
  color: #b2b3b7;
  font-weight: normal;
  font-size: 13px;
  margin-top: 9px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kat-userlist__dropdown .button-set {
  margin: 10px 10px 10px 0;
}

.category-colorcode {
  display: inline-block;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: relative;
  top: -3px;
}

.category-colorcode.no-select {
  background: #E3E5EA;
}

.category-colorcode.internal {
  background: #f0c600;
}

.category-colorcode.client {
  background: #2bbee8;
}

.category-colorcode.personal {
  background: #3f48cc;
}

.category-colorcode.investor {
  background: #58b358;
}

.kat-dropdown-text {
  padding-top: 4px;
  color: #29303d;
  font-weight: 500;
  width: 168px;
}

.kat-report-dropdown-wrap {
  width: 250px;
  padding: 8px 15px 0;
}

.kat-report-name-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.3) transparent transparent transparent;
  border-width: 4px 4px 4px 4px;
  position: relative;
  right: 10px;
  top: 12px;
}
.kat-userlist__dropdown__list li:hover {
  background: #f5f8fd;
}
.kat-userlist__dropdown__list li:hover span.kat-userlist__dropdown__list__text {
 font-weight:700;
}
.kat-task-detail__right-section__bottom-bar__watcher.myday, ul.generic-list .myday.kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  width: 31px !important;
  height: 31px !important;
}

.kat-task-detail__right-section__header__toolbar__dropdown.pos-top {
  top: auto;
  bottom: calc(100% + 8px);
}

.kat-task-detail__right-section__header__toolbar__dropdown.pos-top {
  transform-origin: bottom;
}

.kat-task-detail__right-section__header__toolbar__dropdown.r-pos-0 {
  right: -12px;
  left: auto;
}

ul.generic-list {
  background: #fff;
  max-height: 230px;
  overflow: auto;
  padding: 5px 0;
}

ul.generic-list li {
  padding: 10px 20px;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-top: 1px solid transparent;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid transparent;
}

ul.generic-list li:hover .kat-dropdown__more-ico {
  transform: translateX(0);
}

ul.generic-list li.kat-localupload input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

.kat-task-detail__right-section__header__toolbar__dropdown:not(.secondary-dropdown) ul.generic-list.selected {
  color: #202736;
}

ul.generic-list li a.kat-task-bar__menu__element__dropdown__list__item__link {
  white-space: nowrap;
  display: inline-block;
  color: #1f2532;
  font-size: 15px;
  padding: 0;
}

ul.generic-list li span.user-image-holder + a.kat-task-bar__menu__element__dropdown__list__item__link {
  position: absolute;
  bottom: 19px;
}

ul.generic-list .user-image-holder {
  height: 35px;
  width: 35px;
  border-radius: 100%;
  background: #242b39;
  display: inline-block;
  position: relative;
  margin-right: 10px;
  cursor: default;
  text-align: center;
  line-height: 34px;
  color: #d7d8da;
  font-size: 20px;
}

ul.generic-list + .kat-dropdown__footer {
  border-top: 1px solid #f2f4f9;
  font-size: 15px;
  padding: 6px;
  text-align: center;
  position: relative;
}

ul.generic-list {
  padding: 12px 0;
}

ul.generic-list li {
  border: none;
}

.kat-task-detail__right-section__header__toolbar__dropdown__wrapper.secondary-dd ul.generic-list li {
  border: none;
}

.kat-task-detail__right-section__header__toolbar__dropdown__wrapper.secondary-dd ul.generic-list li:not(.disable):hover, ul.generic-list li:not(.disable):hover {
  color: black;
  border: none;
  background: none;
}

.kat-task-bar__menu__element__dropdown ul.generic-list li:not(.disable):hover {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-right: none;
  border-left: none;
  background: none;
}

.kat-task-bar__menu__element__dropdown ul.generic-list li:not(.disable):hover a {
  color: #1f2532;
}

.kat-task-detail__right-section__header__toolbar__status__priority {
  position: relative;
  padding: 0 10px;
  min-width: 86px;
}

.kat-task-detail__right-section__header__toolbar__status__priority ul.generic-list {
  max-height: none;
}

.kat-task-detail__right-section__header__toolbar__status__priority .kat-task-detail__right-section__header__toolbar__dropdown {
  width: 125px;
}

.kat-task-detail__right-section__content-body__attach {
  color: #8e8c93;
  padding: 5px 8px;
  width: 300px;
  position: relative;
}

.kat-task-detail__right-section__content-body__attach .kat-dropdown__icon {
  width: 23px;
}

.kat-task-detail__right-section__content-body__attach .kat-task-detail__right-section__header__toolbar__dropdown {
  left: -4px;
  top: calc(100% - 38px);
  min-width: 0;
}

.kat-task-detail__right-section__content-body__attach ul.generic-list li {
  padding: 10px 12px;
  height: 38px;
}

.kat-task-detail__right-section__bottom-bar__watcher.add, ul.generic-list .add.kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  padding: 0;
  position: relative;
  color: #b5b5b5;
  line-height: 24px;
  text-transform: none;
}

.kat-task-detail__right-section__bottom-bar__watcher.add .kat-task-detail__right-section__header__toolbar__dropdown, ul.generic-list .add.kat-task-detail__right-section__header__toolbar__dropdown__list__img .kat-task-detail__right-section__header__toolbar__dropdown {
  right: 0;
  left: auto;
  width: 275px;
}

.kat-task-detail__right-section__bottom-bar__watcher.add .generic-list, ul.generic-list .add.kat-task-detail__right-section__header__toolbar__dropdown__list__img .generic-list {
  max-height: 400px;
}

ul.generic-list li:not(.disable):hover {
  background: #f9f9fa;
  border-top: 1px solid #f4f4f6;
  border-bottom: 1px solid #f4f4f6;
}

.kat-task-detail__right-section__header__toolbar__dropdown.secondary-dropdown .kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  width: 30px;
  height: 30px;
}

.kat-task-detail__right-section__header__toolbar__dropdown.secondary-dropdown ul.generic-list li {
  padding: 10px 20px;
}

.kat-task-detail__right-section__header__toolbar__dropdown.secondary-dropdown ul.generic-list li.selected span.kat-task-detail__right-section__header__toolbar__dropdown__list__primary-text {
  font-weight: 700;
}

.kat-task-detail__right-section__header__toolbar__dropdown.secondary-dropdown .kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  top: 1px;
}

.kat-task-detail__right-section__header__toolbar__dropdown.secondary-dropdown .kat-login-board__data__secondary-data__bar__action-button__active {
  font-size: 16px;
  font-weight: 800;
  margin-right: 0;
}

ul.generic-list .kat-profile-thumbnail__alphabet {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

ul.generic-list span.kat-task-detail__right-section__header__toolbar__dropdown__list__text {
  position: relative;
  top: 4px;
}

ul.generic-list span.kat-task-detail__right-section__header__toolbar__dropdown__list__primary-text {
  display: block;
  text-overflow: ellipsis;
  color: #202736;
  overflow: hidden;
}

ul.generic-list .kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  margin-left: 0;
  margin-right: 10px;
  position: relative;
  top: 0;
  line-height: 27px;
}

/*HierarchicalList css starts */
.hierarchical-list-wrapper {
  text-align: left;
  width: 100%;
  background: #fff;
  box-shadow: 0 0 8px rgba(67, 65, 90, .42);
  color: grey;
  -webkit-animation: dropdownEntry .16s ease-in-out;
          animation: dropdownEntry .16s ease-in-out;
  transform-origin: top center;
  line-height: normal;
}

.hierarchical-list-mainwrapper.bottom {
  position: absolute;
  left: 0;
  z-index: 999;
  right: 0;
}

.hierarchical-list-mainwrapper.top {
  position: absolute;
  bottom: 62px;
  left: -59px;
  z-index: 98;
}

.hierarchical-list-items, .hierarchical-list-items-footer, .hierarchical-list-items-header {
  padding: 10px 15px;
  color: #303541;
  font-size: 14px;
  position: relative;
  cursor: pointer;
}

.hierarchical-list-items .flaticon-delete-1, .hierarchical-list-items-footer .flaticon-delete-1, .hierarchical-list-items-header .flaticon-delete-1, .hierarchical-list-items .flaticon-arrow-right, .hierarchical-list-items-footer .flaticon-arrow-right, .hierarchical-list-items-header .flaticon-arrow-right {
  visibility: hidden;
}

.hierarchical-list-items .flaticon-delete-1:before, .hierarchical-list-items-footer .flaticon-delete-1:before, .hierarchical-list-items-header .flaticon-delete-1:before {
  font-size: 14px;
  color: #b2b2bb;
  margin-left: 10px;
}

.hierarchical-list-items .flaticon-arrow-right-1:before, .hierarchical-list-items-footer .flaticon-arrow-right-1:before, .hierarchical-list-items-header .flaticon-arrow-right-1:before {
  font-size: 13px;
  margin-left: 5px;
}

.hierarchical-list-items .hierarchical-list-items-txt, .hierarchical-list-items-footer .hierarchical-list-items-txt, .hierarchical-list-items-header .hierarchical-list-items-txt {
  width: calc(100% - 49px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hierarchical-list-items:hover, .hierarchical-list-items-footer:hover, .hierarchical-list-items-header:hover {
  background: #fafafc;
}

.hierarchical-list-items:hover .flaticon-delete-1, .hierarchical-list-items-footer:hover .flaticon-delete-1, .hierarchical-list-items-header:hover .flaticon-delete-1 {
  visibility: visible;
}

.hierarchical-list-items:hover .flaticon-arrow-right, .hierarchical-list-items-footer:hover .flaticon-arrow-right, .hierarchical-list-items-header:hover .flaticon-arrow-right {
  visibility: visible;
}

.hierarchical-list-items-footer {
  border-top: 1px solid #dfe2e7;
  font-weight: 600;
}

.hierarchical-list-items-footer .flaticon-arrow-right-1:before {
  font-size: 13px;
  margin-left: 10px;
}

.hierarchical-list-items-footer:hover {
  background: #fafafc;
}

.hierarchical-list-items.active, .active.hierarchical-list-items-footer, .active.hierarchical-list-items-header {
  background: #fafafc;
  font-weight: 600;
}

.hierarchical-list-items-header {
  font-size: 12px;
  cursor: default;
  color: #d1d1d3;
}

.hierarchical-list-items-header:hover {
  background: none;
  font-weight: normal !important;
}

.hierarchical-sublist-mainwrapper.top {
  position: absolute;
  bottom: 28px;
  margin-left: 100%;
  width: 208px;
}

.hierarchical-sublist-mainwrapper.top .flaticon-arrow-right {
  visibility: hidden;
}

.hierarchical-sublist-mainwrapper.top .hierarchical-list-items:hover, .hierarchical-sublist-mainwrapper.top .hierarchical-list-items-footer:hover, .hierarchical-sublist-mainwrapper.top .hierarchical-list-items-header:hover {
  font-weight: 600;
}

.hierarchical-sublist-mainwrapper.top .hierarchical-list-items:hover .flaticon-arrow-right-1:before, .hierarchical-sublist-mainwrapper.top .hierarchical-list-items-footer:hover .flaticon-arrow-right-1:before, .hierarchical-sublist-mainwrapper.top .hierarchical-list-items-header:hover .flaticon-arrow-right-1:before {
  visibility: visible;
}

.hierarchical-sublist-mainwrapper.top .flaticon-arrow-right-1:before {
  font-size: 13px;
  margin-left: 10px;
}

.hierarchical-sublist-mainwrapper.bottom {
  position: absolute;
  top: 100%;
  margin-left: 0;
  width: 100%;
}

.hierarchical-sublist-mainwrapper.bottom .flaticon-arrow-right {
  visibility: hidden;
}

.hierarchical-sublist-mainwrapper.bottom .hierarchical-list-items:hover, .hierarchical-sublist-mainwrapper.bottom .hierarchical-list-items-footer:hover, .hierarchical-sublist-mainwrapper.bottom .hierarchical-list-items-header:hover {
  font-weight: 600;
}

.hierarchical-sublist-mainwrapper.bottom .hierarchical-list-items:hover .flaticon-arrow-right-1:before, .hierarchical-sublist-mainwrapper.bottom .hierarchical-list-items-footer:hover .flaticon-arrow-right-1:before, .hierarchical-sublist-mainwrapper.bottom .hierarchical-list-items-header:hover .flaticon-arrow-right-1:before {
  visibility: visible;
}

.hierarchical-sublist-mainwrapper.bottom .flaticon-arrow-right-1:before {
  font-size: 13px;
  margin-left: 10px;
}

.hierarchical-sublist-mainwrapper .hierarchical-list-wrapper {
  top: 20px;
  min-width: 200px;
}

.hierarchical-sublist-mainwrapper-scroll {
  max-height: 180px;
  overflow: auto;
}

.hierarchical-list-mainwrapper-scroll {
  max-height: 200px;
  overflow: auto;
}

.hierarchical-sublist-mainwrapper .hierarchical-list-items-txt {
  width: calc(100% - 23px);
}

.hierarchical-sublist-wrapper-child {
  margin-left: calc(100% + 208px) !important;
}

.hierarchical-sublist-mainwrapper.selected-project-sublist {
  margin-left: 100% !important;
  top: 0;
}.kat-task-details-action-status-btn {
  padding: 8px 30px 8px 10px;
  color: #fff;
  font-size: 14px;
  background: #2bbee8;
  border-radius: 4px;
  margin: 14px 0 0 20px;
  cursor: pointer;
  position: relative;
}

.kat-task-details-action-status-btn span:first-child {
  min-width: 72px;
  display: inline-block;
}

.kat-task-details-action-status-btn .kat-task-detail__right-section__header__toolbar__dropdown.pos-bottom {
  top: 35px;
  left: -32px;
}

.kat-task-details-action-status-btn .kat-task-bar__menu__element__dropdown__list__item:hover a.kat-task-bar__menu__element__dropdown__list__item__link {
  color: #fff;
}

.kat-task-details-action-status-btn ul.kat-task-detail__right-section__header__toolbar__dropdown__list {
  padding: 0;
}

.kat-task-details-action-status-btn a.kat-task-bar__menu__element__dropdown__list__item__link {
  padding: 0;
}

.kat-task-details-action-status-btn .drop-arrow {
  position: relative;
  width: 0;
  height: 0;
  left: 16px;
  margin-top: -6px;
  border-style: solid;
  border-width: 6px 5px 5px 5px;
  border-color: #fff rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
  cursor: pointer;
}
.kat-projects-add-roles__wrapper {
  position: absolute;
  top: 160px;
  width: 500px;
  left: 0;
  right: 0;
  background: #f5f6fa;
  margin: auto;
  padding: 5px 20px;
  border-radius: 3px;
  height: calc(100% - 230px);
}

.kat-projects-add-roles__list__item {
  padding: 20px 10px;
  border-bottom: 1px solid #e9e9ea;
}

.kat-projects-add-roles__list__item__image-holder {
  height: 50px;
  width: 50px;
  float: left;
  position: relative;
  border-radius: 50%;
  background: #242b39;
  display: inline-block;
  margin-right: 20px;
  overflow: hidden;
}

.kat-projects-add-roles__list__item__image-holder img {
  height: 100%;
  width: 100%;
  border-radius: 100%;
}

.kat-projects-add-roles__list__item__image-holder__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: white;
  font-size: 18px;
}

.kat-projects-add-roles__list__item__primary-text, .kat-projects-add-roles__list__item .kat-userlist__dropdown__list__text {
  display: inline-block;
  width: calc(100% - 70px);
  font-size: 18px;
  color: #525863;
}

.kat-projects-add-roles__list__item .kat-userlist__dropdown__list__text {
  top: -1px;
}

.kat-projects-add-roles__list__item .kat-profile-thumbnail__alphabet {
  width: 45px;
  height: 45px;
  font-size: 20px;
  line-height: 42px;
  margin: 0 6px;
}

.kat-projects-add-roles__list__item .kat-projects-add-roles__list__item__highlighted-text {
  background: #dce0e9;
  padding: 4px;
  margin-top: 4px;
  display: inline-block;
  margin-right: 10px;
  font-size: 13px;
  color: #6e747f;
  border-radius: 3px;
  width: auto;
}

.kat-projects-add-roles__list__item .kat-projects-add-roles__list__item__highlighted-text:hover .kat-tag__close-icon {
  position: relative;
  top: -2px;
}

.kat-projects-add-roles__list__item__secondary-text {
  font-size: 13px;
  position: relative;
}

.kat-projects-add-roles__list__item .kat-projects-add-roles__list__item__secondary-text {
  top: 3px;
}

.kat-projects-add-roles__button {
  background: #58B358 !important;
  padding: 11px 30px;
  border-radius: 2px;
  color: white;
  font-size: 14px;
  height: 40px;
  width: 180px;
  position: fixed !important;
  left: 50%;
  transform: translateX(-50%);
  bottom: 40px;
}

.kad-add-people-input {
  padding: 3px 17px !important;
  width: 100% !important;
}

.kat-add-roles__dropdown__list {
  max-height: 180px !important;
  overflow: visible;
}

.kat-add-roles__dropdown__list li {
  overflow: visible !important;
}

.kat-add-people__dropdown {
  position: absolute;
  text-align: left;
  top: 100% !important;
  width: 100%;
  background: #fff;
  z-index: 98;
  box-shadow: 0 0 8px rgba(67, 65, 90, .42);
  color: grey;
  -webkit-animation: dropdownEntry .16s ease-in-out;
          animation: dropdownEntry .16s ease-in-out;
  transform-origin: top center;
  left: 0;
  min-width: 195px;
  overflow: hidden;
  line-height: normal;
}

.kat-add-people__dropdown-list {
  left: 15px !important;
  bottom: 17px !important;
  margin-bottom: 10px;
  width: 250px !important;
}

.kat-add-people__action-icon-holder-div {
  position: absolute;
  right: 20px;
}

.kat-add-people__action-icon-holder-div {
  visibility: hidden;
}

.kat-add-people__action-icon:before {
  font-size: 14px !important;
  margin-left: 0 !important;
  padding-right: 5px;
}

.kat-add-people__action-icon:before {
  font-size: 14px !important;
  margin-left: 0 !important;
}

.kat-add-people__action-icon-holder-animation {
  -webkit-animation: myAnimation .13s ease;
          animation: myAnimation .13s ease;
  display: inline-block !important;
}

@-webkit-keyframes myAnimation {
  0% {
    right: 0;
  }
  25% {
    right: 5px;
  }
  50% {
    right: 10px;
  }
  100% {
    right: 20px;
  }
}

@keyframes myAnimation {
  0% {
    right: 0;
  }
  25% {
    right: 5px;
  }
  50% {
    right: 10px;
  }
  100% {
    right: 20px;
  }
}

.kat-add-people__text {
  width: calc(100% - 25px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kat-task-detail__right-section__header__toolbar__dropdown-list {
  position: absolute;
  text-align: left;
  width: 100%;
  background: #fff;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  color: grey;
  -webkit-animation: dropdownEntry .16s ease-in-out;
          animation: dropdownEntry .16s ease-in-out;
  transform-origin: top center;
  left: 0;
  min-width: 195px;
  overflow: hidden;
  line-height: normal;
  border: 1px solid #E6E6E6;
}

 li.kat-add-people-list:hover .kat-add-people__action-icon-holder-div {
  visibility: visible;
}

.kat-projects-add-roles__list__item .kat-projects-add-people__body-pro-img {
  width: 45px !important;
  height: 45px !important;
  top: 0;
  left: -1px;
}.more-dropdown-wrapper {
  box-shadow: 0 0 8px rgba(67, 65, 90, 0.42);
  min-width: 155px;
  background: #fff;
  float: left;
  margin-left: -16px;
  position: absolute;
  left: 28px;
}

.more-dropdown-wrapper ul li {
  padding: 10px 15px;
  cursor: pointer;
  color: #434159;
}

.more-dropdown-wrapper ul li:hover {
  background: #F5F8FD;
  font-weight: 600;
}

.more-dropdown-wrapper ul li.more-dropdown-delete {
  color: red;
}

.more-dropdown-wrapper ul li:first-child {
  height: 27px;
  padding-top: 0;
}

.more-dropdown-wrapper ul li:first-child:hover {
  background: #fff;
  cursor: default;
}

.more-dropdown-wrapper ul li:first-child:hover .kat-task-detail__top-menu__items_icon.flaticon-three:before {
  top: 0;
  left: 2px;
  cursor: default;
  font-weight: normal;
}

.more-dropdown-wrapper ul li .kat-task-detail__top-menu__items_icon.flaticon-three:before {
  top: 0;
  left: 2px;
  cursor: default;
}/* DayPicker styles */
.DayPicker-Day--blue {
  color: #62d4ef;
}

.DayPicker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  padding: 1rem 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.DayPicker-Month {
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin: 0 .5rem;
}

.DayPicker-NavBar {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 .5rem;
}

.DayPicker-NavButton {
  position: absolute;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}

.DayPicker-NavButton--prev {
  left: 2rem;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDI2IDUwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4zLjIgKDEyMDQzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5wcmV2PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9InByZXYiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzLjM5MzE5MywgMjUuMDAwMDAwKSBzY2FsZSgtMSwgMSkgdHJhbnNsYXRlKC0xMy4zOTMxOTMsIC0yNS4wMDAwMDApIHRyYW5zbGF0ZSgwLjg5MzE5MywgMC4wMDAwMDApIiBmaWxsPSIjNTY1QTVDIj4KICAgICAgICAgICAgPHBhdGggZD0iTTAsNDkuMTIzNzMzMSBMMCw0NS4zNjc0MzQ1IEwyMC4xMzE4NDU5LDI0LjcyMzA2MTIgTDAsNC4yMzEzODMxNCBMMCwwLjQ3NTA4NDQ1OSBMMjUsMjQuNzIzMDYxMiBMMCw0OS4xMjM3MzMxIEwwLDQ5LjEyMzczMzEgWiIgaWQ9InJpZ2h0IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K");
}

.DayPicker-NavButton--next {
  right: 2rem;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDI2IDUwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4zLjIgKDEyMDQzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5uZXh0PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Im5leHQiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuOTUxNDUxLCAwLjAwMDAwMCkiIGZpbGw9IiM1NjVBNUMiPgogICAgICAgICAgICA8cGF0aCBkPSJNMCw0OS4xMjM3MzMxIEwwLDQ1LjM2NzQzNDUgTDIwLjEzMTg0NTksMjQuNzIzMDYxMiBMMCw0LjIzMTM4MzE0IEwwLDAuNDc1MDg0NDU5IEwyNSwyNC43MjMwNjEyIEwwLDQ5LjEyMzczMzEgTDAsNDkuMTIzNzMzMSBaIiBpZD0icmlnaHQiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=");
}

.DayPicker-Caption {
  display: table-caption;
  height: 2rem;
  text-align: center;
}

.DayPicker-Weekdays {
  display: table-header-group;
}

.DayPicker-WeekdaysRow {
  display: table-row;
}

.DayPicker-Weekday {
  display: table-cell;
  padding: .5rem;
  font-size: .875em;
  text-align: center;
  color: #8b9898;
}

.DayPicker-Weekday abbr {
  text-decoration: none;
}

.DayPicker-Body {
  display: table-row-group;
}

.DayPicker-Week {
  display: table-row;
}

.DayPicker-Day {
  display: table-cell;
  padding: .2rem;
  border: 1px solid #eaecec;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
  width: 46px;
}

.DayPicker--interactionDisabled .DayPicker-Day {
  cursor: default;
}

/* Default modifiers */
.DayPicker-Day--today {
  font-weight: 500;
  border-radius: 50%;
  display: table-caption;
  width: 34px;
  padding-top: 6px;
  height: 34px;
  position: relative;
}

.DayPicker-Day--disabled {
  color: #dce0e0;
  cursor: default;
}

.DayPicker-Day--outside {
  cursor: default;
  color: #dce0e0;
}

/* Example modifiers */
.DayPicker-Day--sunday {
  color: #dce0e0;
  background-color: #f7f8f8;
}

.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
  color: #ffffff;
  height: 31px;
}

.cal-month-dropdown {
  padding: 10px;
  border: 1px solid;
  border-radius: 3px;
  background: #fff;
}

.cal-month-dropdown-option {
  background: #fff;
  padding: 5px 8px;
}

.drop-arrow {
  position: relative;
  width: 0;
  height: 0;
  top: 13px;
  left: 8px;
  border-style: solid;
  border-width: 7px 6px 6px 6px;
  border-color: #9aa4ab rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
}

.calendar-drop-wrapper {
  cursor: pointer;
  position: relative;
  margin-left: 41px;
}

.calendar-drop-wrapper-sub {
  width: 133px;
}

.drop-wrapper-label {
  margin-left: 36px;
}

.calendar-dropdown-wrapper {
  position: absolute;
  text-align: left;
  background: #fff;
  z-index: 999;
  box-shadow: 0 0 8px rgba(67, 65, 90, .42);
  color: grey;
  -webkit-animation: dropdownEntry .16s ease-in-out;
          animation: dropdownEntry .16s ease-in-out;
  transform-origin: top center;
  left: 0;
  min-width: 130px;
  max-height: 200px;
  overflow: auto;
  line-height: normal;
  top: 25px;
}

.calendar-dropdown-wrapper ul li {
  padding: 8px 10px;
  font-size: 14px;
}

.calendar-dropdown-wrapper ul li:hover {
  background: #fafafc;
}

.DayPicker-Day_Date {
  display: inline-block;
  width: 29px;
  height: 29px;
  position: relative;
  top: -6px;
  left: -4px;
  border-radius: 50%;
  line-height: 2;

}

.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) .DayPicker-Day_Date {
  background-color: #2bbee8;
  border: 1px solid #c7c7c7 !important;
}

.DayPicker-Day--today .DayPicker-Day_Date {
  border: 1px solid #c7c7c7 !important;
  top: -8px;
}.increment-input-wrapper {
  padding: 5px 20px 5px 10px;
  border: 1px solid #e3e5ea;
  border-radius: 5px;
  position: relative;
  margin-right: 10px;
}

.increment-input-wrapper.repeat_input .kat-task-detail__right-section__header__toolbar__dropdown.pos-bottom {
  min-width: 155px;
  left: -7px;
}

.increment-input-wrapper.repeat_interval .kat-task-detail__right-section__header__toolbar__dropdown.pos-bottom {
  min-width: 74px;
  left: -7px;
}

.increment-input-wrapper .kat-task-detail__right-section__header__toolbar__dropdown.pos-bottom {
  top: 40px;
}

.increment-input-wrapper .kat-task-detail__right-section__header__toolbar__dropdown.pos-bottom ul, .increment-input-wrapper .kat-task-detail__right-section__header__toolbar__dropdown.pos-bottom .kat-task-bar__menu__element__dropdown__list__item__link {
  padding: 0;
}

.kat-increment-drop-arrow, .kat-increment-drop-arrow-up {
  position: absolute;
  width: 0;
  height: 0;
  top: 22px;
  right: 8px;
  border-style: solid;
  border-width: 7px 6px 6px 6px;
  border-color: #ececee rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
  transform: rotate(0deg);
  cursor: pointer;
}
.increment-input-wrapper.repeat_input .kat-increment-drop-arrow, .increment-input-wrapper.repeat_input .kat-increment-drop-arrow-up,.increment-input-wrapper.repeat_interval .kat-increment-drop-arrow, .increment-input-wrapper.repeat_interval .kat-increment-drop-arrow-up{
  border-width:5px 4px 7px 5px;
}
.kat-increment-drop-arrow-up {
  top: 3px;
  transform: rotate(179deg);
}

.kat-increment-drop-arrow:hover, .kat-increment-drop-arrow-up:hover, .kat-increment-drop-arrow.active, .kat-increment-drop-arrow-up.active {
  border-color: #9aa4ab rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
}

.increment-input-wrapper-input {
  width: 100%;
  height: 28px;
  border: none;
  font-size:12px;
}
.increment-input-wrapper.scheduling-input{
  position:relative;
  top:8px;
}

.increment-input-wrapper.repeat_input {
  width: 115px;
}

.increment-input-wrapper.repeat_interval {
  width: 60px;
  margin-right: 20px;
  margin-left: -30px;
}

.increment-input-wrapper.repeat-interval {
  margin-left: 0;
}/*Advanced task details starts*/

.kat-task-details-advanced-taskbar-individual-content-hdr-txt {
  color: #242B39;
  font-weight: 900;
  font-size: 13px;
}
.kat-task-details-advanced-task-bar-content {
  background: #fff;
  width: 100%;
  min-height: 366px;
}

/*Timings wrapper starts*/

.kat-task-details-advanced-taskbar-individual-content.timings-wrapper{
  padding: 30px;
  border-bottom: 1px solid #D9DDE4;
}

.kat-task-details-advanced-taskbar-individual-content.timings-wrapper .kat-task-detail__right-section__content-body-col3 {
  padding: 0 20px 0 0;
}

.kat-task-details-advanced-taskbar-individual-content.timings-wrapper .kat-task-detail__right-section__content-body-col3:last-child {
  padding: 0;
}

.kat-task-details-advanced-taskbar-individual-content.timings-wrapper .kat-task-detail__right-section__content-body-col__wrapper {
  padding-bottom: 0;
  border-bottom: none;
}

.kat-task-details-advanced-taskbar-individual-content.timings-wrapper .kat-task-detail__right-section__content-body-col3-wrapper {
  padding: 0;
}

.kat-task-details-advanced-taskbar-individual-content.timings-wrapper .card-info-wrapper {
  margin-right: 0;
  margin-top: 15px;
}

.kat-task-details-advanced-taskbar-individual-content.timings-wrapper .kat-default-button {
  padding: 10px 19px;
  font-size: 13px;
  font-weight: normal;
}

.kat-task-details-advanced-taskbar-individual-content.timings-wrapper button {
  padding: 10px 19px;
  font-size: 13px;
}
/*Timings wrapper ends*/

/*tabular structure in advanced task details starts*/

.track-details-table tr td .kat-userlist__dropdown__list__text, .scheduled-details-table tr td .kat-userlist__dropdown__list__text {
  width: calc(100% - 44px);
  top: 4px;
}

.scheduled-details-table tr td .DayPicker.DayPicker--en {
  position: relative;
  width: 278px;
}

.track-details-table {
  margin-top: 20px;
  border-spacing: 0;
  border-collapse: separate;
}

.track-details-table thead tr, .track-details-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.track-details-table tbody {
  display: block;
  width: 100%;
}

.track-details-table tr td {
  padding: 10px 6px;
  border-bottom: 1px solid #e3e5ea;
  font-weight: normal;
  color: #242B39;
  cursor: default;
  position: relative;
  vertical-align: top;
  font-size: 12px;
}

.track-details-table tr td .timepicker-without-calendar {
  position: relative;
}

.track-details-table tr:hover td .button-wrapper {
  visibility: visible;
  margin-right:10px;
}

.track-details-table tbody tr:nth-child(odd) td {
  background: #FBFCFE;
}

.track-details-table tbody tr td:nth-child(1), .track-details-table thead tr td:nth-child(1) {
  width: 20%;
}

.track-details-table tbody tr td:nth-child(2), .track-details-table thead tr td:nth-child(2) {
  width: 30%;
}

.track-details-table tbody tr td:nth-child(3), .track-details-table thead tr td:nth-child(3) {
  width: 20%;
}

.track-details-table tbody tr td:nth-child(4), .track-details-table thead tr td:nth-child(4) {
  width: 30%;
}

.track-details-table tr.track-details-table-hdr td {
  color: #242B39;
  border-top: 1px solid #e3e5ea;
  background: #F5F8FD;
  font-weight: bold;
  cursor: default;
  font-size:12px;
}

.track-details-table .block-cards-info {
  width: 80%;
  cursor: pointer;
  font-size: 12px;
}

.track-details-table .avatar-image-small {
  border: 1px solid black;
  height: 23px;
  width: 23px;
  border-radius: 50%;
  margin: 0 6px 0 0;
  position: relative;
}

.track-details-table .flaticon-edit-pen:before, .track-details-table .flaticon-delete:before {
  font-size: 12px;
  margin-left: 0;
  color: rgba(120, 126, 141, 0.7);
}

.track-details-table .flaticon-edit-pen, .track-details-table .flaticon-delete {
  padding: 0 !important;
  margin-right: 10px;
}
.track-details-table .flaticon-delete{
  margin-right: 0;
}

.track-details-table .button-wrapper {
  visibility: hidden;
  margin-right:10px;
}

.track-details-table .add-link {
  color: #35C1E9;
}
.track-details-table.scheduled-details-table .flaticon-tick-thin:before{
  background:none;
  border:none;
  color:#232b39;
}
.track-details-table.scheduled-details-table .flaticon-cross-icon:before{
  margin-left:0;
  font-size:11px;
  cursor:pointer;
}
.scheduled-details-table tbody tr td:nth-child(1), .scheduled-details-table thead tr td:nth-child(1) {
  width: 20%; 
  /* 27 */
}

.scheduled-details-table tbody tr td:nth-child(2){
  width: 16%;
}

.scheduled-details-table thead tr td:nth-child(2) {
  width: 25%;
}
.scheduled-details-table tbody tr td:nth-child(2):hover{
  width: 30%;
}
.scheduled-details-table tbody tr td:nth-child(3), .scheduled-details-table thead tr td:nth-child(3) {
  width: 28%;
}

.scheduled-details-table tbody tr td:nth-child(4), .scheduled-details-table thead tr td:nth-child(4) {
  width: 46%;
}

.scheduled-details-table tbody tr td:nth-child(5), .scheduled-details-table thead tr td:nth-child(5) {
  width: 17%;
  padding-left: 0;
  padding-right: 0;
}

.scheduled-details-table tbody tr td .kat-default-button {
  font-size: 11px !important;
  padding: 8px !important;
  margin-top: 5px;
}

.scheduled-details-table tbody tr td .cancel {
  margin-top: 5px;
  font-size: 11px !important;
  padding: 8px !important;
  margin-right: 0;
  display:inline-block;
}
.scheduled-details-table .timepicker-wrapper-div{
  position:absolute;
  right: -25px;
  background:#fff;
}
.scheduled-details-table .add.block-cards-info .kat-task-detail__right-section__bottom-bar__watcher{
  position:relative;
  left: -3px;
  top: 0;
}
.track-details-table .add.block-cards-info{
  width:100%;
  padding:8px 6px;
}
.add-link-row {
  padding: 10px;
  color: #35C1E9;
  border-bottom: 1px solid #e3e5ea;
}

.add-link-row .add-link {
  cursor: pointer;
  font-size:13px;
}
/*tabular structure in advanced task details ends*/
/*Other Details starts*/
.kat-task-details-advanced-taskbar-individual-content{
  padding: 30px;
  border-bottom: 1px solid #d9dde4;
}
.block-card-big{
  width:280px;
  height:45px;
}
.block-cards-info.block-card-big .kat-userlist__dropdown__list__text{
  width:calc(100% - 19%);
}
.billable-card-wrapper .kat-task-detail__right-section__bottom-bar__watcher, .billable-card-wrapper .kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  width: 29px !important;
  height: 29px !important;
  line-height: 25px;
}
.billable-card-wrapper .avatar-image-small {
  width: 29px !important;
  height: 29px !important;
  margin-top: 0;
  margin-left: 0;
}
.billable-card-wrapper .secondary-txt, .billable-card-wrapper .kat-userlist__dropdown__list__text_email {
  font-size: 12px;
  position: relative;
  top: -4px;
  float: left;
}
.billable-card-wrapper .primary-txt, .billable-card-wrapper .kat-userlist__dropdown__list__text {
  font-size: 14px;
  top: -3px;
}
/*Other Details Ends*/

/*Dependencies starts*/
.task-dependency-wrapper .add-link {
  color: #2BBEE8;
  font-size: 12px;
}
/*Dependencies ends*/

/*Repeat task starts*/

.kat-task-details-advanced-taskbar-individual-content .toggle-switch-wrapper .toggle-button-txt {
  color: #7f7e8b;
  font-size: 13px;
  margin-top: 3px;
}

.kat-task-details-advanced-taskbar-individual-content .toggle-switch-wrapper.checked .toggle-button-txt {
  color: #2BBEE8;
  margin-left: 5px;
  font-size: 13px;
  margin-top: 3px;
}

.kat-task-details-advanced-taskbar-individual-content .onoffswitch {
  position: relative;
  width: 23px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  top: 6px;
  left: -4px;
}

.kat-task-details-advanced-taskbar-individual-content .onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  height: 9px;
  padding: 0;
  width: 22px;
  line-height: 15px;
  border: 0 solid #FFFFFF;
  border-radius: 30px;
  background-color: #EAEAEC;
}

.kat-task-details-advanced-taskbar-individual-content .onoffswitch-label:before {
  content: "";
  display: block;
  width: 14px;
  margin: -8.5px -1.5px -2.5px -3.5px;
  background: #c9cdd6;
  position: absolute;
  top: 4px;
  bottom: 0;
  left: 0;
  height: 15px;
  border-radius: 30px;
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
  -moz-transition: All 0.3s ease;
  -o-transition: All 0.3s ease;
}

.kat-task-details-advanced-taskbar-individual-content .onoffswitch-checkbox.checked + .onoffswitch-label {
  background-color: #D5F2FA;
}

.kat-task-details-advanced-taskbar-individual-content .onoffswitch-checkbox.checked + .onoffswitch-label, .kat-task-details-advanced-taskbar-individual-content .onoffswitch-checkbox.checked + .onoffswitch-label:before {
  border-color: #D5F2FA;
}

.kat-task-details-advanced-taskbar-individual-content .onoffswitch-checkbox.checked + .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}

.kat-task-details-advanced-taskbar-individual-content .onoffswitch-checkbox.checked + .onoffswitch-label:before {
  left: 15px;
  background-color: #2BBEE8;
}

.kat-task-details-repeattask-table tr td {
  position: relative;
}

.kat-task-details-repeattask-table tr td .radio-lable {
  color: #2a303d !important;
  font-size: 14px !important;
  margin-left: 8px;
  margin-top:8px;
}
.kat-task-details-repeattask-table tr td{
  padding-top:10px;
  padding-bottom:10px;
  font-size:11px;
  color: #7f7e8b;

}
.kat-task-details-repeattask-table tr td:first-child{
  padding-right:20px;
  font-weight: 600;
}

.kat-task-details-repeattask-table tr td .DayPicker.DayPicker--en {
  top: 87px;
}
.scheduling-ends-never .radio-div-wrapper{
  margin-right:21px !important;
}

.kat-task-details-repeattask-table tr td .radio-lable-secondary {
  margin: 10px 10px 0 -12px;
  font-size: 13px;
  color:#2a303d;
}

.kat-task-details-repeattask-table tr td .flaticon-round:before {
  color: #cecdd3;
  margin-left: 0;
  font-size: 12px;
  cursor: pointer;
  position:relative;
  top:8px;
}

.kat-task-details-repeattask-table tr td .flaticon-radio-active:before {
  color: #2bbee8;
  margin-left: 0;
  font-size: 12px;
  cursor: pointer;
  position:relative;
  top:8px;
}

.kat-task-details-repeattask-table tr td .radio-div-wrapper {
  margin-right: 40px;
  margin-top: 10px;
  min-width: 11%;
}
.kat-task-details-repeattask-table tr td .increment-input-wrapper.repeat_interval{
  width: 52px;
}

.repeat-on-days-list li {
  padding: 10px;
  font-size: 13px;
  color: #2a303d;
  margin-right: 10px;
  cursor: pointer;
}

.repeat-on-days-list li:hover, .repeat-on-days-list li.active {
  color: #fff;
  background: #2bbee8;
  border-radius: 5px;
}
.date-input-value{
  color: #2bbee8;
  cursor: pointer;
  float: left;
  font-size:12px;
  margin-top: 20px;
  margin-left: -30px;
}
.recurring-task-button-wrapper {
  margin-top: 20px;
}

.recurring-task-button-wrapper .kat-default-button {
  padding: 8px 15px;
  font-size: 13px;
  font-weight: normal;
}

.recurring-task-button-wrapper button {
  padding: 8px 15px;
  font-size: 13px;
}
/*Repeat task ends*/

/*Security wrapper starts*/
.security-div-wrapper {
  margin-top: 20px;
}

.security-div-wrapper .security-div-wrapper-individual {
  margin-bottom: 10px;
}

.security-div-wrapper .checkbox-txt {
  color: #727988;
  margin-left: 10px;
  font-size: 14px;
}

.security-div-wrapper .kat-userlist__dropdown__items_icon:not(.flaticon-check).checkbox {
  margin: 0;
  width:14px;
  height:14px;
}
.kat-task-details-advanced-taskbar-individual-content span.flaticon-tick-thin:before {
  font-size: 8px !important;
  padding: 2px;
  margin-left: 0 !important;
  background: #59bd50;
  color: #fff;
  border: 1px solid #59bd50;
  border-radius: 3px;
  position: relative;
  left: -1px;
  cursor: pointer;
}
/*Security Wrapper Ends*/

/*life cycle css starts*/
.lifecycle-content table{
  width:100%;
  border-spacing: 0;
  border-collapse: separate;
  font-size:13px;
  margin-top:20px;
}
.lifecycle-content table tbody tr td{
  padding:15px 10px;
  border-bottom:1px solid #e3e5ea;
}
.lifecycle-content table tbody tr td:first-child{
  padding-left:0;

}
.lifecycle-content table tbody tr td:nth-child(1){
  width:60%;
}
.lifecycle-content table tbody tr td:nth-child(2){
  width:20%;
}
.lifecycle-content table tbody tr td:nth-child(3){
  width:20%;
}
.lifecycle-content table tbody tr:last-child td{
 font-weight:bold;
  color:#595e68;

}
/*life cycle css ends*/
.advanced-task-table-scroll.tracked-time-content-div .no-data {
  border-bottom: 1px solid #E6E6E6;
  border-top: 1px solid #E6E6E6;
  margin-top: 20px;
  padding-bottom: 20px;
}
.no-data {
  padding: 20px 20px 0 20px;
  font-size: 14px;
  text-align: center;
}
.kat-task-detail__left-section__comments-custom-scroll, .kat-task-detail__left-section__notes-custom-scroll {
  width: 100%;
  height:calc(100% - 142px);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  bottom: 95px;
  margin-top: 95px;
}
/*Advanced task details ends*/ul.kat-task-detail__left-section__comments {
  height: calc(100% - 26px);
  padding-left: 2px;
  padding-top: 2px;
}

.kat-task-detail__left-section__notes__list.edit-mode .kat-task-detail__left-section__comments__list__detail-section__header__button-wrapper, .kat-task-detail__left-section__notes__list.edit-mode .kat-task-detail__left-section__notes__list__time-stamp {
  display: none;
}

li.kat-task-detail__left-section__comments__list {
  background: #fff;
  margin-bottom: 13px;
  padding: 15px;
  border-radius: 3px;
  box-shadow: 0 1px 2px 0 #B1B6C3;
  transition: box-shadow 0.15s ease-in;
}

li.kat-task-detail__left-section__comments__list:hover {
  box-shadow: 0 1px 4px 1px #B1B6C3;
}

.kat-task-detail__left-section__comments__list__profile-section {
  width: 50px;
  height: 100%;
}

.kat-task-detail__left-section__comments__list__profile-section .kat-profile-thumbnail__alphabet {
  font-size: 14px;
}

.kat-task-detail__left-section__header__checkbox__wrapper {
  margin-top: -20px;
}

.kat-task-detail__left-section__comments__list__detail-section {
  width: calc(100% - 50px);
}

.kat-task-detail__left-section__comments__list__profile-section__picture.kat-profile-thumbnail__alphabet {
  width: 40px;
  height: 40px;
  border: 1px solid #1E242F;
  line-height: 38px;
  text-transform: uppercase;
  font-size: 18px;
}

span.kat-task-detail__left-section__comments__list__detail-section__header__title {
  font-size: 15px;
  color: #505561;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: calc(100% - 124px);
}

span.kat-task-detail__left-section__comments__list__detail-section__header__sub-title {
  font-size: 12px;
  padding-left: 10px;
  margin-top: 3px;
  overflow: hidden;
  color:#97989d;
  text-overflow: ellipsis;
}

button.kat-task-detail__left-section__comments__list__detail-section__header__button {
  font-size: 13px;
  padding: 3px;
  margin: 0 5px 0 0;
}

button.kat-task-detail__left-section__comments__list__detail-section__header__button:before {
  margin: 0;
  font-size: inherit;
}

.kat-task-detail__left-section__comments__list__detail-section__header__button-wrapper {
  transform: scale(0);
  transition: all 0.2s ease-in-out;
  margin-right: -17px;
  margin-top: 0;
}

li.kat-task-detail__left-section__comments__list:hover .kat-task-detail__left-section__comments__list__detail-section__header__button-wrapper, .kat-task-detail__left-section__notes__list__item:hover .kat-task-detail__left-section__comments__list__detail-section__header__button-wrapper {
  transform: scale(1);
}

p.kat-task-detail__left-section__comments__list__detail-section__comment-text {
  color: #868990;
  font-size: 14px;
  margin-top: 5px;
  width: inherit;
  word-wrap: break-word;
}

p.kat-task-detail__left-section__comments__list__detail-section__comment-text.edit-mode {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  padding: 5px 8px;
}

span.kat-task-detail__left-section__comments__list__detail-section__comment-text__edited {
  opacity: 0.5;
}

li.kat-task-detail__left-section__comments__list:not(.edit-mode):hover button.kat-task-detail__left-section__comments__list__detail-section__header__button {
  left: 0;
  opacity: 1;
}

.kat-task-detail__left-section__add-comments__card {
  background: #fff;
  border: 1px solid rgba(177, 182, 195, 0.5);
  border-radius: 3px;
  padding-bottom: 10px;
}

.kat-task-detail__left-section__add-comments {
  padding-right: 20px;
  margin-bottom: 10px;
  padding-top: 20px;
  position: absolute;
  left: 15px;
  right: -5px;
  bottom: 2px;
}

.kat-task-detail__left-section__add-comments__card__text-input {
  padding: 15px 15px 10px 15px;
  font-size: 14px;
  color: #696D74;
  max-height: 60px;
  overflow: auto;
}

.kat-task-detail__left-section__add-comments__card__bottom-bar .kat-dropdown__icon {
  width: 23px;
}

.kat-task-detail__left-section__add-comments__card__bottom-bar {
  width: calc(100% - 30px);
  margin: auto;
  border-top: 1px solid #D8DBE1;
}

.kat-task-detail__left-section__add-comments__card__bottom-bar ul.kat-task-detail__right-section__header__toolbar__dropdown__list li {
  padding: 10px 12px;
}

span.kat-task-detail__left-section__add-comments__card__bottom-bar__button__icon {
  font-size: 14px;
  position: relative;
  top: 1px;
  padding-right: 10px;
}

span.kat-task-detail__left-section__add-comments__card__bottom-bar__button__icon:before {
  font-size: inherit;
  margin: 0;
}

button.kat-task-detail__left-section__add-comments__card__bottom-bar__button {
  padding: 5px 15px 5px 2px;
  margin: 5px 0 0 0;
}

.kat-task-detail__left-section__add-comments__button {
  padding: 8px 20px;
  margin-right: 0;
  margin-left: 15px;
  margin-top: 10px;
  transition: all 0.15s ease-in;
}

.kat-task-detail__left-section__add-comments__button.save {
  background: #fff;
  color: #242B39;
  box-shadow: 0 1px 2px 0 #B1B6C3;
  border: 1px solid rgba(204, 204, 204, 0.3);
}

.kat-task-detail__left-section__add-comments__button.save:hover {
  box-shadow: 0 0 1px 0 #B1B6C3;
}

.kat-task-detail__left-section__add-comments__button:hover {
  color: #242B39;
}

.kat-task-detail__left-section__add-comments__card__bottom-bar .kat-task-detail__attachment-wrapper {
  width: 100%;
  margin-top: 10px;
}

.kat-task-detail__left-section__add-comments__card__bottom-bar .kat-task-detail__attachment {
  width: 100%;
}

.kat-task-detail__left-section__add-comments__card__bottom-bar .kat-task-detail__attachment-progress-wrapper {
  right: 0;
}

.kat-task-detail__left-section__comments__list__detail-section .kat-task-detail__left-section__add-comments__card__bottom-bar .kat-task-detail__right-section__header__toolbar__dropdown.pos-top {
  bottom: calc(100% + -43px);
}

.kat-task-detail__left-section__comments__list__detail-section .kat-task-detail__attachment {
  margin-top: 20px;
  width: 100%;
}

.kat-task-detail__left-section__comments__list__detail-section .kat-task-detail__left-section__add-comments__card__bottom-bar {
  margin-left: 0;
  margin-right: 0;
  margin-top: 20px;
  width: 100%;
}

.kat-task-detail__left-section__comments__list:first-child .kat-task-detail__right-section__header__toolbar__dropdown.pos-top {
  bottom: calc(100% + -234px);
  left: -24px;
}

li.kat-task-detail__left-section__comments__list .kat-profile-thumbnail__alphabet {
  width: 30px;
  height: 30px;
}

li.kat-task-detail__left-section__comments__list .kat-task-detail__right-section__content-body-col__content-image {
  top: 0;
  left: -6px;
}ul.kat-task-detail__left-section__notes {
  padding-right: 20px;
  margin-bottom: 15px;
  flex: 1;
}

.kat-task-detail__left-section__notes__list {
  margin-bottom: 13px;
}

.kat-task-detail__left-section__notes__list__item {
  background: #fff;
  border-radius: 3px;
  padding: 15px;
  box-shadow: 0 1px 1px 0 rgba(177, 182, 195, 0.6);
  position: relative;
}

.kat-task-detail__left-section__notes__list:not(.edit-mode):hover button.kat-task-detail__left-section__comments__list__detail-section__header__button {
  left: -12px;
  opacity: 1;
}

ul.kat-task-detail__right-section__header__toolbar__dropdown__list li.disable {
  cursor: default;
}

p.kat-task-detail__left-section__notes__list__text {
  color: #2A3036;
  font-size: 15px;
  margin-bottom: 10px;
  width: 94%;
  word-wrap: break-word;
  line-height: 21px;
}

p.kat-task-detail__left-section__notes__list__text.edit-mode {
  box-shadow: inset 0 0 2px #d6d6d6;
  padding: 5px 8px;
  border-radius: 3px;
}

span.kat-task-detail__left-section__notes__list__time-stamp {
  color: #C8CCD5;
  font-size: 14px;
}

.kat-task-detail__left-section__add-notes {
  padding-right: 20px;
  margin-bottom: 10px;
  padding-top: 20px;
  position: absolute;
  left: 15px;
  right: -5px;
  bottom: 2px;
}

.kat-task-detail__left-section__add-notes__card {
  background: #fff;
  border-radius: 3px;
  border: 1px solid rgba(177, 182, 195, 0.65);
  padding: 15px;
  padding-bottom: 10px;
  position: relative;
}

p.kat-task-detail__left-section__add-notes__card__text-input {
  color: #696D74;
  font-size: 14px;
  padding-bottom: 10px;
  max-height: 60px;
  overflow: auto;
}

.kat-task-detail__left-section__add-notes__card__bottom-bar {
  border-top: 1px solid #D8DBE1;
}

button.kat-task-detail__left-section__add-notes__card__bottom-bar__attachment-button {
  margin: 0;
  padding: 5px 15px 5px 2px;
  margin-top: 5px;
}

span.kat-task-detail__left-section__add-notes__card__bottom-bar__attachment-button__icon:before {
  margin: 0;
  font-size: inherit;
}

span.kat-task-detail__left-section__add-notes__card__bottom-bar__attachment-button__icon {
  font-size: 14px;
  position: relative;
  top: 1px;
  padding-right: 10px;
}

.kat-task-detail__left-section__add-notes__card__button {
  padding: 8px 20px;
  margin-right: 0;
  margin-left: 15px;
  margin-top: 10px;
  transition: all 0.15s ease-in;
}

.kat-task-detail__left-section__add-notes__card__button.save {
  background: #fff;
  color: #242B39;
  box-shadow: 0 1px 2px 0 #B1B6C3;
}

.kat-task-detail__left-section__add-notes__card__button.save:hover {
  box-shadow: 0 0 1px 0 #B1B6C3;
}

.kat-task-detail__left-section__add-notes__card__button:hover {
  color: #242B39;
}

.kat-task-detail__left-section__add-notes__card .kat-task-detail__right-section__header__toolbar__dropdown.pos-top {
  bottom: calc(100% + -51px);
}

.kat-task-detail__left-section__notes__list__item .kat-task-detail__left-section__add-comments__card__bottom-bar {
  margin-left: 0;
  margin-right: 0;
  margin-top: 20px;
  width: 100%;
}

.kat-task-detail__left-section__notes__list:first-child .kat-task-detail__right-section__header__toolbar__dropdown.pos-top {
  bottom: calc(100% + -234px);
  left: -24px;
}

.kat-task-detail__left-section__add-notes__card__bottom-bar .kat-task-detail__attachment-wrapper {
  width: 100%;
  margin-top: 10px;
}

.kat-task-detail__left-section__add-notes__card__bottom-bar .kat-task-detail__attachment {
  width: 100%;
}

.kat-task-detail__left-section__notes__list__item .kat-task-detail__attachment {
  width: 100%;
}ul.kat-task-detail__left-section__activity {
  position: relative;
  height: calc(100% - 4px);
  overflow: auto;
  margin-left: 15px;
}

li.kat-task-detail__left-section__activity__list {
  padding-right: 20px;
  margin-bottom: 47px;
  position: relative;
}

li.kat-task-detail__left-section__activity__list:before {
  content: '';
  width: 1px;
  background: #262d33;
  position: absolute;
  top: 0;
  left: 36px;
  bottom: -12px;
  height:88px;

}
li.kat-task-detail__left-section__activity__list.activity-date:before{
  height:38px;
}
.kat-task-detail__left-section__activity__list__profile.kat-profile-thumbnail__alphabet {
  width: 43px;
  height: 43px;
  line-height: 40px;
  font-size: 20px;
}

.kat-task-detail__left-section__activity__list__profile {
  background: #9CA2AF;
  border-radius: 50%;
  border: 1px solid #000;
  margin-top: 10px;
  position: relative;
  margin-left: 2px;
  z-index: 9;
}

.kat-task-detail__left-section__activity__list__profile .kat-task-detail__right-section__content-body-col__content-image {
  left: 0;
}

.kat-task-detail__left-section__activity__list__details {
  width: calc(100% - 89px);
  background: #fff;
  word-wrap: break-word;
  margin-left: 20px;
}

span.kat-task-detail__left-section__activity__list__details__header__title {
  font-size: 14px;
  color: #2A3036;
  width: calc(100% - 20%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight:bold;
}

p.kat-task-detail__left-section__activity__list__details__text {
  font-size: 14px;
  color: #7F8287;
}

span.kat-task-detail__left-section__activity__list__details__header__sub-title {
  font-size: 13px;
  padding-left: 13px;
  color: #B1B6C3;
  margin-top: 2px;
}

p.kat-task-detail__left-section__activity__list__details__text b {
  font-weight: 600;
}

.kat-task-detail__left-section__activity__list__details__header {
  margin-bottom: 7px;
}

li.kat-task-detail__left-section__activity__list.activity-date {
  background: #262d33;
  display: inline-block;
  margin-bottom: 20px;
  border-radius: 20px;
  height: 20px;
  position: relative;
  padding: 0 10px;
  min-width: 75px;
  text-align: center;
}

span.kat-task-detail__left-section__activity__list__activity-date__title {
  font-size: 10px;
  color: #b9babc;
  position: relative;

}

li.kat-task-detail__left-section__activity__list:last-child:before {
  bottom: auto;
  height: 30px;
}

li.kat-task-detail__left-section__activity__list .kat-task-detail__right-section__content-body-col__content-image {
  margin: 0;
  width: 41px;
  height: 41px;
  border-radius: 50%;
  top: 0;
  left: 0;
}

li.kat-task-detail__left-section__activity__list .kat-profile-thumbnail__alphabet {
  width: 41px;
  height: 41px;
  line-height: 40px;
  left: 11px;
}.kat-projects-popup__wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(31, 37, 50, .7);
}

.kat-projects-popup {
  position: relative;
  width: 650px;
  background: #fff;
  border-radius: 4px;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding-top: 90px;
}

.kat-projects-popup__container {
  padding: 0 90px;
}

.kat-projects-popup__bottom-bar {
  height: 70px;
  border-top: 1px solid #f1f1f1;
  text-align: center;
  padding-top: 20px;
}

h3.kat-projects-popup__title {
  font-size: 29px;
  font-weight: 100;
}

h3.kat-projects-popup__title.delete {
  color: #eb3131;
  margin-bottom: 40px;
}

span.kat-projects-popup__text {
  font-size: 16px;
  color: #7f8187;
  display: inline-block;
}

span.kat-projects-popup__text.dark {
  color: #495366;
}

span.kat-projects-popup__text b {
  font-weight: 500;
}

.kat-projects-popup__checkbox-label {
  color: #a5a6aa;
  font-weight: 100;
  font-size: 16px;
  margin-left: 15px;
}

.kat-projects-popup__link {
  font-weight: 400;
  color: #495366;
  border-bottom: 1px solid #495366;
  margin-left: 10px;
}

.kat-projects-popup__checkbox__row {
  margin-bottom: 10px;
}

.kat-projects-popup__checkbox {
  margin-top: 3px;
}

button.kat-projects-popup__button {
  padding: 14px 22px;
  font-size: 16px;
  color: #a5a6aa;
  margin-right: 20px;
}

button.kat-projects-popup__button.delete {
  background: #eb3131;
  color: #fff;
}

button.kat-projects-popup__button.disabled {
  background: #c8ccd5;
  color: #fff;
  cursor: no-drop;
}

.kat-projects-popup__buttons-wrapper {
  padding: 33px 0;
  margin-bottom: 35px;
}

button.kat-projects-popup__close-icon {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  font-size: 13px;
  padding: 20px 17px 17px 17px;
  color: #7c8088;
}

button.kat-projects-popup__close-icon:before {
  font-size: inherit;
  margin: 0;
}input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

.kat-task-detail__overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(31, 37, 50, 0.47);
  z-index: 9999;
}

.kat-task-detail {
  position: relative;
  top: 40px;
  left: 78px;
  width: calc(100% - 143px);
  height: calc(100% - 85px);
  background: #fff;
  border-radius: 4px 0 4px 4px;
  display: flex;
  flex-direction: row;
}

.kat-task-detail__top-menu {
  position: absolute;
  min-width: 200px;
  height: 50px;
  top: -50px;
  right: 0;
}

.kat-task-detail__top-menu:before {
  content: '';
  position: absolute;
  height: 50px;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  border-bottom: none;
  border-radius: 15px 4px 0 0;
  background: #FFF;
  transform: perspective(5px) rotateX(1deg);
  transform-origin: bottom right;
}

.kat-task-detail__navigation {
  width: 60px;
  background: #B1B6C3;
  height: 100%;
  border-radius: 4px 0 0 4px;
}

nav.kat-task-detail__navigation__list {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

a.kat-task-detail__navigation__list__item {
  width: 100%;
  height: calc(100% / 4);
}

.kat-task-detail__navigation {
  width: 60px;
  background: #B1B6C3;
  height: 100%;
  border-radius: 4px 0 0 4px;
}

nav.kat-task-detail__navigation__list {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

a.kat-task-detail__navigation__list__item {
  width: 100%;
  height: calc(100% / 4);
  position: relative;
  color: #787E8D;
  transition: all 0.15s ease-in;
}

a.kat-task-detail__navigation__list__item:hover {
  color: #3F4658;
}

a.kat-task-detail__navigation__list__item:before {
  position: absolute;
  top: 50%;
  font-size: 26px;
  margin-left: 0;
  left: 50%;
  color: inherit;
  transform: translateX(-50%) translateY(-50%);
}

a.kat-task-detail__navigation__list__item.active {
  color: #3F4658;
  background: #979EAE;
}

.kat-task-detail__left-section__header {
  padding-right: 20px;
}

.kat-task-detail__left-section-wrapper {
  width: 460px;
  flex: 0 0 35vw;
}

a.kat-task-detail__navigation__list__item.flaticon-notes:before {
  font-size: 28px;
}

a.kat-task-detail__navigation__list__item.flaticon-list-icon:before {
  font-size: 24px;
}

a.kat-task-detail__navigation__list__item:first-child {
  border-radius: 4px 0 0 0;
}

a.kat-task-detail__navigation__list__item:last-child {
  border-radius: 0 0 0 4px;
}

h5.kat-task-detail__left-section__header__title {
  color: #242B39;
  font-size: 20px;
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  margin-left: 5px;
}

input.kat-task-detail__left-section__header__checkbox__input {
  margin-top: 3px;
  margin-right: 8px;
}

label.kat-task-detail__left-section__header__checkbox__label {
  font-size: 14px;
  color: #242B39;
}

.kat-task-detail__right-section__content-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100% - 85px);
  overflow: auto;
}

.kat-task-detail__right-section__content {
  flex: 1;
  position: relative;
  top: 0;
}

.kat-task-detail__right-section__header {
  width: 100%;
}

.kat-task-detail__right-section__header .kat-task-detail__left-section__checklist__card__add-options {
  margin-bottom: 12px;
  margin-left: 17px;
}

span.kat-task-detail__right-section__header__toolbar__dropdown__title {
  color: #232A38;
  font-size: 16px;
  font-weight: 600;
}

span.kat-task-detail__right-section__header__toolbar__dropdown__title-result {
  color: #575C65;
  font-size: 16px;
  margin-left: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 83%;
}

.kat-task-detail__right-section__header__toolbar__wrapper {
  padding: 8px 54px 0 20px;
  height: 45px;
  border-bottom: 1px solid #E8E8E8;
}

.kat-task-detail__right-section__header__toolbar__dropdown__arrow {
  position: relative;
  width: 0;
  height: 0;
  top: 6px;
  left: 8px;
  border-style: solid;
  border-width: 6px 4px 0 4px;
  border-color: #575c65 rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
}


.kat-task-detail__right-section__header__toolbar__status__priority__title {
  background: #F97777;
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 2px;
  font-weight: 600;
  height: 18px;
  width: 100%;
  display: inline-block;
}

.kat-task-detail__right-section__header__toolbar__status__effort {
  border: 1px solid #DDDDDD;
  border-radius: 2px;
  height: 18px;
  margin-left: 20px;
  padding: 0 5px;
}

.kat-task-detail__right-section__header__toolbar__status__status__progress__title {
  font-size: 12px;
  border: 1px solid #DDDDDD;
  border-radius: 2px;
  font-weight: 600;
  color: #202736;
  padding: 1px 6px;
  height: 19px;
  margin-left: 20px;
}

ul.kat-task-detail__left-section__checklist {
  height: calc(100% - 50px);
  padding: 5px 20px 5px 5px;
}

.kat-task-detail__left-section__checklist__card {
  background: #fff;
  position: relative;
  border-radius: 2px;
  box-shadow: 0 0 3px 0 #B1B6C3;
  transition: box-shadow 0.15s ease-in-out;
}

.kat-task-detail__left-section__checklist__card div.edit-mode {
  padding: 5px;
  border-radius: 3px;
  width: calc(100% - 20px) !important;
}

.kat-task-detail__left-section__checklist__card__title {
  width: 95% !important;
  font-size: 16px;
  color: #202736;
  padding: 5px 0 5px 8px;
  word-break: break-word;
  word-wrap: break-word;
  word-spacing: 0.44px;
}

input.kat-task-detail__left-section__checklist__card__checkbox {
  margin-top: 9px;
}

.kat-task-detail__left-section__checklist__card__sub-title {
  font-size: 12px;
  padding-top: 3px;
  transition: opacity 0.2s ease-in-out;
}

.kat-task-detail__left-section__checklist__card:hover .kat-task-detail__left-section__checklist__card__sub-title {
  opacity: 0;
  transform: scale(0);
}

.kat-task-detail__left-section__checklist__card:hover .kat-task-detail__left-section__checklist__card__title {
  width: calc(100% - 102px) !important;
}

button.kat-task-detail__left-section__checklist__card__add-options__button.add {
  background: #fff;
  color: #202736;
  box-shadow: 0 2px 2px 0 #ccc;
  border: 1px solid rgba(204, 204, 204, 0.3);
}

button.kat-task-detail__left-section__checklist__card__add-options__button {
  font-size: 14px;
  padding: 7px 18px;
}

.kat-task-detail__left-section__checklist__card:hover {
  box-shadow: 0 0 4px 1px #B1B6C3;
}

.kat-task-detail__left-section__checklist__card__button__wrapper {
  position: absolute;
  right: 10px;
  top: 20px;
  transform: translateY(-50%) scale(0);
}

button.kat-task-detail__left-section__checklist__card__button {
  width: 20px;
  padding: 0;
  font-size: 13px;
  margin-left: 10px;
  margin-right: 0;
  height: 20px;
  color: rgba(120, 126, 141, 0.7);
  transform: scale(0);
  transition: all 0.2s ease-in-out;
}

.kat-task-detail__left-section__checklist__card:hover .kat-task-detail__left-section__checklist__card__button__wrapper {
  transform: translateY(-50%) scale(1);
}

.kat-task-detail__left-section__checklist__card:hover .kat-task-detail__left-section__checklist__card__button {
  transform: scale(1);
}

button.kat-task-detail__left-section__checklist__card__button:before {
  font-size: inherit;
  margin: 0;
}

button.kat-task-detail__left-section__checklist__card__button.flaticon-calendar-filled:before {
  font-size: 15px !important;
}

button.kat-task-detail__left-section__checklist__card__button:hover {
  color: #787e8d;
}

.kat-task-detail__left-section__checklist__card__add-options {
  margin-top: 13px;
}

li.kat-task-detail__left-section__checklist__card__wrapper {
  margin-bottom: 13px;
}

.kat-task-detail__left-section__checklist__card__wrapper.edit-mode .kat-task-detail__left-section__checklist__card__checkbox, .kat-task-detail__left-section__checklist__card__wrapper.edit-mode .kat-task-detail__left-section__checklist__card__button {
  display: none;
}

.kat-task-detail__left-section__checklist__card__wrapper.edit-mode .kat-task-detail__left-section__checklist__card__title {
  width: 100%;
}

li.kat-task-detail__left-section__checklist__card__wrapper:last-child {
  margin-top: 20px;
}

li.kat-task-detail__left-section__checklist__card__wrapper:last-child .kat-task-detail__left-section__checklist__card {
  box-shadow: none;
  border: 1px dashed #B1B6C3;
  background: rgba(255, 255, 255, 0.7);
}

li.kat-task-detail__left-section__checklist__card__wrapper:last-child .kat-task-detail__left-section__checklist__card__title {
  color: #94989E;
  min-height: 47px;
  padding: 13px;
  width: 100% !important;
}

li.kat-task-detail__left-section__checklist__card__wrapper:last-child .kat-task-detail__left-section__checklist__card__title.edit-mode {
  width: calc(100% - 20px) !important;
}

.kat-task-detail__left-section__checklist__card:hover .kat-task-detail__left-section__checklist__card__title.edit-mode {
  width: calc(100% - 20px) !important;
}

ul.kat-task-detail__right-section__header__toolbar__dropdown__list {
  background: #fff;
}

ul.kat-task-detail__right-section__header__toolbar__dropdown__list li {
  padding: 10px 25px;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-top: 1px solid transparent;
  overflow: hidden;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  position: relative;
}

ul.kat-task-detail__right-section__header__toolbar__dropdown__list li.kat-localupload {
  padding: 0;
}

ul.kat-task-detail__right-section__header__toolbar__dropdown__list li .flaticon-cloud-upload {
  padding-left: 10px;
  padding-top: 12px;
}

ul.kat-task-detail__right-section__header__toolbar__dropdown__list li .upload-txt {
  padding-top: 12px;
  display: inline-block;
  width: 87%;
  overflow: hidden;
  height: 36px;
  padding-left: 8px;
  cursor: pointer;
}

ul.kat-task-detail__right-section__header__toolbar__dropdown__list li.kat-localupload input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  cursor: pointer;
  width: 170%;
  font-size: 30px;
  margin-left: -191px;
}

.kat-task-detail__right-section__header__toolbar__dropdown__header {
  padding-right: 15px;
  padding-left: 15px;
}

ul.kat-task-detail__right-section__header__toolbar__dropdown__list li:not(.disable):hover {
  background: #F9F9FA;
  border-top: 1px solid #F4F4F6;
  border-bottom: 1px solid #F4F4F6;
}

.kat-task-detail__right-section__header__toolbar__dropdown__wrapper.secondary-dd .kat-task-detail__right-section__header__toolbar__dropdown {
  min-width: 160px;
  width: auto;
}

.kat-task-detail__right-section__header__toolbar__dropdown__wrapper.secondary-dd ul.kat-task-detail__right-section__header__toolbar__dropdown__list {
  padding: 12px 0;
}

.kat-task-detail__right-section__header__toolbar__dropdown__wrapper.secondary-dd ul.kat-task-detail__right-section__header__toolbar__dropdown__list li {
  border: none;
}

.kat-task-detail__right-section__header__toolbar__dropdown__wrapper.secondary-dd ul.kat-task-detail__right-section__header__toolbar__dropdown__list li:not(.disable):hover {
  color: black;
  border: none;
  background: none;
}

.kat-task-detail__right-section__header__toolbar__dropdown__wrapper {
  position: relative;
  width: calc(100% - 370px);
}

.kat-task-detail__right-section__header__toolbar__status__priority {
  position: relative;
  padding: 0 10px;
  min-width: 86px;
  cursor: pointer;
}

.kat-task-detail__right-section__header__toolbar__status__priority ul.kat-task-detail__right-section__header__toolbar__dropdown__list {
  max-height: none;
}

.kat-task-detail__right-section__header__toolbar__status__priority .kat-task-detail__right-section__header__toolbar__dropdown {
  width: 125px;
}

.priority, .priority-8, .priority-7, .priority-6, .priority-5, .priority-4, .priority-3, .priority-2, .priority-1 {
  width: 15px;
  height: 15px;
  display: inline-block;
  text-align: center;
  margin-right: 7px;
  color: #fff;
  font-size: 12px;
  padding-top: 1px;
  border-radius: 3px;
}

.priority-8 {
  background: #E53030;
}

.priority-7 {
  background: #F97777;
}

.priority-6 {
  background: #FFB526;
}

.priority-5 {
  background: #FFCB65;
}

.priority-4 {
  background: #87B332;
}

.priority-3 {
  background: #A1D046;
}

.priority-2 {
  background: #797979;
}

.priority-1 {
  background: #B7B7B7;
}

.priority-8-bg {
  background: #E53030;
}

.priority-7-bg {
  background: #F97777;
}

.priority-6-bg {
  background: #FFB526;
}

.priority-5-bg {
  background: #FFCB65;
}

.priority-4-bg {
  background: #87B332;
}

.priority-3-bg {
  background: #A1D046;
}

.priority-2-bg {
  background: #797979;
}

.priority-1-bg {
  background: #B7B7B7;
}

.no-priority-bg {
  background: #F97777;
}

.kat-task-detail__right-section__content-body-col__content-image, .kat-task-detail__right-section__content-body-col__content-add {
  border: 1px solid black;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  margin: 0 6px;
  position: relative;
  left: -6px;
}

.kat-task-detail__right-section__content-body-col__content-image_more {
  color: #a5a7ab;
  margin-top: 8px;
  font-size: 16px;
  position: relative;
}

.kat-task-detail__right-section__content-body-col__content-add {
  border: 1px dashed #D1D1D1;
  font-size: 22px;
  text-align: center;
  line-height: 29px;
  font-weight: 700;
  cursor: pointer;
  color: #D1D1D1;
  position: relative;
}

.kat-task-detail__right-section__content-body-col__content-add:before {
  margin-left: 0;
}

.kat-task-detail__right-section__content-body-col__content-add .kat-task-detail__right-section__header__toolbar__dropdown {
  width: 200px;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  position: absolute;
  margin-left: 23px;
}



.block-cards-heading-link .kat-task-detail__right-section__bottom-bar__watcher, .block-cards-heading-link .kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  width: 26px;
  height: 26px;
  margin-left: 8px;
}

.kat-task-detail__right-section__content-body-col__title {
  color: #202736;
  font-weight: 700;
  margin: 12px 0 16px;
}

.kat-task-detail__right-section__content-body-col__content-arrow {
  transform: rotate(180deg);
  margin-top: 4px;
  color: #98A9A1;
  margin-right: 10px;
}

.kat-task-detail__right-section__content-body-col__content-arrow:before {
  margin-right: 5px;
  margin-left: 5px !important;
}

.kat-task-detail__right-section__content-body-col__content {
  color: #202736;
}

.kat-task-detail__right-section__content-body-col__content__ico:before {
  font-size: 22px;
  margin: 0 10px;
  position: relative;
  top: -1px;
  color: #D1D1D1;
}



.kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  margin-left: 0;
  margin-right: 10px;
  position: relative;
  top: 0;
  line-height: 27px;
}

.kat-task-detail__right-section__content-body__attach {
  color: #8E8C93;
  padding: 5px 8px;
  width: 505px;
  position: relative;
}

.kat-task-detail__right-section__content-body__attach .kat-dropdown__icon {
  width: 23px;
}

.kat-task-detail__right-section__content-body__attach .kat-task-detail__right-section__header__toolbar__dropdown {
  left: -4px;
  top: calc(100% - 191px);
  min-width: 0;
  width: calc(100% - 207px);
  z-index: 100;
}

.kat-task-detail__right-section__content-body__attach .kat-task-detail__right-section__header__toolbar__dropdown__list li {
  padding: 10px 12px;
  height: 38px;
}

.kat-task-detail__right-section__content-body__attach__ico:before {
  display: inline-block;
  transform: rotateX(180deg) rotateY(0deg) rotateZ(-28deg);
  font-size: 16px !important;
  margin-left: 0 !important;
  cursor: pointer;
}

.kat-task-detail__right-section__content-body__attach__text {
  font-size: 14px;
  padding-left: 6px;
  cursor: pointer;
}

.kat-task-detail__right-section__content-body__attach__text.drop-down-txt {
  cursor: default;
}

.kat-task-detail__right-section__content-body__attach-wrapper {
  padding: 17px 30px;
}

ul.kat-task-detail__right-section__header__toolbar__dropdown__list li.disable {
  background: #EAEDF4;
}

.kat-task-detail__right-section__bottom-bar__watcher.add, .add.kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  padding: 0;
  position: relative;
  color: #B5B5B5;
  line-height: 24px;
}

.kat-task-detail__right-section__bottom-bar__watcher.add .kat-task-detail__right-section__header__toolbar__dropdown, .add.kat-task-detail__right-section__header__toolbar__dropdown__list__img .kat-task-detail__right-section__header__toolbar__dropdown {
  right: 0;
  left: auto;
  width: 275px;
}

.kat-task-detail__right-section__bottom-bar__watcher.add .kat-task-detail__right-section__header__toolbar__dropdown__list, .add.kat-task-detail__right-section__header__toolbar__dropdown__list__img .kat-task-detail__right-section__header__toolbar__dropdown__list {
  max-height: 400px;
}

.kat-task-detail__right-section__bottom-bar__watcher__add-text {
  position: absolute;
  left: 1px;
  right: 0;
  top: -1px;
  cursor: pointer;
  font-size: 19px;
  font-weight: 700;
  bottom: 0;
}

.kat-task-detail__right-section__bottom-bar__watcher__add-text.myday {
  top: 2px;
  right: 1px;
}

.kat-task-detail__right-section__header__toolbar__dropdown.pos-top {
  transform-origin: bottom;
}

.kat-task-detail__right-section__bottom-bar__watcher__add-icon {
  line-height: 0;
  display: inline-block;
  position: absolute;
  right: 0;
  left: 1px;
  top: 11px;
  bottom: 0;
  font-weight: 700;
  font-size: 17px;
}

.kat-task-detail__right-section__header__toolbar__dropdown.pos-top {
  top: auto;
  bottom: calc(100% + 8px);
}

.kat-task-detail__right-section__header__toolbar__dropdown.secondary-dropdown .kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  width: 30px;
  height: 30px;
}

.kat-task-detail__right-section__header__toolbar__dropdown.secondary-dropdown ul.kat-task-detail__right-section__header__toolbar__dropdown__list li {
  padding: 10px 20px;
}

.kat-task-detail__right-section__header__toolbar__dropdown.secondary-dropdown ul.kat-task-detail__right-section__header__toolbar__dropdown__list li.selected span.kat-task-detail__right-section__header__toolbar__dropdown__list__primary-text {
  font-weight: 700;
}

.kat-task-detail__right-section__header__toolbar__dropdown.secondary-dropdown .kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  top: 1px;
}

.kat-task-detail__right-section__header__toolbar__dropdown.secondary-dropdown .kat-login-board__data__secondary-data__bar__action-button__active {
  font-size: 16px;
  font-weight: 800;
  margin-right: 0;
}

.kat-dropdown__footer {
  border-top: 1px solid #F2F4F9;
  font-size: 15px;
  padding: 6px;
  text-align: center;
  position: relative;
}

.kat-dropdown__footer-add-tag {
  width: 101%;
  padding: 0 8px;
  border: none;
}

.kat-dropdown__footer-add-tag.placeholder {
  color: #e2e2e4;
}

input.kad-add-people-input::-webkit-input-placeholder {
  color: #dddddf;
}

span.kat-task-detail__right-section__bottom-bar__watcher__add-text {
  position: absolute;
  left: 1px;
  right: 0;
  top: -1px;
  font-size: 19px;
  font-weight: 700;
  line-height: 24px;
}

.kat-task-detail__right-section__header__toolbar__dropdown__list-text-wrapper {
  width: calc(100% - 40px);
}

span.kat-task-detail__right-section__header__toolbar__dropdown__list__primary-text {
  display: block;
  text-overflow: ellipsis;
  color: #202736;
  overflow: hidden;
}

span.kat-task-detail__right-section__header__toolbar__dropdown__list__secondary-text {
  font-size: 12px;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
}

.kat-dropdown__footer__text {
  font-size: 14px;
  position: relative;
  top: -1px;
}

.kat-dropdown__header {
  border-top: 1px solid #F2F4F9;
  font-size: 15px;
  padding: 6px;
}

input.kat-dropdown__header__input {
  border: none;
  padding: 6px;
  width: calc(100% - 55px);
  font-size: 13px;
  color: #9A9A9A;
}

.kat-task-detail {
  -webkit-animation: taskDetailEntry 0.25s ease-out;
          animation: taskDetailEntry 0.25s ease-out;
  transform-origin: center;
}

@-webkit-keyframes taskDetailEntry {
  from {
    transform: scale(0.2);
  }
  to {
    transform: scale(1);
  }
}

@keyframes taskDetailEntry {
  from {
    transform: scale(0.2);
  }
  to {
    transform: scale(1);
  }
}

.flaticon-search-icon.kat-dropdown__header__search:before {
  margin-left: 0;
}

.kat-dropdown__header__search {
  margin-top: 4px;
  margin-left: 15px;
  color: #9A9A9A;
  margin-right: 6px;
}

.kat-task-detail__attachment {
  border: 1px solid #EAEDF4;
  height: 35px;
  border-radius: 3px;
  position: relative;
  margin-bottom: 10px;
  width: 284px;
}

.kat-task-detail__attachment__type {
  width: 45px;
  height: 100%;
  background: #EAEDF4;
  position: relative;
}

.kat-task-detail__attachment-progress-wrapper {
  position: absolute;
  left: 45px;
  top: 0;
  bottom: 0;
  right: 0;
}

.kat-task-detail__attachment-progress {
  background: #f8f9fb;
  border-right: 1px solid #f7f8fa;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
}

.attachment-progress-error {
  color: #e85d43;
  font-size: 12px;
  margin: 10px 0 0 10px;
  display: inline-block;
}

.attachment-progress-retry {
  font-size: 12px;
  border-bottom: 1px solid #d0d1d3;
  color: #1f2736;
  display: inline-block;
  margin-left: 5px;
}

span.kat-task-detail__attachment__type__text {
  font-size: 14px;
  color: #2A3036;
  font-weight: 600;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

span.kat-task-detail__attachment__title {
  font-size: 14px;
  color: #3B414C;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 15px;
  max-width: calc(100% - 115px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

span.kat-task-detail__attachment__sub-title {
  font-size: 12px;
  color: rgba(59, 65, 76, 0.5);
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 10px;
  opacity: 1;
  transition: all 0.15s ease-in;
}

.kat-task-detail__attachment__action-button {
  margin: 0 5px 0 0;
  padding: 0;
  color: #2A3036;
  position: relative;
  height: 23px;
  width: 23px;
  border-radius: 50%;
  background: #EAEDF4;
  display: inline-block;
}

.kat-task-detail__attachment__action-button:hover {
  cursor: pointer;
}

button.kat-task-detail__attachment__action-button:before {
  font-size: inherit;
  margin: 0;
  padding: 1px;
}

button.kat-task-detail__attachment__action-button.flaticon-arrows:after {
  width: 11px;
  height: 1px;
  content: '';
  position: absolute;
  background: #2A3036;
  bottom: 5px;
  left: -14px;
}

.kat-task-detail__attachment__action-button.flaticon-arrows:before {
  transform: rotate(-90deg);
  display: inline-block;
  font-size: 10px;
  position: relative;
  top: 0;
  left: 6px;
  margin-left: 0 !important;
}

.kat-task-detail__attachment__action-button__wrapper {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 99;
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.15s ease-in;
}

.kat-task-detail__attachment:hover .kat-task-detail__attachment__action-button__wrapper {
  opacity: 1;
}

.kat-task-detail__attachment:hover .kat-task-detail__attachment__sub-title {
  opacity: 0;
}

span.kat-dropdown__footer__new {
  font-weight: 700;
  padding: 7px 18px;
  display: block;
  text-align: left;
  color: #202736;
  cursor: pointer;
}

span.kat-dropdown__more-ico {
  position: absolute;
  right: 16px;
  color: #B2B6BA;
  transform: translateX(50px);
  transition: 0.15s all ease-in;
}

span.kat-dropdown__more-ico:before {
  font-size: 16px;
}

.kat-dropdown__icon:before {
  margin-left: 0 !important;
}

span.kat-dropdown__icon {
  position: relative;
  top: -3px;
  margin-right: 8px;
}

.kat-dropdown__icon.box {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyIgd2lkdGg9IjQ5cHgiIGhlaWdodD0iMjdweCIgdmlld0JveD0iMCAwIDQ5IDI3IiB2ZXJzaW9uPSIxLjEiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjMuMiAoMTIwNDMpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPkxvZ28gMzwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzLz4KICAgIDxnIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPgogICAgICAgIDxnIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIGZpbGw9IiMyMkE3RjAiPgogICAgICAgICAgICA8cGF0aCBkPSJNNDguMiAyMy42IEM0OC44IDI0LjQgNDguNyAyNS41IDQ3LjkgMjYuMSBDNDcgMjYuNyA0NS45IDI2LjYgNDUuMyAyNS44IEw0NS4zIDI1LjggTDQxLjEgMjAuNCBMMzcgMjUuOCBMMzcgMjUuOCBDMzYuNCAyNi42IDM1LjIgMjYuNyAzNC40IDI2LjEgQzMzLjYgMjUuNSAzMy40IDI0LjQgMzQgMjMuNiBMMzQgMjMuNiBMMzguOCAxNy4zIEwzNCAxMS4xIEwzNCAxMS4xIEMzMy40IDEwLjMgMzMuNiA5LjEgMzQuNCA4LjUgQzM1LjIgNy45IDM2LjQgOC4xIDM3IDguOSBMMzcgOC45IEw0MS4xIDE0LjMgTDQ1LjMgOC45IEw0NS4zIDguOSBDNDUuOSA4LjEgNDcgNy45IDQ3LjkgOC41IEM0OC43IDkuMSA0OC44IDEwLjMgNDguMiAxMS4xIEw0OC4yIDExLjEgTDQzLjUgMTcuMyBMNDguMiAyMy42IEw0OC4yIDIzLjYgTDQ4LjIgMjMuNiBaTTI2LjMgMjIuOCBDMjMuMiAyMi44IDIwLjcgMjAuNCAyMC43IDE3LjMgQzIwLjcgMTQuMyAyMy4yIDExLjggMjYuMyAxMS44IEMyOS40IDExLjggMzEuOSAxNC4zIDMxLjkgMTcuMyBDMzEuOSAyMC40IDI5LjQgMjIuOCAyNi4zIDIyLjggTDI2LjMgMjIuOCBaTTkuOCAyMi44IEM2LjcgMjIuOCA0LjIgMjAuNCA0LjIgMTcuMyBDNC4yIDE0LjMgNi43IDExLjggOS44IDExLjggQzEyLjkgMTEuOCAxNS40IDE0LjMgMTUuNCAxNy4zIEMxNS40IDIwLjQgMTIuOSAyMi44IDkuOCAyMi44IEw5LjggMjIuOCBaTTI2LjMgOC4yIEMyMi44IDguMiAxOS43IDEwLjEgMTguMSAxMyBDMTYuNSAxMC4xIDEzLjQgOC4yIDkuOCA4LjIgQzcuNyA4LjIgNS44IDguOSA0LjIgMTAgTDQuMiAyLjMgTDQuMiAyLjMgQzQuMiAxLjMgMy40IDAuNSAyLjQgMC41IEMxLjMgMC41IDAuNSAxLjMgMC41IDIuMyBMMC41IDIuMyBMMC41IDE3LjUgTDAuNSAxNy41IEMwLjYgMjIuNSA0LjcgMjYuNSA5LjggMjYuNSBDMTMuNCAyNi41IDE2LjUgMjQuNSAxOC4xIDIxLjYgQzE5LjcgMjQuNSAyMi44IDI2LjUgMjYuMyAyNi41IEMzMS41IDI2LjUgMzUuNyAyMi40IDM1LjcgMTcuMyBDMzUuNyAxMi4zIDMxLjUgOC4yIDI2LjMgOC4yIEwyNi4zIDguMiBaIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIi8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K) no-repeat;
  height: 23px;
  background-position: 0;
  background-size: 20px;
}

.kat-dropdown__icon.drive {
  background: url(/dist/logo-drive.png) no-repeat;
  height: 23px;
  background-position: 0;
  background-size: 20px;
}

.kat-dropdown-list__input-wrapper {
  margin: 8px;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.03);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.39);
}

input.kat-dropdown-list__input {
  border: none;
  padding: 7px;
  width: calc(100% - 45px);
  background: none;
}

.kat-dropdown-lis__input-save, .kat-dropdown-lis__input-cancel {
  margin-left: 6px;
}

.kat-dropdown-lis__input-save:before, .kat-dropdown-lis__input-cancel:before {
  font-size: 14px !important;
  margin-left: 0 !important;
}

.kat-dropdown-lis__input-cancel:before {
  font-size: 12px !important;
  position: relative;
  top: -1px;
}

span.kat-tag__close:before {
  font-size: 6px;
  color: #fff;
  background: rgba(128, 128, 128, 0.6);
  border-radius: 50%;
  padding: 4px 4px;
  float: right;
  margin-left: 4px;
  margin-top: 4px;
  cursor: pointer;
  line-height: 8px;
  width: 6px;
  height: 6px;
  display: none;
}

.kat-task-detail__right-section__bottom-bar__tag:hover span.kat-tag__close:before {
  display: block;
}

.kat-task-detail__top-menu__items {
  margin-top: 22px;
  margin-left: 22px;
}

span.kat-task-detail__top-menu__items_icon {
  cursor: pointer;
  margin-right: 5px;
  position: relative;
}

span.kat-task-detail__top-menu__items_icon:before {
  font-size: 13px !important;
  margin-left: 0 !important;
  opacity: 0.7;
  position: relative;
  top: 2px;
  left: 0;
}

span.kat-task-detail__top-menu__items_icon.flaticon-arrow:before {
  font-size: 14px !important;
  position: relative;
  top: 6px;
  left: 2px;
  color: #2BBEE8;
}

span.kat-task-detail__top-menu__items_icon.flaticon-pause:before {
  color: #2BBEE8;
  top: 5px;
}

span.kat-task-detail__top-menu__items_icon:hover:before {
  opacity: 1;
}
.kat-task-detail__top-menu__items_icon:not(.flaticon-check).checkbox {
  display: inline-block;
  height: 22px;
  width: 22px;
  border: 1px solid #B4B7BB;
  box-shadow: 0 0 1px #B4B7BB;
  border-radius: 3px;
  margin-left: 17px;
  position: relative;
  top: 2px;
  left: -2px;
}

.kat-task-detail__nav-arrow.next, .kat-task-detail__nav-arrow.prev {
  position: absolute;
}

.kat-task-detail__right-section__header__toolbar__dropdown__list .kat-profile-thumbnail__alphabet {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

span.kat-task-detail__right-section__header__toolbar__dropdown__list__text {
  position: relative;
  top: 4px;
}

.kat-task-detail__right-section__header__toolbar__dropdown.assign-dd li {
  padding: 5px 25px;
}

@media all and (max-width: 1479px) {
  span.kat-task-detail__right-section__header__toolbar__dropdown__title-result {
    max-width: 98px;
    width: calc(100% - 77px);
  }
}

@media all and (min-width: 1480px) {
  .kat-task-detail__right-section__header__toolbar__dropdown__title-result {
    max-width: 130px;
  }
}

@media all and (max-width: 1385px) {
  .kat-task-detail__right-section__header__toolbar__dropdown__title, .kat-task-detail__right-section__header__toolbar__dropdown__title-result, .kat-task-detail__left-section__checklist__card__title {
    font-size: 14px !important;
  }

  .kat-task-detail__right-section__header__toolbar__status__priority__title, .kat-task-detail__right-section__header__toolbar__status__effort__title, .kat-task-detail__right-section__header__toolbar__status__status__progress__title {
    font-size: 11px !important;
  }

  .kat-task-detail__right-section__header__toolbar__wrapper {
    height: 40px !important;
  }
}

@media all and (max-width: 1385px) {
  span.kat-task-detail__right-section__header__toolbar__dropdown__title-result {
    max-width: 75px;
  }
}

@media all and (max-width: 1308px) {
  .kat-task-detail__right-section__header__toolbar__wrapper {
    padding: 8px 10px 0 !important;
  }
  .kat-task-detail__left-section__activity__list__details__header__sub-title, .kat-task-detail__left-section__activity__list__details__text {
    font-size: 12px !important;
  }
}

.tooltip[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: -10px;
  bottom: 160%;
  white-space: nowrap;
  z-index: 153;
  background-color: #000;
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
  font-family: sf-compact, 'Roboto', sans-serif;
  cursor: default;
  pointer-events: none;
}

.tooltip-top:hover .arrow:before {
  background-color: black;
  content: "\A0";
  display: block;
  height: 10px;
  position: absolute;
  top: -22px;
  transform: rotate(238deg) skew(21deg);
  width: 13px;
  left: 50%;
}

.tooltip-data-left[data-tooltip]:hover:after {
  right: 24px;
  bottom: 8%;
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
  z-index: 153;
  background-color: #000;
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
  font-family: sf-compact, 'Roboto', sans-serif;
  cursor: default;
  pointer-events: none;
}

.tooltip-left:hover .arrow:before {
  background-color: black;
  content: "\A0";
  display: block;
  height: 10px;
  position: absolute;
  bottom: 6px;
  transform: rotate(216deg) skew(-18deg);
  width: 13px;
  right: 126%;
}

.tooltip-data-right[data-tooltip]:hover:after {
  left: 35px;
  bottom: 36%;
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
  z-index: 153;
  background-color: #000;
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
  font-family: sf-compact, 'Roboto', sans-serif;
  cursor: default;
  pointer-events: none;
}

.tooltip-right:hover .arrow:before {
  background-color: black;
  content: "\A0";
  display: block;
  height: 10px;
  position: absolute;
  bottom: 28px;
  transform: rotate(216deg) skew(-18deg);
  width: 13px;
  left: 122%;
}

.tooltip-data-bottom[data-tooltip]:hover:after {
  right: -29px;
  top: 121%;
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
  z-index: 153;
  background-color: #000;
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
  font-family: sf-compact, 'Roboto', sans-serif;
  cursor: default;
  pointer-events: none;
}

.tooltip-bottom:hover .arrow:before {
  background-color: black;
  content: "\A0";
  display: block;
  height: 10px;
  position: absolute;
  bottom: -18px;
  transform: rotate(238deg) skew(21deg);
  width: 13px;
  right: 37%;
}

.kat-workstream__task__right-control .kat-workstream__task-icon.check-ico.tooltip-data-left[data-tooltip]:hover:after {
  right: 20px;
}

.kat-workstream__task__right-control .kat-workstream__task-icon.check-ico.tooltip-left:hover .arrow:before {
  right: 135%;
}

.kat-workstream__task__right-control .kat-workstream__task-icon.check-ico.flaticon-check.tooltip-left:hover .arrow:before {
  right: 120%;
}

.kat-workstream__task__right-control .kat-workstream__task-icon.drag-select-ico.tooltip-data-left[data-tooltip]:hover:after, .kat-workstream__task__right-control .kat-workstream__task-icon.delete-ico.tooltip-data-left[data-tooltip]:hover:after {
  right: 22px;
}


.kat-task-detail_right-section-calendar-wrapper .DayPicker.DayPicker--en {
  margin-left: 0;
  box-shadow: none;
  top: 0;
}

.kat-task-detail__left-section__checklist__card .kat-task-detail__left-section__checklist__card_duedate {
  padding: 8px;
  background: #f4f5f7;
  height: 29px;
  margin: 10px;
}

.kat-task-detail__left-section__checklist__card_duedate .kat-task-detail_right-section-calendar-wrapper {
  right: -45px;
}

.kat-task-detail__left-section__checklist__card .kat-task-detail__left-section__checklist__card_duedate span {
  color: #adb1bd;
}

.kat-task-detail__left-section__checklist__card .kat-task-detail__left-section__checklist__card_duedate span.flaticon-clock-1::before {
  margin-left: 0;
  margin-right: 5px;
  font-size: 15px;
}

.kat-task-detail__left-section__checklist__card .kat-task-detail__left-section__checklist__card_duedate.active-day {
  padding: 8px;
  background: #f7ce0e;
  height: 29px;
  margin-top: 10px;
}

.kat-task-detail__left-section__checklist__card .kat-task-detail__left-section__checklist__card_duedate.active-day span, .kat-task-detail__left-section__checklist__card .kat-task-detail__left-section__checklist__card_duedate.active-day span.flaticon-clock-1:before {
  color: #fff;
}

.kat-task-detail__left-section__checklist__card .kat-task-detail__left-section__checklist__card_duedate span:not(.flaticon-clock-1) {
  font-size: 14px;
  font-weight: normal;
}


.kat-task-detail_right-section-calendar-wrapper .timepicker-slot {
  width: 48px;
  float: left;
  text-align: center;
}

.kat-task-detail_right-section-calendar-wrapper .timepicker-slot-wrapper {
  position: relative;
}

.kat-task-detail_right-section-calendar-wrapper .timepicker-slot-hdr {
  color: #2b323f;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-top: 5px;
}

.kat-task-detail_right-section-calendar-wrapper .timepicker-slot-arrow-up {
  transform: rotate(270deg);
  width: 20px;
  height: 20px;
  position: relative;
  bottom: -2px;
  left: 12px;
}

.kat-task-detail_right-section-calendar-wrapper .timepicker-slot-arrow-up.flaticon-arrow::before {
  font-size: 8px;
  margin-left: 0;
  color: #ebeced;
}

.kat-task-detail_right-section-calendar-wrapper .timepicker-slot-arrow-up:hover.flaticon-arrow::before {
  color: #c5c5cc;
  cursor: pointer;
}

.kat-task-detail_right-section-calendar-wrapper .timepicker-slot-arrow-up.active:hover.flaticon-arrow::before {
  color: #c5c5cc;
  cursor: pointer;
}

.kat-task-detail_right-section-calendar-wrapper .timepicker-slot-arrow-up.active:hover ~ .timepicker-slot-input, .timepicker-slot-input:hover {
  border: 1px solid #e3e5ea !important;
  border-radius: 3px;
}

.kat-task-detail_right-section-calendar-wrapper .timepicker-slot-arrow-up.disabled:hover.flaticon-arrow::before {
  color: #ebeced;
  cursor: default;
}

.kat-task-detail_right-section-calendar-wrapper .timepicker-slot-arrow-down {
  transform: rotate(209deg);
  width: 20px;
  height: 20px;
  position: relative;
  bottom: 4px;
  left: 14px;
}

.kat-task-detail_right-section-calendar-wrapper .timepicker-slot-arrow-down.flaticon-arrow::before {
  font-size: 8px;
  margin-left: 0;
  color: #ebeced;
}

.kat-task-detail_right-section-calendar-wrapper .timepicker-slot-arrow-down:hover.flaticon-arrow::before {
  color: #c5c5cc;
  cursor: pointer;
}

.kat-task-detail_right-section-calendar-wrapper .timepicker-slot-arrow-down.active:hover.flaticon-arrow::before {
  color: #c5c5cc;
  cursor: pointer;
}

.kat-task-detail_right-section-calendar-wrapper .timepicker-slot-arrow-down.disabled:hover.flaticon-arrow::before {
  color: #ebeced;
  cursor: default;
}

.kat-task-detail_right-section-calendar-wrapper .timepicker-slot-input {
  height: 30px !important;
  width: 30px !important;
  margin-top: 2px;
  margin-bottom: 4px;
  text-align: center !important;
  border: none !important;
  font-size: 15px !important;
  position: relative !important;
  left: 0 !important;
}

.kat-task-detail_right-section-calendar-wrapper .timepicker-slot-arrow-up.active:hover ~ .timepicker-slot-input, .timepicker-slot-input:hover {
  border: 1px solid #e3e5ea !important;
  border-radius: 3px;
}

.kat-task-detail_right-section-calendar-radio-wrapper-div {
  margin-top: 30px;
}

.kat-task-detail_right-section-calendar-radio-wrapper-div .flaticon-round::before, .kat-task-detail_right-section-calendar-radio-wrapper-div .flaticon-radio-active::before {
  font-size: 15px;
  color: #efeff0;
  margin-right: 8px;
  cursor: pointer;
}

.kat-task-detail_right-section-calendar-radio-wrapper-div .flaticon-radio-active::before {
  font-size: 14px;
}

.kat-task-detail_right-section-calendar-radio-wrapper-div .radio-lable {
  font-size: 12px !important;
  color: #e0e2e7 !important;
}

.kat-task-detail_right-section-calendar-radio-wrapper-div .radio-lable.active {
  color: #6f737b !important;
}

.kat-task-detail_right-section-calendar-radio-wrapper-div .radio-lable.active.flaticon-radio-active::before, .kat-task-detail_right-section-calendar-radio-wrapper-div .radio-lable.active.flaticon-round::before {
  color: #6f737b;
}

.kat-task-detail_right-section-calendar-radio-wrapper {
  margin: 3px 0;
}

.kat-task-detail_right-section-calendar-wrapper .button-set {
  margin-top: 10px;
  margin-right: 10px;
}

.kat-task-detail_right-section-timepicker-wrapper {
  position: relative;
}

.kat-task-detail_right-section-timepicker-wrapper .kat-task-detail_right-section-calendar-wrapper {
  width: 236px;
  position: absolute;
  box-shadow: rgba(67, 65, 90, 0.41961) 0 0 8px;
  padding: 20px 0;
  z-index: 2;
  height: auto;
  top: 95px;
  right: calc(100% - 261px);
  overflow: hidden;
  background: white;
}

.kat-task-detail__right-section__content-body-col__content-add-dropdown {
  width: 300px;
  margin-bottom: 30px;
}

.kat-task-detail_right-section-timepicker-wrapper .timepicker-wrapper {
  margin-left: 20px;
}

.kat-task-detail__right-section__content-body-col__content-add-dropdown .kat-task-detail__right-section__header__toolbar__dropdown__list__text {
  color: #1d2533;
}

.kat-task-detail__right-section__content-body-col__content-add-dropdown .kat-task-detail__right-section__header__toolbar__dropdown__list__text_email {
  color: #b2b3b7;
  font-weight: normal;
  font-size: 12px;
  margin-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kat-task-detail__right-section__content-body-col__content-add-dropdown {
  width: 280px !important;
}

.kat-task-detail__right-section__content-body-col__content-add-dropdown .kat-task-detail__top-menu__items_icon:not(.flaticon-check).checkbox {
  margin-left: 0;
  margin-top: 6px;
  width: 17px;
  height: 17px;
}

.kat-task-detail__right-section__content-body-col__content-add-dropdown span.flaticon-tick-thin {
  margin-top: 8px;
}

.kat-task-detail__right-section__content-body-col__content-add-dropdown span.flaticon-tick-thin:before {
  font-size: 11px !important;
  padding: 2px;
  margin-left: 0 !important;
  background: #59BD50;
  color: #fff;
  border: 1px solid #59BD50;
  border-radius: 3px;
  position: relative;
  left: -1px;
}

.kat-task-detail__right-section__content-body-col__content-add-dropdown .button-set {
  margin: 10px 10px 10px 0;
}

.kat-task-detail__right-section__content-body-col__content-add-dropdown .flaticon-search-icon::before {
  font-size: 15px;
  position: absolute;
  top: 11px;
  left: -20px;
}

.kat-task-detail__right-section__content-body-col__content-add-dropdown__input-holder {
  position: relative;
}

.kat-task-detail__right-section__content-body-col__content-add-dropdown__search {
  width: 210px;
  transition: all .5s ease;
  padding: 10px 25px;
  background: none;
  border: none;
  color: black;
  font-size: 15px;
}

.kat-task-detail__right-section__content-body-col__content-add-dropdown__input-holder .flaticon-search-icon::before {
  font-size: 15px;
  position: absolute;
  top: 11px;
  left: -20px;
}

.kat-task-detail__right-section__content-body-col__content-add-dropdown-sectionhdr {
  padding: 12px 20px 0;
  border-bottom: 1px solid #D9DDE4;
  height: 54px;
}

.kat-task-detail__right-section__content-body-col__content-add-dropdown ul.kat-task-detail__right-section__header__toolbar__dropdown__list {
  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}

.kat-task-detail__right-section__content-body-col__content-image_more .kat-task-detail__right-section__content-body-col__content-add-dropdown {
  margin-top: 27px;
  margin-left: -18px;
}

@media all and (max-width: 1275px) {
  .kat-task-detail__overlay-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
  }

  .kat-task-detail {
    width: 1090px;
  }
}

.kat-task-detail__overlay-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

.kat-task-detail__right-section__content-body-col3 .kat-task-detail__right-section__content-body-col__content-add .kat-userlist__dropdown__content-add-dropdown-bottom, .kat-task-detail__right-section__content-body-col4 .kat-userlist__dropdown__content-add-dropdown-bottom {
  top: calc(100% + 10px);
  width: 280px !important;
  transform: translateY(-1%);
  transform-origin: top center;
  position: absolute;
  margin-left: -132px;
}

.kat-task-detail__right-section__content-body-col__content-add .kat-userlist__dropdown__content-add-dropdown-bottom ul.kat-userlist__dropdown__list {
  max-height: 110px;
}

.kat-task-detail__right-section__content-body-col4 .kat-userlist__dropdown__content-add-dropdown-bottom {
  top: calc(100% + 2px);
  margin-left: 0;
}

@media all and (max-height: 659px) {
  .kat-task-detail__right-section__content-body-col3 .kat-task-detail__right-section__content-body-col__content-add .kat-userlist__dropdown__content-add-dropdown-bottom ul.kat-userlist__dropdown__list, .kat-task-detail__right-section__content-body-col4 .kat-userlist__dropdown__content-add-dropdown-bottom ul.kat-userlist__dropdown__list {
    max-height: 85px;
  }
}

@media all and (max-height: 768px) {
  .kat-task-detail-full .kat-task-detail__right-section__content {
    overflow: visible;
  }

  .kat-task-detail-full .kat-task-detail__right-section__content-wrapper {
    height: auto;
  }
}

.text-grey {
  color: #b6b6b6;
}

.text-blue {
  color: #28bde8;
}

.kat-workstream__task__foot__summary-right__meeting-icon {
  margin-top: 2px;
  width: 20px;
}

.kat-task-details-advanced-task-bar {
  padding: 12px 30px;
  border-top: 1px solid #e3e5ea;
  border-bottom: 1px solid #e3e5ea;
  position: absolute;
  bottom: 39px;
  left: 0;
  right: 0;
}

.advanced-task-bar-content-info {
  margin-left: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: calc(100% - 240px);
}



.kat-task-detail-full .kat-task-detail__right-section__content-wrapper {
  height: auto;
}

.kat-task-detail-full .kat-task-detail__right-section__content-wrapper {
  overflow: auto;
}

.kat-task-detail-full .kat-task-details-advanced-task-wrapper {
  position: relative;
  bottom: 1px;
  left: 0;
  right: 0;
  background: #fff;
}

.kat-task-details-advanced-task-wrapper {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  background: #fff;
}

.repeat-task-txt {
  display: inline-block;
  margin-top: 9px;
  margin-right: 10px;
  color: #2A303D;
  font-size: 14px;
}


.kat-task-details-action-buttonwrapper {
  margin: 20px 30px;
}

.kat-task-details-action-buttonwrapper .tooltip-top:hover .arrow:before {
  left: 30%;
  top: -16px;
}

.kat-task-details-action-buttonwrapper .tooltip[data-tooltip]:hover:after {
  left: -38px;
  bottom: 123%;
}

.kat-task-detail__top-menu-ico-wrapper {
  display: inline-block;
  height: 32px;
  width: 32px;
  text-align: center;
  border: 1px solid #2BBEE8;
  border-radius: 50%;
  padding: 2px 7px;
  margin-top: 15px;
  margin-left: 1px;
}

.kat-task-detail__top-menu-playpause-txt {
  color: #2BBEE8;
  margin-top: 22px;
  font-size: 18px;
}

.kat-task-detail-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 4px 0 4px 4px;
  display: flex;
  flex-direction: row;
  overflow-y: auto;
  overflow-x: hidden;
}

.kat-task-detail-full .kat-task-detail__right-section__bottom-bar {
  position: relative;
}

.kat-task-detail-full .kat-task-details-advanced-task-bar {
  position: relative;
  top: 0;
}

.kat-task-detail-full .kat-task-detail__right-section__content-wrapper {
  overflow: visible;
}

.kat-task-detail-full .kat-task-detail__left-section-wrapper {
  width: 622px;
  flex: 0 0 35vw;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  border-right: 1px solid #CCD1DA;
}

.kat-task-detail-full .kat-task-detail__right-section {
  position: absolute;
  right: 0;
  left: 622px;
  width: calc(100% - 624px);
  border-left: none;
  height: auto;
  bottom: 0;
  top: 0;
  overflow: auto;
}


.track-details-table tr td .kat-task-detail_right-section-calendar-wrapper {
  left: 11px;
}

.repeat-task-date-field {
  color: #2BBEE8;
  margin-right: 10px;
  display: inline-block;
}

@media all and (min-width: 768px) and (max-width: 1400px) {
  .kat-task-detail-full.kat-task-detail__right-section {
    width: calc(100% - 376px) !important;
    overflow: auto !important;
    z-index: 10;
  }

  .quadrant-display-wrapper {
    margin-left: -23px !important;
  }

  .kat-task-detail-full {
    position: absolute !important;
    overflow: auto !important;
    z-index: 999;
  }

  .kat-task-detail-full .kat-task-detail__left-section-wrapper {
    width: 622px;
    flex: 0 0 622px;
    position: static;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 30;
    border-right: 1px solid #CCD1DA;
  }

  .kat-task-detail-full .kat-task-details-advanced-task-wrapper {
    position: relative;
  }
}

.assigner-details-dropdown {
  text-align: left;
  box-shadow: 0 0 8px rgba(67, 65, 90, 0.42);
  color: grey;
  -webkit-animation: dropdownEntry 0.16s ease-in-out;
          animation: dropdownEntry 0.16s ease-in-out;
  transform-origin: top center;
  width: 265px;
  line-height: normal;
  position: absolute;
  background: #fff;
  z-index: 10;
  left: 0;
}

.assigner-details-dropdown .assigner-details-hdr {
  margin-bottom: 10px;
  color: #313845;
  font-weight: bold;
  display: inline-block;
}

.assigner-details-dropdown .kat-profile-thumbnail__alphabet {
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-transform: uppercase;
}

.assigner-details-dropdown ul li.header-list {
  background: #f5f8fd;
}

.assigner-details-dropdown ul li.header-list img:first-child {
  margin-left: 0;
}

.assigner-details-dropdown ul li.header-list img.avatar-image-small {
  width: 26px;
  height: 26px;
}

.assigner-details-dropdown.bottom {
  top: 20px;
}

.assigner-details-dropdown ul li {
  padding: 15px 10px;
}

@media all and (max-width: 1366px) {
  .kat-task-detail__left-section-wrapper {
    flex: 0 0 400px;
    width: 400px;
  }

  .kat-task-detail__right-section__header__title {
    max-width: calc(100% - 40px);
  }

  .kat-task-detail-full .kat-task-detail__left-section-wrapper {
    width: 430px !important;
    flex: 0 0 430px !important;
    position: fixed;
  }

  .kat-task-detail-full .kat-task-detail__right-section {
    width: calc(100% - 431px) !important;
    z-index: 10 !important;
    left: 430px !important;
  }

  .kat-task-detail-full {
    position: absolute !important;
  }
}


.task-dependency-wrapper .header-wrapper {
  border-bottom: 1px solid #E6E6E6;
  padding-bottom: 20px;
}

.task-dependency-wrapper ul li {
  padding: 0 10px;
  float: left;
  cursor: pointer;
}

.task-dependency-wrapper .timeline-view-icon-wrapper {
  width: 26px;
  height: 19px;
  cursor: pointer;
  margin-right: 5px;
}

.task-dependency-wrapper .timeline-view {
  background: url(/dist/gantt_grey.png) no-repeat;
  display: inline-block;
  height: 100%;
  width: 100%;
  background-size: 24px;
  background-position: 0 1px;
}

.task-dependency-wrapper .list-view {
  background: url(/dist/list_grey.png) no-repeat;
  display: inline-block;
  height: 100%;
  width: 100%;
  background-size: 22px;
  background-position: 0 0;
}



.advanced-task-table-scroll {
  width: 100%;
  max-height: 230px;
  overflow: auto;
  margin-bottom: 10px;
}

.advanced-task-table {
  border-spacing: 0;
  border-collapse: separate;
}

.advanced-task-table tr td {
  border-bottom: 1px solid #E6E6E6;
  padding: 10px;
}

.advanced-task-table tr td .flaticon-cross-icon:before {
  font-size: 14px;
  margin-left: 0;
  cursor: pointer;
}

.advanced-task-table tr td:nth-child(1) {
  width: calc(100% - 245px);
  height: 45px;
  position: absolute;
}

.advanced-task-table tr td .task-table-data {
  color: #313845;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

.dependency-icon {
  width: 31px;
  height: 21px;
  display: inline-block;
}

.dependency-icon.end-end-icon {
  background: url(/dist/end-end@1x.png) no-repeat;
}

.dependency-icon.end-start-icon {
  background: url(/dist/end-start@1x.png) no-repeat;
}

.dependency-icon.start-end-icon {
  background: url(/dist/start-end-1@1x.png) no-repeat;
}

.dependency-icon.start-start-icon {
  background: url(/dist/start-start@1x.png) no-repeat;
}

.dependency-icon.end2-end1-icon {
  background: url(/dist/end-end1.png) no-repeat;
}

.dependency-icon.end2-start1-icon {
  background: url(/dist/end-start1.png) no-repeat;
}

.dependency-icon.start2-end1-icon {
  background: url(/dist/start-end1.png) no-repeat;
}

.dependency-icon.start2-start1-icon {
  background: url(/dist/start-start1.png) no-repeat;
}

.icon-txt {
  color: #313845;
  font-size: 14px;
  margin-left: 8px;
  display: inline-block;
  position: relative;
  top: -5px;
}

.action-button-wrapper ul li.active {
  color: #2BBEE8;
}

.action-button-wrapper ul li.active .list-view {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMyIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDMzIDI4Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjMmJiZWU4OwogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggaWQ9Imxpc3RfYmx1ZSIgY2xhc3M9ImNscy0xIiBkPSJNMjU3MSwzNDk1aDI5YTIuMDA2LDIuMDA2LDAsMCwxLDIsMnY0YTIuMDA2LDIuMDA2LDAsMCwxLTIsMmgtMjlhMi4wMDYsMi4wMDYsMCwwLDEtMi0ydi00QTIuMDA2LDIuMDA2LDAsMCwxLDI1NzEsMzQ5NVptMC0xMGgyOWEyLjAwNiwyLjAwNiwwLDAsMSwyLDJ2NGEyLjAwNiwyLjAwNiwwLDAsMS0yLDJoLTI5YTIuMDA2LDIuMDA2LDAsMCwxLTItMnYtNEEyLjAwNiwyLjAwNiwwLDAsMSwyNTcxLDM0ODVabTAtMTBoMjlhMi4wMDYsMi4wMDYsMCwwLDEsMiwydjRhMi4wMDYsMi4wMDYsMCwwLDEtMiwyaC0yOWEyLjAwNiwyLjAwNiwwLDAsMS0yLTJ2LTRBMi4wMDYsMi4wMDYsMCwwLDEsMjU3MSwzNDc1WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1NjkgLTM0NzUpIi8+Cjwvc3ZnPgo=) no-repeat;
  display: inline-block;
  height: 100%;
  width: 100%;
  background-size: 22px;
  background-position: 0 0;
}

.action-button-wrapper ul li.active .timeline-view {
  background: url(/dist/gantt_blue.png) no-repeat;
  display: inline-block;
  height: 100%;
  width: 100%;
  background-size: 24px;
  background-position: 0 1px;
}

.swipe-in-filter-wrapper {
  padding: 10px 0 0 0;
  background: #f7f9ff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  margin-top: 20px;
  height: calc(100% - 135px);
}

.right-swipe-in-wrapper {
  position: absolute;
  width: 445px;
  bottom: 0;
  top: 0;
  right: -445px;
  background: #f5f6fa;
  z-index: 50;
  transition: all 0.25s ease-in-out;
}

.right-swipe-in-wrapper .right-swipe-in-wrapper-close {
  position: absolute;
  right: 23px;
  top: 24px;
}

.right-swipe-in-wrapper .right-swipe-in-wrapper-close.flaticon-cross-icon:before {
  font-size: 16px;
  cursor: pointer;
}

.right-swipe-in-wrapper .swipe-in-filter-body {
  padding: 10px 20px;
  height: 100%;
  position: relative;
}

.right-swipe-in-wrapper .swipe-in-filter-body .swipe-in-filter-outer-txt {
  color: #8d9296;
  font-size: 13px;
  margin-top: 5px;
  margin-left: 15px;
  margin-bottom: 8px;
  font-weight: 600;
}

.right-swipe-in-wrapper .swipe-in-filter-body .swipe-in-filter-button-wrapper {
  padding: 10px;
  position: absolute;
  bottom: 70px;
  left: 12px;
  right: 18px;
}

.right-swipe-in-wrapper .swipe-in-filter-body .swipe-in-filter-button-wrapper .kat-default-button, .right-swipe-in-wrapper .swipe-in-filter-body .swipe-in-filter-button-wrapper button.kat-button {
  padding: 10px 19px;
  font-size: 13px;
  font-weight: normal;
}

.right-swipe-in-wrapper .swipe-in-filter-body .swipe-in-filter-outer-txt-selected {
  color: #454a4f;
  margin: 20px 0 8px 0;
  font-size: 13px;
  font-weight: 600;
}

.right-swipe-in-wrapper .swipe-in-filter-header {
  padding: 20px;
  color: #8e9097;
  font-weight: bold;
  font-size: 18px;
  border-bottom: 1px solid #eaecf3;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper {
  margin-top: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  padding: 15px;
  width: 100%;
  background: #fff;
  border-radius: 3px;
  border: 1px solid transparent;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual {
  cursor: pointer;
  margin: 0 10px 10px 10px;
  width: 95%;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual.selected {
  border: 1px solid #2BBEE8;
  box-shadow: 0 0 5px rgba(43, 190, 232, 0.15);
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .avatar-image-small {
  margin: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .swipe-in-filter-searched-wrapper-hdr {
  color: #454a4f;
  font-size: 16px;
  word-wrap: break-word;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .dependency-icon-wrapper {
  min-width: 134px;
  cursor: pointer;
  position: relative;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .dependency-icon-wrapper .kat-task-detail__right-section__header__toolbar__dropdown {
  top: 25px;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .dependency-icon-wrapper .kat-task-detail__right-section__content-body-col__content-add-dropdown {
  width: 215px;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .dependency-icon-wrapper .kat-task-detail__right-section__content-body-col__content-add-dropdown .dependency-icon {
  margin-right: 10px;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .dependency-icon-wrapper .kat-task-detail__right-section__content-body-col__content-add-dropdown {
  width: 220px !important;
  left: -14px;
  top: 37px;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .dependency-icon-wrapper ul.kat-task-detail__right-section__header__toolbar__dropdown__list {
  padding: 0;
  max-height: 400px;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .dependency-icon-wrapper ul.kat-task-detail__right-section__header__toolbar__dropdown__list li {
  padding: 15px;
  border-bottom: 1px solid #f6f7fb;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .dependency-icon-wrapper ul.kat-task-detail__right-section__header__toolbar__dropdown__list li ul.kat-task-detail__right-section__header__toolbar__dropdown__list li:last-child {
  padding-bottom: 20px;
  border-bottom: none;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .dependency-icon-wrapper ul.kat-task-detail__right-section__header__toolbar__dropdown__list li .kat-task-detail__right-section__header__toolbar__dropdown__list__text_email {
  color: #b2b3b7;
  font-weight: normal;
  font-size: 12px;
  margin-top: 12px;
  overflow: visible;
  white-space: normal; /* text-overflow: ellipsis; */
  word-wrap: break-word;
  line-height: 1.45;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .dependency-icon-wrapper ul.kat-task-detail__right-section__header__toolbar__dropdown__list li:hover {
  background: #f5f8fd;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .dependency-icon-wrapper ul.kat-task-detail__right-section__header__toolbar__dropdown__list li.active {
  background: #f5f8fd;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .dependency-icon-wrapper ul.kat-task-detail__right-section__header__toolbar__dropdown__list li.active .kat-task-detail__right-section__header__toolbar__dropdown__list__text {
  font-weight: bold;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .dependency-icon-wrapper ul.kat-task-detail__right-section__header__toolbar__dropdown__list {
  padding: 0;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .dependency-icon-dropdown {
  margin-top: 20px;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .drop-arrow {
  position: relative;
  width: 0;
  height: 0;
  top: 5px;
  left: 8px;
  border-style: solid;
  border-width: 5px 4px 4px 5px;
  border-color: #6e7585 rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
  cursor: pointer;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .icon-txt {
  top: 0;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .cross-icon-wrapper {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c7c9cf;
  cursor: pointer;
  position: relative;
  right: 0;
  line-height: 21px;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .cross-icon-wrapper .flaticon-cross-icon:before {
  font-size: 6px;
  color: #fff;
  margin-left: 0;
  position: relative;
  top: -3px;
  left: 7px;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .project-info-wrapper {
  margin-top: 5px;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .project-info-wrapper .more-assigned {
  margin-left: 5px;
  font-size: 13px;
  position: relative;
  top: 3px;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper.individual .project-info {
  font-size: 13px;
  color: #afadad;
  margin-top: 7px;
  width: calc(100% - 79px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper .swipe-in-filter-searched-wrapper-hdr {
  font-size: 13px;
}

.right-swipe-in-wrapper .swipe-in-filter-searched-wrapper ul li {
  padding: 10px 0;
  color: #454a4f;
}

.swipe-in-filter-searched-wrapper .content-separator {
  height: 1px;
  position: relative;
  background: #eaecf3;
  width: 110%;
  margin-top: 15px;
  left: -20px;
}

.swipe-in-filter-search-wrapper {
  background: #fff;
  border-radius: 3px;
  position: relative;
}

.swipe-in-filter-search-wrapper .kat-task-detail__right-section__header__toolbar__dropdown {
  top: 36px;
}

.swipe-in-filter-search-wrapper .kat-task-detail__right-section__header__toolbar__dropdown__list {
  padding: 0;
}

.swipe-in-filter-search-wrapper .flaticon-search-icon::before {
  font-size: 15px;
  position: absolute;
  top: 11px;
  left: -7px;
}

.swipe-in-filter-search-wrapper .list__search {
  transition: all .5s ease;
  padding: 10px 10px 10px 39px;
  background: none;
  border: none;
  color: black;
  font-size: 15px;
  -webkit-appearance: textfield;
  width: 100%;
  height: 35px;
}

.swipe-in-filter-search-wrapper .list__search:focus {
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.15);
}

.right-swipe-in-wrapper.fade-in {
  right: 0;
}

.swipe-in-filter-searched-wrapper-scroll {
  height: calc(100% - 28px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 10px 0;
}

.swipe-in-filter-searched-wrapper-scroll.searched-wrapper {
  height: calc(100% - 203px);
  padding: 0 10px 0 0;
}

.swipe-in-filter-searched-wrapper-scroll.searched-wrapper .swipe-in-filter-searched-wrapper {
  cursor: default;
}

.swipe-in-filter-searched-wrapper-scroll.searched-wrapper .swipe-in-filter-searched-wrapper.individual.selected {
  border: 1px solid red;
}

.kat-task-details-action-status-btn.dark-txt {
  color: #000;
}

.kat-task-details-action-status-btn.dark-txt .drop-arrow {
  border-color: #000 rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
}

.approval-status-wrapper {
  margin-top: 5px;
}

.approval-status-wrapper .avatar-image-small {
  margin-left: 0;
}

.approval-status-wrapper .kat-task-details-action-status-btn {
  margin-top: -5px;
  float: right !important;
}

.approval-status-wrapper .kat-task-detail__right-section__bottom-bar__watcher, .approval-status-wrapper .kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  margin-right: 10px;
  margin-left: 0;
}

.approval-status-wrapper .kat-task-detail__right-section__header__toolbar__dropdown.pos-bottom {
  top: 32px !important;
  left: -18px !important;
  width: 152px;
  min-width: 152px;
}

.approval-status-wrapper .kat-task-detail__right-section__header__toolbar__dropdown ul {
  margin: 0;
}

.approval-status-wrapper .kat-task-detail__right-section__header__toolbar__dropdown ul li {
  border-bottom: none;
}


.lifecycle-div-wrapper-main {
  position: relative;
  top: 24px;
  width: calc(100% - -40px);
  height: 250px;
  left: -20px;
}

.lifecycle-div-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.lifecycle-div-wrapper .body-section-wrapper {
  background: #fff;
  height: calc(100% - 61px);
  width: 100%;
  overflow: inherit;
  border-bottom: 1px solid #e4eaf5;
}

.lifecycle-div-wrapper .body-section-wrapper .body-section-1-wrapper {
  overflow: hidden;
  position: relative;
  width: 121px;
  height: 100%;
  float: left;
  border-right: 1px solid #e4eaf5;
}

.lifecycle-div-wrapper .body-section-wrapper .body-section-1 {
  float: left;
  width: 121px;
  height: 100%;
  position: absolute;
  font-size: 13px;
  text-align: left;
}

.lifecycle-div-wrapper .body-section-wrapper .body-section-1 ul li {
  padding: 15px 36px;
  border-bottom: 1px solid #e4eaf5;
  height: 45px;
  color: #9f9fab;
}

.lifecycle-div-wrapper .body-section-wrapper .body-section-2-scroll {
  height: 100%;
  overflow-x: auto;
  margin-left: 121px;
}

.lifecycle-div-wrapper .body-section-wrapper .body-section-2 {
  width: 1168px;
  height: auto;
  float: left;
  position: relative;
  z-index: 20;
}

.lifecycle-div-wrapper .body-section-wrapper .body-section-2 ul li {
  border-bottom: 1px solid #e4eaf5;
  padding-top: 10px;
  padding-bottom: 10px;
  height: 45px;
}

.lifecycle-div-wrapper .body-section-wrapper .body-section-2 ul li .baseline-block {
  width: 284px;
  height: 25px;
  background: #4e545f;
  position: relative;
  left: 0;
}

.lifecycle-div-wrapper .body-section-wrapper .body-section-2 ul li .plan-block {
  width: 282px;
  height: 25px;
  background: url(/dist/striped.png) repeat-x;
  border: 1px solid #707889;
  position: relative;
  left: 90px;
}

.lifecycle-div-wrapper .body-section-wrapper .body-section-2 ul li .actual-timings-block {
  width: 282px;
  height: 25px;
  background: #53c9eb;
  position: relative;
  left: 300px;
  overflow: hidden;
}

.lifecycle-div-wrapper .body-section-wrapper .body-section-2 ul li .actual-timings-block .actual-timings-sub-block {
  width: 56px;
  height: 14px;
  background: #4e545f;
  display: inline-block;
  position: relative;
  top: 6px;
  left: 7px;
}

.lifecycle-div-wrapper .body-section-wrapper .body-section-2 .blocks-connector {
  border-left: 4px dotted #1f2023;
  border-right: 4px dotted #1f2023;
  background: #babdc7;
  width: 287px;
  height: 22px;
  transform: skew(76deg);
  top: 35px;
  left: 51px;
  position: absolute;
  opacity: 0.3;
}

.lifecycle-div-wrapper .body-section-wrapper .body-section-2 .svg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.lifecycle-div-wrapper .body-section-wrapper .body-section-2 polygon {
  fill: #babdc7;
  stroke-dasharray: 10;
  stroke-width: 1;
  stroke: #5a5b5f;
  opacity: 0.4;
}

.lifecycle-div-wrapper .body-section-wrapper .body-horizontal-scale {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  min-height: 170px;
}

.lifecycle-div-wrapper .body-section-wrapper .body-horizontal-scale ul {
  height: calc(100% - -1px);
  width: 1168px;
}

.lifecycle-div-wrapper .body-section-wrapper .body-horizontal-scale ul li {
  width: 37px;
  padding: 10px 15px;
  border-right: 1px solid #f1f2f3;
  float: left;
  height: 100%;
  line-height: 61px;
  font-size: 13px;
  position: relative;
  color: #9f9fab;
}

.lifecycle-div-wrapper .header-section-wrapper {
  background: #f5f8fc;
  height: 58px;
  border-top: 1px solid #e4eaf5;
  border-bottom: 1px solid #e4eaf5;
}

.lifecycle-div-wrapper .header-section-wrapper .header-section-1 {
  padding: 20px;
  float: left;
  width: 121px;
  font-size: 13px;
  border-right: 1px solid #e4eaf5;
  text-align: center;
}

.lifecycle-div-wrapper .header-section-wrapper .header-section-1 .header-section-1-hdr {
  margin-top: 2px;
  display: inline-block;
  color: #242B39;
}

.lifecycle-div-wrapper .header-section-wrapper .header-section-2 {
  width: calc(100% - 121px);
  height: 100%;
  float: left;
  position: relative;
}

.lifecycle-div-wrapper .header-section-wrapper .header-section-2 ul {
  width: 1168px;
}

.lifecycle-div-wrapper .header-section-wrapper .header-section-2 .header-section-2-hdr {
  font-size: 13PX;
  display: inline-block;
  position: absolute;
  top: 9px;
  left: 10px;
  color: #9f9fab;
}

.lifecycle-div-wrapper .header-section-wrapper ul li {
  padding: 10px 15px;
  border-right: 1px solid #f1f2f3;
  float: left;
  height: 57px;
  line-height: 61px;
  font-size: 13px;
  width: 37px;
}


.approval-list-wrapper ul {
  width: 100%;
  margin-top: 20px;
}

.approval-list-wrapper ul li {
  border-bottom: 1px solid #E6E6E6;
  padding: 10px;
  width: 100%;
}

.approval-list-wrapper ul li .avatar-txt-primary {
  color: #4d525d;
  margin-top: 5px;
  display: inline-block;
  text-transform: capitalize;
}

.approval-list-wrapper ul li .avatar-txt-secondary {
  color: #9f9fab;
  margin-top: 5px;
  font-size: 14px;
}

.approval-list-wrapper ul li .approval-status-reason {
  padding: 10px 0 0 37px;
  width: 100%;
}

.approval-list-wrapper ul li .approval-status-reason input[type="text"] {
  padding: 10px;
  width: 100%;
  border-radius: 3px;
  border: 1px solid #E6E6E6;
}

.approval-list-wrapper ul li .kat-default-button {
  padding: 10px 19px;
  font-size: 13px;
  font-weight: normal;
}

.approval-list-wrapper ul li button.kat-button {
  padding: 10px 19px;
  font-size: 13px;
}

.approval-list-wrapper ul li:first-child {
  border-top: 1px solid #E6E6E6;
}

.approval-list-wrapper ul li:last-child {
  border-bottom: none;
}

.due-date-wrapper .kat-task-detail_right-section-calendar-wrapper {
  right: auto;
  left: 2px;
}

.card-info-wrapper .DayPicker.DayPicker--en {
  margin-right: -15px;
  margin-left: 0;
}
@media all and (min-width: 768px) and (max-width: 1365px) {
  .kat-task-detail-full .kat-task-detail__right-section {
    width: 870px !important;
    z-index: 10 !important;
    left: 430px !important;
  }

  .kat-task-detail-full .kat-task-detail__right-section__content {
    overflow: visible !important;
  }
}

.assignee-div .kat-task-detail__right-section__bottom-bar__watcher, .assignee-div .kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  margin-left: 0;
  margin-right: 5px;
  margin-top: -3px;
  width: 26px;
  height: 26px;
}

.project-info-wrapper .kat-task-detail__right-section__bottom-bar__watcher, .project-info-wrapper .kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  float: right;
  width: 20px;
  height: 20px;
  line-height: 21px;
  font-size: 13px;
}

.kat-task-detail__right-section__bottom-bar__watchers__wrapper .avatar-image-small {
  position: relative;
  left: -6px;
}
.kat-task-detail__right-section__bottom-bar__watchers__wrapper span.flaticon-cross-icon.circle-close:before{
  top:0;
}
.kat-task-detail__right-section__bottom-bar__watcher.myday, .myday.kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  width: 31px !important;
  height: 31px !important;
}

.timepicker-wrapper-div .timepicker-slot {
  width: 48px;
  float: left;
  text-align: center;
}

.timepicker-wrapper-div .timepicker-slot-wrapper {
  position: relative;
}

.timepicker-wrapper-div .timepicker-slot-hdr {
  color: #2b323f;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-top: 5px;
}

.timepicker-wrapper-div .timepicker-slot-arrow-up {
  transform: rotate(270deg);
  width: 20px;
  height: 20px;
  position: relative;
  bottom: -2px;
  left: 12px;
}

.timepicker-wrapper-div .timepicker-slot-arrow-up.flaticon-arrow::before {
  font-size: 8px;
  margin-left: 0;
  color: #ebeced;
}

.timepicker-wrapper-div .timepicker-slot-arrow-up:hover.flaticon-arrow::before {
  color: #c5c5cc;
  cursor: pointer;
}

.timepicker-wrapper-div .timepicker-slot-arrow-up.active:hover.flaticon-arrow::before {
  color: #c5c5cc;
  cursor: pointer;
}

.timepicker-wrapper-div .timepicker-slot-arrow-up.active:hover ~ .timepicker-slot-input, .timepicker-slot-input:hover {
  border: 1px solid #e3e5ea !important;
  border-radius: 3px;
}

.timepicker-wrapper-div .timepicker-slot-arrow-up.disabled:hover.flaticon-arrow::before {
  color: #ebeced;
  cursor: default;
}

.timepicker-wrapper-div .timepicker-slot-arrow-down {
  transform: rotate(209deg);
  width: 20px;
  height: 20px;
  position: relative;
  bottom: 4px;
  left: 14px;
}

.timepicker-wrapper-div .timepicker-slot-arrow-down.flaticon-arrow::before {
  font-size: 8px;
  margin-left: 0;
  color: #ebeced;
}

.timepicker-wrapper-div .timepicker-slot-arrow-down:hover.flaticon-arrow::before {
  color: #c5c5cc;
  cursor: pointer;
}

.timepicker-wrapper-div .timepicker-slot-arrow-down.active:hover.flaticon-arrow::before {
  color: #c5c5cc;
  cursor: pointer;
}

.timepicker-wrapper-div .timepicker-slot-arrow-down.disabled:hover.flaticon-arrow::before {
  color: #ebeced;
  cursor: default;
}

.timepicker-wrapper-div .timepicker-slot-input {
  height: 30px !important;
  width: 30px !important;
  margin-top: 2px;
  margin-bottom: 4px;
  text-align: center !important;
  border: none !important;
  font-size: 15px !important;
  position: relative !important;
  left: 0 !important;
}

.timepicker-wrapper-div .timepicker-slot-arrow-up.active:hover ~ .timepicker-slot-input, .timepicker-slot-input:hover {
  border: 1px solid #e3e5ea !important;
  border-radius: 3px;
}

.timepicker-wrapper-div {
  padding: 15px;
  box-shadow: rgba(67, 65, 90, 0.41961) 0 0 8px;
  width: 273px;
  position: relative;
  z-index: 30;
}

.timepicker-wrapper-div .flaticon-round::before, .timepicker-wrapper-div .flaticon-radio-active::before {
  font-size: 15px;
  color: #efeff0;
  margin-right: 8px;
  cursor: pointer;
}

.timepicker-wrapper-div .flaticon-radio-active::before {
  font-size: 14px;
}

.timepicker-wrapper-div .radio-lable {
  font-size: 12px !important;
  color: #e0e2e7 !important;
}

.timepicker-wrapper-div .radio-lable.active {
  color: #6f737b !important;
}

.timepicker-wrapper-div .radio-lable.active.flaticon-radio-active::before, .timepicker-wrapper-div .radio-lable.active.flaticon-round::before {
  color: #6f737b;
}

.kat-task-detail_right-section-calendar-radio-wrapper {
  margin: 3px 0;
}

.timepicker-wrapper-div .button-set {
  margin-top: 10px;
  margin-right: 10px;
}

.timepicker-wrapper-div div .timepicker-wrapper {
  width: 100%;
}

.timepicker-wrapper-div .kat-task-detail_right-section-calendar-radio-wrapper-div {
  margin-top: 10px;
  margin-bottom: 20px;
}

.timepickerslot-wrapper {
  width: 100px;
  float: left;
}

.seperator-txt {
  display: inline-block;
  margin: 48px 10px 10px 10px;
  font-weight: bold;
  font-size: 16px;
}

.approval-status-wrapper .kat-profile-thumbnail__alphabet {
  width: 35px;
  height: 35px;
}

.approval-status-wrapper .kat-task-detail__right-section__content-body-col__content-image, .approval-status-wrapper .kat-task-detail__right-section__content-body-col__content-add {
  width: 35px;
  height: 35px;
}

.wrapper-separator {
  width: 2px;
  height: 42px;
  position: relative;
  margin-right: 20px;
  transform: rotate(15deg);
  background: #e3e5ea;
  top: -10px;
  float: right;
  right: -13px;
}

.mandatory-field {
  color: red;
  font-size: 16px;
  margin-left: 3px;
  margin-top: -3px;
  display: inline-block;
  height: 2px;
}

.complete-task-title {
  border: 1px solid #e3e5ea;
  border-radius: 3px;
  padding: 8px;
  width: calc(100% - 0px);
  height: 39px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  font-size: 15px;
}


.public-DraftEditorPlaceholder-root {
  color: #94989E;
  font-size: 16px;
  font-family: sf-compact, 'Roboto', sans-serif;
}

.public-DraftStyleDefault-ltr {
  color: #313845;
}

.Button__root___1gzfvz0c {
  border: 1px solid #b6b6b6;
}

.kat-task-details-action-buttonwrapper .google-calendar-icon {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggc3R5bGU9ImZpbGw6I0ZCQkIwMDsiIGQ9Ik0xMTMuNDcsMzA5LjQwOEw5NS42NDgsMzc1Ljk0bC02NS4xMzksMS4zNzhDMTEuMDQyLDM0MS4yMTEsMCwyOTkuOSwwLDI1NgoJYzAtNDIuNDUxLDEwLjMyNC04Mi40ODMsMjguNjI0LTExNy43MzJoMC4wMTRsNTcuOTkyLDEwLjYzMmwyNS40MDQsNTcuNjQ0Yy01LjMxNywxNS41MDEtOC4yMTUsMzIuMTQxLTguMjE1LDQ5LjQ1NgoJQzEwMy44MjEsMjc0Ljc5MiwxMDcuMjI1LDI5Mi43OTcsMTEzLjQ3LDMwOS40MDh6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiM1MThFRjg7IiBkPSJNNTA3LjUyNywyMDguMTc2QzUxMC40NjcsMjIzLjY2Miw1MTIsMjM5LjY1NSw1MTIsMjU2YzAsMTguMzI4LTEuOTI3LDM2LjIwNi01LjU5OCw1My40NTEKCWMtMTIuNDYyLDU4LjY4My00NS4wMjUsMTA5LjkyNS05MC4xMzQsMTQ2LjE4N2wtMC4wMTQtMC4wMTRsLTczLjA0NC0zLjcyN2wtMTAuMzM4LTY0LjUzNQoJYzI5LjkzMi0xNy41NTQsNTMuMzI0LTQ1LjAyNSw2NS42NDYtNzcuOTExaC0xMzYuODlWMjA4LjE3NmgxMzguODg3TDUwNy41MjcsMjA4LjE3Nkw1MDcuNTI3LDIwOC4xNzZ6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiMyOEI0NDY7IiBkPSJNNDE2LjI1Myw0NTUuNjI0bDAuMDE0LDAuMDE0QzM3Mi4zOTYsNDkwLjkwMSwzMTYuNjY2LDUxMiwyNTYsNTEyCgljLTk3LjQ5MSwwLTE4Mi4yNTItNTQuNDkxLTIyNS40OTEtMTM0LjY4MWw4Mi45NjEtNjcuOTFjMjEuNjE5LDU3LjY5OCw3Ny4yNzgsOTguNzcxLDE0Mi41Myw5OC43NzEKCWMyOC4wNDcsMCw1NC4zMjMtNy41ODIsNzYuODctMjAuODE4TDQxNi4yNTMsNDU1LjYyNHoiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0YxNDMzNjsiIGQ9Ik00MTkuNDA0LDU4LjkzNmwtODIuOTMzLDY3Ljg5NmMtMjMuMzM1LTE0LjU4Ni01MC45MTktMjMuMDEyLTgwLjQ3MS0yMy4wMTIKCWMtNjYuNzI5LDAtMTIzLjQyOSw0Mi45NTctMTQzLjk2NSwxMDIuNzI0bC04My4zOTctNjguMjc2aC0wLjAxNEM3MS4yMyw1Ni4xMjMsMTU3LjA2LDAsMjU2LDAKCUMzMTguMTE1LDAsMzc1LjA2OCwyMi4xMjYsNDE5LjQwNCw1OC45MzZ6Ii8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
  height: 23px;
  background-position: 0;
  background-size: 15px;
  position: relative;
  top: -1px;
  left: 3px;
  display: inherit;
}

.kat-task-details-action-buttonwrapper .google-calendar-icon-wrapper {
  top: 20px;
  border-radius: 50%;
  position: relative;
  border: 1px solid;
  width: 23px;
  height: 23px;
}

.kat-task-details-action-buttonwrapper .calendar-wrapper-div {
  float: right !important;
  margin-right: 57px;
  top: 10px;
  margin-left: 30px;
}

.kat-task-details-action-buttonwrapper .date-filter-option {
  height: 37px;
  padding: 8px;
  min-width: 115px;
  z-index: 101;
  position: relative;
}

.kat-task-details-action-buttonwrapper .kat-select-date-arrow {
  height: 36px;
}

.kat-task-details-action-buttonwrapper .date-filter-option .flaticon-calendar-icon:before {
  margin-left: 8px;
  position: relative;
  top: 3px;
  font-size: 13px;
}

.kat-task-details-action-buttonwrapper .date-filter-option.calendar-wrapper .primary-txt {
  margin-top: 5px;
  font-size: 13px;
  padding: 0 5px 0 10px;

}

.kat-task-details-action-buttonwrapper .calendar-wrapper-div .DayPicker.DayPicker--en {
  top: 45px;
  left: -29px;
  z-index: 99;
}

.kat-task-details-action-buttonwrapper .calendar-active-block-wrapper {
  position: relative;
}

.kat-task-details-action-buttonwrapper .date-filter-option.active {
  z-index: 101;
  position: relative;
}

.kat-task-details-action-buttonwrapper .calendar-active-block {
  position: absolute;
  background: #fff;
  width: 133px;
  height: 51px;
  border-bottom: 0;
  left: 25px;
  top: -6px;
  box-shadow: 0 -1px 1px rgba(67, 65, 90, 0.42);
  z-index: 100;
  border-left: 1px solid #eaecef;
  border-right: 1px solid #eaecef;
  border-top: 1px solid #eaecef;
}

.kat-task-detail__left-section-card-disable {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #EAEDF4;
  cursor: default;
  opacity: 0.6;
  z-index: 2;
}

.timepicker-wrapper .radio-div-wrapper .flaticon-radio-active:before {
  color: #2bbee8;
  margin-left: 0;
  font-size: 12px;
  cursor: pointer;
}

.timepicker-wrapper .radio-div-wrapper .radio-lable {
  color: #2a303d !important;
  font-size: 14px !important;
  margin-left: 8px;
  cursor: pointer;

}

.timepicker-wrapper .radio-div-wrapper .flaticon-round:before {
  color: #cecdd3;
  margin-left: 0;
  font-size: 12px;
  cursor: pointer;
}.kat-workstream-wrapper-dragging {
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: auto;
  height: 100%;
  flex: 1;
}

.cursor-pointer {
  cursor: pointer;
}

.kat-workstream, .workstream-holder {
  background: #EAEDF4;
  flex: 0 0 350px;
  border-radius: 4px;
  color: #94989E;
  margin-left: 33px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.38);
  position: relative;
  max-width: 350px;
  width: 350px;
}

.kat-workstream.move-left, .workstream-holder.move-left {
  margin-left: 380px !important;
}

.kat-workstream.move-right, .workstream-holder.move-right {
  margin-right: 380px !important;
}

.kat-workstream:first-child, .workstream-holder:first-child {
  margin-left: 90px;
  margin-right: 30px;
}

.kat-workstream.move-right {
  transition: margin-right 0.2s ease-in-out;
}

.kat-workstream.move-left {
  transition: margin-left 0.2s ease-in-out;
}

@-webkit-keyframes workStreamEntry {
  from {
    transform: translateX(-50px) scale(0.9);
    opacity: 0.3;
  }
  to {
    transform: translateX(0px) scale(1);
    opacity: 1;
  }
}

@keyframes workStreamEntry {
  from {
    transform: translateX(-50px) scale(0.9);
    opacity: 0.3;
  }
  to {
    transform: translateX(0px) scale(1);
    opacity: 1;
  }
}

.kat-workstream__task.add-task .kat-login-board__data__secondary-data {
  margin: 0 0 2px;
}

.kat-workstream.new {
  background: #fff;
}

.kat-workstream.new .kat-workstream__task {
  box-shadow: none;
  margin: 12px;
}

.kat-workstream.new .kat-workstream__task.drag-down {
  margin-top: 150px !important;
}

.kat-workstream.new .kat-workstream__task.drag-down {
  transition: margin-down 0.2s ease-in-out;
}

.kat-workstream.new .kat-workstream__task__head {
  padding: 5px 16px 5px 16px;
  min-height: 0;
}

.kat-workstream.new .kat-workstream__task__foot {
  border: none !important;
  padding: 10px 30px 10px 16px;
}

.kat-workstream.new button {
  padding: 9px 16px;
  font-size: 16px;
}

.kat-workstream.new .kat-workstream__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100% !important;
}

.kat-workstream.new .kat-login-board__data__secondary-data input {
  font-size: 16px;
  color: #494D50;
}

.kat-workstream.new .kat-login-board__data__secondary-data input:focus ~ label, .kat-workstream.new .kat-login-board__data__secondary-data input:valid ~ label {
  top: -13px;
  color: #999;
}

.kat-workstream-wrapper {
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: auto;
}

.kat-workstream.card-with-flip:nth-child(2) {
  margin-left: -256px;
}

_::-webkit-full-page-media, _future, :root .kat-workstream.card-with-flip:nth-child(2) {
  margin-left: 93px;
}

.kat-workstream__head {
  padding: 18px 16px 0 16px;
  border-bottom: 1px solid #D9DDE4;
  height: 54px;
  position: relative;
}

.kat-workstream__head .flaticon-cross-icon:before {
  font-size: 15px;
  position: relative;
  top: 2px;
  right: 3px;
  cursor: pointer;
}

.kat-workstream__head__text {
  font-weight: 600;
  color: #94989E;
  width: calc(100% - 26%);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.expand-workstream .kat-workstream__head__text {
  width: calc(100% - 60%);
}

.kat-workstream__head__text .flaticon-clock-filled-icon:before, .kat-workstream__head__text .flaticon-tick-thin:before, .kat-workstream__head__text .flaticon-assign-arrow:before {
  position: relative;
  top: 2px;
}

.kat-workstream__head__text .flaticon-assign-arrow:before, .kat-workstream__head__text .flaticon-view-icon:before, .kat-workstream__head__text .flaticon-clock-filled-icon:before, .kat-workstream__head__text .flaticon-tick-thin:before {
  margin-left: 0;
  margin-right: 10px;
  font-size: 17px;
}

.kat-workstream__head__text .flaticon-view-icon {
  position: relative;
  top: 3px;
}

li.kat-workstream__actions__item {
  display: inline-block;
  cursor: pointer;
  margin-left: 14px;
  position: relative;
  top: 0;
  right: -7px;
}

li.kat-workstream__actions__item:before {
  margin-left: 0;
  opacity: 0.6;
  transition: 0.2s opacity ease;
}

li.kat-workstream__actions__item:hover:before {
  opacity: 1;
}

.kat-workstream__actions__item.expand {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OC45IDIyLjEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4LjkgMjIuMTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM5OEExQTk7fQo8L3N0eWxlPgo8cmVjdCB4PSIxMS40IiB5PSI3LjQiIGNsYXNzPSJzdDAiIHdpZHRoPSIyNi4xIiBoZWlnaHQ9IjcuNyIvPgo8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjQ4LjUsMTEuMyAzNy40LDIxLjIgMzcuNCwxLjUgIi8+Cjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMC40LDExLjQgMTEuNCwxLjUgMTEuNSwyMS4yICIvPgo8cmVjdCB4PSIxNC45IiB5PSIwLjYiIGNsYXNzPSJzdDAiIHdpZHRoPSIxOS4xIiBoZWlnaHQ9IjEuNSIvPgo8cmVjdCB4PSIxNC45IiB5PSIxOS44IiBjbGFzcz0ic3QwIiB3aWR0aD0iMTkuMSIgaGVpZ2h0PSIxLjUiLz4KPC9zdmc+Cg==) no-repeat 0 10px;
  height: 27px;
  width: 25px;
  opacity: 0.7;
  top: -6px;
}

.kat-workstream__actions__item.expand:hover {
  opacity: 1;
}

li.kat-workstream__actions__item.expand:before {
  font-size: 23px;
}

li.kat-workstream__actions__item.more:before {
  font-size: 23px;
  position: relative;
  top: -3px;
  color: #98a1a9;
  opacity: 1;
}

li.kat-workstream__actions__item.more .kat-task-detail__right-section__header__toolbar__dropdown__wrapper {
  top: -11px;
  right: -4px;
}

li.kat-workstream__actions__item.more .kat-task-detail__right-section__header__toolbar__dropdown {
  transform-origin: top right;
}

ul.kat-workstream__actions__item__menu {
  position: absolute;
  z-index: 9999;
  right: -62px;
  top: 0;
  display: none;
  -webkit-animation: menuEntry 0.13s ease;
          animation: menuEntry 0.13s ease;
  transform-origin: top left;
  padding-left: 35px;
}

@-webkit-keyframes menuEntry {
  from {
    opacity: 0.6;
    transform: translateX(-40px) scale(0.3);
  }
  to {
    transform: translateX(0px) scale(1);
    opacity: 1;
  }
}

@keyframes menuEntry {
  from {
    opacity: 0.6;
    transform: translateX(-40px) scale(0.3);
  }
  to {
    transform: translateX(0px) scale(1);
    opacity: 1;
  }
}

ul.kat-workstream__actions__item__menu li {
  padding: 12px;
  border-radius: 50%;
  margin-bottom: 10px;
  background: #EAEDF4;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.32);
  opacity: 1;
  transition: 0.23s all ease-in-out;
}

ul.kat-workstream__actions__item__menu li:before {
  margin-left: 0;
  color: #4A4F5A;
  font-size: 18px;
}

ul.kat-workstream__actions__item__menu li {
  transform: translate(0px, 0px);
  opacity: 1;
}

.kat-workstream__body {
  padding-bottom: 10px;
  position: absolute;
  height: auto;
}

.teammembers-workstream-custom-scroll .kat-workstream__body {
  padding-bottom: 18px;
  position: relative;
  height: 100%;
}

li.kat-workstream__foot__category {
  padding: 12px 14px;
  cursor: pointer;
}

li.kat-workstream__foot__category:hover {
  color: #494D50;
}

.kat-workstream__foot {
  font-size: 14px;
  height: 38px;
  padding: 0 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  color: #2a3036;
}

li.kat-workstream__foot__category.active {
  font-weight: bold;
  color: #2a3036;
}

.kat-add-workstream {
  margin: 0 72px;
  background: #BDC4D2;
  height: 54px;
  width: 54px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 300;
  font-size: 40px;
  padding-top: 0;
  position: relative;
  top: 25px;
  transition: 0.15s background ease-out;
  flex: 0 0 54px;
  color: #494D50;
}

.kat-add-workstream:hover {
  background: rgba(255, 255, 255, 0.9);
}

.kat-workstream__head__text-edit {
  background: transparent;
  border: none;
  font-size: 16px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.18);
  color: grey;
  padding: 0 6px 3px;
  width: calc(100% - 90px);
}

.kat-workstream__head__text-edit-actions {
  padding: 0;
  margin-left: 15px;
  position: relative;
  top: -4px;
}

.kat-workstream__head__text-edit-actions.commit:before {
  font-size: 22px;
}

.kat-workstream__head__text-edit-actions:hover.commit:before {
  color: darkgreen;
}

.kat-workstream__head__text-edit-actions:hover.cancel {
  color: darkred;
}

.kat-workstream__head__text-edit-actions:before {
  margin-left: 0 !important;
}

.kat-project-tasks-hidden, .kat-project-tasks-hidden-2 {
  position: absolute;
  height: 8px;
  margin-top: -8px;
  left: 8px;
  right: 8px;
  border-radius: 3px 3px 0 0;
  background: rgba(255, 255, 255, 0.7);
}

.kat-project-tasks-hidden-2 {
  height: 16px;
  margin-top: -16px;
  left: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.4);
}

.kat-task-detail__right-section__bottom-bar__tag-dropdown-wrapper {
  padding: 10px 7px 4px;
}

.kat-task-detail__right-section__bottom-bar__tag-dropdown-wrapper .kat-task-detail__right-section__bottom-bar__tag, .kat-task-detail__right-section__bottom-bar__tag-dropdown-wrapper .kat-task-detail__right-section__bottom-bar__watcher {
  margin-bottom: 6px;
}

span.kat-hidden-items-notif {
  padding: 3px 3px 0 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  position: relative;
}

.kat-task-detail__right-section__bottom-bar__watchers__wrapper span.kat-hidden-items-notif {
  margin-top: 2px;
}

.kat-add-workstream.tooltip-data-bottom[data-tooltip]:hover::after {
  right: 18px;
  top: 118%;
}

.kat-workstream_head-drop-arrow {
  position: relative;
  width: 0;
  height: 0;
  top: 9px;
  left: 8px;
  border-style: solid;
  border-width: 6px 5px 5px 5px;
  border-color: #9aa4ab rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
  cursor: pointer;
}

.kat-workstream_head-dropdown {
  position: absolute;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: #fff;
  top: 45px;
  z-index: 10;
}

.kat-workstream_head-dropdown .flaticon-assign-arrow:before, .kat-workstream_head-dropdown .flaticon-view-icon:before, .kat-workstream_head-dropdown .flaticon-clock-filled-icon:before, .kat-workstream_head-dropdown .flaticon-tick-thin:before {
  margin-left: 0;
  margin-right: 10px;
  font-size: 17px;
}

.kat-workstream_head-dropdown span[class^="flaticon-"] {
  color: #94989E;
}

.kat-workstream_head-dropdown ul li:first-child {
  padding-top: 20px;
}

.kat-workstream_head-dropdown ul li:last-child {
  padding-bottom: 20px;
}

.kat-workstream_head-dropdown ul li {
  padding: 10px 20px;
  cursor: pointer;
  width: 230px;
  font-weight: normal;
  color: #494D50;
}

.kat-workstream_head-dropdown ul li span {
  text-transform: capitalize;
}

.kat-workstream_head-dropdown ul li .flaticon-view-icon, .kat-workstream_head-dropdown ul li .flaticon-assign-arrow, .kat-workstream_head-dropdown ul li .flaticon-clock-filled-icon, .kat-workstream_head-dropdown ul li .flaticon-tick-thin {
  color: #94989E;
}

.kat-workstream_head-dropdown ul li span.flaticon-view-icon {
  position: relative;
  top: 0;
}

.kat-workstream_head-dropdown ul li:hover {
  background: #fafafc;
}

.kat-workstream_head-dropdown ul li:hover span > span {
  font-weight: 600;
}

.task-filter-flip {
  position: absolute;
  right: -41px;
  width: 41px;
  height: 157px;
  top: 42%;
  transform: translateY(-50%);
  border-radius: 0 5px 5px 0;
  background: #f2f4f7;
  cursor: pointer;
  z-index: 51 !important;
}

.task-filter-flip:hover .task-flip-txt {
  opacity: 0;
}

.task-filter-flip:hover .task-filter-flip-action-wrapper {
  opacity: 1;
}

.task-filter-flip:before {
  content: ' ';
  position: absolute !important;
  width: 0 !important;
  top: -32px !important;
  height: 0 !important;
  left: 0 !important;
  border-top: 35px solid transparent !important;
  border-bottom: 0 solid transparent !important;
  border-left: 41px solid #f2f4f7 !important;
  z-index: -10;
}

.task-filter-flip:after {
  content: ' ';
  position: absolute !important;
  width: 0 !important;
  bottom: -33px !important;
  height: 0 !important;
  left: 0 !important;
  border-top: 0 solid transparent !important;
  border-bottom: 35px solid transparent !important;
  border-left: 41px solid #f2f4f7 !important;
  z-index: -10;
}

.card-flip {
  position: relative;
  left: 443px;
  height: calc(100% - 49px);
  max-width: 350px;
}

.card-flip .kat-workstream {
  height: 100%;
}

.task-flip-txt {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  transform: rotate(179deg);
  opacity: 1;
  position: relative;
  top: 4px;
  height: 152px;
  right: -12px;
  text-align: center;
}

.task-filter-flip-action-wrapper {
  position: relative;
  bottom: 154px;
  opacity: 0;
}

.task-filter-flip-action-wrapper .icon-wrapper {
  width: 41px;
  height: 38px;
  padding: 11px;
  position: relative;
}

.task-filter-flip-action-wrapper .icon-wrapper.tooltip-data-right[data-tooltip]:hover:after {
  left: 41px;
  bottom: 23%;
}

.task-filter-flip-action-wrapper .icon-wrapper.tooltip-right:hover .arrow:before {
  left: 97%;
  bottom: 14px;
}

.task-filter-flip-action-wrapper .icon-wrapper:hover {
  background: #98a1a9;
}

.task-filter-flip-action-wrapper .icon-wrapper:hover .flaticon-view-icon:before, .task-filter-flip-action-wrapper .icon-wrapper:hover .flaticon-assign-arrow:before, .task-filter-flip-action-wrapper .icon-wrapper:hover .flaticon-clock-filled-icon:before, .task-filter-flip-action-wrapper .icon-wrapper:hover .flaticon-tick-thin:before {
  color: #fff;
  position: relative;
  top: 9px;
  left: 13px;
}

.task-filter-flip-action-wrapper .flaticon-view-icon:before, .task-filter-flip-action-wrapper .flaticon-assign-arrow:before, .task-filter-flip-action-wrapper .flaticon-clock-filled-icon:before, .task-filter-flip-action-wrapper .flaticon-tick-thin:before {
  margin-left: 0;
  font-size: 17px;
  position: relative;
  top: 9px;
  left: 13px;
}

.tooltip[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: -10px;
  bottom: 160%;
  white-space: nowrap;
  z-index: 153;
  background-color: #000;
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
  font-family: sf-compact, 'Roboto', sans-serif;
  pointer-events: none;
}

.tooltip-top:hover .arrow:before {
  background-color: black;
  content: "\A0";
  display: block;
  height: 10px;
  position: absolute;
  top: -22px;
  transform: rotate(111deg) skew(-45deg);
  width: 13px;
  left: 50%;
}

.tooltip-data-left[data-tooltip]:hover:after {
  right: 24px;
  bottom: 8%;
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
  z-index: 153;
  background-color: #000;
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
  font-family: sf-compact, 'Roboto', sans-serif;
  pointer-events: none;
}

.tooltip-left:hover .arrow:before {
  background-color: black;
  content: "\A0";
  display: block;
  height: 10px;
  position: absolute;
  bottom: 6px;
  transform: rotate(206deg) skew(-45deg);
  width: 13px;
  right: 139%;
}

.tooltip-data-right[data-tooltip]:hover:after {
  left: 35px;
  bottom: 36%;
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
  z-index: 153;
  background-color: #000;
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
  font-family: sf-compact, 'Roboto', sans-serif;
  pointer-events: none;
}

.tooltip-right:hover .arrow:before {
  background-color: black;
  content: "\A0";
  display: block;
  height: 10px;
  position: absolute;
  bottom: 28px;
  transform: rotate(206deg) skew(-45deg);
  width: 13px;
  left: 122%;
}

.tooltip-data-bottom[data-tooltip]:hover:after {
  right: -29px;
  top: 121%;
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
  z-index: 153;
  background-color: #000;
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
  font-family: sf-compact, 'Roboto', sans-serif;
  pointer-events: none;
}

.tooltip-bottom:hover .arrow:before {
  background-color: black;
  content: "\A0";
  display: block;
  height: 10px;
  position: absolute;
  bottom: -21px;
  transform: rotate(116deg) skew(-45deg);
  width: 13px;
  right: 37%;
}

.workstream-holder {
  height: calc(100% - 45px);
  background: transparent;
  box-shadow: none;
}

.canvasImg-div {
  position: absolute;
  max-width: 350px;
  flex: 0 0 350px;
  z-index: 52;
}

.load-more-btn-wrapper {
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.load-more-btn {
  color: #B4B8BE;
  padding: 10px 20px;
  cursor: pointer;
}

.load-more-btn:hover {
  box-shadow: 0 1px 14px rgba(48, 38, 38, 0.15);
  background: #f1f1f1;
  color: #94989E;
}

.date-separator-wrapper {
  /*height: auto;*/
  height: 80%;
  color: #94989E;
  position: relative;
  /*margin-bottom:61px;*/
}

.date-separator-wrapper-minheight {
  min-height: 97px;
}

.date-separator-wrapper .kat-workstream__body {
  padding-bottom: 10px;
  position: relative;
  height: 100%;
}

.date-separator-wrapper:last-child .kat-workstream__body {
  padding-bottom: 36px;
  height: calc(100% - 92px);
}

.date-separator, .date-separator.yesterday {
  height: 1px;
  background: #d2d6dd;
  margin: 18px;
  position: relative;
  text-align: center;
}

.date-separator.yesterday {
  margin: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 17px;

}

.date-separator-yesterday-wrapper {
  background: #EAEDF4;
  height: 35px;
  position: relative;
  margin-top: -36px;
  cursor: pointer;
}

.date-separator-value {
  display: inline-block;
  padding: 1px 8px;
  background: #EAEDF4;
  color: #94989E;
  position: relative;
  top: -11px;
}

.scrolltop-button-wrapper {
  opacity: 0.8;
  border: 1px solid #36bbe1;
  border-radius: 5px;
  background: #fff;
  position: absolute;
  top: -1px;
  padding: 5px;
  font-size: 9px;
  /*left: 37%;*/
  color: #36bbe1;
  box-shadow: 1px 2px 9px rgba(30, 34, 38, 0.2);
}

.scrolltop-button-wrapper .flaticon-arrow-right-1:before {
  position: relative;
  top: 24px;
  margin-left: 0;
  left: 3px;
  font-size: 12px;
}

.scrolltop-button-wrapper .scrolltop-button-txt {
  margin-top: -4px;
  white-space: pre;
}

.scrolltop-button-wrapper .flaticon-arrow-right-1 {
  color: #36bbe1;
  transform: rotate(-91deg);
  display: inline-block;
}

.no-task-wrapper {
  text-align: center;
  padding: 10px;
  margin: 20px 0;
  font-size: 16px;
}

.select-all-button-wrapper {
  border: 2px dotted #98a1a9;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 19px;
  cursor: pointer;
}

.select-all-button {
  width: 12px;
  height: 12px;
  border: 2px solid #98a1a9;
  display: inline-block;
}

.select-all-button.active {
  background: #98a1a9;
}

.date-separator-wrapper .no-data {
  position: absolute;
  top: calc(100% - 63%);
  left: 29%;
}

.expand-workstream {
  display: flex;
  position: absolute;
  left: 57px;
  flex: initial;
  width: auto;
  margin-right: 30px;
  right: -7px;
  background: transparent;
  box-shadow: none;
  min-width: 1328px;
  margin-left:31px !important;
  max-width:initial;
}

.workstream-task-list-wrapper .kat-workstream__foot {
  left: -20px;
  width: 102%;
}

/* .workstream-list-wrapper .kat-workstream__foot {

} */

.expand-workstream ul.kat-workstream__foot__category {
  margin-left: 43%;
  transition: margin-left 2s ease-in-out;
}

.expand-workstream .kat-workstream__task {
  width: initial;
  transition: width 2s ease-in-out;
  margin: 10px 18px 0 0 !important;
}

.expand-worksheet-hdr-list .expand-worksheet-hdr-list-item {
  float: left;
  color: #2a3036;
  font-weight: bold;
  font-size: 15px;
  padding: 10px 5px;
  position: relative;
}

.expand-worksheet-hdr-list .expand-worksheet-hdr-list-item:nth-child(1) span {
  display: inline-block;
  /*margin-left:25px;*/
}

.expand-worksheet-hdr-list .expand-worksheet-hdr-list-item:nth-child(1) {
  width: 23%;
}

.expand-worksheet-hdr-list .expand-worksheet-hdr-list-item:nth-child(2) {
  width: 10%;
}

.expand-worksheet-hdr-list .expand-worksheet-hdr-list-item:nth-child(3) {
  width: 9.2%;
}

.expand-worksheet-hdr-list .expand-worksheet-hdr-list-item:nth-child(4) {
  width: 12%;
}

.expand-worksheet-hdr-list .expand-worksheet-hdr-list-item:nth-child(5) {
  width: 12%;
}

.expand-worksheet-hdr-list .expand-worksheet-hdr-list-item:nth-child(6) {
  width: 10%;
}

.expand-worksheet-hdr-list .expand-worksheet-hdr-list-item:nth-child(7) {
  width: 13%;
}

.expand-worksheet-hdr-list.workstreamlist-active .expand-worksheet-hdr-list-item:nth-child(1) {
  width: 28%;
}

.expand-worksheet-hdr-list.workstreamlist-active .expand-worksheet-hdr-list-item:nth-child(2) {
  width: 12%;
}

.expand-worksheet-hdr-list.workstreamlist-active .expand-worksheet-hdr-list-item:nth-child(3) {
  width: 10.2%;
}

.expand-worksheet-hdr-list.workstreamlist-active .expand-worksheet-hdr-list-item:nth-child(4) {
  width: 13%;
}

.expand-worksheet-hdr-list.workstreamlist-active .expand-worksheet-hdr-list-item:nth-child(5) {
  width: 14%
}

.expand-worksheet-hdr-list.workstreamlist-active .expand-worksheet-hdr-list-item:nth-child(6) {
  width: 10%;
}

.expanded-workstream .kat-workstream__task {
  padding: 0;
}

.extended-workstream-task-view {
  padding: 20px 5px 15px 25px;
}

.extended-workstream-task-view-list-items {
  float: left;
  /*padding:0 10px;*/
  position: relative;
}

.extended-workstream-task-view-list-items:nth-child(1) span {
  color: #2a3036;
  font-size: 16px;
  font-weight: 500;
}

.extended-workstream-task-view-list .extended-workstream-task-view-list-items:nth-child(1) {
  width: 23%;
  /* padding: 0 10px 0 0;*/
}

.extended-workstream-task-view-list .extended-workstream-task-view-list-items:nth-child(2) {
  width: 10.4%;
}

.extended-workstream-task-view-list .extended-workstream-task-view-list-items:nth-child(3) {
  width: 9.2%;
}

.extended-workstream-task-view-list .extended-workstream-task-view-list-items:nth-child(4) {
  width: 11.4%;
}

.extended-workstream-task-view-list .extended-workstream-task-view-list-items:nth-child(5) {
  width: 12.5%;
}

.extended-workstream-task-view-list .extended-workstream-task-view-list-items:nth-child(6) {
  width: 10%;
  padding-right: 0;
}

.extended-workstream-task-view-list .extended-workstream-task-view-list-items:nth-child(7) {
  padding-right: 0;
}

.extended-workstream-task-view-list.workstreamlist-active .extended-workstream-task-view-list-items:nth-child(1) {
  width: 28%;
  padding: 0 10px 0 0;
}

.extended-workstream-task-view-list.workstreamlist-active .extended-workstream-task-view-list-items:nth-child(2) {
  width: 12.4%;
}

.extended-workstream-task-view-list.workstreamlist-active .extended-workstream-task-view-list-items:nth-child(3) {
  width: 10.2%;
}

.extended-workstream-task-view-list.workstreamlist-active .extended-workstream-task-view-list-items:nth-child(4) {
  width: 13%;
}

.extended-workstream-task-view-list.workstreamlist-active .extended-workstream-task-view-list-items:nth-child(5) {
  width: 14.5%;
}

.extended-workstream-task-view-list.workstreamlist-active .extended-workstream-task-view-list-items:nth-child(6) {
  width: 14%;
  padding-right: 0;
}

.extended-workstream-task-view-list.workstreamlist-active .extended-workstream-task-view-list-items:nth-child(7) {
  padding-right: 0;
}

.expand-workstream .workstream-list-wrapper {
  background: #eaedf4;
  border-right: 1px solid #e3e6ec;
  cursor: pointer;
}

.expand-workstream .workstream-task-list-wrapper {
  width: 100%;
  background: #f5f6fa;
  padding-left: 20px;
  min-width: 906px;
}

.expand-workstream .workstream-flip-txt {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  transform: rotate(179deg);
  text-align: center;
  top: 61px;
  position: relative;
  left: 17px;
  font-size: 18px;
}

.expand-workstream .flaticon-menu {
  display: inline-block;
  transform: rotate(89deg);
  position: relative;
  top: -114px;
  left: 6px;
}

.kat-card__view-type-wrapper {
  position: absolute;
  right: 50px;
  margin-top: -65px;
}

li.kat-card__view-type__icon {
  background: #242b39;
  height: 35px;
  width: 35px;
  display: inline-block;
  cursor: pointer;
}

li.kat-card__view-type__icon.active span {
  opacity: .8;
  color: #d3d4d7;
}

li:nth-child(2).kat-card__view-type__icon.active span {
  opacity: 1;
}

.kat-card__view-type__icon .list-view {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHRpdGxlPndvcmtzdHJlYW1zPC90aXRsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAuNiwwaDIuOUMzLjgsMCw0LDAuMiw0LDAuNnYxMy45QzQsMTQuOCwzLjgsMTUsMy41LDE1SDAuNkMwLjIsMTUsMCwxNC44LDAsMTQuNFYwLjZDMCwwLjIsMC4yLDAsMC42LDB6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02LjYsMGgyLjlDOS44LDAsMTAsMC4yLDEwLDAuNnYxMy45YzAsMC4zLTAuMiwwLjYtMC42LDAuNkg2LjZDNi4yLDE1LDYsMTQuOCw2LDE0LjRWMC42QzYsMC4yLDYuMiwwLDYuNiwweiIKCS8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMi42LDBoMi45QzE1LjgsMCwxNiwwLjIsMTYsMC42djEzLjljMCwwLjMtMC4yLDAuNi0wLjYsMC42aC0yLjljLTAuMywwLTAuNi0wLjItMC42LTAuNlYwLjYKCUMxMiwwLjIsMTIuMiwwLDEyLjYsMHoiLz4KPC9zdmc+Cg==) no-repeat;
  display: inline-block;
  height: 100%;
  width: 100%;
  opacity: 0.3;
  background-size: 20px;
  background-position: 8px 8px;
}

.kat-card__view-type__icon .tabular-view {
  transform: scaleX(-1);
  display: inline-block;
  margin-left: 5px;
  margin-top: 7px;
  opacity: 0.5;
}

.tabular-view.flaticon-tabular-icon:before {
  position: relative;
  margin-left: 6px;
  font-size: 18px;
}

.expanded-task-collapse-bar {
  padding-bottom: 25px;
}

.workstream-task-list-wrapper .kat-workstream-task-progress-bar-wrapper {
  width: calc(100% - 27px);
  margin-left: 30px;
}

.workstream-task-list-wrapper .kat-workstream__task-icon {
  margin-left: 4px;
  margin-right: 12px;
}

.workstream-list-wrapper-collapsed {
  width: 60px;
  height: 100%;
}

.workstream-list-wrapper-expanded {
  transition: width 1s ease-in-out;
  height: 100%;
  width: 330px;
}

.flaticon-resize-expand, .flaticon-resize-collapse {
  position: absolute;
  right: 31px;
  transform: rotate(90deg);
  top: 2px;
  color: #98a1a9;
  font-weight: normal;
  cursor: pointer;
  display: inline-block;
}

.expanded-task-collapse-bar .priority-card .block-cards-info {
  border: none;
  padding: 0;
  background: transparent;
}

.expanded-task-expended-bar {
  margin-left: 30px;
  padding-bottom: 25px;
}

.workstream-list-wrapper-hdr {
  padding: 15px;
  border-bottom: 1px solid #D9DDE4;
}

.workstream-list-wrapper-hdr-txt {
  font-size: 16px;
  font-weight: bold;
}

.workstream-list-wrapper-hdr .flaticon-arrow-right-1 {
  transform: scaleX(-1);
  display: inline-block;
}

.workstream-list-wrapper-hdr .flaticon-arrow-right-1:before {
  margin-left: 0;
}

.workstream-list-wrapper-body .kat-workstream__task {
  margin: 0 !important;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid #D9DDE4;
}

.workstream-list-wrapper-body .kat-workstream__task.active {
  background: #fff;
}

.expand-workstream .kat-workstream__task {
  background: #fff;
}

.expand-workstream .kat-workstream__task.selected {
  background: #B5E1EE;
}

.expand-workstream .kat-workstream__task.selected .block-cards-info {
  background: transparent;
}

.workstream-list-wrapper-body .kat-workstream__task {
  background: #f5f6fa;
}

.expanded-task-expended-bar .sub-section1 {
  width: calc(100% - 72.9%);
  display: inline-block;
}

.expanded-task-expended-bar .sub-section2 {
  width: calc(100% - 27.1%);
  display: inline-block;
}

.workstream-list-wrapper-body {
  height: calc(100% - 99px);
  overflow: auto;
}

.workstream-list-wrapper-body .kat-workstream__task__foot {
  min-height: 37px;
}

.expand-workstream .block-cards-info .project-priority-card {
  padding: 3px 7px;
  border-radius: 4px;
  color: #fff;
  margin-right: 8px;
  position: relative;
  height: 20px;
  width: 20px;
  font-size: 13px;
}

.extended-workstream-task-view-list-items .flaticon-edit-pen:before {
  color: hsla(223, 8%, 51%, 0.7);
  font-size: 16px;
  margin-left: 0;
}

.extended-workstream-task-view-list-items .flaticon-edit-pen {
  display: none;
}

.extended-workstream-task-view-list-items .task-title {
  max-width: calc(100% - 50px);
  margin-top: -10px;
  padding: 10px;
  color: #2a3036;
  word-wrap: break-word;
  margin-left: -10px;
}

.extended-workstream-task-view-list-items .task-title.edit-mode {
  width: calc(100% - 19px);
  cursor: auto;
}

.extended-workstream-task-view-list-items:hover .flaticon-edit-pen {
  display: inline-block;
}

.extended-workstream-task-view-list-items .bubble {
  padding: 4px 5px;
  border-radius: 3px;
  background: #000;
  color: #fff;
  position: absolute;
  top: 27px;
  font-size: 10px;
  white-space: pre;
  right: 0;
  text-align: center;
  z-index: 2;
}

.extended-workstream-task-view-list-items .bubble-arrow {
  position: absolute;
  width: 0;
  height: 0;
  top: -11px;
  left: initial;
  right: 10px;
  border-style: solid;
  border-width: 6px 5px 5px;
  border-color: #000 rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
  cursor: pointer;
  transform: rotate(180deg);
}

.expand-workstream .taskworkstream-custom-scroll {
  height: calc(100% - 137px);
}

.expand-workstream .kat-workstream__task-icon.check-ico:not(.flaticon-check) {
  margin-top: 0;
}

.expand-worksheet-hdr-list-wrapper {
  position: relative;
}

.kat-task-detail__right-section__content-body-col4 .billable-icon.flaticon-dollar-icon:before {
  font-size: 16px;
}
.kat-task-detail__right-section__content-body-col4 .flaticon-non-billable.non-billable-flaticon:before{
  font-size: 16px;
}

.universal-addtask {
  margin-left: 0;
  padding-bottom: 0;
}

.universal-addtask .kat-task-detail__right-section__content-body__desc {
  border: 1px solid #d6d6d6;
}

.universal-addtask-title {
  padding: 5px;
  width: 99%;
  height: 40px;
  border: none;
}

.universal-addtask-headerwrapper {
  padding: 0 20px 15px 20px;
  border-bottom: 1px solid #d6d6d6;
  position: relative;
  margin-left: -20px;
  width: 103%;
}

.universal-addtask .kat-button, .universal-addtask .kat-default-button {
  font-size: 14px;
  padding: 12px 20px;
}

.expanded-task-expended-bar .flaticon-expand-icon {
  display: inline-block;
}

.expanded-task-expended-bar .flaticon-expand-icon:before {
  font-size: 18px;
  position: relative;
  right: 20px;
}

.kat-task-detail__right-section__content-body-col4 span.billable-txt {
  width: calc(100% - 32px);
}

.expanded-placeholder {
  flex: 0 0 25px;
}

.expanded-task-expended-bar .flaticon-expand-icon {
  display: inline-block;
}

.expanded-task-expended-bar .flaticon-expand-icon:before {
  font-size: 18px;
  position: relative;
  right: 20px;
}

.priority-card .block-cards-info + .bubble {
  display: none;
}

.priority-card .block-cards-info:hover + .bubble {
  display: block;
}

.expanded-task-collapse-bar .workstreamlist-active .priority-card .block-cards-info {
  width: 21px;
  height: 21px;
}

.kat-workstream__task.active .kat-workstream__task__head__text {
  font-weight: bold;
}

.sub-section1 .kat-task-detail__right-section__content-body__desc, .sub-section1 .kat-task-detail__right-section__content-body__desc:hover {
  height: 236px;
  min-height: 236px;
  max-height: 236px;
  padding: 14px 18px;
}

.expanded-task-expended-bar .sub-section2 .task-category-div .kat-task-detail__right-section__content-body-col4 .kat-userlist__dropdown__content-add-dropdown-bottom {
  width: 173px !important;
}

.workstream-task-list-wrapper .date-separator-wrapper .no-data {
  left: calc(100% - 56%);
}

.expanded-task-expended-bar .sub-section2 .kat-task-details-action-status-btn {
  margin: 0;
  width: 100%;
  font-size: 13px;
  padding: 8px 30px 8px 10px;
}

.expanded-task-expended-bar .sub-section2 .kat-task-details-action-status-btn span:first-child {
  float: left;
}

.expanded-task-expended-bar .sub-section2 .kat-task-details-action-status-btn .drop-arrow {
  position: absolute;
  left: calc(100% - 20px);
  margin-top: 1px;
}

.expanded-task-expended-bar .sub-section2 .kat-task-details-action-status-btn .kat-task-detail__right-section__header__toolbar__dropdown.pos-bottom {
  left: 0;
  top: 32px;
  min-width: 167px;
}

.expand-worksheet-hdr-list {
  margin-left: 49px;
}

input.universal-addtask-title::-webkit-input-placeholder {
  color: #94989E;
  font-size: 14px;
}

input.universal-addtask-title {
  font-size: 14px;
}

.workstream-flip-txt-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 35%;
  margin-top: calc(100% - -10vh);
}

.copytoclipboard-icon {
  background: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHdpZHRoPSI4OTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggc3R5bGU9ImZpbGw6Izk0OTg5RTsiIGQ9Ik0xMjggNzY4aDI1NnY2NEgxMjh2LTY0eiBtMzIwLTM4NEgxMjh2NjRoMzIwdi02NHogbTEyOCAxOTJWNDQ4TDM4NCA2NDBsMTkyIDE5MlY3MDRoMzIwVjU3Nkg1NzZ6IG0tMjg4LTY0SDEyOHY2NGgxNjB2LTY0ek0xMjggNzA0aDE2MHYtNjRIMTI4djY0eiBtNTc2IDY0aDY0djEyOGMtMSAxOC03IDMzLTE5IDQ1cy0yNyAxOC00NSAxOUg2NGMtMzUgMC02NC0yOS02NC02NFYxOTJjMC0zNSAyOS02NCA2NC02NGgxOTJDMjU2IDU3IDMxMyAwIDM4NCAwczEyOCA1NyAxMjggMTI4aDE5MmMzNSAwIDY0IDI5IDY0IDY0djMyMGgtNjRWMzIwSDY0djU3Nmg2NDBWNzY4ek0xMjggMjU2aDUxMmMwLTM1LTI5LTY0LTY0LTY0aC02NGMtMzUgMC02NC0yOS02NC02NHMtMjktNjQtNjQtNjQtNjQgMjktNjQgNjQtMjkgNjQtNjQgNjRoLTY0Yy0zNSAwLTY0IDI5LTY0IDY0eiIgLz4KPC9zdmc+Cg==) no-repeat;
  height: 22px;
  width: 21px;
  opacity: 0.7;
  top: 1px;
  left: 10px;
  position: relative;
  background-size: 20px;
  display: inline-block;
}

.copytoclipboardbubble-wrapper {
  position: absolute;
  top: 120%;
  right: 0;
  z-index: 100;
  width: 370px;
  padding: 10px;
  margin-top: 2px;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 4px;
  box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);
}

.copytoclipboardbubble-wrapper::before {
  border: 8px solid transparent;
  border-bottom-color: rgba(27, 31, 35, 0.15);
  position: absolute;
  display: inline-block;
  content: "";
  top: -16px;
  right: 20px;
}

.copytoclipboardbubble-wrapper::after {
  border: 7px solid transparent;
  border-bottom-color: #fff;
  position: absolute;
  display: inline-block;
  content: "";
  top: -14px;
  right: 21px;
}
.copytoclipboardbubble-wrapper.top{
  top:-311%;
}
.copytoclipboardbubble-wrapper.top::before{
  top:57px;
  border-top-color: rgba(27, 31, 35, 0.15);
  border-bottom-color: transparent;

}
.copytoclipboardbubble-wrapper.top::after{
  top:57px;
  border-top-color: #fff;
  border-bottom-color: transparent;

}
.copytoclipboard-wrapper {
  position: relative;
}

.copytoclipboard-wrapper.flaticon-share-link:before {
  margin-right: 20px;
  font-size: 19px;
}

.sharelink-input {
  position: relative;
  min-height: 37px;
  float: left;
  width: 295px;
  font-size: 12px;
  line-height: 20px;
  color: #24292e;
  padding: 6px 8px 6px 8px;
  vertical-align: middle;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: right 8px center;
  border: 1px solid #d1d5da;
  border-radius: 3px 0 0 3px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
  overflow: hidden;
}

.copytoclipboard-icon-wrapper {
  vertical-align: middle;
  border: 1px solid rgba(27, 31, 35, 0.2);
  border-radius: 0 3px 3px 0;
  background-color: #eff3f6;
  padding: 5px;
  float: left;
  width: 44px;
  position: absolute;
  right: 20px;
  top: 10px;
  height: 37px;
}

.copytoclipboard-icon-wrapper:hover {
  background-color: #e6ebf1;
}

.clipboard-selected-txt {
  background: #84b4eb;
  color: #fff;
  white-space: nowrap;
}

.copytoclipboard-icon-wrapper button {
  padding: 0;
  margin: 0;
  position: relative;
  top: 1px;
  left: -2px;
}

.task-area-top {
  width: 103%;
  height: 104px;
  background: #EAEDF4;
  position: relative;
  left: -3px;
  right: 0;
  bottom: 4px;
}

.task-area-bottom {
  width: 103%;
  height: 104px;
  background: #EAEDF4;
  position: relative;
  left: -3px;
  right: 0;
  bottom: 0;
}

.kat-workstream__task.hovered-workstream {
  box-shadow: 1px 2px 3px rgba(30, 34, 38, 0.15) !important;
}

.filter-dropdown-wrapper {
  border-bottom: 1px solid #D9DDE4;
  margin-left: 10px;
  padding-bottom: 5px;
  margin-right: 20px;
  position: relative;
}

.filter-dropdown-wrapper-txt {
  display: inline-block;
  margin-left: 10px;
}

.filter-dropdown-wrapper .flaticon-calendar-icon:before {
  font-size: 12px;
  margin-left: 0;
}

.filter-dropdown-wrapper .kat-workstream_head-drop-arrow {
  top: 5px;
}

.filter-dropdown-wrapper.project-wrapper {
  width: 190px;
  cursor: pointer;
}

.filter-dropdown-wrapper.project-wrapper .filter-dropdown-wrapper-txt {
  display: inline-block;
  width: 155px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.filter-dropdown-wrapper .card-popover-bubble {
  background: #000;
  padding: 8px;
  position: absolute;
  border-radius: 3px;
  min-height: 31px;
  line-height: 1.4;
  z-index: 20;
}

.filter-dropdown-wrapper .card-popover-bubble.bottom {
  right: 32%;
  margin-top: 15px;
}

.filter-dropdown-wrapper .card-popover-bubble.bottom .bubble-drop-arrow {
  position: absolute;
  width: 0;
  height: 0;
  top: -12px;
  right: 43%;
  border-style: solid;
  transform: rotate(-182deg);
  border-width: 7px 6px 6px 6px;
  border-color: #000 rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
}

.filter-dropdown-wrapper .card-popover-bubble.top {
  bottom: 8px;
}

.filter-dropdown-wrapper .card-popover-bubble.top .drop-arrow {
  position: absolute;
  width: 0;
  height: 0;
  bottom: -13px;
  left: 28px;
  border-style: solid;
  border-width: 7px 6px 6px 6px;
  border-color: #000 rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
}

.filter-dropdown-wrapper .card-popover-bubble .primary-txt {
  font-size: 11px;
  color: #fff;
}

.filter-dropdown-wrapper .flaticon-cross-icon:before {
  margin-left: 0;
  font-size: 9px;
  position: relative;
  top: -1px;
  right: -4px;
}

.toggle-button-wrapper {
  border: 1px solid #D9DDE4;
  border-radius: 6px;
  width: 105px;
  padding: 6px;
  background: #fff;
  text-align: center;
  margin-top: -5px;
  margin-right: 10px;
  margin-left: 10px;
  cursor: pointer;
}

.toggle-button-wrapper.active {
  color: #fff;
  background: #2bbee8;
  border: 1px solid #2bbee8;
}

.project-wrapper .kat-task-detail__right-section__header__toolbar__dropdown.pos-bottom {
  top: 22px;
}

.project-wrapper .kat-task-detail__right-section__header__toolbar__dropdown.secondary-dropdown {
  left: 0;
}

.project-wrapper .kat-task-detail__right-section__header__toolbar__dropdown.pos-bottom ul li a.kat-task-bar__menu__element__dropdown__list__item__link {
  padding: 0;
}

.kat-workstream__task.hovered-workstream {
  /*  box-shadow: inset 1px 1px 3px 0 #24c8f3 !important;*/
  background: rgba(36, 200, 243, 0.1) !important;
}

.kat-workstream__head .kat-task-details-action-status-btn.due-filter {
  position: relative;
  top: -7px;
  margin-right: 15px;
  margin-top: 0;
}

.kat-workstream__head .kat-task-details-action-status-btn.due-filter .kat-task-bar__menu__element__dropdown__list__item:hover a.kat-task-bar__menu__element__dropdown__list__item__link {
  color: #1F2532;
}

.expanded-task-expended-bar .kat-task-detail__right-section__content-body-col4 .block-cards-heading-link span.label-txt {
  width: 87%;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
}

.expanded-task-expended-bar .kat-task-detail__right-section__content-body-col4 .block-cards-heading-link {
  width: 45%;
}

.sub-section2 .block-cards-info .card-info.project-name {
  width: calc(100% - 87px);
}

.sub-section2 .block-cards-info .kat-task-detail__right-section__bottom-bar__watcher {
  margin-left: 0 !important;
}

.sub-section2 .block-cards-info .kat-userlist__dropdown__list__text {
  width: calc(100% - 87px);
}

.sub-section2 .kat-task-detail__right-section__content-body-col4-wrapper .kat-task-detail__right-section__content-body-col4 .card-info-wrapper .timepicker-without-calendar {
  left: calc(100% - 237px);
}.simple-tab-row-wrapper{
  padding: 0 20px 20px 20px;
  border-bottom: 1px solid #f0f0f1;
}
.kat-task-detail__right-section__content-body-col3 .kat-task-detail_right-section-calendar-wrapper {
  right: auto;
  left: 1px;
}

.kat-task-detail__right-section__content-body-col3 .block-cards-heading {
  font-size: 10px;
}

.kat-task-detail__right-section__content-body-col3 .block-cards-heading-link {
  cursor: pointer;
  color: #35C1E9;
  position: relative;
  font-size: 9px;
}

.kat-task-detail__right-section__content-body-col3 .avatar-image-small {
  border: 1px solid black;
  height: 23px;
  width: 23px;
  border-radius: 50%;
  margin: 0 6px 0 0;
  position: relative;
  top: 0;
}
.block-cards-heading {
  margin-bottom: 7px;
  text-align: left;
  font-size: 10px;
}

.block-cards-info {
  border: 1px solid #e3e5ea;
  border-radius: 5px;
  padding: 8px;
  width: calc(100% - 0px);
  height: 33px;
  overflow: hidden;
  background: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
}

.block-cards-info .project-card {
  padding: 4px 5px;
  border-radius: 4px;
  background: #29CD7A;
  color: #fff;
  position: relative;
  left: -3px;
  top: -3px;
  margin-right: 5px;
  /* min-width: 30px; */
  min-width: 25px;
  text-align: center;
}

.block-cards-info.block-card-inactive {
  cursor: default;
  background: #f1f3f9;
  pointer-events: none;
}

.block-cards-info .project-priority-card {
  padding: 3px 5px;
  border-radius: 4px;
  color: #fff;
  margin-right: 8px;
  position: relative;
  height: 22px;
  width: 23px;
  font-size: 14px;
}

.block-cards-info .project-priority-card.green {
  background: #AEDD30;
}

.block-cards-info .card-info, .block-cards-info .card-effort-info, .block-cards-info .kat-userlist__dropdown__list__text {
  color: #313845;
  margin-top: 2px;
  width: calc(100% - 25%);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  /* display: inline-block; */
  float: left;
  font-size: 12px;
  /* top: 1px; */
}

.block-cards-info .kat-userlist__dropdown__list__text {
  width: calc(100% - 56%);
}

.block-cards-info .card-info.project-name {
  width: calc(100% - 50%);
}

.block-cards-info.assignee-div-card-info {
  width: calc(100% - 41px);
}

.block-cards-info .card-info-more {
  margin-left: 5px;
  color: #242B39;
  font-weight: 800;
  margin-top: 2px;
}

.block-cards-info .card-info-full {
  width: calc(100% - 34px);
}

.block-cards-info .card-effort-info {
  width: calc(100% - 124px);
  margin-left: 15px;
}

.block-cards-info .add-card-info {
  display: inline-block;
  border-radius: 50%;
  width: 17px;
  height: 18px;
  color: #fff;
  margin-top: -1px;
  background: #C8CCD5;
  margin-left: 10px;
  line-height: 19px;
  position: relative;
}

.block-cards-info .add-card-info span {
  position: absolute;
  top: -1px;
  left: 27%;
}

.block-cards-info .flaticon-calendar-icon:before, .block-cards-info .flaticon-clock-1:before, .block-cards-info .flaticon-hourglass:before {
  margin-left: 0;
  margin-right: 10px;
  font-size: 13px;
}

.kat-task-detail__right-section__content-body-col2 {
  width: calc(100% / 2);
  padding: 0 10px;
  text-align: center;
}

.kat-task-detail__right-section__content-body-col2 .billable-wrapper {
  margin-right: 20px;
}

.kat-task-detail__right-section__content-body-col2 .billable-icon.flaticon-dollar-icon:before {
  font-size: 18px;
  font-weight: 600;
  margin-right: 1px;
  position:relative;
  top:-3px;
}

.kat-task-detail__right-section__content-body-col2 .billable-wrapper span.billable-txt, .kat-task-detail__right-section__content-body-col2 .billable-wrapper span.non-billable-txt {
  font-size: 15px;
  top: -2px;
}

.kat-task-detail__right-section__content-body-col2 .billable-wrapper span.non-billable-txt {
  top: -9px;
}

.kat-task-detail__right-section__content-body-col2 .billable-wrapper.active span.non-billable-txt {
  top: -16px;
}

.kat-task-detail__right-section__content-body-col2 .billable-wrapper.active .non-billable-icon {
  margin-top: 2px;
  margin-right: -7px;
  background-size: 18px !important;
}

.kat-task-detail__right-section__content-body-col2 .non-billable-icon {
  margin-top: -5px;
  margin-right: -7px;
  background-size: 18px;
}

.kat-task-detail__right-section__content-body-col2 .card-info-wrapper {
  margin-right:0;
  width: 100%;
  position:relative;
}
.kat-task-detail__right-section__content-body-col2 .block-cards-heading-link {
  cursor: pointer;
  color: #35C1E9;
  position: relative;
  font-size: 10px;
}
.kat-task-detail__right-section__content-body-col2 .billable-txt {
  padding-top:1px;
}
.kat-task-detail__right-section__content-body-col3 {
  width: calc(100% / 3);
  padding: 0 10px;
  text-align: center;
}

.kat-task-detail__right-section__content-body-col4 {
  width: calc(100% / 4);
  padding: 0 10px;
  text-align: center;
}

.kat-task-detail__right-section__content-body-col4 .card-info-wrapper {
  width: 100%;
  margin-right: 5px;
  position: relative;
}

.kat-task-detail__right-section__content-body-col4 .avatar-image-small {
  width: 23px;
  height: 23px;
  margin: 0;
}

.kat-task-detail__right-section__content-body-col4 .block-cards-heading-link {
  cursor: pointer;
  color: #35C1E9;
  position: relative;
  font-size: 12px;
}

.due-date-wrapper .kat-task-detail__right-section__content-body-col4 .card-info-wrapper .DayPicker.DayPicker--en {
  margin-left: -117px;
  margin-right: 15px;
}
.card-info-wrapper {
  margin-top: 20px;
  margin-right: 30px;
}
.kat-task-detail__right-section__content-body-col3 .card-info-wrapper {
  margin-right: 0;
  width: 100%;
  position: relative;
}
.card-info-wrapper .DayPicker.DayPicker--en {
  margin-right: -15px;
  margin-left: 0;
  right:15px;
}

.card-info-wrapper .hierarchical-sublist-wrapper-child {
  margin-left: calc(100% + -1px) !important;
}
.kat-task-detail__right-section__header__toolbar__status__effort__title {
  font-size: 12px;
  font-weight: 600;
  color: #222937;
  margin-top: 1px;
}

.kat-task-detail__right-section__header__toolbar__status__effort__indicatior {
  width: 19px;
  background: #E3E5EA;
  float: left;
  cursor: pointer;
  height: 19px;
  border-radius: 4px;
  margin-right: 3px;
  margin-top: -2px;
}

.kat-task-detail__right-section__header__toolbar__status__effort__indicatior__list {
  margin-left: 0;
  margin-top: 0;
}

.kat-task-detail__right-section__header__toolbar__status__effort__indicatior.effort-1:hover, .kat-task-detail__right-section__header__toolbar__status__effort__indicatior.effort-1.active {
  background: #58aa1a;
}

.kat-task-detail__right-section__header__toolbar__status__effort__indicatior.effort-2:hover, .kat-task-detail__right-section__header__toolbar__status__effort__indicatior.effort-2.active {
  background: #99cf1c;
}

.kat-task-detail__right-section__header__toolbar__status__effort__indicatior.effort-3:hover, .kat-task-detail__right-section__header__toolbar__status__effort__indicatior.effort-3.active {
  background: #ffb526;
}

.kat-task-detail__right-section__header__toolbar__status__effort__indicatior.effort-4:hover, .kat-task-detail__right-section__header__toolbar__status__effort__indicatior.effort-4.active {
  background: #ff7800;
}

.kat-task-detail__right-section__header__toolbar__status__effort__indicatior.effort-5:hover, .kat-task-detail__right-section__header__toolbar__status__effort__indicatior.effort-5.active {
  background: #E42F2F;
}

.kat-task-detail__right-section__header__toolbar__status__effort__indicatior:last-child {
  margin-right: 0;
}
.kat-task-detail__right-section__content-body-col3-wrapper .hierarchical-list-mainwrapper.bottom {
  top: 58px;
}

.kat-task-detail__right-section__content-body-col3 .billable-icon.flaticon-dollar-icon:before {
  font-size: 18px;
}
.timepicker-without-calendar .timepicker-wrapper {
  margin-left: 10px;
}

.project-card .hierarchical-list-mainwrapper.bottom {
  top: 59px;
  left: 28px;
}

.kat-userlist__dropdown__list .kat-profile-thumbnail__alphabet {
  font-size: 14px;
  margin: 0 6px;
}

.cursor-pointer {
  cursor: pointer;
}

.kat-task-detail__right-section__content-body-col3-wrapper {
  padding: 0 20px 0 20px;
}


.kat-task-detail__right-section__content-body-col3 .billable-wrapper span.billable-txt, .kat-task-detail__right-section__content-body-col3 .billable-wrapper span.non-billable-txt {
  font-size: 15px;
  margin-right: 10px;
  width: 51%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-align: left;
  position: relative;
  margin-top: 8px;
}

.kat-task-detail__right-section__content-body-col3 .billable-wrapper span.non-billable-txt {
  top: -6px;
  margin-right: 0;
  width: 79%;
}

.kat-task-detail__right-section__content-body-col3 .billable-wrapper.active .non-billable-icon {
  margin-top: 2px;
  margin-right: -7px;
  background-size: 18px !important;
}

.kat-task-detail__right-section__content-body-col3 .non-billable-icon {
  margin-top: -5px;
  margin-right: -7px;
  background-size: 18px;
  float: left;
}


.block-cards-info-txt-wrapper {
  margin-left: 5px;
}

.primary-txt, .kat-userlist__dropdown__list__text {
  font-size: 13px;
  color: #242B39;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.secondary-txt, .kat-userlist__dropdown__list__text_email {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  top: -8px;
}

/* .billable-icon { margin-top:2px; display:inline-block; margin-right:10px;
} */

.billable-icon.flaticon-dollar-icon:before {
  margin-left: 0 !important;
  margin-right: 0;
  font-size: 30px;
  cursor: pointer;
}

.billable-card-wrapper .block-cards-info-txt-wrapper {
  float: left;
  position: relative;
  top: -2px;
}

.non-billable-icon {
  margin-top: 1px;
  display: inline-block;
  margin-right: 5px;
  background: url("/src/images/non-billable-grey.svg") no-repeat;
  height: 32px;
  width: 32px;
  background-position: 0;
  background-size: 30px;
  cursor: pointer;
}

.billable-wrapper span.billable-txt, .billable-wrapper span.non-billable-txt {
  position: relative;
  top: -5px;
  cursor: pointer;
  font-size: 20px;
}

.billable-wrapper.active .non-billable-icon {
  background: url("/src/images/non-billable-active.svg") no-repeat;
}

.billable-wrapper.active span.billable-txt {
  color: #64B02A;
}

.billable-wrapper.active .flaticon-dollar-icon {
  color: #64B02A;
}

.billable-wrapper.active .non-billable-txt {
  color: #1f2532;
}

.disable-overlay, .disable-overlay-grey {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.disable-overlay-grey {
  background: #f4f4f7;
  opacity: 0.5;
  cursor: default;
}

.button-disable {
  background: #f4f4f7 !important;
  cursor: default !important;
}

.button-disable > span {
  color: #bfb9b9;
  cursor: default !important;
}

.avatar-image-small {
  border: 1px solid black;
  height: 23px;
  width: 23px;
  border-radius: 50%;
}

.billable-wrapper {
  width: 49%;
}

.kat-task-detail__right-section__content-body-col__wrapper {
  padding-bottom: 20px;
  border-bottom: 1px solid #e3e5ea;
}

.quadrant-display-wrapper {
  position: absolute;
  text-align: left;
  background: #fff;
  z-index: 999;
  box-shadow: 0 0 8px rgba(67, 65, 90, 0.42);
  color: grey;
  -webkit-animation: dropdownEntry 0.16s ease-in-out;
          animation: dropdownEntry 0.16s ease-in-out;
  transform-origin: top center;
  left: 32px;
  width: calc(100% - 17px);
  overflow: hidden;
  line-height: normal;
  top: 58px;
  margin-left: -23px;
}

.quadrant-display-wrapper ul li {
  padding: 15px 10px;
  float: left;
  width: calc(100% / 2);
  border-bottom: 1px solid #e3e5ea;
  text-align: center;
  cursor: pointer;
}

.quadrant-display-wrapper ul li .quadrant-number {
  font-size: 35px;
  color: #fff;
}

.quadrant-display-wrapper ul li .primary-txt, .quadrant-display-wrapper ul li .kat-userlist__dropdown__list__text {
  font-weight: normal;
  font-size: 12px;
  color: #fff;
}

.quadrant-display-wrapper ul li:nth-child(odd) {
  border-right: 1px solid #e3e5ea;
}

.priority-card .kat-task-detail__right-section__header__toolbar__dropdown {
  top: 58px;
}

.priority-card .kat-task-detail__right-section__header__toolbar__dropdown .priority-number {
  color: #fff;
  padding: 5px 5px;
  display: inline-block;
  border-radius: 3px;
  font-size: 11px;
  margin-top: 3px;
  width: 20px;
  height: 21px;
}
.task-category-div .kat-userlist__dropdown__list__text {
  margin-left: 8px;
  margin-top: 5px;
  display: inline-block;
}

.task-category-div .block-cards-info .category-colorcode {
  margin-right: 7px;
  margin-top: 7px;
  float: left;
}

.task-category-div .card-info-full {
  width: calc(100% - 17px);
}

.task-category-div .kat-userlist__dropdown__items_icon {
  margin-top: 0;
}

.task-category-div ul.kat-userlist__dropdown__list {
  max-height: 187px;
}

.task-category-div ul.kat-userlist__dropdown__list li {
  padding: 10px 15px 10px 15px;
}

.task-category-div ul.kat-userlist__dropdown__list li:hover {
  background: #f5f8fd;
}

.task-category-div ul.kat-userlist__dropdown__list li:hover .kat-userlist__dropdown__list__text {
  font-weight: bold;
}

.due-date-wrapper .kat-task-detail_right-section-calendar-wrapper {
  right: auto;
  left: 2px;
}
ul.kat-task-detail__right-section__header__toolbar__dropdown__list {
  background: #fff;
  max-height: 230px;
  overflow: auto;
}

.kat-task-detail__right-section__header__toolbar__dropdown.r-pos-0 {
  right: -12px;
  left: auto;
}

ul.kat-task-detail__right-section__header__toolbar__dropdown__list li {
  padding: 10px 25px;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-top: 1px solid transparent;
  overflow: hidden;
  border-bottom: 1px solid transparent;
  min-height: 36px;
}

ul.kat-task-detail__right-section__header__toolbar__dropdown__list li:hover .kat-dropdown__more-ico {
  transform: translateX(0px);
}

.kat-task-detail__right-section__header__toolbar__dropdown:not(.secondary-dropdown) ul.kat-task-detail__right-section__header__toolbar__dropdown__list li.selected {
  color: #202736;
}

.kat-task-detail__right-section__header__toolbar__dropdown {
  position: absolute;
  text-align: left;
  width: 100%;
  background: #fff;
  z-index: 98;
  box-shadow: 0 0 8px rgba(67, 65, 90, 0.42);
  color: grey;
  -webkit-animation: dropdownEntry 0.16s ease-in-out;
          animation: dropdownEntry 0.16s ease-in-out;
  transform-origin: top center;
  top: 0;
  left: 0;
  min-width: 195px;
  overflow: hidden;
  line-height: normal;
}

.kat-task-detail__right-section__header__toolbar__dropdown.secondary-dropdown {
  left: 7vw;
}

.kat-task-detail__right-section {
  width: calc(100% - 747px);
  height: 100%;
  border-left: 1px solid #CCD1DA;
  position: relative;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}
.block-cards-info .kat-task-detail__right-section__bottom-bar__watcher, .block-cards-info .kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  width: 23px;
  height: 23px;
  margin-left: 0;
  margin-right: 10px;
  margin-top: -4px;
  font-size: 13px;
  line-height: 24px;
}

.kat-task-detail__right-section__bottom-bar__watcher, .kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  width: 23px;
  height: 23px;
  float: left;
  font-size: 12px;
  border-radius: 50%;
  margin-left: 8px !important;
  background: #242B39;
  /* display: inline-block; */
  position: relative;
  margin-right: 0;
  color: #fff;
  font-weight: 700;
  line-height: 25px;
  text-align: center;
}
.profile-img {
  width: 30px;
  height: 30px;
  line-height: 30px;
  position: relative;
  display: inline-block;
  bottom: 5px;
}
.approved{
  background-color: #5ABD50;
}

.rejected {
  background-color: #ff0000;
}

.onHold{
  background-color: #ffb526;
}
.profile-img .tooltiptext {
  display: none;
  width: auto;
  height: 30px;
  background-color: #222222;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 0px 4px;
  position: absolute;
  z-index: 1;
  white-space: nowrap
}

.profile-img:hover .tooltiptext{ 
  display: block;
  top: 30px;
  left: 10px;
}
.avatar-table{
  position: absolute;
}
.avatar-leave-table{
  height: 30px;
  width: 30px;
  border-radius: 50%;
  margin: 0 6px 0 0;
  position: relative;
  top: 0;
}

.kat-task-detail__right-section__bottom-bar__watchers__wrapper {
  margin-top: 7px;
}

.kat-task-detail__right-section__bottom-bar__watchers__wrapper.myday {
  margin: 10px 16px 0 16px;
}

.kat-hidden-items-notif.myday {
  margin: 0 0 0 10px;
  width: 26px;
  height: 31px;
  padding-top: 4px;
  cursor: pointer;
}

.kat-task-detail__right-section__bottom-bar__watcher.add, .add.kat-task-detail__right-section__header__toolbar__dropdown__list__img {
  border: 1px dashed #5C6068;
  background: none;
  width: 27px;
  height: 27px;
}

.kat-task-detail__right-section__bottom-bar__watchers__title {
  margin-top: 5px;
}
.kat-task-detail__right-section__content-body__desc {
  color: #202736;
  padding: 10px 18px;
  border: 1px solid transparent;
  line-height: 24px;
  min-height: 100px;
  max-height: 100px;
  overflow: auto;
  font-size:13px;
}
.kat-task-detail__description {
  margin: 20px 30px 0 30px;
}

.kat-task-detail__description .public-DraftEditor-content {
  height: 100px;
}
.kat-task-detail__right-section__content-body__desc ul li {
  list-style-type: initial;
}

.kat-task-detail__right-section__content-body__desc ol li {
  list-style-type: inherit;
}

.kat-task-detail__right-section__content-body__desc:hover {
  border: 1px solid #d6d6d6;
  border-radius: 3px;
  padding: 10px 18px;
}

.kat-task-detail__right-section__content-body__desc.edit-mode {
  padding: 10px 18px;
}

.kat-task-detail__right-section__content-body__desc ~ .kat-task-detail__left-section__checklist__card__add-options {
  margin-bottom: 12px;
  margin-left: 30px;
}

div.edit-mode {
  border: 1px solid #D6D6D6;
  margin: 10px;
}

.timepicker-without-calendar {
  width: 208px;
  position: absolute;
  box-shadow: rgba(67, 65, 90, 0.41961) 0 0 8px;
  padding: 15px 0;
  z-index: 20;
  height: auto;
  left: -8px;
  right: calc(100% - 261px);
  overflow: hidden;
  background: white;
  margin-bottom: 20px;
  cursor: default;
}
.teamReport{
  top: 40px !important;
  height: -webkit-fit-content !important;
  height: -moz-fit-content !important;
  height: fit-content !important;
}
.teamReport_top{
  top: 6px;
}
.kat-workstream__task {
  background: #fff;
  border-radius: 3px;
  margin: 10px 10px 0;
  box-shadow: 1px 2px 3px rgba(30, 34, 38, 0.15);
  position: relative;
  transition: .2s all ease-in;
  cursor: pointer;
  width: 314px;
}

.kat-workstream__task.completed-task {
  background: rgba(255, 255, 255, 0.5) !important;
}
.kat-workstream__task.overdue{
  /*background: #e64e50 !important;*/
  box-shadow: inset 3px 0 0 #e64e50;
  -webkit-box-shadow: inset 3px 0 0 #e64e50;
}
.kat-workstream__task.overdue.selected{
  border:2px solid #2DBEE8;
  box-shadow: inset 0 0 5px #2DBEE8, inset 2px 0 0 #e64e50;
}
/*.kat-workstream__task.overdue span.kat-workstream__task__head__text,.kat-workstream__task.overdue .more-assigned,.kat-workstream__task.overdue .kat-workstream__task__foot__text,.kat-workstream__task.overdue span.kat-workstream__task__head__time,.kat-workstream__task.overdue .kat-workstream__task__foot__summary__time{
  color:#fff !important;
}*/
.kat-workstream__task.shadow-none {
  box-shadow: 2px -2px 3px rgba(0, 0, 0, 0.15);
}

.kat-workstream__task.dragging .kat-workstream__task__left-control, .kat-workstream__task.dragging .kat-workstream__task__right-control, .kat-workstream__task.dragging:hover .kat-workstream__task__left-control, .kat-workstream__task.dragging:hover .kat-workstream__task__right-control {
  display: none !important;
  opacity: 0 !important;
}

.drag-down {
  margin-top: 150px !important;
}

.drag-down {
  transition: margin-top 0.2s ease-in-out;
}

.drag-up {
  margin-bottom: 150px !important;
}

.drag-up {
  transition: margin-bottom 0.2s ease-in-out;
}

@-webkit-keyframes taskEntry {
  from {
    transform: translateY(60px) scale(0.9);
    opacity: 0.5;
  }
  to {
    transform: translateY(0px) scale(1);
    opacity: 1;
  }
}

@keyframes taskEntry {
  from {
    transform: translateY(60px) scale(0.9);
    opacity: 0.5;
  }
  to {
    transform: translateY(0px) scale(1);
    opacity: 1;
  }
}

.kat-workstream__task.selected {
  background: #B5E1EE;
  box-shadow: inset 0 0 5x #2DBEE8;
}

.kat-workstream__task.selected .kat-workstream__task__foot {
  border-top: none !important;
}

.kat-workstream__task__foot .kat-task-detail__right-section__content-body-col__content-add-dropdown {
  top: 38px;
}

.kat-workstream__task {
  margin: 10px 18px 0 !important;
  padding: 3px 3px 0 3px;
}

.kat-workstream__task:hover .kat-workstream__task__left-control, .kat-workstream__task:hover .kat-workstream__task__right-control {
  opacity: 1;
  transform: translate(0);
  display: block;
}

.kat-workstream__task__head {
  padding: 12px 16px 12px 16px;
  min-height: 62px;
}

span.kat-workstream__task__head__text {
  float: left;
  color: #2a3036 !important;
  overflow-wrap: break-word;
  width: 100%;
}

span.kat-workstream__task__head__time {
  font-size: 12px;
  color: #2a3036;
  font-weight: 400;
  margin-bottom: 5px;
}

.kat-workstream__task__foot {
  padding: 8px 8px 10px 16px !important;
  border-top: none !important;
  cursor: default;
}

.kat-workstream__task__foot__summary {
  position: absolute;
  right: 0;
  width: 147px;
}

.kat-workstream__task__foot__summary-right-wrapper {
  float: right;
}

.kat-workstream__task__foot__summary-right-wrapper .kat-profile-card-thumbnail__alphabet {
  line-height: 17px !important;
}

.kat-workstream__task__foot__summary-right-wrapper .kat-task-detail__right-section__bottom-bar__watcher, .kat-workstream__task__foot__summary-right-wrapper .avatar-image-small {
  margin: 0;
  height: 19px;
  width: 18px;
  font-size: 9px;
  line-height: 20px;
}

.kat-workstream__task__foot__summary-right-wrapper .avatar-wrapper {
  margin-right: 5px;
  float: left;
}

.kat-workstream__task__foot__text {
  font-size: 13px;
  font-weight: 700;
  max-width: calc(100% - 18px);
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 16px;
  position: relative;
  top: 2px;
  white-space: nowrap;
}

.kat-workstream__task__foot-left-wrapper {
  position: relative;
  width: calc(100% - 144px);
}

.kat-workstream__task__foot__summary__priority {
  font-size: 9px;
  color: #fff; /* font-weight: 600; */
  background: orange;
  border-radius: 4px !important;
  margin-right: 10px;
  padding: 5px;
  height: 18px;
  line-height: 8px;
}

.kat-workstream__task__foot__summary__time {
  font-size: 12px;
  margin-right: 10px;
  margin-top: 3px;
  color: #2a3036;
}

img.kat-workstream__task__foot__summary__user {
  background: grey;
  height: 18px;
  width: 18px;
  border: 1px solid black;
  border-radius: 50%;
  margin-right: 10px;
}

.kat-workstream__add-task {
  background: #98A1A9;
  color: #fff;
  display: inline-block;
  text-align: center;
  width: 24px;
  height: 24px;
  padding-top: 1px;
  font-size: 17px;
  font-weight: 500;
  border-radius: 50%;
  position: absolute;
  right: 10px;
  top: -13px;
  z-index: 52;
  cursor: pointer;
}

.kat-workstream__add-task.tooltip-data-left[data-tooltip]:hover:after {
  right: 32px;
}

.kat-workstream__add-task.tooltip-left:hover .arrow:before {
  right: 120%;
  bottom: 7px;
}

.kat-workstream__add-task.tooltip-top:hover .arrow:before {
  top: -16px;
  left: 36%;
}

textarea.kat-workstream__task__head__text {
  width: 100%;
  border: none;
  font-size: 14px;
  resize: none;
  background: none;
  color: #494D50;
}

.kat-workstream__task.add-task .kat-workstream__task__head {
  padding-right: 16px;
}

.kat-workstream__task__left-control {
  height: 60px;
  border-radius: 4px 0 0 4px;
  width: 42px;
  left: -33px;
  top: 16px;
  box-shadow: 1px 2px 3px rgba(30, 34, 38, 0.15);
  transform: translateX(11px);
}

.kat-workstream__task__left-control.tooltip-right:hover .arrow:before {
  left: 95%;
  top: 24px;
}

.kat-workstream__task__left-control.tooltip-data-right[data-tooltip]:hover:after {
  left: 42px;
}

.kat-workstream__task__left-control, .kat-workstream__task__right-control {
  position: absolute;
  background: white;
  opacity: 0;
  transition: all ease-in-out 0.2s;
  z-index: 51;
}

.kat-workstream__task-icon.play-ico {
  display: inline-block;
  height: 26px;
  width: 26px;
  text-align: center;
  border: 1px solid #94989E;
  border-radius: 50%;
  padding: 2px 7px;
  margin-top: 15px;
  margin-left: 1px;
  position: relative;
  left: 8px;
}

.kat-workstream__task .kat-workstream__task-icon:before, .kat-workstream__task-icon:before {
  margin-left: 0;
}

.kat-workstream__task-icon.delete-ico.flaticon-delete-1:before {
  position: relative;
  left: -3px;
}

.kat-workstream__task-icon.play-ico:before {
  font-size: 12px;
  position: relative;
  top: 2px;
}

.kat-workstream__task-icon.play-ico.flaticon-pause::before {
  font-size: 11px;
  position: relative;
  top: 1px;
}

.kat-workstream__task__right-control {
  height: 88px;
  width: 41px;
  right: -30px;
  top: 4px;
  border-radius: 0 4px 4px 0;
  box-shadow: 1px 2px 3px rgba(30, 34, 38, 0.15);
  text-align: center;
  transform: translateX(-11px);
  padding: 5px 2px 0 2px;
}

.kat-workstream__task__right-control .kat-workstream__task-icon {
  margin: 5px 3px 0;
  height: 16px;
  position: relative;
  width: 16px;
  left: 8px;
}

.kat-workstream__task .kat-workstream__task-icon.flaticon-delete-1:before {
  margin-left: -2px !important;
}

.kat-workstream__task-icon {
  cursor: pointer;
  opacity: 0.7;
}

.kat-workstream__task-icon:hover {
  opacity: 1;
}

.kat-workstream__task-icon.drag-select-ico {
  height: 18px;
  width: 18px;
  border: 1px solid #94989E;
  border-radius: 50%;
  margin-left: 2px;
  margin-bottom: 6px;
  position: relative;
}

.kat-workstream__task-icon.flaticon-check:before {
  font-size: 16px;
  height: 17px;
}

.kat-workstream__task-icon.drag-select-ico.selected {
  background: #2BBEE8;
}

.kat-workstream__task-icon.check-ico:not(.flaticon-check) {
  height: 15px;
  width: 15px;
  border: 1px solid #94989E;
  border-radius: 2px;
  margin-left: 3px;
  margin-bottom: -1px;
  margin-top: 8px;
}

.kat-workstream-task-progress-bar-wrapper {
  width: 100%;
  margin-top: 1px;
  position: relative;
  height: 4px;
  background: #d5d8e0;
}

.kat-workstream-task-progress-bar {
  height: 4px;
  width: 33.3%;
  position: relative;
  top: -9px;
  display: inline-block;
}

.kat-workstream-task-progress-bar.logged {
  background: #a1d046;
}

.kat-workstream-task-progress-bar.not-worked {
  background: #e3bb31;
}

.kat-workstream-task-progress-bar.not-planned {
  background: #d5d8e0;
}

.kat-workstream-task-progress-bar.reversed {
  background: red;
  position: absolute;
  right: 0;
  top: 0;
  height: 4px;
}

.kat-workstream-task-progress-bar .progress-bubble {
  display: none;
  padding: 4px 5px;
  border-radius: 3px;
  background: #000;
  color: #fff;
  position: absolute;
  top: -25px;
  font-size: 10px;
  white-space: pre;
  left: -1px;
  text-align: center;
}

.kat-workstream-task-progress-bar .progress-bubble .bubble-arrow {
  position: absolute;
  width: 0;
  height: 0;
  bottom: -9px;
  left: 1px;
  border-style: solid;
  border-width: 6px 5px 5px 5px;
  border-color: #000 rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
  cursor: pointer;
}

.kat-workstream-task-progress-bar:hover .progress-bubble {
  display: block;
}

.kat-workstream-task-progress-bar.reversed .progress-bubble {
  right: 0;
  left: initial;
}

.kat-workstream-task-progress-bar.reversed .progress-bubble .bubble-arrow {
  right: 0;
  left: initial;
}

.kat-workstream__task__foot {
  position: relative;
}

.kat-workstream__task__foot__estimate-input-cell {
  width: 25px;
  text-align: center;
  border: none;
  outline: none;
  transition: boder .2s ease;
  height: 25px;
}

.kat-workstream__task__foot__estimate-input-cell:hover, .kat-workstream__task__foot__estimate-input-cell:focus {
  border: 1px solid lightgrey;
  border-radius: 3px;
}

.kat-task-detail__right-section__content-body-col__content-image_more_card .kat-task-detail__right-section__header__toolbar__dropdown {
  top: 21px;
  left: -222px;
}

.kat-workstream__task__foot-left-wrapper .kat-task-detail__right-section__content-body-col__content-add-dropdown {
  top: 29px;
  left: -15px;
}

.kat-task-detail__right-section__content-body-col__content-image_more_card .more-assigned {
  font-size: 12px;
  position: relative;
  left: -2px;
  margin-right: 5px;
  cursor: pointer;
}

.kat-workstream__task .kat-profile-card-thumbnail__alphabet, .kat-team-task-cards .kat-profile-card-thumbnail__alphabet {
  height: 18px;
  width: 19px;
  border-radius: 100%;
  background: #242B39;
  display: inline-block;
  position: relative;
  margin-right: 10px;
  color: #fff;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  font-size: 10px;
}

.task-area-bottom {
  width: 103%;
  height: 104px;
  background: #EAEDF4;
  position: relative;
  left: -3px;
  right: 0;
  bottom: 0;
}

.task-area-top {
  width: 103%;
  height: 104px;
  background: #EAEDF4;
  position: relative;
  left: -3px;
  right: 0;
  bottom: 4px;
}
.kat-card__view-type-wrapper.task-view{
  margin-top:30px;
}
.kat-workstream__task__foot__summary-right__meeting-icon {
  margin-top: 2px;
  width: 20px;
}
.kat-workstream__task__foot__summary-right-wrapper .kat-task-detail__right-section__bottom-bar__watcher{
  margin-left:5px;
}
.taskworkstream-custom-scroll {
  width: 100%;
  height: calc(100% - 92px);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}.kat-workstream-wrapper-custom-scroll{
  width: 100%;
  height: 100%;
}.mydashboard-page-header {
    padding-left: 34px;
    position: absolute;
    flex: 0 0 98px;
}
.mydashboard-page-header__text {
    font-weight: 300;
    float: left;
    padding: 35px 70px 0 0;
}

.mydashboard-page-header__text span {
    font-size: 2em;
    color: #a3a3ac;
    cursor: pointer;
}

.mydashboard-page-header__text.active span {
    color: #fff;
}
.kat-workstream-wrapper-dashboard {
    overflow: auto;
    display: flex;
    align-items: flex-start;
    z-index: 10;
    margin-top: 100px;
    position: relative;
}

.mydashboard-wrapper-main-div {
    position: relative; /* width: calc(100% - 0px); */
    height: 100%;
}

.mydashboard-wrapper-main {
    background: #f5f8fd;
    border-radius: 4px;
    padding-bottom: 10px;
    margin: 13px 37px 50px 37px;
    min-width: 925px;
    display: flex;
    flex-direction: column;
}

.mydashboard-filter-wrapper {
    padding: 15px 20px;
    border-bottom: 1px solid #e6e9ed;
    background: #fff;
    border-radius: 4px 4px 0 0;
    min-height: 65px;
    box-sizing: border-box;
    width: 100%;
}

.mydashboard-filter-heading-title {
    color: #aaacaf;
    position: relative;
    margin-left: 23px;
    padding-top: 6px;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
}

.mydashboard-filter-heading-title.active {
    color: #1f2737;
}

.mydashboard-filter-heading-title.active:after {
    content: '';
    width: 100%;
    height: 4px;
    background: #252c3a;
    position: absolute;
    left: 0;
    bottom: -25px;
}

.mydashboard-announcement-wrapper {
    position: absolute;
    right: 0;
    top: 58px;
    bottom: 0;
    width: 446px;
    display: none;
    background: #2c3443 url(/dist/screenshot.png) no-repeat 0 100px;
}

.mydashboard-announcement-wrapper .header-txt {
    padding: 40px 20px;
    display: inline-block;
    width: 100%;
    font-size: 21px;
}

.date-filter-option {
    padding: 8px;
    border: 1px solid #e6e9ed;
    border-radius: 5px;
    color: #a6a8ac;
    cursor: pointer;
    height: 50px;
    margin-right: 30px;
    min-width: 134px;
}

.date-filter-option:hover {
    background: #27bfe9;
    color: #fff;
}

.date-filter-option:hover .primary-txt {
    color: #fff;
}

.date-filter-option.active {
    background: #27bfe9;
    color: #fff;
}

.date-filter-option.active .primary-txt {
    color: #fff;
}

.date-filter-option.calendar-wrapper .primary-txt {
    margin-top: 7px;
    padding-left: 10px;
}

.date-filter-option .flaticon-calendar-icon:before {
    margin-left: 8px;
    position: relative;
    top: 5px;
}

.date-filter-option .primary-txt {
    font-size: 16px;
    text-align: center;
    display: block;
    color: #a6a8ac;
    font-weight: normal;
    padding: 0 15px;
}

.date-filter-option .secondary-txt {
    font-weight: normal;
    font-size: 12px;
    text-align: center;
    display: block;
    margin-top: 8px;
}

.mydashboard-body {
    padding-top: 20px;
    padding-bottom: 20px;
    flex: 1 1 0;
}

.mydashboard-individual {
    border: 1px solid #e6e9ed;
    border-radius: 3px;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15);
    padding: 20px;
    margin: 10px 20px;
    background: #fff;
    min-height: 282px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 1 1 50%;
    overflow-x:scroll;
    overflow-y: hidden;
}

.mydashboard-individual.wrapper-100 { /* width: calc(100% - 3.5%); min-width: calc(100% - 3.5%); */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-left: 20px !important;
    overflow-y: scroll;
    height: auto;
    min-height: 420px
}

.mydashboard-individual.wrapper-35 { /*width: calc(100% - 68%); min-width: calc(100% - 68%); margin-right:5px;*/
    float: left;
    flex: 1 1 30%;
}

.mydashboard-individual.wrapper-65 { /*width: calc(100% - 36.5%); min-width: calc(100% - 36.5%); margin-left:5px;*/
    width: 64%;
}

.mydashboard-individual.wrapper-50 { /*width: calc(100% - 52.3%); min-width: calc(100% - 52.3%); margin-right:5px; margin-left:5px;*/
    width: 30%;
}

.mydashboard-individual:nth-child(even) {
    margin-left: 0;
}

.mydashboard-individual-hdr {
    font-size: 17px;
    color: #0f1726;
}

.today-task-content-wrapper {
    padding-top: 30px;
}

.today-task-content-wrapper .mydashboard-individual-content-wrapper-hdr {
    text-align: center;
    font-size: 24px;
    color: #0f1726;
}

.today-task-content-wrapper .mydashboard-individual-content-wrapper-hdr sup {
    font-size: 16px;
    position: relative;
    top: 4px;
}

.mydashboard-task-progress-wrapper {
    padding-top: 30px;
}

.mydashboard-task-progressbar {
    width: 90%;
    margin: 0 auto;
    height: 40px;
    overflow: hidden;
}

.mydashboard-task-progressbar-content .individual-card {
    background: orange;
    padding: 5px;
    height: 40px;
}

.mydashboard-task-progressbar-content .individual-card:first-child {
    border-radius: 24px 0 0 24px;
}

.mydashboard-task-progressbar-content .individual-card:last-child {
    border-radius: 0 24px 24px 0;
}

.mydashboard-task-progressbar-content .individual-card.completed {
    background: #afd938;
    width: 20%;
}

.mydashboard-task-progressbar-content .individual-card.inprogress {
    background: #27bfe9;
    width: 20%;
}

.mydashboard-task-progressbar-content .individual-card.sentapproval {
    background: #413f5b;
    width: 20%;
}

.mydashboard-task-progressbar-content .individual-card.notstarted {
    background: #d0d6e2;
    width: 20%;
}

.mydashboard-task-progressbar-content .individual-card.onhold {
    background: #f0c700;
    width: 10%;
}

.mydashboard-task-progressbar-content .individual-card.stuck {
    background: #ec5a5a;
    width: 10%;
}

.mydashboard-progress-status-wrapper {
    width: 88%;
    margin: 0 auto;
}

.mydashboard-progress-status-wrapper-div {
    padding-top: 30px;
}

.mydashboard-progress-status-wrapper-content-individual {
    padding-bottom: 20px;
}

.color-code-label {
    margin-left: 5px;
    font-size: 13px;
}

.color-code {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
}

.color-code.completed {
    background: #afd938;
}

.color-code.inprogress {
    background: #27bfe9;
}

.color-code.sentapproval {
    background: #413f5b;
}

.color-code.notstarted {
    background: #d0d6e2;
}

.color-code.onhold {
    background: #f0c700;
}

.color-code.stuck {
    background: #ec5a5a;
}

.color-code-value {
    font-size: 25px;
    color: #0f1726;
    margin-left: 20px;
}

.color-code-value.null {
    background: #dedfe0;
    width: 20px;
    display: inline-block;
    height: 3px;
}

.mydashboard-task-table-content {
    padding-top: 50px;
    font-size: 13px;
}

.mydashboard-task-table-content table {
    border-spacing: 0;
    border-collapse: separate;
}

.mydashboard-task-table-content table tr {
    display: table;
    width: 100%;
}

.mydashboard-task-table-content table tbody {
    overflow-x: hidden;
    display: block;
    width: 100%;
}

.mydashboard-task-table-content table tr th, .mydashboard-task-table-content table tr td {
    text-align: left;
    background: #f5f8fd;
    border-top: 1px solid #eef0f5;
    padding: 10px;
}

.mydashboard-task-table-content table tr td {
    background: #fff;
    color: #0f1726;
    font-size: 14px;
    height: 64px;
    cursor: pointer;
}

.mydashboard-task-table-content table tbody tr td:nth-child(1) {
    width: 263px;
    max-width: 263px;
}

.mydashboard-task-table-content table tbody tr td:nth-child(2) {
    /* width: 148px; */
    width: 128px;
}

.mydashboard-task-table-content table tbody tr td:nth-child(3) {
    /* width: 128px; */
    width: 170px;
}

.mydashboard-task-table-content table tbody tr td:nth-child(4) {
    /* width: 170px; */
    width: 186px;
}

/* .mydashboard-task-table-content table tbody tr td:nth-child(5) {
    width: 186px;
} */

.mydashboard-task-table-content table tr:last-child td {
    border-bottom: 1px solid #eef0f5;
}

.mydashboard-task-table-content .kat-task-detail__right-section__header__toolbar__dropdown__list__text {
    color: #0f1726;
    position: relative;
    top: 4px;
    font-size: 14px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 70px);
    text-overflow: ellipsis;
}

.mydashboard-task-table-content .dependency-icon {
    position: relative;
    top: 13px;
}

.mydashboard-task-table-content .billable-icon {
    margin-right: 0;
}

.mydashboard-task-table-content .non-billable-icon {
    display: inline-block;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA4My4yIDgzLjIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzdmN2U4Yjt9Cgk8L3N0eWxlPgo8ZyBjbGFzcz0ic3QwIj4KCTxwYXRoIGQ9Ik00MS42LDBDMTguNywwLDAsMTguNywwLDQxLjZzMTguNyw0MS42LDQxLjYsNDEuNnYtMnYyYzIyLjksMCw0MS42LTE4LjcsNDEuNi00MS42UzY0LjYsMCw0MS42LDB6IE00MS42LDQKCQljOS42LDAsMTguMywzLjYsMjQuOSw5LjVsLTUzLDUzLjFDNy42LDYwLDQsNTEuMiw0LDQxLjZDNCwyMC45LDIwLjksNCw0MS42LDR6IE00MS42LDc5LjJMNDEuNiw3OS4yYy05LjcsMC0xOC42LTMuNy0yNS4zLTkuOAoJCWw1My4xLTUzLjJjNi4xLDYuNyw5LjgsMTUuNiw5LjgsMjUuM0M3OS4yLDYyLjQsNjIuNCw3OS4yLDQxLjYsNzkuMnoiLz4KCTxwYXRoIGQ9Ik0zNC44LDQxLjlsMy0zYy0zLjQtMS40LTUuOS00LjUtNS45LTguMmMwLTQuMiwzLjEtNy43LDcuMy04LjZ2MTUuM2w0LTRWMjEuOWMyLjMsMC40LDQuNCwxLjQsNS45LDMuMQoJCWMwLjUsMC41LDEuMSwwLjcsMS44LDAuNmwxLjctMS43YzAuMS0wLjYtMC4xLTEuMi0wLjUtMS42Yy0yLjMtMi41LTUuNC00LjEtOC45LTQuNXYtNC4xYzAtMS4xLTAuOS0yLTItMnMtMiwwLjktMiwyVjE4CgkJYy02LjQsMS4xLTExLjMsNi40LTExLjMsMTIuN0MyNy45LDM1LjUsMzAuNywzOS43LDM0LjgsNDEuOXoiLz4KCTxwYXRoIGQ9Ik00OC4yLDQxLjJsLTMsM2MzLjYsMS4zLDYuMiw0LjUsNi4yLDguM2MwLDQuNC0zLjUsOC4xLTguMSw4LjhWNDYuMWwtNCw0djExYy0yLjgtMC42LTUuMS0yLjQtNi4zLTQuN2wtMywzCgkJYzIsMyw1LjQsNS4yLDkuMiw1Ljl2NC4yYzAsMS4xLDAuOSwyLDIsMnMyLTAuOSwyLTJ2LTQuMWM2LjgtMC44LDEyLjEtNi4yLDEyLjEtMTIuOEM1NS4zLDQ3LjcsNTIuNCw0My40LDQ4LjIsNDEuMnoiLz4KPC9nPgo8L3N2Zz4K) no-repeat;
    display: inline-block;
    height: 24px;
    width: 24px;
    background-position: 50% 50%;
    background-size: 24px;
    cursor: pointer;
    position: relative;
    margin: 0 0 0 4px;

}

.mydashboard-task-table-content .billable-icon.flaticon-dollar-icon:before {
    margin-left: 5px !important;
    margin-right: 0;
    font-size: 23px;
    cursor: pointer;
    position: relative;
    top: 0;
    color: #64B02A;
}

.mydashboard-task-table-content .kat-task-detail__right-section__header__toolbar__dropdown__list__text_email {
    font-size: 14px;
    color: #b2b3b7;
    font-weight: normal;
    margin-top: 8px;
    margin-left: 5px;
    overflow: visible;
    white-space: normal;
    text-overflow: ellipsis;
    word-wrap: break-word;
    line-height: 1.45;
}

.mydashboard-task-table-content .duration-progress-hdr {
    position: relative;
    top: -6px;
}

.mydashboard-task-table-content .duration-progress-hdr.disabled {
    color: #abb0bb;
}

.mydashboard-task-table-content .duration-progress {
    width: 100%;
    height: 4px;
    background: #e9e9eb;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.mydashboard-task-table-content .duration-progress .duration-progress-bar {
    position: absolute;
    left: 0;
    width: 60%;
    height: 4px;
    border-radius: 4px;
}

.mydashboard-task-table-content .duration-progress .duration-progress-bar.grey {
    background: #747b8a;
}

.mydashboard-task-table-content .duration-progress .duration-progress-bar.red {
    background: #ea4b4b;
    right: 0;
    left: initial;
}

.mydashboard-task-table-content .color-code-label {
    font-size: 14px;
}

.mydashboard-task-table-content .notstarted-label {
    color: #abb0bb;
}

.task-flow-wrapper-div {
    width: calc(100% - 15px);
}

.graph-info-wrapper {
    width: 32%;
}

.graph-info-wrapper .priority {
    font-size: 10px;
    color: #fff;
    font-weight: 600;
    margin-top: -2px;
    border-radius: 4px;
    padding: 2px 5px 0;
    height: 16px;
    width: 16px;
    margin-left: 5px;
    margin-right: 0;
}

.graph-info-wrapper .priority.priority-1 {
    background: #c1c0d1;
}

.graph-info-wrapper .priority.priority-2 {
    background: #fad205;
}

.graph-info-wrapper .priority.priority-3 {
    background: #afd939;
}

.graph-info-wrapper .priority.priority-4 {
    background: #ec5a5a;
}

.graph-info-wrapper-main {
    margin-top: 20px;
    display: flex;
}

.graph-info-wrapper-main.donut-chart .graph-container {
    width: 300px;
    margin: 0 15px 0 0;
    position: relative;
}

.graph-info-wrapper-main.donut-chart .graph-info-wrapper {
    padding-top: 0;
    width: 100%;
    max-height: 180px;
}

.graph-info-wrapper-hdr {
    text-transform: uppercase;
    width: calc(100% - 26px);
    word-wrap: break-word;
    text-align: left;
    display: inline-block;
}

.graph-info-wrapper-hdr:first-child {
    text-align: right;
}

.graph-info-wrapper-hdr:nth-child(odd) {
    text-align: right;
}

.graph-info-wrapper-details {
    font-size: 24px;
    color: #0f1726;
    text-align: right;
}

sup {
    font-size: 16px;
    position: relative;
    top: 4px;
    color: #0f1726;
}

.graph-info-wrapper {
    padding-top: 20px;
}

.graph-info-wrapper-individual {
    margin-bottom: 30px; /*height: 92px; padding-top: 27px;*/
}

.graph-info-wrapper-individual.right .priority {
    margin-right: 5px;
    margin-left: 0;
}

.graph-info-wrapper-individual.right .graph-info-wrapper-details {
    text-align: left;
}

.graph-container {
    width: calc(100% - 58%);
    height: 200px;
    margin: 0 8px;
}

.priority-quadrant {
    height: 180px;
    width: calc(100% - 80%);
    background: #f5f8fd;
    margin: 0 19px;
}

.priority-quadrant-block {
    width: 100%;
    height: 100%;
}

.priority-quadrant-block-individual {
    width: 50%;
    height: 50%;
    float: left;
    border-right: 1px solid #ebeef4;
    border-bottom: 1px solid #ebeef4;
    position: relative;
}

.priority-quadrant-block-individual:nth-child(2), .priority-quadrant-block-individual:nth-child(4) {
    border-right: none;
}

.priority-quadrant-block-individual:nth-child(3), .priority-quadrant-block-individual:nth-child(4) {
    border-bottom: none;
}

.priority-blocks {
    position: absolute;
}

.priority-quadrant-block-individual:nth-child(1) .priority-blocks {
    width: 53px;
    height: 51px;
    background: #f05252;
    right: 0;
    bottom: 0;
}

.priority-quadrant-block-individual:nth-child(2) .priority-blocks {
    width: 23px;
    height: 21px;
    background: #aed83b;
    left: 0;
    bottom: 0;
}

.priority-quadrant-block-individual:nth-child(3) .priority-blocks {
    width: 33px;
    height: 31px;
    background: #fad10e;
    right: 0;
    top: 0;
}

.priority-quadrant-block-individual:nth-child(4) .priority-blocks {
    width: 13px;
    height: 15px;
    background: #c0bfd0;
    left: 0;
    top: 0;
}

.color-indicator {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 8px;
    margin-top: 4px;
}

.color-indicator.blue {
    background: #27bfe9;
}

.color-indicator.golden {
    background: #F0C700;
}

.color-indicator.green {
    background: #57b557;
}

.color-indicator.grey {
    background: #413f5b;
}

.calendar-wrapper-div {
    position: relative;
}

.calendar-wrapper-div .DayPicker.DayPicker--en {
    top: 51px;
}

.progress-bubble {
    display: none;
    padding: 4px 5px;
    border-radius: 3px;
    background: #000;
    color: #fff;
    position: absolute;
    top: -25px;
    font-size: 10px;
    white-space: pre;
    left: -1px;
    text-align: center;
}

.bubble-arrow {
    position: absolute;
    width: 0;
    height: 0;
    bottom: -10px;
    left: 0;
    border-style: solid;
    border-width: 6px 5px 5px 5px;
    border-color: #000 rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
    cursor: pointer;
}


@media all and (max-width: 1366px) {
    .mydashboard-announcement-wrapper {
        width: 353px;
        overflow-x: auto;
    }
}

.donut-icon-wrapper {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #f5f8fd;
    top: 45%;
    left: 49%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.graph-container svg {
    position: relative;
}

.donut-icon-wrapper::before {
    position: absolute;
    content: '';
    width: 95px;
    top: 50%;
    left: 50%;
    height: 2px;
    background: #f5f8fd;
}

.graph-project-card {
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    margin-right: 5px;
    font-size: 12px;
    line-height: 19px;
}

.project-card-label {
    margin-top: 3px;
}

.donut-icon.flaticon-clock-1 {
    position: relative;
    z-index: 10;
    height: 100%;
    width: 100%;
    display: block;
}

.donut-icon.flaticon-dollar-sign-1 {
    position: relative;
    z-index: 10;
    height: 100%;
    width: 100%;
    display: block;
}

.donut-icon.flaticon-dollar-sign-1:before {
    position: absolute;
    margin-left: 0;
    top: 10px !important;
    right: 0;
    font-size: 19px;
    bottom: 0;
    left: 10px;
}

.donut-icon.flaticon-clock-1:before {
    margin-left: 0;
    position: absolute;
    top: 10px;
    right: 9px;
    color: #b4bec1;
}

.donut-icon.flaticon-clock-view:before {
    margin-left: 0;
    position: absolute;
    top: 10px;
    right: 9px;
    color: #b4bec1;
}

.time-priority-icon {
    background: url(/dist/time-spent-by-proj.png) no-repeat;
    width: 19px;
    height: 19px;
    display: inline-block;
    z-index: 2;
    position: absolute;
    top: calc(100% - 28px);
    right: calc(100% - 30px);
}

.graph-info-wrapper-main .no-data {
    text-align: center;
}

.stacked-bar-chart {
    width: 3550px;
    height: auto;
    border-bottom: 1px solid #484848;
    background: #fff;
    margin: 0 23px;
    position: relative;
}

.stacked-bar-chart-slot-wrapper {
    height: 100%;
}

.stacked-bar-chart-slot {
    height: 70px;
    position: relative;
    bottom: -71px;
    border-top: 1px solid #d2d2d2;
}

.stacked-bar-chart-slot-reading {
    display: inline-block;
    position: relative;
    left: -22px;
    top: -11px;
}

.stacked-bar-chart-slot-null .stacked-bar-chart-slot-reading {
    position: relative;
    bottom: 11px;
    top: initial;
    left: -22px;
}

.stacked-bar-blocks-div {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.stacked-bar .graph-info-wrapper {
    width: 100%;
    background: #fff;
    padding: 0;
    margin-left: 5px;
}

.stacked-bar .graph-info-wrapper-individual {
    margin-right: 10px !important;
    width: 15% !important;
}

.stacked-bar .graph-info-wrapper-individual:last-child {
    margin-bottom: 0;
}

.stacked-bar .graph-info-wrapper-hdr {
    white-space: pre;
}

.stacked-bar-blocks-wrapper {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 51px;
    display: flex;
}

.stacked-bar-blocks-wrapper li {
    height: 100%;
    margin: 0 1.7vw;
    float: none;
    width: 70px;
    position: relative;
}

.stacked-bar-blocks {
    width: 100%;
    position: absolute;
    height: 50px;
    background: #ff9900;
    border-top: 1px solid white;
    bottom: 0;
}

.stacked-bar-chart-slot-null {
    margin: 0;
    padding: 0;
}

.stacked-bar-blocks .progress-bubble {
    padding: 4px 5px;
    border-radius: 3px;
    background: #000;
    color: #fff;
    position: absolute;
    top: -13px;
    font-size: 10px;
    white-space: pre;
    left: 64px;
    z-index: 10;
    text-align: left;
    display: none;
}

.stacked-bar-blocks:hover .progress-bubble {
    display: block;
}

.stacked-bar-blocks .progress-bubble .bubble-arrow {
    position: absolute;
    width: 0;
    height: 0;
    top: 9px;
    left: -9px;
    transform: rotate(92deg);
    border-style: solid;
    border-width: 6px 5px 5px 5px;
    border-color: #000 rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
    cursor: pointer;
}

.x-axis-wrapper {
    padding: 0 23px;
     display: flex;
    margin: 0;
    width: 3600px;
    justify-content: space-between; 
}

.x-axis-wrapper li {
    float: left;
    margin: 0 1.7vw;
    width: 70px;
    text-align: center;
}

.x-axis-wrapper li:nth-child(even) {
    /* padding: 30px 0 5px 0; */
    /* margin-left: 20px; */
}

.task-flow-wrapper .kat-user-projects-more {
    font-weight: bold;
    margin-left: 3px;
    font-size: 12px;
    position: relative;
    top: -3px;
    color:#8f8e99;
}

.task-flow-wrapper .kat-user-projects-more:hover .card-popover-bubble {
    display: block;
}

.task-flow-wrapper .kat-user-project-name {
    font-size: 13px;
    max-width: 91%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
    display: inline-block;
    text-align: left;
    color: #8f8e99;
    cursor: default;
}

.task-flow-wrapper .card-popover-bubble {
    background: #000;
    padding: 8px;
    position: absolute;
    border-radius: 3px;
    min-height: 31px;
    line-height: 1.4;
    z-index: 20;
    display: none;
    left: 20px;
    top: -7px;
    max-width: 178px;
}

.task-flow-wrapper .card-popover-bubble.bottom .drop-arrow {
    position: absolute;
    width: 0;
    height: 0;
    left: -11px;
    top: 10px;
    border-style: solid;
    transform: rotate(-272deg);
    border-width: 7px 6px 6px 6px;
    border-color: #000 rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
}

.task-flow-wrapper .card-popover-bubble .secondary-txt {
    color: #918F94;
    font-size: 12px;
    white-space: pre-line;
    position: relative;
    top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

.myday-mainwrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100%;
}

.donut-icon.flaticon-dollar-sign-1:before {
    position: absolute;
    margin-left: 0;
    top: calc(100% - 12px);
    right: calc(100% - 21px);
    font-size: 19px;
    color: #b4bec1;
}

.dashboard-wrapper-parent {
    margin: 0 auto;
    display: flex;
}

.calendar-wrapper {
    margin-right: 0 !important;
}

.kat-select-date-arrow {
    margin-right: 0;
    height: 50px;
    padding-top: 9px;
}

.mydashboard-task-table-button-show {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #b8bcc3;
}

.mydashboard-task-table-button-show:hover {
    background: #727988;
}

.maydashboard-task-table-button-show__arrow-up, .maydashboard-task-table-button-show__arrow-down.down {
    width: 13px;
    height: 13px;
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    display: inline-block;
    transform-origin: center;
    transform: rotate(-227deg);
    margin-top: 10px;
    margin-left: 1px;
}

.maydashboard-task-table-button-show__arrow-up.down {
    transform: rotate(-45deg);
    margin-bottom: 10px;
    margin-top: 5px;
    margin-left: 1px;
}

.kat-task-detail__right-section__header__toolbar__dropdown.excess-avatars {
    top: 35px !important;
    right: 0 !important;
    height: auto;
    min-height: 40px;
    overflow-x: auto;
}

.progress-hider {
    width: 24px;
    height: 24px;
    border: 3px solid #213441;
    border-color: #233845 transparent transparent transparent;
    border-radius: 50%;
    transform: rotate(-124deg);
    position: absolute;
    left: -2px;
    top: 0;
}

.kat-header-checkinout__play .kat-workstream__task-icon.play-ico {
    border: 2px solid #233845 !important;
}

.kat-header-checkinout__play .kat-workstream__task-icon.play-ico.border-blue {
    border-color: #0eb3ef !important;
}

.mydashboard-filter-wrapper .kat-hidden-items-notif {
    top: 9px;
    font-weight: bold;
}

@media only screen and (min-width: 368px) and (max-width: 1050px) {
    .graph-info-wrapper-main.donut-chart .graph-info-wrapper.view-port-flow {
        max-height: 240px;
    }

    .graph-info-wrapper-main.donut-chart .graph-info-wrapper.view-port-flow .graph-info-wrapper-individual {
        width: 100% !important;
    }
}

@media only screen and (min-width: 368px) and (max-width: 905px) {
    .mydashboard-wrapper-main {
        margin: 13px 37px 50px 37px;
    }

    .mydashboard-wrapper-main-div {
        width: auto !important;
    }
}

.exp-col-table {
    padding-top: 0;
}

.exp-col-table table tbody {
    overflow: visible;
}

.exp-col-table table thead tr th:nth-child(1) {
    width: 18%;
}

.exp-col-table table thead tr th:nth-child(2) {
    width: 11%;
}

.exp-col-table table thead tr th:nth-child(3) {
    width: 11%;
}

.exp-col-table table thead tr th:nth-child(4) {
    width: 170px;
}

.exp-col-table table tbody tr td {
    padding: 20px 0;
}

.exp-col-table table tbody tr td .graph-info-wrapper-hdr {
    font-size: 10px;
    word-wrap: normal;
    color: #abafb8;
}

.exp-col-table table tbody tr td .status-label {
    margin-top: 4px;
}

.exp-col-table table tbody tr td .graph-info-wrapper .priority {
    margin-left: 0;
    margin-right: 5px;
}

.exp-col-table table tbody tr td .graph-info-wrapper {
    width: 40%;
    padding-top: 0;
}

.exp-col-table table tbody tr td .graph-info-wrapper-individual {
    height: 60px !important;
}

.exp-col-table table tbody tr td .priority-quadrant {
    height: 110px;
}

.exp-col-table table tbody tr td .exp-col-row ul li.exp-col-row-list {
    padding: 0 10px;
}

.exp-col-table table tbody tr td .exp-col-row ul li.exp-col-row-list.name-list {
    width: 18%;
    padding: 0;
}

.exp-col-table table tbody tr td .exp-col-row ul li.exp-col-row-list.task-list {
    width: 11%;
}

.exp-col-table table tbody tr td .exp-col-row ul li.exp-col-row-list.hours-list {
    width: 11%;
}

.exp-col-table table tbody tr td .exp-col-row ul li.exp-col-row-list.effort-list {
    width: 170px;
}

.exp-col-table table tbody tr td .exp-col-row ul li.exp-col-row-list.status-list {
    width: 150px;
}

.exp-col-table table tbody tr td .exp-col-row ul li.exp-col-row-list.icon-wrapper-list {
    width: 100px;
}

.exp-col-table table tbody tr td .exp-col-row ul li.exp-col-row-list.icon-wrapper-list .flaticon-assign-arrow:before {
    margin-left: 0;
    color: #807f8c;
}

.exp-col-table table tbody tr td .flaticon-line:before, .exp-col-table table tbody tr td .flaticon-cross:before {
    margin-left: 0;
    color: #807f8c;
    font-size: 17px;
    float: right;
}

.exp-col-table table tbody tr td .kat-task-detail__right-section__bottom-bar__watcher {
    margin-left: 0 !important;
    top: -3px;
    line-height: 28px;
}

.exp-col-table table tbody tr td .avatar-image-small {
    margin: 0;
}

.exp-col-table table tbody tr td .kat-userlist__dropdown__list__text {
    top: 3px;
    left: 6px;
    font-size: 14px;
}

.exp-col-table table tbody tr td .effort__indicatior {
    width: 21px;
    float: left;
    height: 21px;
    border-radius: 4px;
    margin-right: 3px;
    line-height: 22px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
}

.exp-col-table table tbody tr td .effort__indicatior.effort-1 {
    background: #58aa1a;
}

.exp-col-table table tbody tr td .effort__indicatior.effort-2 {
    background: #99cf1c;
}

.exp-col-table table tbody tr td .effort__indicatior.effort-3 {
    background: #ffb526;
}

.exp-col-table table tbody tr td .effort__indicatior.effort-4 {
    background: #ff7800;
}

.exp-col-table table tbody tr td .effort__indicatior.effort-5 {
    background: #E42F2F;
}

.exp-col-table table tbody tr td .graph-info-wrapper-main {
    width: 48%;
    padding: 20px;
    margin-left: 30px;
    border: 1px solid #f3f4f6;
}

.exp-col-table table tbody tr td .kat-task-details-action-status-btn {
    width: 80%;
    background: #fff;
    color: #313845;
    border: 1px solid #e3e5ea;
    margin: -5px 0 0 0;
}

.exp-col-table table tbody tr td .drop-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: #c8ccd5 rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
    right: 10px;
    left: auto;
    top: 20px;
}

.exp-col-table table tbody tr td .status-color-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    margin-top: 8px;
}

.exp-col-table table tbody tr td .status-color-indicator.red {
    background: red;
}

.exp-col-table table tbody tr td .status-color-indicator.green {
    background: #aed83b;
}

.exp-col-table table tbody tr td .category-list-wrapper {
    width: 40%;
    padding: 0 0 20px 40px;
    margin-top: 20px;
}

.exp-col-table table tbody tr td .count-wrapper {
    width: 20px;
    float: left;
    height: 20px;
    border-radius: 50%;
    margin-right: 3px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    background: red;
    font-size: 10px;
}

.exp-col-table table tbody tr td .count-lable {
    display: inline-block;
    margin-top: 2px;
}

.exp-col-table table tbody tr td .category-list-subwrapper .category-sublist-wrapper {
    margin-bottom: 10px;
}

.exp-col-table table tbody tr td .category-list-subwrapper {
    width: 50%;
}

.teamreport-filter-wrapper {
    padding: 15px 20px;
    min-height: 50px;
    border-bottom: 1px solid #e6e9ed;
    background: #fff;
    border-radius: 4px 4px 0 0;
    box-sizing: border-box;
    width: 100%;
}

.teamreport-filter-wrapper .calendar-wrapper-div {
    float: right;
}

.teamreport-filter-wrapper .date-filter-option {
    float: right;
}

.teamreport-filter-wrapper .date-filter-option.filter-buttons {
    min-width: 50px;
    float: left;
    height: 45px;
}

.teamreport-filter-wrapper .date-filter-option.filter-buttons .primary-txt {
    line-height: 29px;
    font-size: 14px;
}

.teamreport-filter-wrapper .date-filter-option.calendar-wrapper {
    float: left;
}

.myday .kat-task-detail__right-section__header__toolbar__dropdown.pos-top {
    bottom: auto;
    padding: 0 5px;
    max-height: 150px;
    overflow: auto;
}

.myday .kat-task-detail__right-section__header__toolbar__dropdown.pos-top .kat-profile-thumbnail__alphabet {
    margin: 4px;
}

.notification-status-dropdown {
    position: relative;
}

.notification-status-dropdown .kat-task-detail__right-section__header__toolbar__dropdown.secondary-dropdown {
    /* left: 1px; */
    left: 72%;
    width: 103px;
    min-width: auto;
    /* top: 31px; */
}

.notification-status-dropdown a.kat-task-bar__menu__element__dropdown__list__item__link {
    padding: 0;
    font-size: 13px;
}

.notification-status-dropdown .kat-task-detail__right-section__header__toolbar__dropdown.secondary-dropdown ul.kat-task-detail__right-section__header__toolbar__dropdown__list li {
    padding: 7px 11px;
}

.notification-status-dropdown ul.kat-task-detail__right-section__header__toolbar__dropdown__list li:not(.disable):hover {
    background: #f5f7fb;
}

.notification-status-dropdown .kat-task-details-action-status-btn span:first-child {
    font-size: 13px;
}

.stacked-bar .color-indicator {
    border: 3px solid #f1efef;
    width: 15px;
    height: 15px;
    margin-top: 1px;
}

.kat-userlist__dropdown.kat-userlist__dropdown__content-add-dropdown-bottom.my-day .kat-default-button {
    max-width: 117px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: nowrap;
}

/*time distribution matrix starts*/
.time-distribution-matrix-container {
    padding: 20px;
    width: 353px;
}

.time-distribution-matrix {
    width: 15px;
    height: 180px;
    background: #fff;
    /* margin: 0 auto; */
    border-radius: 25px;
    position: relative;
    /* overflow: hidden; */
    left: 147px;
    border: 1px solid #d4d4d4;
}

.section-1 {
    width: 100%;
    height: 25%;

    position: absolute;
    bottom: 0;
    border-radius: 0 0 25px 25px;

}

.section-1:after, .section-2:after {
    content: '';
    font-size: 81px;
    border: 1px solid #faeeb2;
    position: absolute;
    width: 150px;
    top: 0;
    right: 14px;
}

.section-2 {
    width: 100%;
    height: 75%;

    position: absolute;
    bottom: 0;
    border-radius: 0 0 25px 25px;

}

.section-2:after {
    border: 1px solid #f9cdcd;
}

.section-3 {
    width: 100%;
    height: 25%;
    position: absolute;
    bottom: 75%;
    border-radius: 25px 25px 0 0;
    overflow: hidden;
}

.section-1 .flaticon-down-arrow, .section-2 .flaticon-down-arrow {
    position: relative;
    left: -152px;
    height: 20px;
    display: inline-block;
    font-size: 26px;
    top: -6px;
    color: #faeeb2;
}

.section-2 .flaticon-down-arrow {
    position: relative;
    top: -12px;
    transform: rotate(178deg);
    color: #f9cdcd;
}

.section-1 .flaticon-down-arrow:before, .section-2 .flaticon-down-arrow:before {
    margin-left: 0;
}

.section-1.active:after {
    border: 1px solid #f0c600;
}

.section-1.active .flaticon-down-arrow {
    color: #f0c600;
}

.section-2.active:after {
    border: 1px solid #eb5a5a;
}

.section-2.active .flaticon-down-arrow {
    color: #eb5a5a;
}

.section-1.active .arrow-label, .section-2.active .arrow-label {
    color: #9998a2;
}

.section-1 .arrow-label, .section-2 .arrow-label {
    white-space: nowrap;
    left: -130px;
    position: relative;
    top: -24px;
    font-size: 11px;
    color: #e2e2e5;
}

.section-2 .arrow-label {
    top: -44px;
}

.arrow-label-1 {
    left: -130px;
    position: relative;
    top: 64px;
    font-size: 11px;
    white-space: nowrap;
    color: #9998a2;
}

.time-distribution-matrix-container-sub {
    width: 53%;
    margin-top: 20px;
}

.time-distribution-matrix-container .graph-info-wrapper-hdr:nth-child(odd) {
    text-align: left;
}

.time-distribution-matrix-container .graph-info-wrapper-individual.kat-height-90px {
    height: 70px !important;
}

.time-distribution-matrix-container .graph-info-wrapper {
    margin-left: 40px;
    margin-top: 33px;
}

.time-distribution-matrix-container .graph-info-wrapper-details {
    font-size: 34px;
}

.time-distribution-matrix-container .today-day {
    text-align: right;
    font-size: 12px;
    padding-right: 10px;
    padding-top: 10px;
}

.section-2-wrapper {
    position: absolute;
    bottom: 0;
    height: 0;
    background: #2bbee8;
    width: 100%;
    border-radius: 0 0 25px 25px;
}

.section-1-wrapper {
    position: absolute;
    bottom: 0;
    height: 0;
    background: #f0c600;
    width: 100%;
    border-radius: 0 0 25px 25px;
}

.section-3-wrapper {
    position: absolute;
    bottom: 0;
    height: 0;
    background: #eb5a5a;
    width: 100%;
}

.task-flow-wrapper-div .google-calendar-icon {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggc3R5bGU9ImZpbGw6I0ZCQkIwMDsiIGQ9Ik0xMTMuNDcsMzA5LjQwOEw5NS42NDgsMzc1Ljk0bC02NS4xMzksMS4zNzhDMTEuMDQyLDM0MS4yMTEsMCwyOTkuOSwwLDI1NgoJYzAtNDIuNDUxLDEwLjMyNC04Mi40ODMsMjguNjI0LTExNy43MzJoMC4wMTRsNTcuOTkyLDEwLjYzMmwyNS40MDQsNTcuNjQ0Yy01LjMxNywxNS41MDEtOC4yMTUsMzIuMTQxLTguMjE1LDQ5LjQ1NgoJQzEwMy44MjEsMjc0Ljc5MiwxMDcuMjI1LDI5Mi43OTcsMTEzLjQ3LDMwOS40MDh6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiM1MThFRjg7IiBkPSJNNTA3LjUyNywyMDguMTc2QzUxMC40NjcsMjIzLjY2Miw1MTIsMjM5LjY1NSw1MTIsMjU2YzAsMTguMzI4LTEuOTI3LDM2LjIwNi01LjU5OCw1My40NTEKCWMtMTIuNDYyLDU4LjY4My00NS4wMjUsMTA5LjkyNS05MC4xMzQsMTQ2LjE4N2wtMC4wMTQtMC4wMTRsLTczLjA0NC0zLjcyN2wtMTAuMzM4LTY0LjUzNQoJYzI5LjkzMi0xNy41NTQsNTMuMzI0LTQ1LjAyNSw2NS42NDYtNzcuOTExaC0xMzYuODlWMjA4LjE3NmgxMzguODg3TDUwNy41MjcsMjA4LjE3Nkw1MDcuNTI3LDIwOC4xNzZ6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiMyOEI0NDY7IiBkPSJNNDE2LjI1Myw0NTUuNjI0bDAuMDE0LDAuMDE0QzM3Mi4zOTYsNDkwLjkwMSwzMTYuNjY2LDUxMiwyNTYsNTEyCgljLTk3LjQ5MSwwLTE4Mi4yNTItNTQuNDkxLTIyNS40OTEtMTM0LjY4MWw4Mi45NjEtNjcuOTFjMjEuNjE5LDU3LjY5OCw3Ny4yNzgsOTguNzcxLDE0Mi41Myw5OC43NzEKCWMyOC4wNDcsMCw1NC4zMjMtNy41ODIsNzYuODctMjAuODE4TDQxNi4yNTMsNDU1LjYyNHoiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0YxNDMzNjsiIGQ9Ik00MTkuNDA0LDU4LjkzNmwtODIuOTMzLDY3Ljg5NmMtMjMuMzM1LTE0LjU4Ni01MC45MTktMjMuMDEyLTgwLjQ3MS0yMy4wMTIKCWMtNjYuNzI5LDAtMTIzLjQyOSw0Mi45NTctMTQzLjk2NSwxMDIuNzI0bC04My4zOTctNjguMjc2aC0wLjAxNEM3MS4yMyw1Ni4xMjMsMTU3LjA2LDAsMjU2LDAKCUMzMTguMTE1LDAsMzc1LjA2OCwyMi4xMjYsNDE5LjQwNCw1OC45MzZ6Ii8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
    height: 14px;
    width: 14px;
    background-size: contain;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -7px;
    display: inherit;
    margin-left: -7px;
}

.task-flow-wrapper-div .google-calendar-icon-wrapper {
    margin-left: 10px;
    border-radius: 50%;
    position: relative;
    border: 1px solid #7f7e8b;
    width: 24px;
    height: 24px;
}

/*settings page css*/
span.flaticon-cross-icon.circle-close:before {
    margin-left: 0;
    font-size: 5px;
    position: relative;
    top: -4px;
}
.teamReport_topAvatar:before{
    top: 0px !important;
}

span.flaticon-cross-icon.circle-close {
    position: absolute;
    background: #E42F2F;
    color: #fff;
    line-height: 4px;
    padding: 1px 0 0 0;
    border-radius: 50%;
    margin-left: -5px;
    margin-top: 6px;
    height: 13px;
    width: 13px;
    left: -1px;
    border: 1px solid #fff;
    cursor: pointer;
    top:0;
    visibility:hidden;
}

.kat-task-detail__right-section__bottom-bar__watchers__wrapper .kat-profile-thumbnail__alphabet:hover .flaticon-cross-icon.circle-close{
    visibility: visible;
}

.mydashboard-filter-wrapper span.flaticon-cross-icon.circle-close:before{
    top:-1px;
}



.customHorizontalScrollbarWrapper {
  position: absolute;
  height: 6px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  border-radius: 3px;
  cursor: pointer;
  background: #f1f1f1;
  z-index: 10;
}

.customHorizontalScrollbarWrapper div {
  background: #bababa;
}

.customVerticalScrollbarWrapper {
  position: absolute;
  width: 6px;
  right: 2px;
  bottom: 2px;
  top: 2px;
  border-radius: 3px;
  cursor: pointer;
  background: #f1f1f1;
  z-index: 10;
}

.customVerticalScrollbarWrapper div {
  background: #bababa;
}

.taskworkstream-custom-scroll {
  width: 100%;
  height: calc(100% - 92px);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.teammembers-workstream-custom-scroll {
  width: 100%;
  height: calc(100% - 96px);
  overflow: auto;
}

.kat-projects-add-people-custom-scroll {
  width: 100%;
  height: calc(100% - 72px);
  overflow: auto;
}

.invite-users-body-custom-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.kat-workstream.project .kat-projects-popup__wrapper, .kat-page-wrapper .kat-projects-add-people-overlay, .kat-workstream .kat-projects-popup__wrapper {
  z-index: 999;
}

.kat-task-detail__left-section__comments-custom-scroll, .kat-task-detail__left-section__notes-custom-scroll {
  width: 100%;
  height:calc(100% - 142px);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  bottom: 95px;
  margin-top: 95px;
}

.kat-add-roles__dropdown__list-custom-scroll {
  width: 100%;
}

.kat-profile__main-item-custom-scroll {
  width: 100%;
  height: calc(100% - 188px);
  overflow: auto;
}

.kat-profile__main-item-custom-scroll-profile {
  width: 100%;
  height: calc(100% - 84px);
  overflow: auto;
}

.kat-profile__main-item-custom-scroll .kat-login-board__data__secondary-data:first-child {
  margin-top: 20px;
}

.kat-task-detail__left-section__checklist-custom-scroll {
  margin-top: 20px;
  width: 100%;
  height: calc(100% - 44px);
  overflow: auto;
}

/*.kat-task-detail__left-section__activity-custom scroll{ margin-top:20px; width:100%; height:100%; overflow:auto; }*/
.body-section-2-scroll .customHorizontalScrollbarWrapper, .body-section-2-scroll .customVerticalScrollbarWrapper {
  z-index: 34;
  bottom: 0;
}

.kat-task-detail-full .kat-task-detail__right-section .customVerticalScrollbarWrapper {
  right: 5px;
}.kat-popup-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(67, 65, 90, 0.57);
  z-index: 99999;
}

.kat-popup-content {
  line-height: 26px;
  font-size: 20px;
  color: #878793;
}

.kat-integration-wrapper-button {
  background: #57b557;
  padding: 11px 15px;
  border-radius: 2px;
  color: #fff;
  font-size: 14px;
  margin-top: 10px;
}
.kat-integration-wrapper-button:disabled{
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}
.kat-integration-wrapper-button.myday {
  margin: 0 !important;
  height: 50px !important;
  min-width: 100px;
  font-weight: 600;
  border-radius: 4px;
}

.kat-popup {
  background: #fff;
  margin-top: 190px;
  padding: 15px 15px 20px 15px;
  border-radius: 3px;
  margin: 190px auto 0;
  position: relative;
  width: 475px;
}

.kat-popup .kat-default-button {
  font-size: 16px;
  padding: 13px 30px;
  margin-top: 40px;
}

.kat-popup .kat-warning-ico {
  margin-bottom: 12px;
}

.kat-popup .kat-warning-ico:before {
  font-size: 70px;
  margin-left: 0;
  color: #7B7A8B;
}

.kat-popup.sm-width {
  width: 300px;
}

.kat-loader-container {
  height: 80px;
}

.popup-logo-container span {
  margin-top: 210px;
  display: block;
  font-size: 41px;
  text-align: center;
}

span.kat-popup__close-icon {
  position: absolute;
  right: 14px;
  top: 12px;
  cursor: pointer;
}

span.kat-popup__close-icon:before {
  font-size: 12px;
}

span.kat-popup__close-icon:hover:before {
  color: #49475E;
}

.kat-popup__error {
  text-align: center;
  margin: 40px 0;
}

h1.kat-popup-header {
  color: #49475E;
  font-size: 36px;
  margin-bottom: 20px;
}

.kat-popup.add-tags-popup {
  width: 650px;
  margin-top: 90px;
}

.addtags-container {
  padding: 30px;
}

.addtags-container .kat-addedtags {
  margin-bottom: 10px;
}

.addtags-header-txt, .complete-hdr-txt {
  width: 100%;
  text-align: center;
  font-size: 30px;
  display: inline-block;
  color: #858592;
  margin-bottom: 30px;
}

input.kat-addtags-input {
  height: 50px;
  font-size: 25px !important;
}

input.kat-addtags-input::-webkit-input-placeholder {
  font-size: 25px;
  color: #C5C6CD;
}

input.kat-addtags-input:-moz-placeholder { /* Firefox 18- */
  font-size: 25px;
  color: #C5C6CD;
}

input.kat-addtags-input::-moz-placeholder { /* Firefox 19+ */
  font-size: 25px;
  color: #C5C6CD;
}

input.kat-addtags-input:-ms-input-placeholder {
  font-size: 25px;
  color: #C5C6CD;
}

.kat-addtags-input-wrapper {
  margin-top: 40px;
}

.kat-addedtags {
  padding: 5px 8px;
  background: #D3D6DE;
  font-weight: 600;
  border-radius: 3px;
  color: #61656F;
  margin-right: 10px;
  display: inline-block;
}

.kat-addedtags-wrapper {
  margin-top: 13px;
  margin-left: 5px;
}

.kat-add-tags-button-set {
  text-align: center;
}

.kat-add-tags-button-set button {
  margin-right: 15px;
}

.kat-add-tags-button-set .kat-button-cancel {
  padding: 12px;
  font-size: 14px;
}

.kat-add-tags-button-set .kat-button-cancel:hover {
  background: rgba(148, 152, 158, 0.13);
}

.kat-popup.complete-task-popup {
  width: 800px;
  margin: 90px auto 0;
  padding: 35px;
}

.kat-popup.complete-task-popup .kat-default-button {
  margin-top: 0;
  padding: 6px 12px !important;
  font-size: 12px;
}

.kat-completetask-button-set {
  margin-top: 20px;
  text-align: center;
}

.completetask-wrapper .kat-task-detail__right-section__content-body-col3-wrapper {
  padding: 0;
}

.email-notification {
  width: 630px;
  margin-top: 100px;
}

.email-notification .kat-projects-popup__container {
  padding: 10px;
}

.email-notification .kat-projects-popup__title {
  padding-bottom: 10px;
  border-bottom: 1px solid #f7f8f9;
}

.email-notification .kat-projects-popup__title span {
  font-size: 18px;
}

.email-notification .popup-body {
  margin-top: 30px;
}

.email-notification .kat-task-detail__right-section__bottom-bar__watcher {
  width: 26px;
  height: 26px;
  margin-left: 0;
  margin-right: 10px;
  margin-top: -2px;
  font-size: 14px;
  line-height: 25px;
  z-index: 8;
  position: relative;
}

.email-notification .avatar-image-small {
  border: 1px solid black;
  height: 26px;
  width: 26px;
  border-radius: 50%;
  margin: 0;
  position: relative;
  top: 0;
}

.email-notification .primary-txt {
  font-weight: bold;
  font-size: 15px;
  color: #7f7e8b;
}

.email-notification .avatar-lable-wrapper {
  padding: 5px 20px 5px 20px;
  background: #f1f2f5;
  border-radius: 0 20px 20px 0;
  position: relative;
  top: -2px;
  left: -16px;
  border: 1px solid #e9eaee;
  color: #787b82;
  font-size: 12px;
}

.email-notification .sub-input {
  border: 1px solid #f0f0f0;
  width: 80%;
  color: #787b82;
  padding: 5px;
  margin-top: -5px;
}

.email-notification .recipient-wrapper {
  margin-left: 10px;
  width: 86%;
}

.email-notification .email-message {
  min-width: 578px;
  width: 578px;
  max-width: 578px;
  margin-top: 15px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  min-height: 120px;
  padding: 8px;
  font-size: 12px;
  color: #787c81;
  line-height: 16px;
  resize: none;
}

.email-notification .button-set .kat-default-button {
  background: #57b557;
  padding: 8px 15px;
  border-radius: 2px;
  color: #fff;
  font-size: 10px;
  min-width: 70px;
  margin-top: 0;
}

.email-notification .button-set .kat-default-button:hover {
  background: #54a24d;
}

.email-notification .button-set .kat-button.cancel {
  font-size: 10px;
  color: #d0d0d1;
  padding: 8px 12px;
}

.email-notification .button-set .kat-button.cancel:hover {
  color: #949ba1;
}.kat-profile-wrapper {
  padding-top: 98px;
  align-items: flex-start;
  position: relative;
  overflow: auto;
  margin-right: 50px;
}

.kat-profile__item, .kat-profile__main-item {
  background: #FFF;
  flex: 0 0 350px;
  border-radius: 4px;
  color: #94989E;
  margin-left: 80px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.38);
  -webkit-animation: workStreamEntry 0.15s ease-in-out;
          animation: workStreamEntry 0.15s ease-in-out;
  height: calc(100% - 50px);
  position: relative;
  padding-top: 40px;
}

.kat-profile__item .kat-login-board__data__secondary-data, .kat-profile__main-item .kat-login-board__data__secondary-data {
  margin: 0;
}

.kat-profile__item .kat-login-board__data__secondary-data input:focus ~ label, .kat-profile__main-item .kat-login-board__data__secondary-data input:focus ~ label, .kat-profile__item .kat-login-board__data__secondary-data textarea:focus ~ label, .kat-profile__main-item .kat-login-board__data__secondary-data textarea:focus ~ label, .kat-profile__item .kat-login-board__data__secondary-data input:valid ~ label, .kat-profile__main-item .kat-login-board__data__secondary-data input:valid ~ label {
  color: #a5a6a7;
  text-transform: uppercase;
}

.kat-profile__item button.kat-secondary-button, .kat-profile__main-item button.kat-secondary-button {
  font-size: 15px;
  padding: 10px 22px;
}

.kat-default-form {
  position: relative;
  height: 100%;
}

.kat-profile__item:after, .kat-profile__main-item:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 12px;
  width: 150px;
  background: #F0C600;
  border-radius: 0 0 3px 0;
}

.kat-profile__main-item {
  margin-left: 280px;
  flex: 0 0 438px;
  padding-left: 170px;
}

.kat-profile__main-item:first-child {
  flex: 0 0 600px;
}

.kat-profile__main-item:last-child {
  margin-right: 40px;
}

.kat-profile__image-wrapper {
  display: inline-block;
  position: absolute;
  left: -31%;
  top: 100px;
}

.kat-profile__image-wrapper:hover .kat-profile__image-overlay {
  opacity: 1;
}

.kat-profile__image-wrapper:hover .kat-profile__image-overlay span.kat-profile__image-overlay__icon {
  transform: scale(1);
  opacity: 1;
}

img.kat-profile__image {
  width: 300px;
  min-height: 300px;
}

.kat-profile__main-item-content {
  padding: 0 35px;
}

.kat-profile__image-change {
  position: absolute;
  top: -4px !important;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 0 !important;
  cursor: pointer;
}

.kat-profile__image-wrapper:after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 3px solid #F0C600;
  z-index: 5;
}

.kat-default-form__main-title-field {
  margin: 30px 0 30px;
  height: 86px;
}

.kat-default-form__main-title-field input[type="text"] {
  font-size: 30px;
  width: 100%;
  padding: 15px 5px;
  border: none;
  border-bottom: 1px solid #D8DADF;
  color: #757575;
}

.kat-default-form__field.main-field {
  height: 37px;
}

.kat-default-form__field.main-field .kat-default-form__view, .kat-default-form__field.main-field .kat-default-form__main-title-view {
  font-weight: 100;
  color: #B0B0B2;
  padding-bottom: 8px;
  font-size: 24px;
}

.kat-default-form__field.main-field input[type='text'] {
  border: none;
  border-bottom: 1px solid #D8DADF;
  padding-bottom: 8px;
  font-size: 18px;
  margin-bottom: 7px;
  width: 100%;
  color: #757575;
}

.kat-default-form__main-title-view {
  font-weight: 400;
  color: #42405A;
  font-size: 28px;
  font-family: 'Oswald';
}

.kat-profile__bg-text {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 19vh;
  font-weight: 400;
  color: #F9F9FA;
  line-height: 166px;
  font-family: 'Oswald';
  overflow: hidden;
  max-height: calc(100% - 105px);
}

.kat-profile__footer-text {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 15px 28px;
  font-size: 14px;
}

.kat-profile__image-overlay {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  font-family: 'sf-compact-regular';
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

span.kat-profile__image-overlay-text {
  padding-left: 12px;
  position: relative;
  top: -2px;
}

ul.kat-profile__image-overlay-text {
  position: absolute;
  top: 18px;
  right: 23px;
  z-index: 10;
}

span.kat-profile__image-overlay__icon {
  display: inline-block;
  height: 35px;
  width: 35px;
  background: rgba(16, 16, 16, 0.43);
  border-radius: 50%;
  text-align: center;
  padding: 7px;
  margin-left: 10px;
  margin-top: 5px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: scale(0);
  transition: 0.2s all ease-in;
  transition-delay: 0.15s;
}

span.kat-profile__image-overlay__icon:before {
  margin-left: 0 !important;
  font-size: 14px !important;
}

.kat-profile__main-item-secondary {
  padding-left: 0;
  margin-left: 45px;
  overflow: hidden;
}

.kat-profile__bg-text-secondary {
  line-height: 117px;
}

.kat-profile__main-item-secondary .kat-default-form__main-title-field {
  text-align: center;
  z-index: 10;
  position: relative;
}

.kat-profile__main-item-secondary .kat-default-form__main-title-field .kat-default-form__main-title-view {
  margin-top: -23px;
}

.kat-profile__main-item-project .kat-default-form__main-title-field {
  height: 59px;
}

.kat-profile__main-item-project-infm-wrapper {
  border: 1px solid #f0f3f8;
  padding: 20px;
  margin-bottom: 20px;
}

.kat-profile__main-item-project-thumbnail {
  height: 70px;
  width: 70px;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  margin-right: 10px;
  cursor: default;
  text-align: center;
  line-height: 66px;
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
}

.kat-profile__main-item-project-thumbnail.turquoise_blue {
  background: #76d9f8;
}

.kat-profile__main-item-project-thumbnail.steel_blue {
  background: #4483c0;
}

.kat-profile__main-item-project-details-wrapper {
  padding: 0 10px;
}

.kat-profile__main-item-project-details-wrapper h1 {
  font-weight: 400;
  color: #42405A;
  font-size: 26px;
  font-family: sf-compact, 'Roboto', sans-serif;
}

.kat-profile__main-item-project-designation {
  padding: 5px 10px;
  color: #42405A;
  background: #dde1ea;
  float: left;
  font-size: 14px;
  margin-top: 10px;
  margin-right: 10px;
}

.kat-integration-wrapper {
  border-bottom: 1px solid #eeeef0;
  padding-bottom: 20px;
  margin-bottom: 20px;
  margin: 0 35px;
}

.kat-integration-contentWrapper {
  width: 100%;
  height: calc(100% - 114px);
  overflow: auto;
}

.kat-integration-wrapper-icon {
  background: url(/dist/calendar@1x.png) no-repeat;
  height: 45px;
  width: 45px;
  background-position: 0;
  background-size: 40px;
}

.kat-integration-customize-button {
  margin-left: 0;
}

.kat-integration-wrapper-icon.jira {
  background: url(/dist/jira@1x.png) no-repeat;
}
.kat-integration-wrapper-icon.officeTeam {
  background: url(/dist/officeteam@1x.png) no-repeat;
}
.kat-integration-wrapper-icon.slack {
  background: url(/dist/slack@1x.png) no-repeat;
}
.kat-integration-wrapper-icon.bitrix {
  background: url(/dist/bitrix@1x.png) no-repeat;
}

.kat-integration-wrapper-icon-information {
  font-size: 19px;
  color: #5f5d70;
  margin-top: 10px;
  font-weight: 100;
}

.kat-integration-wrapper-icon-information-txt-wrapper {
  margin-left: 57px;
}

.kat-integration-wrapper-icon-information-txt {
  font-size: 14px;
  margin-top: 10px;
  line-height: 1.5;
  color: #bdbcbd;
  font-weight: 100;
}

.kat-integration-wrapper-icon-coming-soon-txt {
  text-align: center;
  color: #bdbcbd;
  margin-top: 25px;
  font-size: medium;
}

.onoffswitch {
  position: relative;
  width: 35px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  top: 16px;
}

.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  height: 12px;
  padding: 0;
  line-height: 15px;
  border: 0 solid #FFFFFF;
  border-radius: 30px;
  background-color: #EAEAEC;
}

.onoffswitch-label:before {
  content: "";
  display: block;
  width: 21px;
  margin: -4.5px;
  background: #c9cdd6;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 22px;
  border-radius: 30px;
}

.onoffswitch-checkbox.checked + .onoffswitch-label {
  background-color: #CEE9CE;
}

.onoffswitch-checkbox.checked + .onoffswitch-label, .onoffswitch-checkbox.checked + .onoffswitch-label:before {
  border-color: #CEE9CE;
}

.onoffswitch-checkbox.checked + .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}

.onoffswitch-checkbox.checked + .onoffswitch-label:before {
  right: 0;
  background-color: #57B557;
}

.kat-integration-wrapper-button {
  background: #57b557;
  padding: 11px 15px;
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin-top: 10px;
  margin-left: 35px;
}

.kat-integration-customize-button {
  margin-left: 0;
}

.kat-integration-wrapper-button .flaticon-wrench:before {
  margin-left: 0 !important;
  margin-right: 5px;
  font-size: 13px;
}

.kat-login-board__data__existing-txt {
  display: inline-block;
  color: #8F909D;
  font-size: 14px;
}

.kat-login-board__data__existing-txt-icon-wrapper {
  visibility: hidden;
}

.kat-login-board__data__existing-txt:hover > .kat-login-board__data__existing-txt-icon-wrapper {
  visibility: visible;
}

.kat-login-board__data__existing-txt-icon.flaticon-edit-pen:before, .kat-login-board__data__existing-txt-icon.flaticon-delete:before {
  font-size: 14px;
  cursor: pointer;
  margin-left: 15px;
}

.kat-login-board__data__existing-txt-link {
  font-size: 14px;
  color: #494D50;
  margin-top: 10px;
}

.kat-login-board__data__secondary-data-social {
  margin-bottom: 35px;
}

.kat-login-board__data__secondary-data-add {
  font-size: 14px;
  color: #8F909D;
}

.kat-popup.kat-add-social-link-popup {
  width: 650px;
  margin: 16vh auto 0;
}

.kat-add-social-link-container {
  padding: 30px 60px;
}

.add-social-link-container-heading {
  margin: 30px 20px;
  text-align: center;
  font-size: 30px;
}

.kat-ex-label {
  font-size: 12px;
}

.kat-add-social-link-container .input-group label {
  color: #29303d;
  font-size: 20px;
}

.kat-add-social-link-container .input-group__error-message {
  top: 58px;
  left: 0;
}

.kat-add-social-link-button-set {
  padding-left: 15px;
}

.kat-add-social-link-button-set button {
  margin-right: 15px;
}

.kat-add-social-link-button-set .kat-button-cancel {
  padding: 12px;
  font-size: 14px;
}

.kat-add-social-link-button-set .kat-button-cancel:hover {
  background: rgba(148, 152, 158, 0.13);
}

.kat-personal-data-date-ip {
  width: 100%;
  border-bottom: 1px solid #D8DADF;
  color: #757575;
  height: 34px;
}

.kat-personal-data-date-ip .flaticon-calendar-icon:before {
  margin-left: 0;
  position: relative;
  top: 5px;
}

.kat-personal-data-date-ip label {
  float: left;
  margin-top: 0;
  color: #a5a6a7 !important;
}

.kat-profile-dob-txt {
  margin-left: 10px;
  float: left;
  margin-top: 10px;
}

.kat-login-board-designation .kat-login-board__data__secondary-data__bar {
  top: -5px;
}

.kat-login-board__data__secondary-data.pre-loaded-email label {
  color: #a5a6a7;
  top: -14px;
  font-size: 14px;
}

.skill-input {
  height: 42px;
}

.added-link {
  color: #42405A;
  cursor: pointer;
}.kat-projects-add-people__wrapper {
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  -webkit-animation: zoom-in 0.3s ease-in-out;
          animation: zoom-in 0.3s ease-in-out;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}

@-webkit-keyframes zoom-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes zoom-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.kat-projects-add-people-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(31, 37, 50, 0.95);
  overflow: scroll;
}
.kat-projects-add-people-overlay::-webkit-scrollbar { 
  display: none; 
}

.kat-projects-add-people__header {
  height: 206px;
  padding: 70px 0 0 0;
  width: 99%;
  margin-bottom: 20px;
  position: fixed;
  z-index: 10;
  background: rgba(32, 38, 51, 0.95);
}

.kat-projects-add-people__header-innerwrapper {
  width: 69.2307%;
  margin-left: 50%;
  text-align: center;
  transform: translateX(-50%);
}

.kat-projects-add-people__body__status__heading {
  position: fixed;
  top: 181px;
  z-index: 20;
}

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
  background: #ffffff !important;
}

.kat-projects-add-people {
  z-index: 111;
  position: relative;
  height: calc(100% - 82px);
  overflow: scroll;
}

.kat-projects-add-people::-webkit-scrollbar { 
  display: none; 
}

.kat-projects-add-people__header__heading {
  display: inline-block;
  font-size: 35px;
  color: white;
  font-weight: 300;
  max-width: 482px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kat-projects-add-people__header__heading-project-name {
  max-width: 193px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  float: left;
}

.kat-projects-add-people__header__heading-txt {
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  float: left;
}

.kat-projects-add-people__header__heading_wrapper {
  width: 100%;
  display: block;
}

.kat-projects-add-people__header__heading_wrapper-center {
  text-align: center;
  display: block;
  margin-top: 9%;
  position: relative;
  top: 10px;
}
.kat-projects-add-people__header__heading_wrapper-center .kat-projects-add-people__header__heading{
  max-width: 575px;
}
.kat-projects-add-people__header__heading_wrapper-center h1 {
  font-size: 30px;
}

.kat-projects-add-people__header__nav-icon-arrow.flaticon-arrows {
  float: left;
  padding-top: 10px;
  cursor: pointer;
}

span.kat-projects-add-people__header__nav-icon-arrow.flaticon-arrows:before {
  font-size: 30px !important;
  margin: 10px !important;
}

.kat-projects-add-people__header__nav-icon-cross.flaticon-cross-icon {
  float: right;
  padding-top: 10px;
  cursor: pointer;
  margin-right: 10px;
}

span.kat-projects-add-people__header__nav-icon-cross.flaticon-cross-icon:before {
  font-size: 25px !important;
  margin-right: 10px !important;
}

.kat-projects-add-people__body {
  width: 69.2307%;
  margin: auto;
  position: relative;
  top: 197px;
}

.kat-projects-add-people__body__people-list {
  width: 100%;
}

.kat-projects-add-people__body__people-list__item {
  width: 222px;
  margin: 10px;
  height: 230px;
  padding: 15px;
  background: white;
  border-radius: 3px;
  position: relative;
  float: left;
  border: 3px solid #FFF;
  cursor: pointer;
  -webkit-animation: pplListEntry 0.18s ease-in-out;
          animation: pplListEntry 0.18s ease-in-out;
  transform-origin: top center;
}

@-webkit-keyframes pplListEntry {
  from {
    transform: translateY(-80px);
    opacity: 0.4;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes pplListEntry {
  from {
    transform: translateY(-80px);
    opacity: 0.4;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

li.kat-projects-add-people__body__people-list__item.active:hover {
  background: #fff;
}

.kat-projects-add-people__body__people-list__item.active:hover > .kat-projects-add-people__body__people-list__item__select {
  display: none;
}

.kat-projects-add-people__body__people-list__item.selected {
  background: #DCEFF8;
  border: 3px solid #41C3E9;
}

.kat-projects-add-people__body__people-list__item:hover {
  background: #DCEFF8;
  border: 3px solid #DCEFF8;
}

.kat-projects-add-people__body__people-list__item:hover > span > span {
  color: #DCEFF8;
}

.kat-projects-add-people__body__people-list__item:hover > .kat-projects-add-people__body__people-list__item__select {
  display: inline-block;
}

.kat-projects-add-people__body__people-list__item__select {
  display: none;
  position: absolute;
  height: 25px;
  width: 25px;
  border: 2px solid #41C3E9;
  border-radius: 50%;
  left: 15px;
  top: 15px;
}

.kat-projects-add-people__body__people-list__item__selected {
  position: absolute;
  height: 25px;
  width: 25px;
  background: #41C3E9;
  border-radius: 50%;
  left: 15px;
  top: 15px;
}

.kat-projects-add-people__body__people-list__item__icon-holder img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  left: -1px;
  top: 0;
}

.project-team-name-seperator {
  float: left;
  margin-top: 2px;
}

.kat-projects-add-people__body__people-list__item__selected__icon:before {
  margin-left: 0 !important;
  font-size: 14px !important;
  color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-block;
  transform: translateX(-50%) translateY(-50%);
}

.kat-projects-add-people__body__people-list__item__icon-holder {
  width: 130px;
  height: 130px;
  display: block;
  margin: auto;
  border-radius: 100%;
  background: #22384A;
  margin-top: 4px;
  position: relative;
}

.kat-projects-add-people__body__people-list__item__primary-text {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: 17px;
  color: black;
  max-height: 38px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kat-projects-add-people__body__people-list__item__secondary-text {
  display: block;
  text-align: center;
  font-size: 14px;
  margin-top: 5px;
  max-height: 32px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kat-projects-add-people__body__people-list__item__icon-holder__text {
  font-size: 50px;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  left: 50%;
}

span.kat-projects-add-people__body__people-list__item__icon-holder__action-layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(65, 195, 233, 0.5);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.15s ease-in;
}

li.kat-projects-add-people__body__people-list__item.active span.kat-projects-add-people__body__people-list__item__icon-holder__action-layer {
  opacity: 1;
}

li.kat-projects-add-people__body__people-list__item.active:hover span.kat-projects-add-people__body__people-list__item__icon-holder__action-layer {
  background: rgba(233, 65, 65, 0.35);
}

span.kat-projects-add-people__body__people-list__item__icon-holder__action-layer__icon:before {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  font-size: 28px;
  transform: translateX(-50%) translateY(-50%);
}

span.kat-projects-add-people__body__people-list__item__icon-holder__action-layer__icon.flaticon-cross-icon {
  opacity: 0;
}

li.kat-projects-add-people__body__people-list__item.active:hover span.kat-projects-add-people__body__people-list__item__icon-holder__action-layer .kat-projects-add-people__body__people-list__item__icon-holder__action-layer__icon.flaticon-cross-icon {
  opacity: 1;
}

li.kat-projects-add-people__body__people-list__item.active:hover span.kat-projects-add-people__body__people-list__item__icon-holder__action-layer .kat-projects-add-people__body__people-list__item__icon-holder__action-layer__icon.flaticon-tick-thin {
  opacity: 0;
}

span.kat-projects-add-people__body__people-list__item__icon-holder__action-layer__icon {
  transition: all 0.2s ease-in;
}

span.kat-projects-add-people__body__people-list__item__icon-holder__action-layer__icon.flaticon-cross-icon:before {
  font-size: 22px;
}

.kat-projects-add-people__body__people-list__item__icon-holder .kat-profile-thumbnail__alphabet {
  width: 130px;
  height: 130px;
  left: 0;
  top: 0;
  font-size: 50px;
  line-height: 120px;
  margin: 0;
}

.kat-projects-add-people__body__status {
  position: absolute;
  top: 206px;
  left: 8px;
  z-index: 120;
  margin-left: 39px;
  bottom: 9%;
  overflow: auto;
}

.kat-projects-add-people__body__status__list {
  padding-top: 20px;
  float: left;
}

.kat-projects-add-people__body__status__list__item {
  height: 50px;
  width: 50px;
  margin: auto 10px;
  background: #22384A;
  border-radius: 50%;
  position: relative;
  margin-bottom: 10px;
}

.kat-projects-add-people__body__status__list__item .kat-profile-thumbnail__alphabet {
  width: 50px;
  height: 50px;
  background: none;
  left: 0;
  line-height: 46px;
  font-size: 22px;
  top: 2px;
  margin: 0;
}

.kat-projects-add-people__body__status__list__item .kat-projects-add-people__body-pro-img {
  width: 50px !important;
  height: 50px !important;
  left: -3px;
  top: -3px;
}
.kat-projects-add-people__body__status__list__item .kat-profile-thumbnail__alphabet:hover span.flaticon-cross-icon.circle-close {
  top: 0;
  left: -1px;
}

.kat-projects-add-people__body__status__list__item .kat-profile-thumbnail__alphabet:hover span.flaticon-cross-icon.circle-close {
  visibility:visible;
}

.kat-projects-add-people__body__status__list__item__text {
  font-size: 30px;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  left: 50%;
  cursor: default;
}

.kat-projects-add-people__body__status__list {
  padding-top: 20px;
}

.kat-projects-add-people__body__status__list__item__action-icon {
  position: absolute;
  left: -5px;
  bottom: 18px;
  height: 13px;
  width: 13px;
  opacity: 0;
  background: #e05640;
  border-radius: 50%;
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.8);
  -webkit-clip-path: circle(15px at center);
          clip-path: circle(15px at center);
  transition: opacity 0.15s ease-in;
  font-weight: 300;
  cursor: pointer;
}

.kat-projects-add-people__body__status__list__item:hover .kat-projects-add-people__body__status__list__item__action-icon {
  opacity: 1;
}

span.kat-projects-add-people__body__status__list__item__action-icon.flaticon-cross-icon:before {
  font-size: 5px !important;
  margin-left: 0 !important;
  color: white;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.kat-projects-add-people__header__input {
  width: 125px;
  transition: all .5s ease;
  padding: 10px 25px;
  background: none;
  border: none;
  margin-top: 20px;
  color: white;
  font-size: 15px;
  background-image: url(/dist/magnifying-glass-browser.png);
  background-repeat: no-repeat;
  background-position: 0 10px;
  -webkit-appearance: textfield;
}

.kat-projects-add-people__header__input:focus {
  width: 350px;
  border-bottom: 1px solid #5B606A;
}

.kat-projects-add-people__body__nav-button { /* display: inline-block; */
  /* position: relative; */
  /* left: 50%; */
  /* transform: translateX(-50%); */
  z-index: 115;
  bottom: 9px;
  position: relative;
  width: 100%;
  padding: 20px 0;
}

.kat-projects-add-people__body__nav-button-wrapper {
  margin: auto;
  width: 69.2307%;
  text-align: center;
}

.kat-projects-add-people__body__nav-button button.disabled {
  background-color: #C8CCD5 !important;
  cursor: no-drop;
}

.kat-projects-add-people__body__nav-button button {
  background: #58B358 !important;
  padding: 10px 23px;
  border-radius: 2px;
  -webkit-animation: addpplBtnEntry 0.2s ease-in-out;
          animation: addpplBtnEntry 0.2s ease-in-out;
  position: relative;
}

.kat-projects-add-people__body__nav-button-wrapper .kat-login-board__data__nav-button__icon {
  padding-bottom: 0;
  position: relative;
  top: 4px;
}

@-webkit-keyframes addpplBtnEntry {
  from {
    transform: translateY(100px) scale(0.8);
    opacity: 0.8;
  }
  to {
    transform: translateY(0px) scale(1);
    opacity: 1;
  }
}

@keyframes addpplBtnEntry {
  from {
    transform: translateY(100px) scale(0.8);
    opacity: 0.8;
  }
  to {
    transform: translateY(0px) scale(1);
    opacity: 1;
  }
}

.kat-projects-add-people__body__nav-button span {
  color: white;
  font-size: 16px;
}

.kat-projects-add-people__body-pro-img {
  height: 60px !important;
  width: 60px !important;
  border-radius: 50%;
  margin: 0 1px;
  position: relative;
  left: -8px;
  top: -4px;
  z-index: 0;
}

.add-ppl-avatar-name {
  margin-top: 10px;
}

span.flaticon-cross-icon.circle-close:before {
  margin-left: 0;
  font-size: 5px;
  position: relative;
  top: -4px;
}

span.flaticon-cross-icon.circle-close {
  position: absolute;
  background: #E42F2F;
  color: #fff;
  line-height: 4px;
  padding: 1px 0 0 0;
  border-radius: 50%;
  margin-left: -5px;
  margin-top: 6px;
  height: 13px;
  width: 13px;
  left: -1px;
  border: 1px solid #fff;
  cursor: pointer;
  top:0;
  visibility:hidden;
}

.kat-task-detail__right-section__bottom-bar__watcher:hover span.flaticon-cross-icon.circle-close, .kat-task-detail__right-section__header__toolbar__dropdown__list__img:hover span.flaticon-cross-icon.circle-close {
  visibility:visible;
}.kat-projects-add-people-overlay .kat-projects-add-roles__wrapper {
  position: absolute;
  top: 208px;
  width: 500px;
  left: 0;
  right: 0;
  background: #f5f6fa;
  margin: auto;
  padding: 0;
  border-radius: 3px;
  height: calc(100% - 230px);
}

.kat-projects-add-roles__list {
  padding: 5px 20px;
}

.kat-projects-add-roles__list__item {
  padding: 20px 10px;
  border-bottom: 1px solid #E9E9EA;
}

.kat-projects-add-roles__list__item__image-holder {
  height: 50px;
  width: 50px;
  float: left;
  position: relative;
  border-radius: 50%;
  background: #242B39;
  display: inline-block;
  margin-right: 20px;
  overflow: hidden;
}

.kat-projects-add-roles__list__item__image-holder img {
  height: 100%;
  width: 100%;
  border-radius: 100%;
}

.kat-projects-add-roles__list__item__image-holder__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: white;
  font-size: 18px;
}

.kat-projects-add-roles__list__item__primary-text {
  display: inline-block;
  width: calc(100% - 70px);
  font-size: 18px;
  color: #525863;
}

.kat-projects-add-roles__list__item__highlighted-text {
  background: #DCE0E9;
  padding: 4px;
  margin-top: 4px;
  display: inline-block;
  margin-right: 10px;
  font-size: 13px;
  color: #6E747F;
  border-radius: 3px;
  float: left;
  position: relative;
  width: 60px;
}

.kat-projects-add-roles__list__item__highlighted-text:hover > .kat-tag__close-icon {
  display: inline-block;
}

.kat-tag__close-icon {
  position: absolute;
  top: 1px;
  display: none;
  cursor: pointer;
}

.kat-tag__close-icon:before {
  margin-left: 5px !important;
  color: white;
  font-size: 6px !important;
  font-weight: bold;
  padding: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

.kat-projects-add-roles__list__item__secondary-text {
  font-size: 13px;
  position: relative;
}

.kat-projects-add-roles__button {
  background: #58B358 !important;
  padding: 11px 30px;
  border-radius: 2px;
  color: white;
  font-size: 14px;
  height: 40px;
  width: 180px;
  position: fixed !important;
  left: 50%;
  transform: translateX(-50%);
  bottom: 40px;
}

.kat-projects-add-roles__wrapper-scroll {
  height: calc(100% - 74px);
  overflow: auto;
}.filled { fill: #0055ff; }
.empty { fill: #cccccc; }
.inline { display: inline-block; }.kat-workstream-wrapper.project {
  padding-top: 98px;
  height: calc(100% - 89px);
  overflow: auto;
}

.kat-workstream.project .kat-workstream__actions {
  margin: 22px 15px;
  position: absolute;
  right: 0;
  z-index: 9;
}

.kat-project-header-wrapper {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kat-project-header {
  display: inline-block;
  position: relative;
  color: #f8f8f9;
  text-overflow: ellipsis;
  width: 100%;
}

.kat-project-header span {
  font-weight: 100;
}

.kat-project-header__text {
  font-weight: 100;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 87%;
  display: inline-block;
}

.kat-project-header__edit-ico {
  color: #C7C6CE;
  transform: translateX(70px) scale(0);
  display: inline-block;
  transition: 0.13s all ease-out;
  cursor: pointer;
  top: -4px;
  position: relative;
  right: -13px;
}

.kat-project-header__edit-ico:before {
  margin-left: 0 !important;
}

.kat-project-header-wrapper:hover .kat-project-header__edit-ico {
  transform: translateX(0) scale(1);
}

.kat-project-header-wrapper:hover .kat-project-header__edit-ico:before {
  margin-left: 2px;
}

.kat-project-details__wrapper {
  height: 290px;
  background: #FFF;
  padding: 15px;
  border-bottom: 1px solid #c6cbd1;
  border-radius: 4px 4px 0 0;
}

.kat-project-details__section-header {
  color: #202736;
  font-weight: 700;
  font-size: 16px;
  display: inline-block;
  margin: 5px 12px;
}

.kat-project-details__status {
  position: relative;
}

.kat-project-details__status__progress-cont {
  height: calc(100% - 38px);
}

ul.kat-project-details__status__bottom-section li {
  display: inline-block;
  padding: 4px;
  margin: 0 16px;
  color: #202736;
  position: relative;
  cursor: pointer;
}

ul.kat-project-details__status__bottom-section li.active {
  font-weight: 700;
}

ul.kat-project-details__status__bottom-section li.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #293141;
}

.kat-projects__bottom-section__user-list ul li {
  padding: 15px 15px 2px 15px;
  display: flex;
  color: #293141;
  align-items: center;
  justify-content: center;
}

.kat-projects__bottom-section__user-list ul li .kat-profile-thumbnail__alphabet {
  width: 30px;
  height: 30px;
  font-size: 14px;
  line-height: 29px;
}

.kat-projects__bottom-section__user-list ul li .kat-task-detail__right-section__content-body-col__content-image {
  top: 0;
  left: -6px;
}

span.kat-user-dp-alpha {
  width: 35px;
  height: 35px;
  background: #293141;
  color: #fff;
  text-align: center;
  padding-top: 7px;
  border-radius: 50%;
  position: relative;
}

.kat-projects__bottom-section__user-list {
  padding-top: 10px;
  background: #f5f6fa;
  height: 100%;
  overflow: auto;
}

.kat-projects__user-details-wrapper {
  flex: 1;
  padding-left: 10px;
  font-size: 15px;
  padding-top: 4px;
}

span.kat-user-dp__close.flaticon-cross-icon {
  height: 15px;
  width: 15px;
  line-height: 5px;
  position: absolute;
  left: -7px;
  border-radius: 50%;
  background: #E42F2F;
  padding: 1px;
  border: 1px solid #EAEDF4;
  top: 10px;
  opacity: 0;
  transform: scale(0);
  transition: 0.14s all ease-in;
  display: inline-block;
  cursor: pointer;
  z-index: 1;
}

.kat-user-dp-alpha img {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  border-radius: 50%;
  overflow: hidden;
  z-index: 0; /* border: 2px transparent; */
}

.kat-user-dp-alpha:hover span.kat-user-dp__close.flaticon-cross-icon {
  transform: scale(1);
  opacity: 1;
}

span.kat-user-dp__close.flaticon-cross-icon:before {
  margin-left: 0;
  font-size: 6px;
  line-height: 5px;
}

.kat-projects__user-details__progress-wrapper {
  height: 2px;
  border-radius: 2px;
  background: #d4d7df;
  width: 100%;
  margin: 3px 0;
}

.kat-projects__user-details__progress {
  height: 4px;
  border-radius: 2px;
  background: #D4DFD7;
  width: 100%;
  margin: 3px 0;
  position: relative;
  top: -1px;
}

.kat-project-header__edit {
  position: absolute;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.36);
  top: -61px;
  width: 100%;
}

.kat-project-header__edit input {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.73);
  background: none;
  border-bottom: none;
  padding: 5px;
}

.kat-project-header__edit button {
  margin-top: 14px;
}

.kat-project-header__edit .kat-workstream__head__text-edit-actions {
  margin-left: 4px;
}

.kat-project-header__edit .kat-workstream__head__text-edit-actions:before {
  margin-left: 0 !important;
}

.kat-project-header__edit .kat-workstream__head__text-edit-actions.flaticon-cross-icon:before {
  margin-top: 2px;
  display: inline-block;
  font-size: 14px;
}

.kat-project-header__edit .kat-workstream__head__text-edit-actions.flaticon-tick-thin:before {
  font-size: 16px;
  margin-top: 1px;
  display: inline-block;
}

span.kat-projects__add-icon {
  width: 35px;
  height: 35px;
  border: 1px dashed #B4B8BE;
  border-radius: 50%;
  padding: 6px 9px;
  color: #AAAEB6;
}

span.kat-projects__add-icon:before {
  font-size: 18px !important;
}

span.kat-projects__add-icon-text {
  display: inline-block;
  padding: 6px 10px;
  color: #B4B8BE;
}

.kat-projects__add-user-li {
  cursor: pointer;
}

.kat-projects__add-user {
  text-align: center;
}

.kat-projects__add-user__empty-text {
  font-size: 28px;
  color: #B4B8BE;
}

.kat-projects__add-user-wrapper {
  display: inline-block;
  margin-bottom: 15px;
  cursor: pointer;
}

.kat-projects__bottom-section {
  height: calc(100% - 329px);
  position: relative;
  background: #f5f6fa;
}

.kat-projects__add-icon.flaticon-add-user-icon:before {
  margin-left: 0;
}

.kat-projects__user-details__main-text {
  max-width: 215px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.kat-workstream__foot.workstream-foot ul li {
  color: #595F65;
  font-size: 13px;
  padding: 11px 10px;
}

.kat-workstream__foot.workstream-foot ul li.fright {
  font-weight: 700;
}

ul.kat-project__items-hidden-1 li {
  position: absolute;
  border-radius: 2px 2px 0 0;
}

ul.kat-project__items-hidden-1 li:first-child {
  height: 7px;
  left: 6px;
  right: 6px;
  background: rgba(255, 255, 255, 0.76);
  top: -7px;
}

ul.kat-project__items-hidden-1 li:nth-child(2) {
  height: 14px;
  top: -14px;
  left: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.5);
}

ul.kat-project__items-hidden-1 li:nth-child(3) {
  height: 21px;
  top: -21px;
  left: 18px;
  right: 18px;
  background: rgba(255, 255, 255, 0.3);
}

.kat-project-details__status__progress-cont__footer {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
}

ul.clearfix.kat-project-details__status__progress-cont__footer__filter li {
  font-size: 10px;
  border-radius: 10px; /* font-size: 0.6vw; */
  padding: 1px 8px 2px;
  cursor: pointer;
  margin: 0 4px;
}

ul.kat-project-details__status__progress-cont__footer__filter {
  display: inline-block;
}

ul.kat-project-details__status__progress-cont__footer__filter li.active {
  background: #8c8f97;
  color: #fff;
}

ul.kat-project-details__status__progress-cont__footer__filter li:not(.active):hover {
  color: #202736;
}

@media all and (max-height: 755px) {
  .kat-project-details__wrapper {
    height: 245px !important;
  }
  .kat-projects__bottom-section {
    height: calc(100% - 284px) !important;
  }
}

.kat-workstream-wrapper.project.team-member .kat-project-header__text, .kat-workstream-wrapper.project.project-cards .kat-project-header__text {
  font-weight: 100;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 72%;
  display: inline-block;
}.kat-projects-add-people-overlay__data {
  width: 800px; /* text-align: center; */
  position: absolute;
  top: 50%; /* bottom: 0; */
  left: 50%; /* right: 0; */
  /* margin: auto; */
  transform: translateX(-50%) translateY(-20%);
}

.kat-projects-add-people-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(31, 37, 50, 0.95);
  z-index: 100;
}

.kat-projects-add-people-overlay__data__primary-heading {
  padding: 10px 0 15px 0;
  color: white;
  background: rgba(31, 37, 50, -0.05);
  border: none;
  border-bottom: 1px solid white; /* border: none; */
  font-size: 35px;
  display: block;
  width: 100%;
}

.kat-projects-add-people-overlay__data__primary-heading::-webkit-input-placeholder {
  color: white;
}

.kat-projects-add-people-overlay__data__primary-heading::-webkit-input-placeholder {
  color: #596275;
}

.kat-projects-add-people-overlay__data__primary-heading:-moz-placeholder { /* Firefox 18- */
  color: white;
}

.kat-projects-add-people-overlay__data__primary-heading:focus:-moz-placeholder { /* Firefox 18- */
  color: transparent;
}

.kat-projects-add-people-overlay__data__primary-heading::-moz-placeholder { /* Firefox 19+ */
  color: white;
}

.kat-projects-add-people-overlay__data__primary-heading:focus::-moz-placeholder { /* Firefox 18- */
  color: transparent;
}

.kat-projects-add-people-overlay__data__primary-heading:-ms-input-placeholder {
  color: white;
}

.kat-projects-add-people-overlay__data__primary-heading:focus:-ms-input-placeholder { /* Firefox 18- */
  color: transparent;
}

.kat-projects-add-people-overlay__data__nav-button {
  display: inline-block;
  margin: auto; /* width: 100px; */
  margin-top: 70px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.kat-projects-add-people-overlay__data__nav-button button {
  background: #58B358 !important;
  padding: 12px 20px;
  border-radius: 2px;
  color: white;
  height: 40px;
}

.kat-projects-add-people-overlay__data__nav-button button span {
  font-size: 14px;
}

.kat-projects-add-people-overlay__data__secondary-heading {
  font-size: 14px;
  color:#fff;
}

.kat-projects-add-people-overlay__close-button {
  position: absolute;
  top: 100px;
  right: 200px;
}

.kat-projects-add-people-overlay__close-button:before {
  margin-left: 0;
  font-size: 25px !important;
  opacity: 0.7;
}.popup-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  overflow: auto;
}

.popup-calendar-sync-container {
  border-radius: 5px;
  height: auto;
  position: absolute;
  width: 50%;
  padding: 20px 50px;
  background: #f5f6f8;
  margin-bottom: 30px;
  top: 30px;
  bottom: auto;
}

.popup-calendar-sync-image {
  width: 250px;
  height: 250px;
  margin: auto;
  background: url(/dist/calendarSync.png) no-repeat center center;
  background-size: contain;
}

.popup-calendar-sync-title {
  font-weight: 100;
  color: #49484f;
  font-size: 27px;
  text-align: center;
  margin: 0 0 15px 0;
}

.popup-calendar-sync-sub-title {
  color: #828285;
  text-align: center;
  font-weight: 100;
  font-size: 15px;
  margin-bottom: 20px;
}

.popup-calendar-sync-refresh {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
  display: block;
}

.popup-calendar-sync-refresh.rotate-animation {
  -webkit-animation: rotate-animation 5s linear 2s infinite;
          animation: rotate-animation 5s linear 2s infinite;
}

.popup-calendar-sync-refresh:before {
  font-size: 41px;
  color: #82818d;
  margin-left: 0;
}

.popup-calendar-sync-mail-list-wrapper {
  background: #fff;
  border-radius: 5px;
}

.popup-calendar-sync-email-account-title {
  color: #242424;
  font-size: 17px;
  font-weight: 100;
  border-bottom: 1px solid #ededed;
  padding: 15px 25px;
  cursor: pointer;
  position: relative;
}

.select-workstream-content-dropdown.flaticon-arrow:before, .popup-calendar-sync-email-account-title.flaticon-arrow:before {
  position: absolute;
  right: 20px;
  font-size: 7px;
  transform: rotate(90deg);
  color: #c5c5cc;
  top: 47%;
}

.select-workstream-content-dropdown.flaticon-arrow.active:before, .popup-calendar-sync-email-account-title.flaticon-arrow.active:before {
  transform: rotate(-90deg);
  top: 47%;
}

.popup-calendar-sync-email-account-content ul {
  padding: 0 25px;
}

.popup-calendar-sync-email-account-content ul li {
  padding: 15px 0;
  border-bottom: 1px solid #f0f1f4;
}

.popup-calendar-sync-email-account-content ul li label {
  font-size: 17px;
  font-weight: 100;
  cursor: pointer;
}

.popup-calendar-sync-email-account-content ul li label input {
  margin-right: 10px;
  vertical-align: middle;
}

.popup-calendar-sync-email-account-content ul li label input:checked + span {
  color: #54A24D;
}

.popup-calendar-sync-email-account-content ul li .radio-wrapper {
  margin: 10px 0;
}

.popup-calendar-sync-email-account-content ul li .radio-wrapper label {
  margin-right: 20px;
  color: #5a5f6a;
  font-size: 15px;
  cursor: pointer;
}

.popup-calendar-sync-email-account-content ul li .radio-wrapper label input {
  margin-right: 10px;
}

.popup-calendar-sync-email-account-content .calendar-workstream-input {
  display: block;
  padding: 10px;
  border-radius: 3px;
  outline: none;
  width: 100%;
  font-size: 15px;
  color: #5a5f6a;
  border: 1px solid #f0f1f4;
  font-weight: 100;
}

.calendar-workstream-input-label-text {
  color: #b0afb5;
  font-size: 14px !important;
  line-height: 25px;
  margin-top: 5px;
  font-weight: lighter !important;
  display: block;
}

.select-workstream-content-dropdown {
  position: relative;
  padding: 10px;
  border-radius: 3px;
  outline: none;
  width: 100%;
  border: 1px solid #f0f1f4;
  font-weight: 100;
  height: 41px;
  cursor: pointer;
}

.select-workstream-content-dropdown-text-holder {
  font-size: 15px;
  color: #5a5f6a;
  position: absolute;
  left: 10px;
}

.select-workstream-content-dropdown-text-placeholder {
  font-size: 15px;
  color: #5a5f6a;
  position: absolute;
  left: 10px;
  opacity: 0.5;
}

.select-workstream-content-dropdown-list-wrapper {
  position: absolute;
  text-align: left;
  width: 100%;
  background: #fff;
  z-index: 999;
  box-shadow: 0 0 8px rgba(67, 65, 90, 0.42);
  color: grey;
  -webkit-animation: dropdownEntry 0.16s ease-in-out;
          animation: dropdownEntry 0.16s ease-in-out;
  transform-origin: top center;
  left: 0;
  min-width: 195px;
  max-height: 195px;
  overflow: auto;
  line-height: normal;
  top: 100%;
}

.select-workstream-content-dropdown-list-wrapper li {
  padding: 10px 10px 0 10px;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-top: 1px solid transparent;
  overflow: hidden;
  border-bottom: 1px solid transparent;
  position: relative;
  min-height: 36px;
  cursor: pointer;
  font-weight: 100;
  color: #5a5f6a;
}

.popup-calendar-sync-container .button-set {
  margin: 35px 0 20px 0;
}

.popup-calendar-sync-container .button-set button {
  padding: 11px 20px;
  border-radius: 2px;
  color: rgba(208, 209, 211, 0.8);
  margin: 10px 0 0 35px;
  font-size: 15px;
}

.popup-calendar-sync-container .button-set .kat-default-button {
  font-weight: 100;
  color: #fff;
}

.popup-calendar-sync-container .button-set .kat-default-button.inactive {
  background: #c4c5c7;
}

.popup-calendar-sync-container .popup-calendar-sync-email-account-content.inactive, .popup-calendar-sync-container .popup-calendar-sync-email-account-content.inactive .radio-wrapper label {
  color: #242424;
  opacity: 0.6;
  cursor: auto;
}

.popup-calendar-sync-container .popup-calendar-sync-email-account-content.inactive .calendar-workstream-input {
  color: #242424;
  opacity: 0.6;
  cursor: auto;
}

.popup-calendar-sync-container .popup-calendar-sync-email-account-content.inactive ul li label {
  color: #242424;
  opacity: 0.5;
  cursor: auto;
}

.popup-calendar-sync-email-account-content .kat-userlist__dropdown__items_icon:not(.flaticon-check).checkbox {
  margin-top: 0;
  margin-right: 5px;
}

.popup-calendar-sync-email-account-content span.flaticon-tick-thin:before {
  font-size: 11px !important;
  padding: 2px;
  margin-left: 0 !important;
  background: green;
  color: #fff;
  border: 1px solid green;
  border-radius: 3px;
  position: relative;
  left: 0;
  top: -4px;
}

.popup-calendar-sync-email-account-content span.flaticon-tick-thin + span {
  color: green;
}

.popup-calendar-sync-email-account-content span.flaticon-round:before {
  color: #cecdd3;
  margin-left: 0;
  font-size: 13px;
  cursor: pointer;
}

.popup-calendar-sync-email-account-content span.flaticon-round, .popup-calendar-sync-email-account-content span.flaticon-radio-active {
  margin-right: 5px;
}

.popup-calendar-sync-email-account-content span.flaticon-radio-active:before {
  color: #2bbee8;
  margin-left: 0;
  font-size: 13px;
  cursor: pointer;
}

@-webkit-keyframes rotate-animation {
  0% {
    transform: rotate(0deg);
    transform-origin: center center;
  }
  100% {
    transform: rotate(-360deg);
    transform-origin: center center;
  }
}

@keyframes rotate-animation {
  0% {
    transform: rotate(0deg);
    transform-origin: center center;
  }
  100% {
    transform: rotate(-360deg);
    transform-origin: center center;
  }
}

.popup-calendar-sync-email-account-content.inactive span.flaticon-tick-thin:before {
  background: #242424;
  border-color: #242424;
  opacity: 0.6;
  cursor: auto;
}

.popup-calendar-sync-email-account-content.inactive span.flaticon-tick-thin + span {
  color: #242424;
  opacity: 0.6;
  cursor: auto;
}

.popup-calendar-sync-email-account-content.inactive span.flaticon-radio-active:before {
  color: #242424;
  opacity: 0.6;
  cursor: auto;
}.settings-page-wrapper-div{
  overflow: auto;
  display: flex;
  align-items: flex-start;
  z-index: 10;
  margin-top: 100px;
  position: relative;
}
.settings-page-wrapper {
  background: #f5f8fd;
  border-radius: 4px;
  padding: 20px;
  margin: 13px 37px 50px;
  min-width: 952px;
}
.settings-page-left{
  width:300px;
  min-height:150px;
}
.settings-page-right {
  width: calc(100% - 300px);
  background: #fff;
  border-radius: 3px;
  padding: 40px 10px 40px 40px;
  min-height: 150px;
  border: 1px solid #D9DDE4;
  box-shadow: inset 3px 0 0 #D9DDE4;
  -webkit-box-shadow: inset 3px 0 0 #D9DDE4;
}
.settings-page-left .primary-txt{
  font-weight:bold;
  margin-top:20px;
  display:inline-block;
  margin-left:40px;
  font-size:16px;
}

.settings-page-body-content{
  width:100%;
  display: flex;
  flex-direction: row;
  margin-bottom:20px;
}
input.kat-settings-checkbox-input-cell:checked+label.kat-settings-checkbox-label:before {
  background: #2bbee8;
  color: #fff;
}
.kat-integration-wrapper:first-child{
  padding-top:0;
}

.kat-integration-wrapper:last-child{
  border-bottom: none;
}
.kat-integration-wrapper-icon {
  background: url(/dist/calendar@1x.png) no-repeat;
  height: 45px;
  width: 45px;
  background-position: 0;
  background-size: 40px;
}

.kat-integration-wrapper-icon.jira {
  background: url(/dist/jira@1x.png) no-repeat;
}
.kat-integration-wrapper-icon.officeTeam {
  background: url(/dist/officeteam@1x.png) no-repeat;
}
.kat-integration-wrapper-icon.slack {
  background: url(/dist/slack@1x.png) no-repeat;
}
.kat-integration-wrapper-icon.bitrix {
  background: url(/dist/bitrix@1x.png) no-repeat;
}
.kat-integration-wrapper-icon-information {
  font-size: 19px;
  color: #5f5d70;
  margin-top: 10px;
  font-weight: 100;
}

.kat-integration-wrapper-icon-information-txt-wrapper {
  margin-left: 57px;
}

.kat-integration-wrapper-icon-information-txt {
  font-size: 14px;
  margin-top: 10px;
  line-height: 1.5;
  color: #bdbcbd;
  font-weight: 100;
}

.kat-integration-wrapper-icon-coming-soon-txt {
  text-align: center;
  color: #bdbcbd;
  margin-top: 25px;
  font-size: medium;
}

.onoffswitch {
  position: relative;
  width: 35px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  top: 16px;
}

.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  height: 12px;
  padding: 0;
  line-height: 15px;
  border: 0 solid #FFFFFF;
  border-radius: 30px;
  background-color: #EAEAEC;
}

.onoffswitch-label:before {
  content: "";
  display: block;
  width: 21px;
  margin: -4.5px;
  background: #c9cdd6;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 22px;
  border-radius: 30px;
}

.onoffswitch-checkbox.checked + .onoffswitch-label {
  background-color: #CEE9CE;
}

.onoffswitch-checkbox.checked + .onoffswitch-label, .onoffswitch-checkbox.checked + .onoffswitch-label:before {
  border-color: #CEE9CE;
}

.onoffswitch-checkbox.checked + .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}

.onoffswitch-checkbox.checked + .onoffswitch-label:before {
  right: 0;
  background-color: #57B557;
}

.kat-integration-wrapper-button {
  background: #57b557;
  padding: 11px 15px;
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin-top: 10px;
  margin-left: 35px;
}

.kat-integration-customize-button {
  margin-left: 0;
}

.kat-integration-wrapper-button .flaticon-wrench:before {
  margin-left: 0 !important;
  margin-right: 5px;
  font-size: 13px;
}

.kat-login-board__data__existing-txt {
  display: inline-block;
  color: #8F909D;
  font-size: 14px;
}

.kat-login-board__data__existing-txt-icon-wrapper {
  visibility: hidden;
}

.kat-login-board__data__existing-txt:hover > .kat-login-board__data__existing-txt-icon-wrapper {
  visibility: visible;
}

.kat-login-board__data__existing-txt-icon.flaticon-edit-pen:before, .kat-login-board__data__existing-txt-icon.flaticon-delete:before {
  font-size: 14px;
  cursor: pointer;
  margin-left: 15px;
}

.kat-login-board__data__existing-txt-link {
  font-size: 14px;
  color: #494D50;
  margin-top: 10px;
}

.kat-login-board__data__secondary-data-social {
  margin-bottom: 35px;
}

.kat-login-board__data__secondary-data-add {
  font-size: 14px;
  color: #8F909D;
}

.kat-popup.kat-add-social-link-popup {
  width: 650px;
  margin: 16vh auto 0;
}

.kat-add-social-link-container {
  padding: 30px 60px;
}

.add-social-link-container-heading {
  margin: 30px 20px;
  text-align: center;
  font-size: 30px;
}

.kat-ex-label {
  font-size: 12px;
}

.kat-add-social-link-container .input-group label {
  color: #29303d;
  font-size: 20px;
}

.kat-add-social-link-container .input-group__error-message {
  top: 58px;
  left: 0;
}

.kat-add-social-link-button-set {
  padding-left: 15px;
}

.kat-add-social-link-button-set button {
  margin-right: 15px;
}

.kat-add-social-link-button-set .kat-button-cancel {
  padding: 12px;
  font-size: 14px;
}

.kat-add-social-link-button-set .kat-button-cancel:hover {
  background: rgba(148, 152, 158, 0.13);
}

.kat-personal-data-date-ip {
  width: 100%;
  border-bottom: 1px solid #D8DADF;
  color: #757575;
  height: 34px;
}

.kat-personal-data-date-ip .flaticon-calendar-icon:before {
  margin-left: 0;
  position: relative;
  top: 5px;
}

.kat-personal-data-date-ip label {
  float: left;
  margin-top: 0;
  color: #a5a6a7 !important;
}

.kat-profile-dob-txt {
  margin-left: 10px;
  float: left;
  margin-top: 10px;
}

.kat-login-board-designation .kat-login-board__data__secondary-data__bar {
  top: -5px;
}

.kat-login-board__data__secondary-data.pre-loaded-email label {
  color: #a5a6a7;
  top: -14px;
  font-size: 14px;
}

.skill-input {
  height: 42px;
}

.added-link {
  color: #42405A;
  cursor: pointer;
}
.settings-page-wrapper .button-set .kat-default-button,.settings-page-wrapper .button-set .kat-button{
  padding:12px;
  min-width:80px;
}
.kat-integration-customize-button {
  margin-left: 0;
}
.settings-page-right .kat-integration-wrapper {
  border-bottom: 1px solid #eeeef0;
  padding-bottom: 20px;
  margin: 0 0 20px 0;
  width:97%;
}
.kat-setting-form-wrapper {
  width: 700px;
  min-height: 400px;
  background: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 70px 60px;
}

.kat-heading-title {
  text-align: left;
  font-size: 30px;
  font-weight: 400;
  color: #434159;
}
.settings-page-right .kat-row:first-child .block-cards-info.settings-dropdown-wrapper{
  width:200px !important;
}
.kat-setting__sub-heading {
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: #485265;
}

.kat-setting__left-block-text {
  width: 200px;
  float: left;
  text-align: left;
}

.input-switch-btn {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.kat-toggle-btn {
  position: relative;
  cursor: pointer;
  transition: left .2s ease;
}

.kat-toggle-btn:before {
  content: '';
  width: 35px;
  height: 12px;
  position: absolute;
  background: #d4d6d7;
  border-radius: 8px;
  transition: left .2s ease;
  top: 1px;
}

.kat-toggle-btn:after {
  content: '';
  position: absolute;
  left: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #94979a;
  top: -2px;
  transition: left .2s ease;
}

.input-switch-btn:checked + .kat-toggle-btn:before {
  background: #d5f2fa;
}

.input-switch-btn:checked + .kat-toggle-btn:after {
  left: 17px;
  background: #2bbee8;
}

.kat-settings__form__block__right__toggle-btn__wrapper {
  position: relative;
}

.kat-setting__right-block {
  height: 20px;
}

.kat-time-picker-block {
  position: relative;
  display: inline-block;
}

.kat-time-picker-input-cell {
  width: 17px;
  height: 17px;
  font-size: 14px;
  border: none;
  text-align: center;
}

.kat-time-picker-arrow-up {
  position: absolute;
  width: 17px;
  height: 13px;
  top: -10px;
  left: 0;
  cursor: pointer;
}

.kat-time-picker-arrow-up:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 5px 5px;
  border-color: transparent transparent #e5e5e8 transparent;
  left: 3px;
  top: -2px;
}

.kat-time-picker-arrow-down {
  position: absolute;
  width: 17px;
  height: 13px;
  bottom: -11px;
  left: 0;
  cursor: pointer;
}

.kat-time-picker-arrow-down:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 5px 5px;
  border-color: #e5e5e8 transparent transparent transparent;
  left: 3px;
  top: 4px;
}

.kat-settings-checkbox-label-text {
  color: #7f8295;
  position: absolute;
  text-align: center;
  background: transparent;
  font-size: 11px;
  top: 1px;
  left: 0;
  right: 0;
}

.kat-settings-checkbox-input-cell:checked + .kat-settings-checkbox-label .kat-settings-checkbox-label-text {
  color: #fff !important;
}

.kat-setting-checkbox-wrapper {
  position: relative;
  display: inline-block;
  width: 33px;
  height: 15px;
}

.kat-settings-checkbox-input-cell {
  position: absolute;
  top: -99999px;
  left: -99999px;
}

label.kat-settings-checkbox-label {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

label.kat-settings-checkbox-label:after {
  content: '';
  position: absolute;
  left: 10px;
  color: #fff;
  cursor: pointer;
}

label.kat-settings-checkbox-label:before {
  content: '';
  width: 33px;
  height: 15px;
  border-radius: 9px;
  background: transparent;
  position: absolute;
  cursor: pointer;
  transition: background .2s ease;
}

input.kat-settings-checkbox-input-cell:checked + label.kat-settings-checkbox-label:before {
  background: #2bbee8;
  color: #fff;
}

button.kat-settings-cancel {
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(45deg);
}

.kat-settings-dropdown-list {
  width: 200px !important;
  min-width: 100px !important;
}

.kat-width-40per {
  width: 40% !important;
}

.block-cards-info.settings-dropdown-wrapper {
  height: 35px;
  border: 1px solid #D9DDE4;
    width:359px !important;
}

.block-cards-info.settings-dropdown-wrapper:before {
  border-style: solid;
  border-width: 6px 6px 6px 6px;
  content: '';
  position: absolute;
  border-color: #e5e5e8 transparent transparent transparent;
  top: 15px;
  right: 12px;
}
.settings-page-right .kat-row .kat-settings-dropdown-list{
  width:359px !important;
}
.settings-page-right .kat-row:first-child .kat-settings-dropdown-list{
  width:200px !important;
}
.settings-page-right .kat-row:first-child .kat-setting__left-block-text,.settings-page-right .kat-row:last-child .kat-setting__left-block-text {
  margin-top:10px;
  display:inline-block;
}.kat-team-task-card-wrapper {
  padding: 10px;
}

.kat-workstream.project {
  margin-left: 90px;
}

.kat-team-task-cards {
  border-top: 1px solid #d2d6dd;
  margin-top: 10px;
  position: relative;
}

.kat-team-task-cards-status {
  background: #eaedf4;
  padding: 5px;
  display: inline-block;
  position: relative;
  top: -16px;
}

.kat-team-task-cards-collapse {
  display: inline-block;
  float: right;
  margin-top: -12px;
  height: 21px;
  width: 20px;
  text-align: center;
  border: 1px solid #d2d6dd;
  background: #eaedf4;
  border-radius: 3px;
  font-weight: bold;
  cursor: pointer;
}

.kat-team-task-cards .kat-workstream__task {
  background: #fff;
  border-radius: 3px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
  position: relative;
  transition: .2s all ease-in;
}

.kat-team-task-cards .kat-workstream__task {
  -webkit-animation: taskEntry 0.15s ease-in-out;
          animation: taskEntry 0.15s ease-in-out;
}

.kat-team-task-cards .kat-workstream__task {
  border: 3px solid transparent;
  margin: -14px 22px 24px 27px;
  width: 294px;
}

.kat-team-task-cards .kat-workstream__task__head {
  padding: 12px 16px 12px 16px;
  min-height: 62px;
  position: relative;
  z-index: 10;
}

.kat-team-task-cards span.kat-workstream__task__head__text {
  float: left;
  color: #494D50;
  overflow-wrap: break-word;
}

.kat-team-task-cards span.kat-workstream__task__head__time {
  font-size: 12px;
}

.kat-team-task-cards .kat-workstream__task__foot {
  padding: 8px 30px 7px 16px;
  border-top: 1px solid #D9DDE4;
  position: relative;
  width: auto !important;
}

.kat-team-task-cards .kat-workstream__task__foot__text {
  font-size: 13px;
  font-weight: 700;
  max-width: calc(100% - 90px);
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 16px;
  white-space: nowrap;
}

.kat-team-task-cards .kat-workstream__task__foot__summary {
  position: absolute;
  right: 0;
}

.kat-team-task-cards img.kat-workstream__task__foot__summary__user {
  background: grey;
  height: 18px;
  width: 18px;
  border: 1px solid black;
  border-radius: 50%;
  margin-right: 10px;
}

.kat-team-task-cards .kat-workstream__task__foot__summary__time {
  font-size: 13px;
  margin-right: 10px;
  margin-top: 1px;
}

.kat-team-task-card-progressbar {
  position: absolute;
  height: 2px;
  background: #2bbee8;
  width: 20%;
  top: -1px;
  left: -3px;
}

.kat-team-task-cards-opacity {
  position: absolute;
  top: -3px;
  left: -3px;
  bottom: -3px;
  width: 30%;
  background: #eff8fb;
  opacity: 4;
  z-index: 2;
}

.kat-team-task-cards-work-atatus {
  background: #f97575;
  border-radius: 50%;
  height: 5px;
  width: 5px;
  position: absolute;
  top: 5px;
  left: 5px;
}

.kat-workstream__task .kat-task-detail__right-section__content-body-col__content-image_more_card, .kat-team-task-cards .kat-task-detail__right-section__content-body-col__content-image_more_card {
  margin-top: 2px;
  font-size: 13px;
  position: relative;
}

.kat-workstream__task .kat-profile-card-thumbnail__alphabet, .kat-team-task-cards .kat-profile-card-thumbnail__alphabet {
  height: 18px;
  width: 19px;
  border-radius: 100%;
  background: #242B39;
  display: inline-block;
  position: relative;
  margin-right: 10px;
  color: #fff;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  font-size: 10px;
}

.kat-task-detail__right-section__content-body-col__content-image_more_card .kat-task-detail__right-section__content-body-col__content-add-dropdown {
  margin-top: 25px;
  margin-left: -192px;
}

.kat-team-task-cards .kat-task-detail__right-section__content-body-col__content-image_more_card .kat-task-detail__right-section__content-body-col__content-add-dropdown {
  margin-top: 25px;
  margin-left: -181px;
}

.kat-task-detail__right-section__content-body-col__content-image_more_card .kat-task-detail__right-section__header__toolbar__dropdown {
  top: 21px;
  left: -195px;
}

.kat-task-detail__right-section__content-body-col__content-image_more_card .more-assigned {
  font-size: 12px;
}
.team-task-cards-status-workstreamname{
  display: inline-block;
  max-width: 254px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.team-task-cards-status-count{
    display: inline-block;
    position: relative;
    top: -3px;
    left: 3px;
}.kat-cards-user-thumb.kat-profile-thumbnail__alphabet {
  position: absolute;
  border-radius: 3px;
  height: 60px;
  width: 60px;
  top: -19px;
  left: 12px;
  line-height: 57px;
  font-size: 28px;
  font-weight: 400;
  color: #EAEDF4;
  cursor: default;
}

.kat-cards-user-thumb.kat-profile-thumbnail__alphabet ~ .kat-workstream__head__text {
  width: calc(100% - 147px);
  margin-left: 70px;
}

.kat-cards-user-thumb.kat-profile-thumbnail__alphabet.image {
  background-size: 100%;
  border: 1px solid #242B39;
  background-color: #242B39 !important;
}

.kat-cards-user-thumb.kat-profile-thumbnail__alphabet.image .kat-profile-thumbnail__alphabet {
  font-size: 30px;
  line-height: 53px;
  width: 47px;
  top: 3px;
  left: 6px;
  margin: 0;
}

.kat-card-content-placeholder__text {
  font-size: 30px;
  color: #B4B8BE;
  margin-bottom: 5px;
}

.kat-card-content-placeholder .kat-workstream__add-task {
  position: relative;
  top: 0;
  right: 0;
  margin: 0 4px;
  cursor: default;
}

.kat-card-content-placeholder__link-wrapper {
  color: #B4B8BE;
  font-size: 16px;
}

.kat-card-content-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  align-items: center;
  cursor: default;
}

.kat-add-workstream.flaticon-add-user-icon:before {
  margin-left: 0;
  font-size: 25px;
}

.kat-card__view-type__icon .task-view {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHRpdGxlPndvcmtzdHJlYW1zPC90aXRsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAuNiwwaDIuOUMzLjgsMCw0LDAuMiw0LDAuNnYxMy45QzQsMTQuOCwzLjgsMTUsMy41LDE1SDAuNkMwLjIsMTUsMCwxNC44LDAsMTQuNFYwLjZDMCwwLjIsMC4yLDAsMC42LDB6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02LjYsMGgyLjlDOS44LDAsMTAsMC4yLDEwLDAuNnYxMy45YzAsMC4zLTAuMiwwLjYtMC42LDAuNkg2LjZDNi4yLDE1LDYsMTQuOCw2LDE0LjRWMC42QzYsMC4yLDYuMiwwLDYuNiwweiIKCS8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMi42LDBoMi45QzE1LjgsMCwxNiwwLjIsMTYsMC42djEzLjljMCwwLjMtMC4yLDAuNi0wLjYsMC42aC0yLjljLTAuMywwLTAuNi0wLjItMC42LTAuNlYwLjYKCUMxMiwwLjIsMTIuMiwwLDEyLjYsMHoiLz4KPC9zdmc+Cg==) no-repeat;
  display: inline-block;
  height: 100%;
  width: 100%;
  opacity: 0.3;
  background-size: 20px;
  background-position: 8px 8px;
}

.kat-card__view-type__icon .timeline-view {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxOSAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTkgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHRpdGxlPnRpbWVsaW5lPC90aXRsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAuNiwwaDEwLjlDMTEuOCwwLDEyLDAuMiwxMiwwLjZ2Mi45QzEyLDMuOCwxMS44LDQsMTEuNCw0SDAuNkMwLjIsNCwwLDMuOCwwLDMuNVYwLjZDMCwwLjIsMC4yLDAsMC42LDB6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMy42LDBoNC45QzE4LjgsMCwxOSwwLjIsMTksMC42djIuOUMxOSwzLjgsMTguOCw0LDE4LjUsNGgtNC45QzEzLjIsNCwxMywzLjgsMTMsMy41VjAuNgoJQzEzLDAuMiwxMy4yLDAsMTMuNiwweiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMC42LDZoNC45QzUuOCw2LDYsNi4yLDYsNi42djIuOUM2LDkuOCw1LjgsMTAsNS40LDEwSDAuNkMwLjIsMTAsMCw5LjgsMCw5LjRWNi42QzAsNi4yLDAuMiw2LDAuNiw2eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNy42LDZoMTAuOUMxOC44LDYsMTksNi4yLDE5LDYuNnYyLjljMCwwLjMtMC4yLDAuNi0wLjUsMC42SDcuNkM3LjIsMTAsNyw5LjgsNyw5LjRWNi42QzcsNi4yLDcuMiw2LDcuNiw2eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMC42LDEyaDkuOWMwLjMsMCwwLjYsMC4yLDAuNiwwLjZ2Mi45YzAsMC4zLTAuMiwwLjYtMC42LDAuNkgwLjZDMC4yLDE2LDAsMTUuOCwwLDE1LjR2LTIuOQoJQzAsMTIuMiwwLjIsMTIsMC42LDEyeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTIuNiwxMmg1LjljMC4zLDAsMC41LDAuMiwwLjUsMC42djIuOWMwLDAuMy0wLjIsMC42LTAuNSwwLjZoLTUuOWMtMC4zLDAtMC42LTAuMi0wLjYtMC42di0yLjkKCUMxMiwxMi4yLDEyLjIsMTIsMTIuNiwxMnoiLz4KPC9zdmc+Cg==) no-repeat;
  display: inline-block;
  height: 100%;
  width: 100%;
  opacity: 0.3;
  background-size: 20px;
  background-position: 8px 9px;
}

.kat-card__view-type-wrapper {
  position: fixed;
  right: 50px;
  margin-top: -65px;
}

li.kat-card__view-type__icon {
  background: #242B39;
  height: 35px;
  width: 35px;
  display: inline-block;
  cursor: pointer;
}

li.kat-card__view-type__icon.active span {
  opacity: 0.8;
}

.kat-card__view-type__icon.more .flaticon-three:before {
  margin-left: 0 !important;
}

li.kat-card__view-type__icon.more {
  margin-left: 8px;
  border-radius: 4px;
}

li.kat-card__view-type__icon.task {
  border-radius: 4px 0 0 4px;
}

li.kat-card__view-type__icon.timeline {
  border-radius: 0 4px 4px 0;
}

li.kat-card__view-type__icon.more {
  padding: 5px 7px;
}

span.kat-cards-user-thumb__status {
  height: 17px;
  width: 17px;
  display: inline-block;
  position: absolute;
  background: #98A1A9;
  bottom: -4px;
  border-radius: 50%;
  border: 2px solid #D9DDE4;
  right: -3px;
  z-index: 1;
}

span.kat-cards-user-thumb__status.online {
  background: #6CBC37;
}

span.kat-cards-user-thumb__status.away {
  background: #F0C600;
}

.kat-workstream-wrapper.project.team-member .kat-project-header__text, .kat-workstream-wrapper.project.project-cards .kat-project-header__text {
  font-weight: 100;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 72%;
  display: inline-block;
}.kat-cards-user-thumb.kat-profile-thumbnail__alphabet {
  position: absolute;
  border-radius: 3px;
  height: 60px;
  width: 60px;
  top: -19px;
  left: 12px;
  line-height: 57px;
  font-size: 28px;
  font-weight: 400;
  color: #EAEDF4;
  cursor: default;
}

.kat-cards-user-thumb.kat-profile-thumbnail__alphabet ~ .kat-workstream__head__text {
  width: calc(100% - 147px);
  margin-left: 70px;
}

.kat-cards-user-thumb.kat-profile-thumbnail__alphabet .kat-projects-add-people__body-pro-img {
  height: 60px;
  width: 60px;
  border-radius: 3px;
  left: -8px;
  margin-right: 0;
}

.kat-cards-user-thumb.kat-profile-thumbnail__alphabet.image {
  background-size: 100%;
  border: 1px solid #242B39;
}

.kat-cards-user-thumb.kat-profile-thumbnail__alphabet img {
  height: 58px;
  margin-right: 10px;
  width: 58px;
  border-radius: 3px;
}

.kat-card-content-placeholder__text {
  font-size: 30px;
  color: #B4B8BE;
  margin-bottom: 5px;
}

.kat-card-content-placeholder .kat-workstream__add-task {
  position: relative;
  top: 0;
  right: 0;
  margin: 0 4px;
  cursor: default;
}

.kat-add-workstream.flaticon-add-user-icon:before {
  margin-left: 0;
  font-size: 25px;
}

.kat-card__view-type__icon .task-view {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHRpdGxlPndvcmtzdHJlYW1zPC90aXRsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAuNiwwaDIuOUMzLjgsMCw0LDAuMiw0LDAuNnYxMy45QzQsMTQuOCwzLjgsMTUsMy41LDE1SDAuNkMwLjIsMTUsMCwxNC44LDAsMTQuNFYwLjZDMCwwLjIsMC4yLDAsMC42LDB6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02LjYsMGgyLjlDOS44LDAsMTAsMC4yLDEwLDAuNnYxMy45YzAsMC4zLTAuMiwwLjYtMC42LDAuNkg2LjZDNi4yLDE1LDYsMTQuOCw2LDE0LjRWMC42QzYsMC4yLDYuMiwwLDYuNiwweiIKCS8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMi42LDBoMi45QzE1LjgsMCwxNiwwLjIsMTYsMC42djEzLjljMCwwLjMtMC4yLDAuNi0wLjYsMC42aC0yLjljLTAuMywwLTAuNi0wLjItMC42LTAuNlYwLjYKCUMxMiwwLjIsMTIuMiwwLDEyLjYsMHoiLz4KPC9zdmc+Cg==) no-repeat;
  display: inline-block;
  height: 100%;
  width: 100%;
  opacity: 0.3;
  background-size: 20px;
  background-position: 8px 8px;
}

.kat-card__view-type__icon .timeline-view {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxOSAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTkgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHRpdGxlPnRpbWVsaW5lPC90aXRsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAuNiwwaDEwLjlDMTEuOCwwLDEyLDAuMiwxMiwwLjZ2Mi45QzEyLDMuOCwxMS44LDQsMTEuNCw0SDAuNkMwLjIsNCwwLDMuOCwwLDMuNVYwLjZDMCwwLjIsMC4yLDAsMC42LDB6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMy42LDBoNC45QzE4LjgsMCwxOSwwLjIsMTksMC42djIuOUMxOSwzLjgsMTguOCw0LDE4LjUsNGgtNC45QzEzLjIsNCwxMywzLjgsMTMsMy41VjAuNgoJQzEzLDAuMiwxMy4yLDAsMTMuNiwweiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMC42LDZoNC45QzUuOCw2LDYsNi4yLDYsNi42djIuOUM2LDkuOCw1LjgsMTAsNS40LDEwSDAuNkMwLjIsMTAsMCw5LjgsMCw5LjRWNi42QzAsNi4yLDAuMiw2LDAuNiw2eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNy42LDZoMTAuOUMxOC44LDYsMTksNi4yLDE5LDYuNnYyLjljMCwwLjMtMC4yLDAuNi0wLjUsMC42SDcuNkM3LjIsMTAsNyw5LjgsNyw5LjRWNi42QzcsNi4yLDcuMiw2LDcuNiw2eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMC42LDEyaDkuOWMwLjMsMCwwLjYsMC4yLDAuNiwwLjZ2Mi45YzAsMC4zLTAuMiwwLjYtMC42LDAuNkgwLjZDMC4yLDE2LDAsMTUuOCwwLDE1LjR2LTIuOQoJQzAsMTIuMiwwLjIsMTIsMC42LDEyeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTIuNiwxMmg1LjljMC4zLDAsMC41LDAuMiwwLjUsMC42djIuOWMwLDAuMy0wLjIsMC42LTAuNSwwLjZoLTUuOWMtMC4zLDAtMC42LTAuMi0wLjYtMC42di0yLjkKCUMxMiwxMi4yLDEyLjIsMTIsMTIuNiwxMnoiLz4KPC9zdmc+Cg==) no-repeat;
  display: inline-block;
  height: 100%;
  width: 100%;
  opacity: 0.3;
  background-size: 20px;
  background-position: 8px 9px;
}

.kat-card__view-type-wrapper {
  position: absolute;
  right: 50px;
  margin-top: -65px;
}

li.kat-card__view-type__icon {
  background: #242B39;
  height: 35px;
  width: 35px;
  display: inline-block;
  cursor: pointer;
}

li.kat-card__view-type__icon.active span {
  opacity: 0.8;
}

.kat-card__view-type__icon.more .flaticon-three:before {
  margin-left: 0 !important;
}

li.kat-card__view-type__icon.more {
  margin-left: 8px;
  border-radius: 4px;
}

li.kat-card__view-type__icon.task {
  border-radius: 4px 0 0 4px;
}

li.kat-card__view-type__icon.timeline {
  border-radius: 0 4px 4px 0;
}

li.kat-card__view-type__icon.more {
  padding: 5px 7px;
}

.kat-user-timeline-list-view {
  background: #f5f6fa;
  border-radius: 4px;
  color: #94989E;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.38);
  -webkit-animation: workStreamEntry 0.15s ease-in-out;
          animation: workStreamEntry 0.15s ease-in-out;
  position: absolute;
  bottom: 46px;
  top: 99px;
  right: 46px;
  left: 514px;
  overflow: hidden;
}

.kat-user-timeline-list-view li.kat-workstream__actions__item {
  top: 3px;
  right: 0;
}

.kat-timelinesection__body {
  padding-bottom: 18px;
  position: relative;
  height: calc(100% - 54px);
}

.kat-user-timeline-list-view-timelinesection {
  height: 100%;
}

.kat-user-timeline-list-view-timelinesectionhdr {
  padding: 18px 14px 0;
  border-bottom: 1px solid #D9DDE4;
  height: 54px;
}

.kat-user-timeline-list-view-leftpnwrp {
  width: 238px;
  border-right: 1px solid #D9DDE4;
}

.kat-user-timeline-list-view-leftpn {
  width: 100%;
}

.kat-user-timeline-list-view-rightpnwrp {
  width: calc(100% - 238px);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

.kat-user-timeline-list-view-rightpn .kat-user-timeline-list-view-timelinesectionhdr {
  padding: 18px 0 0 0;
}

.kat-user-timeline-list-view-leftpn .kat-user-timeline-list-view-timelinesectionhdr {
  padding: 7px 14px 0 22px;
}

ol.kat-user-timeline-list-view-timeslot {
  position: relative;
  display: block;
  margin-top: 18px;
  height: 3px;
  background: #b4b6bd;
  white-space: nowrap;
  width: 7286px;
}

ol.kat-user-timeline-list-view-timeslot::before {
  left: -5px;
}

ol.kat-user-timeline-list-view-timeslot::after {
  right: -10px;
  border: 10px solid transparent;
  border-right: 0;
  border-left: 20px solid #9b2;
  border-radius: 3px;
}

ol.kat-user-timeline-list-view-timeslot li {
  position: relative;
  top: -26px;
  left: 16px;
  display: inline-block;
  width: 151px;
  font-size: 13px;
  color: #72757a;
  cursor: default;
}

ol.kat-user-timeline-list-view-timeslot li::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 11px;
  display: block;
  width: 6px;
  height: 6px;
  border: 4px solid #b4b6bd;
  border-radius: 10px;
  background: #b4b6bd;
}

input[type=search].kat-user-timeline-list__search {
  width: 210px;
  transition: all .5s ease;
  padding: 10px 25px;
  background: none;
  border: none;
  color: black;
  font-size: 15px;
  -webkit-appearance: textfield;
}

.kat-user-timeline-list__input-holder {
  position: relative;
}

.kat-user-timeline-list__input-holder .flaticon-search-icon::before {
  font-size: 15px;
  position: absolute;
  top: 11px;
  left: -20px;
}

.kat-user-timeline-list-searchlist-wrapper {
  overflow: hidden;
  width: 238px;
  position: absolute;
  border-right: 1px solid #D9DDE4;
  top: 54px;
  left: 0;
  bottom: 0;
}

.kat-user-timeline-list-searchlist__list__item {
  padding: 10px 20px 10px 20px;
  border-bottom: 1px solid #D9DDE4;
  min-height: 71px;
}

.kat-user-timeline-list-searchlist__list .kat-profile-thumbnail__alphabet {
  height: 45px;
  width: 45px;
  border-radius: 100%;
  background: #242B39;
  display: inline-block;
  position: relative;
  margin: 0 6px;
  color: #fff;
  font-weight: 700;
  line-height: 45px;
  text-align: center;
  top: -2px;
  font-size: 21px;
}

.kat-user-timeline-list-searchlist__list__item .kat-projects-add-people__body-pro-img {
  width: 45px !important;
  height: 45px !important;
  left: -1px;
  top: 0;
}

.kat-user-timeline-list-searchlist__image-holder {
  height: 40px;
  width: 40px;
  float: left;
  position: relative;
  border-radius: 50%;
  background: #242B39;
  display: inline-block;
  margin-right: 20px;
  overflow: hidden;
  border: 1px solid black;
}

.kat-user-timeline-list-searchlist__image-holder img {
  height: 100%;
  width: 100%;
  border-radius: 100%;
}

.kat-user-timeline-list-searchlist__primary-text {
  display: inline-block;
  width: calc(100% - 70px);
  font-size: 18px;
  color: #0e151d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kat-user-timeline-list-searchlist__highlighted-text {
  display: inline-block;
  font-size: 14px;
  color: #808591;
  font-weight: 400;
}

.kat-user-timeline-list-grid-section {
  width: 7284px;
  height: 100%;
}

.kat-user-timeline-list-dragger-wrapper-move {
  margin-left: 20px;
  height: calc(100% - 19px);
  float: left;
  position: absolute;
  top: 0;
  z-index: 32;
}

.kat-user-timeline-list-grid-list-items {
  padding: 10px 20px 10px 20px;
  border-bottom: 1px solid #D9DDE4;
  height: 71px;
  position: relative;
}

.kat-user-timeline-list-taskcard {
  border: 1px solid #dfe4ed;
  border-radius: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: absolute;
  max-height: 71px;
  padding: 6px 20px;
  background: #fff;
  cursor: pointer;
}

.kat-user-timeline-list-taskcard-overlay {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background: #dee3ec;
  border: 1px solid #d6dce6;
}

.kat-user-timeline-list-taskcard-clickarea {
  position: absolute;
  background: transparent;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 35;
}

.kat-user-timeline-list-taskcard-status {
  height: 9px;
  width: 9px;
  display: inline-block;
  position: absolute;
  background: #f97878;
  top: 5px;
  border-radius: 50%;
  border: 2px solid #f77070;
  left: 4px;
  z-index: 11;
}

.kat-user-timeline-list-taskcard-info {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  z-index: 11;
}

.kat-user-timeline-list-taskcard-time {
  color: #3f444b;
  font-weight: 400;
  width: 61%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kat-user-timeline-list-taskcard-timesep {
  width: 10px;
  height: 2px;
  background: #3f444b;
  display: inline-block;
  position: relative;
  top: -4px;
}

.kat-user-timeline-list-taskcard-team {
  text-align: right;
  font-size: 12px;
  width: 23%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 2px;
  margin-top: 3px;
}

.kat-user-timeline-list-taskcard-team-more {
  font-weight: bold;
  margin-left: 3px;
  font-size: 12px;
  position: relative;
  margin-top: 3px;
}

.kat-user-timeline-list-taskcard-taskname {
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  position: relative;
  z-index: 11;
}

.kat-user-timeline-list-dragger-wrapper {
  height: 100%;
  z-index: 13;
  position: absolute;
  top: -1px;
}

.kat-user-timeline-list-dragger {
  height: calc(100% - -47px);
  width: 2px;
  background: #0eb3ef;
  z-index: 10;
  cursor: pointer;
}

.kat-user-timeline-list-dragger::before {
  background: #0eb3ef;
  content: "";
  height: 18px;
  left: -17px;
  position: absolute;
  top: -6px;
  width: 40px;
  z-index: 10;
  border-radius: 3px;
}

.kat-user-timeline-list-grid-section-wrapper {
  width: 100%;
  height: 100%;
  margin-top: 54px;
}

.kat-user-timeline-list-grid-section-scroll {
  background: #eaedf4;
  width: calc(100% - 2px);
  height: calc(100% - 52px);
  overflow: auto;
  position: relative;
  z-index: 32;
}

.card-popover-bubble-wrapper {
  position: relative;
}

.card-popover-bubble {
  background: #000;
  padding: 8px;
  position: absolute;
  border-radius: 3px;
  min-height: 31px;
  line-height: 1.4;
  z-index: 20;
  display: none;
}

.card-popover-bubble.bottom .secondary-txt {
  position: relative;
  top: 0;
}

.card-popover-bubble.bottom {
  right: 50%;
  margin-top: 13px;
}

.card-popover-bubble.bottom .bubble-drop-arrow {
  position: absolute;
  width: 0;
  height: 0;
  top: -12px;
  right: 3px;
  border-style: solid;
  transform: rotate(-182deg);
  border-width: 7px 6px 6px 6px;
  border-color: #000 rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
}

.card-popover-bubble.top {
  bottom: 8px;
}

.card-popover-bubble.top .drop-arrow {
  position: absolute;
  width: 0;
  height: 0;
  bottom: -13px;
  left: 28px;
  border-style: solid;
  border-width: 7px 6px 6px 6px;
  border-color: #000 rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
}

.card-popover-bubble .primary-txt {
  font-size: 16px;
  color: #fff;
}

.card-popover-bubble .secondary-txt {
  color: #918F94;
  font-size: 14px;
  white-space: pre-line;
}

.date-filter-option {
  padding: 8px;
  border: 1px solid #e6e9ed;
  border-radius: 5px;
  color: #a6a8ac;
  cursor: pointer;
  height: 50px;
  margin-right: 30px;
  min-width: 134px;
  background: #fff;
}

.date-filter-option:hover {
  background: #27bfe9;
  color: #fff;
}

.date-filter-option:hover .primary-txt {
  color: #fff;
}

.date-filter-option.active {
  background: #27bfe9;
  color: #fff;
}

.date-filter-option.active .primary-txt {
  color: #fff;
}

.date-filter-option.calendar-wrapper .primary-txt {
  margin-top: 7px;
  padding-left: 10px;
}

.date-filter-option .flaticon-calendar-icon:before {
  margin-left: 8px;
  position: relative;
  top: 5px;
}

.date-filter-option .primary-txt {
  font-size: 16px;
  text-align: center;
  display: block;
  color: #a6a8ac;
  font-weight: normal;
  padding: 0 15px;
}

.date-filter-option .secondary-txt {
  font-weight: normal;
  font-size: 12px;
  text-align: center;
  display: block;
}

.kat-user-timeline-list-view-selectors .mydashboard-filter-wrapper {
  padding: 0;
  background: transparent;
  border-bottom: none;
}

.kat-user-timeline-list-view-selectors .calendar-wrapper-div {
  position: relative;
}

.kat-user-timeline-list-view-selectors .calendar-wrapper-div .DayPicker.DayPicker--en {
  top: 48px;
  right: 37px;
}

.kat-user-timeline-list-view .kat-workstream__head {
  padding: 0;
}

.kat-user-timeline-list-view .kat-project-details__section-header {
  margin: 20px;
}

.kat-user-timeline-list-view-selectors .date-filter-option {
  height: 41px;
  padding: 5px;
  min-width: 91px;
  margin-top: 6px;
}

.kat-user-timeline-list-view-selectors .primary-txt {
  font-size: 14px;
}

.kat-user-timeline-list-view-selectors .secondary-txt {
  font-size: 10px;
}

.kat-user-timeline-list-view-selectors .calendar-wrapper-div .date-filter-option {
  margin-right: 0;
}

.kat-user-timeline-list-view-selectors .kat-select-date-arrow {
  margin-top: 10px;
  height: 33px;
  margin-right: 0;
}

.kat-user-timeline-list-taskcard:hover .card-popover-bubble {
  display: block;
}

.kat-user-timeline-list-taskcard .card-popover-bubble {
  right: auto;
  left: 0;
}

.kat-user-timeline-list-taskcard .card-popover-bubble.bottom .bubble-drop-arrow {
  right: auto;
  left: 10%;
}

.kat-user-timeline-list-taskcard .card-popover-bubble .secondary-txt {
  white-space: nowrap;
}
.kat-nav__items {
  float: left;
  position: relative;
  margin: 0 10px;
  cursor: pointer;
}

.kat-nav__items a {
  font-size: 16px;
  color: rgba(203, 204, 206, 0.49);
  padding: 18px 12px;
  display: inline-block;
}

li.kat-nav__items.active a, li.kat-nav__items:hover, li.kat-nav__items:hover a {
  color: #CBCCCE;
}

li.kat-nav__items.active:after {
  content: '';
  position: absolute;
  height: 3px;
  background: #24c8f3;
  bottom: -3px;
  left: 0;
  right: 0;
}

.kat-header {
  text-align: center;
  height: 58px;
  background: #1F2532;
}

.kat-logo {
  margin: 9px 28px;
  color: #acaeb0;
  font-weight: 700;
  font-size: 19px;
  cursor: pointer;
}

.kat-logo__title {
  float: left;
  padding-top: 6px;
}

.kat-logo__image {
  width: 30px;
  margin: 2px 11px 0 8px;
  float: left;
}

.kat-nav {
  display: inline-block;
}

.kat-user-details {
  color: rgba(203, 204, 206, 0.49);
  margin: 18px 25px 0 15px;
  position: relative;
  padding-right: 23px;
  height: calc(100% - 18px);
  cursor: pointer;
  max-width: 245px;
}

.kat-user-details__username {
  max-width: 150px;
  text-align: left;
}

.kat-user-details img {
  border-radius: 50%;
  height: 36px;
  position: relative;
  top: -7px;
  margin-right: 10px;
  width: 36px;
}

.kat-user-details:after {
  content: '';
  height: 8px;
  width: 8px;
  border: 2px solid;
  border-top: none;
  border-left: none;
  position: absolute;
  right: 0;
  transform: rotate(45deg);
  top: 2px;
}

ul.kat-user-details__actions {
  position: absolute;
  text-align: left;
  top: 100%;
  box-shadow: 0 0 8px rgba(67, 65, 90, 0.42);
  color: grey;
  background: #F5F6FA;
  padding: 10px 0;
  -webkit-animation: dropdownEntry 0.16s ease-in-out;
          animation: dropdownEntry 0.16s ease-in-out;
  transform-origin: top center;
  right: 0;
  width: 225px;
  z-index: 11;
}

ul.kat-user-details__actions li.sublist-list {
  border-top: 1px solid #e0e3e8;
  border-bottom: 1px solid #e0e3e8;
  padding: 0 10px;
}

ul.kat-user-details__actions .sublist li {
  padding: 5px 0 5px 15px;
}

ul.kat-user-details__actions .sublist li:not(:first-child) {
  margin-left: 25px;
}

.sublist-list-active.flaticon-tick-thin:before {
  font-size: 11px;
  margin-left: 10px;
}

ul.kat-user-details__actions .sublist li:not(:first-child) .sublist-list-hover-div {
  padding: 5px;
  border-radius: 3px;
}

ul.kat-user-details__actions .sublist li:not(:first-child):hover .sublist-list-hover-div {
  background: #eff1f3;
  padding: 5px;
  border-radius: 3px;
}

.company-thumbnail {
  padding: 4px;
  color: #fff;
  text-transform: uppercase;
  border-radius: 3px;
  display: inline-block;
  width: 20px;
  height: 20px;
  font-size: 11px;
  text-align: center;
  margin-right: 5px;
  font-weight: bold;
}

.company-thumbnail.red {
  background: #b00c0c;
}

.company-thumbnail.tangerine {
  background: #ff7900;
}

@-webkit-keyframes dropdownEntry {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes dropdownEntry {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

ul.kat-user-details__actions li {
  padding: 10px 25px;
  font-size: 14px;
}

ul.kat-user-details__actions li:hover {
  color: black;
}

.kat-user-details__actions__ico:before {
  margin-left: 0 !important;
  font-size: 18px !important;
}

.kat-user-details__actions__ico.flaticon-logout:before {
  transform: rotate(180deg);
  display: inline-block;
}

.kat-user-details__actions__text {
  padding-top: 1px;
  padding-left: 10px;
}

.kat-header-checkinout__wrapper {
  background: #232a36;
  width: 270px;
  height: 100%;
  position: relative;
  left: -28px;
}

.kat-header-checkinout__timer {
  font-size: 36px;
}

.kat-header-checkinout__action-btn {
  position: relative;
}

.kat-header-checkinout__action-btn:before {
  content: '';
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid #2897b9;
}

.kat-header-checkinout__action-btn:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 6px 6px 6px 6px;
  border-color: transparent transparent transparent #2897b9;
  left: 10px;
  top: 10px;
}

.kat-header-checkinout__timer-seperator {
  font-size: 36px;
  color: #0eb3ef;
}

.kat-header-checkinout__timer-wrap {
  padding: 8px 0 0 10px;
  width: 130px;
  height: 100%;
  cursor:pointer;
}

.play-ico.border-blue {
  border-color: #0eb3ef !important;
}

.play-ico.blue-color:before {
  color: #0eb3ef;
}

.kat-header-checkinout__play {
  width: calc(100% - 130px);
  float: right;
  height: 100%;
  cursor: pointer;
}

.kat-header-checkinout__play .kat-workstream__task-icon.play-ico:before {
  font-size: 10px;
  top: 0;
  left: 1px;
}

.kat-header-checkinout__play .kat-workstream__task-icon.play-ico.flaticon-pause::before {
  font-size: 9px;
  position: relative;
  top: 0;
  left: 0;
}

.kat-header-checkinout__Play__title {
  padding: 20px 8px 0 14px;
}

.kat-header__checkinout-block__wrapper {
  position: absolute;
  width: 360px;
  background: #fff;
  right: 0;
  top: 59px;
  padding: 20px 17px;
  min-height: 117px;
  border: 1px solid #edeef0;
  z-index: 55;
}

.kat-header__checkinout-block__title {
  display: block;
  text-align: left;
  font-size: 12px;
}

.kat-header__checkinout-block__timing-view {
  text-align: left;
}

.kat-header-checkinout__timer__text {
  color: #0eb3ef;
}

.kat-btn {
  width: 110px;
  height: 30px;
  color: #fff;
  margin-right: 22px;
}

.kat-btn-default {
  background: #c0bfd0;
}

.kat-btn-primary {
  background: #24c8f3;
}

.kat-btn-deep-grey {
  background: #43415b;
}

.kat-btn-yellow {
  background: #e8aa14;
}

.kat-btn-medium {
  width: 160px;
}

.kat-margin-bottom-10px {
  margin-bottom: 10px !important;
}

.kat-margin-right-40px {
  margin-right: 40px;
}

.kat-margin-right-50px {
  margin-right: 50px !important;
}

.text-white {
  color: #fff;
}

.text-purple {
  color: #a79eef !important;
}

.text-blue {
  color: #2bbee8;
}

.text-green {
  color: #2ecc71;
}

.display-none {
  display: none;
}

.kat-flaticon-timer-clock:before {
  font-size: 14px;
  margin: 0;
  margin-right: 10px;
}

.kat-header__checkinout-block__edit-icon:before {
  font-size: 12px;
}

.kat-header__checkinout-block__edit-icon-wrapper {
  width: 30px;
  height: 25px;
  cursor: pointer;
  position: relative;
}

.kat-header__checkinout-block__edit-icon:before {
  margin: 0;
  font-size: 12px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.kat-header__checkinout-block__time-edit__heading-title {
  font-size: 18px;
  display: block;
  width: 140px;
  margin-left: 23px;
}

.kat-header__checkinout-block__time-edit__heading-title.checkin {
  margin-left: 0;
  display: block;
  text-align: center;
  width: 140px;
}

.kat-header__checkinout-block__time-edit__box-wrap {
  width: 140px;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  margin: auto;
  padding: 8px 0 8px 10px;
}

.kat-header__checkinout-block__time-edit__box__heading-wrap {
  height: 17px;
}

.kat-header__checkinout-block__time-edit__box__heading {
  width: 46%;
  color: #9ba1ae;
  font-size: 11px;
  text-align: left;
  float: left;
  padding-left: 6px;
  margin-left: 5px;
}

.kat-header__checkinout-block__time-edit__box__input-wrap {
  width: 50%;
  float: left;
}

.kat-header__checkinout-block__time-edit__box__input__cell {
  width: 35px;
  height: 31px;
  font-size: 28px;
  font-weight: 300;
  float: left;
  color: #2ecc71;
  border: none;
  outline: none;
  text-align: center;
}

.kat-checkinout-arrow {
  width: 15px;
  height: 15px; /* border: 1px solid black; */
  position: relative;
  float: left;
  cursor: pointer;
}

.kat-checkinout-arrow.up:after {
  content: '';
  border-style: solid;
  border-width: 0 5px 10px 5px;
  position: absolute;
  left: 2px;
  border-color: transparent transparent #9ba1ae transparent;
  top: 3px;
}

.kat-checkinout-arrow.down:after {
  content: '';
  border-style: solid;
  border-width: 10px 5px 10px 5px;
  position: absolute;
  left: 2px;
  border-color: #9ba1ae transparent transparent transparent;
  bottom: -7px;
}

.kat-header__checkinout-block__time-edit__box__footer {
  font-weight: bold;
}

.kat-header__checkinout-block__time-edit__box__footer__text {
  width: 40%;
  float: left;
  text-align: left;
  color: #9ba1ae;
  font-size: 13px;
  cursor: pointer;
  padding-left: 7px;
  margin-left: 5px;
}

.kat-header__checkinout-block__time-edit__box__footer__text.checkin-active {
  color: #2ecc71;
}

.kat-header__checkinout-block__time-edit__box__footer__text.checkout-active {
  color: #2bbee8;
}

.kat-header__checkinout-block__break-list__item-heading {
  float: left;
  width: 68px;
}

.kat-header__checkinout-block__break-list__item {
  float: left;
  width: 80px;
  margin-right: 15px;
}

.kat-header__checkinout-block__break-list__item:last-child {
  margin: 0;
}

.kat-width-auto {
  width: auto;
}

.kat-margin-right-10px {
  margin-right: 10px !important;
}

.kat-flaticon-line:before {
  margin: 0;
  background: red;
  color: #fff;
  font-size: 15px;
  border-radius: 50%;
}

.kat-header__checkinout-block__break-list__item.border {
  border: 1px solid #9ba1ae;
}

.kat-header__checkinout-block__break-list__delete-row {
  width: 25px;
  height: 20px;
  cursor: pointer;
  display: inline-block;
}

.kat-header__checkinout-block__textarea {
  border: 1px solid #bcbcbc;
  padding: 2px 4px;
  width: 100% !important;
  border-radius: 4px;
}

.kat-header__checkinout-block__textarea-heading {
  font-size: 14px;
  text-align: left;
  display: block;
}

.kat-width-75-perc {
  width: 75% !important;
}

.kat-header__checkinout-block__btn-wrapper {
  margin: auto;
}

.kat-header__checkinout-block__btn {
  color: #6b6a7d;
  margin: 0 14px;
  font-weight: 800;
}

.kat-header__checkinout-block__btn.active {
  color: #2bbee8;
  border-bottom: 2px solid #2bbee8;
}

.fright {
  float: right !important;
}

.kat-margin-left-0px {
  margin-left: 0 !important;
}

.kat-margin-right-0px {
  margin-right: 0 !important;
}

.kat-header-checkinout__checkout-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  background: #232a36;
  height: 100%;
  padding-top: 14px;
  cursor: pointer;
}

.kat-flaticon-caution-signal:before {
  color: #ff0000;
}

.kat-header-checkinout__checkout-info__text-wrapper {
  width: calc(100% - 40px);
  text-align: left;
  padding-left: 13px;
  cursor: pointer;
  font-weight: normal;
}

.kat-header-checkinout__checkout-info__text__highlight {
  color: #fff;
  margin: 0 4px;
}

.kat-header__checkinout-block__wrapper.kat-top-177px {
  top: 177px !important;
  max-height: 400px;
  overflow: auto;
}

.kat-checkinout-am-text {
  text-align: left;
  margin-right: 8px;
  padding-right: 6px;
}

.kat-header__checkinout-block__break-list__title {
  color: #e9b12b;
  font-weight: 500;
}

.kat-workstream__task-icon.play-ico {
  display: inline-block;
  height: 26px;
  width: 26px;
  text-align: center;
  border: 1px solid #94989E;
  border-radius: 50%;
  padding: 2px 7px;
  margin-top: 15px;
  margin-left: 1px;
  position: relative;
  left: 8px;
}

.kat-workstream__task-icon.play-ico:before {
  font-size: 12px;
  position: relative;
  top: 2px;
}

.kat-workstream__task-icon:before {
  margin-left: 0;
}

.left-26px:before {
  left: 26px !important;
}

.remove-time {
  display: inline-block;
  color: #fff;
  background: red;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  line-height: 1;
  font-weight: bold;
}

/*notification*/
.notification-wrapper {
  margin: 18px 10px 0 0;
  position: relative;
}

.notification-wrapper .flaticon-notification-icon:before {
  cursor: pointer;
}

.notification-wrapper .notification-count {
  display: inline-block;
  border-radius: 50%;
  background: #ea4335;
  color: #fff;
  text-align: center;
  position: absolute;
  top: -11px;
  font-size: 10px;
  font-weight: bold;
  left: 29px;
  width: 21px;
  height: 21px;
  line-height: 21px;
}

.notification-wrapper .kat-cards-user-thumb.kat-profile-thumbnail__alphabet {
  position: static;
  border-radius: 3px;
  height: 60px;
  width: 60px;
  top: -19px;
  left: 12px;
  line-height: 57px;
  font-size: 28px;
  font-weight: 400;
  color: #EAEDF4;
  cursor: default;
  margin-left: 0;
}


.notification-wrapper .notification-cards {
  margin-bottom: 10px;
  cursor: pointer;
}

.notification-wrapper .notification-cards:hover .notification-txt-wrapper {
  width: calc(100% - 124px);
}

.notification-wrapper .notification-cards:hover .notify-delete-icon-wrapper {
  display: inline-block;
}

.notification-wrapper .notification-cards:last-child {
  margin-bottom: 0;
}

.notification-wrapper .notification-cards .notification-txt-wrapper {
  margin-top: 5px;
  display: inline-block;
  width: calc(100% - 90px);
  font-size: 13px;
  margin-right: 10px;
}

.notification-wrapper .notification-cards .notification-time {
  color: #24c8f3;
  font-size: 13px;
  margin-top: 5px;
  display: inline-block;
}

.notification-wrapper .notify-delete {
  transform: rotate(45deg);
  margin-right: -4px;
  position: relative;
  left: 17px;
  top: 15px;
  display: inline-block;
}

.notification-wrapper .notify-delete:before {
  margin-left: 0;
}

.notification-wrapper .notify-delete-icon-wrapper {
  display: none;
}

.notification-wrapper .kat-cards-user-thumb.kat-profile-thumbnail__alphabet.image .kat-profile-thumbnail__alphabet {
  font-size: 30px;
  line-height: 53px;
  width: 47px;
  top: 3px;
  left: 6px;
  margin: 0;
}

.notification-wrapper .notification-bubble {
  position: absolute;
  text-align: left;
  top: 100%;
  box-shadow: 0 0 8px rgba(67, 65, 90, 0.42);
  color: grey;
  background: #F5F6FA;
  padding: 10px 0 10px 10px;
  -webkit-animation: dropdownEntry 0.16s ease-in-out;
          animation: dropdownEntry 0.16s ease-in-out;
  transform-origin: top center;
  right: 0;
  width: 330px;
  z-index: 11;
  border-radius: 3px;
}

/* mixin for multiline */
.notification-txt {
  overflow: hidden;
  position: relative;
  line-height: 1.2em;
  max-height: 2.4em;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
}

.notification-txt:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}

.notification-txt:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: #f5f6fa;
}

.notification-dismiss-link {
  color: #82C484;
  font-size: 12px;
  margin-right: 10px;
  display: inline-block;
}

.notification-dismiss-link:hover {
  color: #59945B;
}

.notification-count.animate-notify-count {
  -webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
          animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  perspective: 1000px;
}

.notification-cards-wrapper {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}
.leaves-header-button{
  height: 36px;
  width: 125px;
  border: 2px solid #5ABD50;
  border-radius: 5px;
  font-size: 14px;
  color: #222222;
}
.leaves-header-fright-container{
  position: relative;
  top: 8px;
}

@-webkit-keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@-webkit-keyframes blink-bg {
  0%, 49% {
    background-color: transparent;
    color: rgba(203, 204, 206, 0.49);
  }
  50%, 100% {
    background-color: rgba(203, 204, 206, 0.49);
    color: #fff;
  }
}

.hdr-notification-icon {
  margin: 0;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  top: -9px;
  left: 10px;
}

.hdr-notification-icon.animate-notify {
  -webkit-animation: blink-bg 2s infinite; /* Safari 4+ */ /* Fx 5+ */ /* Opera 12+ */
  animation: blink-bg 2s infinite; /* IE 10+, Fx 29+ */
  opacity: 0.5;
}

.hdr-notification-icon:before {
  margin: 10px;
  cursor: pointer;
  height: 20px;
  display: inline-block;
}

.checkout-prompt {
  position: absolute;
  width: 313px;
  background: #232a36;
  right: 0;
  top: 58px;
  padding: 20px 17px;
  min-height: 117px;
  z-index: 55;
}

.prompt-info-txt {
  font-size: 13px;
  margin-top: 10px;
  display: inline-block;
  text-align: left;
  width: 80%;
  float: left;
  line-height: 17px;
  color: #9ea0a3;
}

.prompt-button-set .kat-integration-wrapper-button {
  float: left;
  background: #2bbee8;
  padding: 9px 15px;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  margin-top: 10px;
  font-weight: bold;
  min-width: 85px;
}

.prompt-button-set .kat-button-cancel {
  float: left;
  position: relative;
  top: 15px;
  left: 10px;
  color: #fff;
  font-weight: bold;
}

.prompt-button-set {
  margin-top: 10px;
}


.notification-wrapper .kat-cards-user-thumb.kat-profile-thumbnail__alphabet.image .kat-profile-thumbnail__alphabet .kat-projects-add-people__body-pro-img {
  border: 1px solid #000;
  height: 60px !important;
  width: 60px !important;
  margin: 0 1px;
  position: relative;
  top: -4px;
  z-index: 0;
  border-radius: 3px;
  left: -8px;
}.leave-container-wrapper{
    height: 110px;
    width: 200px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin: 5px;
}
.total-leaves{
    color: #5ABD50;
    font-size: 20px;
    font-weight: 600;
}
.leave-type{
    font-size: 14px;
    color: #222222;
}
.leave-apply-btn-container{
    align-self: flex-end;
    position: relative;
    left: 12px;
}
.leave-apply-btn{
    height: 30px;
    width: 70px;
    font-size: 14px;
    background-color: #5ABD50;
    color: #fff;
    border-radius: 4px;
    margin-right: 10px;
}
.pbottom{
    padding-bottom: 10px;
}
.containerWrapper{
    width: 50%;
    min-height: 135px;
    border: 1px solid #e5e5e5;
    padding: 10px;
    border-radius: 5px;
    line-height: 22px;
    font-size: 14px;
    text-align: left;
    color: #222222;
    margin-bottom: 15px;
    position: relative;
}
.rejection-container-footer{
    margin-top: 15px;
    height: 30px;
    position: absolute;
    bottom: 5px;
    left: 0px;
}
.recentlyAppliedLeave-Table{
    display: table;
    border-collapse: collapse;
    width: 100%;
}
.recentlyAppliedLeave-Heading{
    display: table-row;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px solid #e5e5e5;
    border-width: thin;
}
.recentlyAppliedLeave-Cell, .approvedby-width{
    display: table-cell;
    padding: 5px;
    text-align: left;
    color: #222222;
    font-size: 14px;
    height: 50px;
    padding-top: 15px;
}
.recentlyAppliedLeave-Row{
    display: table-row;
    border-bottom: 2px solid #e5e5e5;
    border-width: thin;
}
.approvedby{
    padding-left: 5px;
}
.leave{
    width: 13%;
}
.reason, .status{
    width: 15%;
}
.leaveReason{
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
.duration{
    width: 23%;
}
.approvedby-width{
    width: 22%;
    position: relative;
}
.reject-reason{
    width: 12%;
}
.width20{
    width: 20%;
    height: 50px;
}
.recentlyAppliedLeave-Cell p{
    position: absolute;
}
.reject-view{
    font-weight: bold;
    color: #5abd50;
    cursor: pointer;
    margin-left: 15px;
}
.leaveSelectBox-container{
    position:relative;
    min-width:120px;
}
.leaveSelectBox-title{
    width: 100%;
    text-align : left;
    margin-left : 8px;
}
.leaveSelectBox-dropdown{
    margin-right: 10px;
    float : right;
}
.leave-dashboard-header{
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 15px;
    color: #222222;
    height: 45px;
  }
  .leaveContainerList{
    display: flex;
    flex-wrap: wrap;
  }
  .ptop{
    padding-top: 20px;
    margin-left: 5px;
  }
  .mLeft-calender{
    margin-left: 2px;
  }
  .leave-wrapper {
    margin-top: 0px !important;
  }
  .applyLeave-container-wrapper{
    min-height: 335px;
    width: auto;
    display: flex;
  }
  .applyLeave-container-left{
    width:60%;
    padding: 10px;
    display: flex;
    flex-direction: column;
  }
  .applyLeave-container-right{
    width: 40%;
    padding: 10px;
    display: flex;
  }
  .leave-reason{
    height: 140px;
    width: 91%;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    position: relative;
    top: 10px;
    padding: 10px;
    font-size: 14px;
    color: #222222;
  }
  .leave-reason ::-webkit-input-placeholder, .leave-reason:-moz-placeholder, .leave-reason ::-moz-placeholder, .leave-reason :-ms-input-placeholder, .leave-reason ::placeholder{
    font-size: 14px;
    color: #5F636C;
    opacity: 0.3;
  }
  
  .footer-container{
    margin-top: 29px;
    width: 91%;
  }
  .attach-file{
    color: #5ABD50;
    font-weight: 600;
    padding-top: 10px;
    cursor: pointer;
    position: absolute;
    left: 50px;
  }
  .attach{
    transform: rotateX(180deg) rotateY(0deg) rotateZ(-28deg);
    position: relative;
    right: 20px;
    color: #5ABD50;
  }
  .button-container{
    display: flex;
    position: relative;
    left: 251px;
  }
  .cancel-leave{
    height: 35px;
    text-align: center;
    width: 70px;
    padding: 12px;
    color: #222222;
    position: relative;
    right: 10px;
    cursor: pointer;
  }
  .submit-leave{
    height: 40px;
    width: 130px;
    text-align: center;
    padding: 12px;
    background-color: #5ABD50;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
  }
  .applied-leave-container{
    height: 76px;
    width: 100%;
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    position: relative;
    top: 10px;
  }
  .leave-text {
    color: #5ABD50;
    font-size: 20px;
    font-weight: bold;
    margin: 3px 0px;
  }
  .leave-text-bottom{
    margin-top: 8px;
  }
  .text { 
    font-size: 14px;
    color: #222222;
    line-height: 18px;
  }
  .mLeft-container {
    margin-left: 10px;
    width: 40%;
  }
  .pBottom{
    padding-bottom: 6px;
  }
  .activeTab{
    background-color: #5ABD50;
    color: #fff !important;
  }
  .history-header{
    width: 520px;
    display: flex;
  }
  .history-header-label{
    align-self: center;
    position: relative;
    left: 10px;
    margin-left: 30px;
  }
  .header-text{
    position: absolute;
    left: 55px;
    top: 26px;
  }
  .reject-header{
    position: relative;
    bottom: 10px;
  }
.rejection-container{
    width : 100%;
    height :100%;
} 
.no-records{
    width: 100%;
    color: #acacac;
    line-height: 45px;
    height: 45px;
    border-bottom: 1px solid #e5e5e5;
    border-width: thin;
} 
.go-back{
    width : 28px;
    cursor : pointer;
}
.start-date, .end-date{
  padding-top: 5px;
}
.rejection-header-text{
  color : #ACACAC;
  margin-left : 10px;
}
.go-back-rejection{
  position :relative; 
  top : 10px;
}
.disable{
  pointer-events: none;
}
.workStationWrapper{
  width: 100%;
  height: 100%;
  display: flex;
}
.workStationColumn1{
  width: 35%;
  height: 218px;
}
.workStationColumn2{
  width: 65%;
  margin-left: 15px;
  min-height: 218px;
}
.columnContainer{
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  padding: 10px;
}

.workStationHeader, .popupHeader{
  color: #222222;
  font-size: 14px;
  font-weight: bold;
}
.checkBoxWrapper{
  padding: 10px;
  margin-top: 10px;
}

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: #222222;
}

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #e5e5e5;
  border-radius: 50%;
}

.container:hover input ~ .checkmark {
  background-color: #ccc;
}

.container input:checked ~ .checkmark {
  background-color: #27bfe9;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked ~ .checkmark:after {
  display: block;
}

.container .checkmark:after {
 	top: 6px;
	left: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: white;
}

.right{
  right: 7px;
}

.workStationTable{
  display: block;
  margin-top: 10px;
}

.submit-workStation{
  float: right;
  width: 65px;
  height: 35px;
  padding: 10px;
  background-color: #5ABD50;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.tableContainer{
  display: flex;
  flex-direction: column;
  border-collapse: collapse;
  width: 100%;
}

.tableBody{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  max-height: 290px;
  overflow-y: auto;
  width: inherit;
}
.width30{
  width: 30%;
  display: inline-block !important;
}

.left{
  position: relative;
  left: 5px;
}

.approvedBy{
  position: relative;
  width: 17%;
  margin-top: 12px;
  right: 10px;
}

.approval-button{
  height: 30px;
  float: left;
  width: 90px;
  border: 1px solid #5ABD50;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  color: #222222;
  cursor: pointer;
  position: relative;
  top: 10px;
  right: 3px;
}
.approval-button:hover{
  border: 2px solid #5ABD50;
}

.mLeft { 
  margin-left: 5px;
}

.fLeft{
  float: left;
}

.approval-cell {
  padding: 5px;
  text-align: left;
  color: #222222;
  font-size: 14px;
  height: 35px;
  padding-top: 0px;
}

.approval-status{
  width: 20%;
  position: relative;
  bottom: 2px;
  right: 3px;
}

.width10{
  width: 23%;
}

.popupContainer {
  width: 500px;
  height: 250px;
  padding: 15px;
  position: fixed;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.popup-textArea{
  height: 150px;
  width: 100%;
  padding: 10px;
  color: #222222;
  border-radius: 5px;
  border: 1px solid #e5e5e5;
  margin-top: 10px;
}

.header{
  width: 200px;
}

.popup-footer{
  position: absolute;
  right: 15px;
  bottom: 13px;
}

.popup-cancel{
  color: #222222;
}

.popup-buttons{
  padding: 7px;
  width: 70px;
  float: left;
  height: 30px;
  text-align: center;
  cursor: pointer;
}

.popup-save{
  border-radius: 5px;
  color: #fff;
  background-color: #ff0000;
}

.error-text{
  color: #ff0000;
  font-size: 14px;
}

.pTop{
  padding-top: 17px;
}

.approval-row{
  height: 50px;
  display: flex;
}

.changeStatus{
  color: #5ABD50;
  font-weight: bold;
  float: right;
  position: relative;
  right: 155px;
  cursor: pointer;
}

.border-reject{
  border: 1px solid #ff0000;
}

.closeAction{
  height: 30px;
  float: left;
  padding: 5px;
  cursor: pointer;
  position: relative;
  top: 10px;
}

.addTop{
  bottom: 6px;
}

.table-row{
  display: inline-block;
}

.Name, .Leave{
  width: 12%;
}
.Status{
  width: 20%;
}
.Reason{
  width: 15%;
}
.Approvers{
  width: 17%;
}
.Duration{
  width: 22%;
}

.approval-Table{
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}

.approval-heading{
  display: flex;
}

.approval-tableBody{
  max-height: 500px;
  min-height: 300px;
}

.disableBackground{
  opacity: 0.6;
  overflow-y: hidden;
  pointer-events: none;
}
.leave-reason::-webkit-input-placeholder, .leave-reason:-moz-placeholder, .leave-reason::-moz-placeholder, .leave-reason:-ms-input-placeholder, .leave-reason::placeholder{
  font-size: 14px;
  color: #5F636C;
  opacity: 0.3;
}

.view-reason{
  position: relative;
  top: 5px;
  right: 20px;
  float: right;
}

.disableButton{
  pointer-events: none;
  background-color: #e5e5e5;
  color: #acacac;
}

.showManagers{
  display: none;
  width: 0%;
}
.showPopup{
  display: block;
}
.reason-cell{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  width: 100%;
  display: inline-block;
}

.tooltiptext{
  display: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 30px;
  background-color: #222222;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 6px;
  position: absolute;
  z-index: 1;
  white-space: nowrap
}

.reason-cell:hover + .tooltiptext {
  display: block;
  position: relative;
}

.leaveStatus{
  position : relative;
  top : 3px;
  right : 3px;
}.kat-task-bar {
  position: absolute;
  bottom: 0;
  top: 58px;
  right: 0;
  height: calc(100% - 59px);
  background: #EAEDF4;
  z-index: 999;
  width: 275px;
  box-shadow: 0 0 8px rgba(67, 65, 90, 0.42);
}

.kat-task-bar__selection-info__count-wrapper {
  height: 25px;
  width: 25px;
  background: #2BBEE8;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  top: 1px;
}

span.kat-task-bar__selection-info__count {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

span.kat-task-bar__selection-info__title {
  font-size: 14px;
  font-weight: 600;
  color: #1F2532;
  padding-top: 3px;
  position: relative;
  top: 6px;
  left: -7px;
}

.kat-task-bar__selection-info {
  width: 100%;
  padding: 20px 20px 15px 20px;
  text-align: center;
}

ul.kat-task-bar__menu {
  text-align: center;
  height: 100%;
  margin: auto;
}

span.kat-task-bar__info-text {
  position: absolute;
  right: 0;
  bottom: 24px;
  font-size: 16px;
  padding-right: 30px;
  font-weight: 100;
  font-style: italic;
  color: rgba(155, 158, 165, 0.7);
}

span.kat-task-bar__info-text__highlight {
  font-weight: 600;
  color: #9b9ea5;
}

li.kat-task-bar__menu__element {
  display: inline-block;
  width: 80px;
  height: 100%;
  position: relative;
}

li.kat-task-bar__menu__element .hierarchical-list-mainwrapper.top {
  min-width: 260px;
}

li.kat-task-bar__menu__element.active {
  background: #fff;
}

a.kat-task-bar__menu__element__icon {
  display: table;
  width: 100%;
  margin-top: 21px;
}

a.kat-task-bar__menu__element__icon.tooltip[data-tooltip]:hover:after {
  bottom: 79%;
  left: -21%;
}

a.kat-task-bar__menu__element__icon.tooltip-top:hover .arrow:before {
  top: 7px;
  left: 42%;
}

a.kat-task-bar__menu__element__icon:before {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-size: 22px;
  color: #4A4F5A;
}

.kat-task-bar__menu__element__dropdown-people, .kat-task-bar__menu__element__dropdown {
  position: absolute;
  background: #fff;
  bottom: calc(100% - 6px);
  padding: 15px 5px;
  min-width: 250px;
  text-align: left;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}

a.kat-task-bar__menu__element__dropdown__list__item__link {
  white-space: nowrap;
  padding: 12px 20px;
  display: inline-block;
  color: #1F2532;
  font-size: 15px;
}

span.kat-task-bar__menu__element__dropdown-people__title, span.kat-task-bar__menu__element__dropdown__title {
  color: #BABBBE;
  font-size: 12px;
  margin-bottom: 3px;
  display: inline-block;
  padding-left: 20px;
}

span.kat-task-bar__menu__element__dropdown-people__title {
  margin-bottom: 8px;
  padding-left: 10px;
}

.kat-task-bar__menu__element__dropdown-people:after, .kat-task-bar__menu__element__dropdown:after {
  content: '';
  position: absolute;
  width: 80px;
  height: 20px;
  background: #FFF;
  left: 50%;
  transform: translateX(-50%);
}

label.kat-task-bar__menu__element__dropdown-people__list__item__profile {
  display: block;
  position: relative;
  padding: 6px 13px;
  white-space: nowrap;
  display: flex;
}

.kat-task-bar__menu__element__dropdown-people__list__item__profile__image-wrapper {
  width: 40px;
  height: 40px;
  background: #293141;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

span.kat-task-bar__menu__element__dropdown-people__list__item__profile__image-title {
  position: absolute;
  color: #fff;
  font-weight: 600;
  top: 50%;
  font-size: 15px;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

span.kat-task-bar__menu__element__dropdown-people__list__item__profile__title {
  padding-left: 13px;
  padding-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #2A3036;
  margin-right: 25px;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

span.kat-task-bar__menu__element__dropdown-people__list__item__profile__title__secondary {
  padding-left: 3px;
}

input.kat-task-bar__menu__element__dropdown-people__list__item__profile__selector {
  margin-top: 15px;
}

img.kat-task-bar__menu__element__dropdown-people__list__item__profile__image {
  height: 100%;
}

span.kat-task-bar__menu__element__dropdown-people__list__item__profile__title__name {
  max-width: calc(100% - 120px);
  font-weight: 600;
}

span.kat-task-bar__menu__element__dropdown-people__list__item__profile__title__designation {
  width: 110px;
  margin-left: 5px;
}

.kat-task-bar__menu__element__dropdown__child {
  left: 190px;
  position: absolute;
  background: #fff;
  bottom: calc(100% - 8px);
  padding: 15px 5px;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
  min-width: 250px;
  text-align: left;
}

.kat-task-bar__menu .DayPicker.DayPicker--en {
  bottom: 62px;
  box-shadow: 0px -3px 8px rgba(67, 65, 90, 0.3);
  transform-origin: bottom;
}

ul.kat-task-bar__menu__element__dropdown__list li {
  cursor: pointer;
}

.change-priority .secondary-dropdown .kat-task-detail__right-section__header__toolbar__dropdown__list .kat-task-bar__menu__element__dropdown__list__item .kat-task-bar__menu__element__dropdown__list__item__link {
  padding: 5px 10px;
}

.change-priority .secondary-dropdown ul.kat-task-detail__right-section__header__toolbar__dropdown__list li {
  padding: 5px 20px !important;
}

.change-priority .secondary-dropdown .kat-task-detail__right-section__header__toolbar__dropdown__list .kat-task-bar__menu__element__dropdown__list__item .priority-number {
  color: #fff;
  padding: 5px 5px;
  display: inline-block;
  border-radius: 3px;
  font-size: 11px;
  margin-top: 3px;
  width: 20px;
  height: 21px;
}

.priority-number.priority-1 {
  background: #b7b7b7;
}

.priority-number.priority-2 {
  background: #797979;
}

.priority-number.priority-3 {
  background: #a1d046;
}

.priority-number.priority-4 {
  background: #87b332;
}

.priority-number.priority-5 {
  background: #ffcb65;
}

.priority-number.priority-6 {
  background: #ffb526;
}

.priority-number.priority-7 {
  background: #f97777;
}

.priority-number.priority-8 {
  background: #e53030;
}

.kat-task-bar__menu__element__dropdown-people__list__item__profile .kat-task-detail__top-menu__items_icon {
  margin-right: 10px;
}

.kat-task-bar__menu__element__dropdown-people__list__item__profile .kat-task-detail__top-menu__items_icon:not(.flaticon-check).checkbox {
  margin-left: 0;
  margin-top: 6px;
  width: 17px;
  height: 17px;
}

.kat-task-bar__menu__element__dropdown-people__list__item__profile span.flaticon-tick-thin {
  margin-top: 8px;
}

.kat-task-bar__menu__element__dropdown-people__list__item__profile span.flaticon-tick-thin:before {
  font-size: 11px !important;
  padding: 2px;
  margin-left: 0 !important;
  background: green;
  color: #fff;
  border: 1px solid green;
  border-radius: 3px;
  position: relative;
  left: -1px;
}

.kat-task-bar__menu__element .kat-userlist__dropdown__content-add-dropdown-top {
  bottom: calc(100% + -4px);
  width: 280px !important;
  transform: translateY(-1%);
  transform-origin: top center;
  position: absolute;
  margin-left: -99px;
  z-index: -3;
}

ul.kat-task-bar__menu li .quadrant-display-wrapper {
  left: 273px;
  top: -93px;
}

.multiselect-task-wrapper {
  position: relative;
  height: calc(100% - 128px);
  overflow: auto;
}

.multiselect-task-wrapper .multiselect-task-options {
  padding: 20px 30px;
}

.multiselect-task-wrapper .multiselect-task-options.active {
  background: #fff;
}

.multiselect-task-wrapper .card-info-wrapper {
  margin: 0;
  width: 100%;
}
.multiselect-task-wrapper .card-info-wrapper-tags {
  pointer-events: none;
}

.multiselect-task-wrapper .kat-task-details-action-status-btn {
  width: 100%;
  margin: 0;
  background: #fff;
  color: #313845;
  border: 1px solid #e3e5ea;
}

.multiselect-task-wrapper .kat-task-details-action-status-btn .drop-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: #C8CCD5 rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
  right: 16px;
  left: initial;
  top: 21px;
}

.multiselect-task-wrapper .block-cards-info .add-card-info span {
  left: 5px;
}

.multiselect-task-wrapper .flaticon-dollar-icon:before {
  font-size: 18px !important;
}

.multiselect-task-wrapper .kat-billable-cell span {
  left: 33%;
}

.multiselect-task-wrapper .card-info {
  width: calc(100% - 26%) !important;
}

.multiselect-task-wrapper .kat-billable-cell:before {
  background: #c8ccd5;
  border-left: 1px solid #d1d4db;
  left: -5px;
}

.multiselect-task-wrapper .kat-billable-cell.active:before, .multiselect-task-wrapper .kat-billable-cell:hover:before {
  background: #a1d046;
}

.multiselect-task-wrapper .kat-billable-cell.tab2.active:before, .multiselect-task-wrapper .kat-billable-cell.tab2:hover:before {
  background: #5c88a1;
}

.multiselect-task-wrapper .block-cards-info .add-card-info {
  margin-top: 2px;
}

.multiselect-task-footer {
  padding: 15px 25px;
  border-top: 1px solid #dde0e8;
}

.multiselect-task-footer .flaticon-delete:before {
  margin-left: 0;
  font-size: 18px;
}

.multiselect-task-footer .flaticon-delete {
  cursor: pointer;
  color: #4a4f5a;
}

.multiselect-task-footer .flaticon-delete .lable {
  color: #2f3441;
  font-weight: bold;
  margin-left: 5px;
}

.multiselect-icon-wrapper {
  width: 27px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #4a4f5a;
  position: relative;
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
}

.multiselect-icon-wrapper::before {
  margin-left: 0;
  font-size: 27px;
}

.multiselect-icon-wrapper:hover {
  background: #d64e3a;
}

.multiselect-icon-wrapper:hover .flaticon-tick-thin:before, .multiselect-icon-wrapper:hover .flaticon-cross-icon:before {
  color: #fff;
}

.multiselect-icon-wrapper.tick:hover {
  background: #8bbe4e;
}

.multiselect-icon-wrapper .flaticon-cross-icon:before, .multiselect-icon-wrapper .flaticon-tick-thin:before {
  margin-left: 0;
  font-size: 9px;
  font-weight: bolder;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.multiselect-icon-wrapper .flaticon-cross-icon, .multiselect-icon-wrapper .flaticon-tick-thin {
  color: #4a4f5a;
}

.multiselect-icon-wrapper .flaticon-tick-thin:before {
  font-size: 10px;
}

.multiselect-task-options-dropdown {
  position: absolute;
  z-index: 999;
  width: 208px;
}

.multiselect-task-options-dropdown .kat-task-detail__right-section__header__toolbar__dropdown.secondary-dropdown {
  left: auto;
}

.multiselect-task-options-dropdown .hierarchical-sublist-wrapper-child {
  margin-left: 0 !important;
}

.multiselect-task-options-dropdown .quadrant-display-wrapper {
  left: auto;
  top: auto;
  margin-left: auto !important;
}

.multiselect-task-options-dropdown .kat-userlist__dropdown__list__text {
  width: calc(100% - 53px);
}

.multiselect-task-options-dropdown .kat-settings-dropdown-list {
  width: 100% !important;
}

.multiselect-task-options-dropdown .kat-userlist__dropdown__list__text {
  display: inline-block;
  margin-left: 10px;
}

.multiselect-task-options-dropdown .flaticon-arrow-right-1 {
  position: absolute;
  left: 12px;
  transform: rotate(176deg);
}

.multiselect-task-options-dropdown .hierarchical-sublist-mainwrapper .hierarchical-list-items-txt {
  margin-left: 18px;
}

.multiselect-task-options-dropdown .kat-task-bar__menu__element__dropdown__list__item__link {
  padding: 0;
}
.multiselect-task-options-dropdown .kat-userlist__dropdown .kat-userlist__dropdown__list__text_email{
  left:11px;
}

@-moz-document url-prefix() {
  .kat-billable-cell.tab2.active:before{
    width: 100%;
    left: 0px;
    right: -12px;
    top: -2px;
    /* transform: skewX(-17deg) */
    transform: rotate(180deg);
  }
}
/* @supports (-moz-appearance:none) {
  .kat-billable-cell.tab2.active:before{
    width: 100%;
  }
} */span.kat-back-icon.flaticon-arrows {
  color: #8D8C9B;
  margin: 0 25px 0 0;
  position: relative;
  //top: -5px;
  cursor: pointer;
}

span.kat-back-icon.flaticon-arrows:before {
  font-size: 30px;
  margin-left: 0;
}
.kat-page-header-bg{
  background: #43415A;
  height: 150px;
  position: absolute;
  width: 100%;
}
.kat-page-header {
  color: #fff;
}

h1.kat-page-header__text {
  font-weight: 300;
  position: absolute;
  padding: 35px 30px 0 87px;
}

span.settings-text {
  color: white;
  position: relative;
  left: -49px;
}.kat-project-user-timeline__wrapper {
  position: absolute;
  width: 400px;
  bottom: 0;
  top: 0;
  left: -400px;
  background: #fff;
  z-index: 100;
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
  transition: all 0.25s ease-in-out;
}

.kat-project-user-timeline__wrapper.slide-in {
  left: 0;
}

.kat-project-user-timeline-toggler {
  position: absolute;
  right: -60px;
  width: 60px;
  height: 297px;
  background: #fff;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 0 10px 10px 0;
  border-right: 2px solid #686879;
}

.toggle-top {
  background: url(/dist/taskedge-top.png) -39px 0 no-repeat;
  width: 99px;
  height: 106px;
  top: -99px;
  position: absolute;
  left: 0;
}

.toggle-bottom {
  background: url(/dist/taskedge-bottom.png) -21px 37px no-repeat;
  width: 99px;
  height: 99px;
  bottom: -54px;
  position: absolute;
  left: -18px;
}

.kat-project-user-timeline-toggler .kat-workstream__task-icon.play-ico {
  display: inline-block;
  height: 38px;
  width: 38px;
  text-align: center;
  border: 1px solid #94989E;
  border-radius: 50%;
  padding: 2px 7px;
  position: relative;
  left: 8px;
  margin-top: 0;
}

.kat-project-user-timeline-toggler .kat-workstream__task-icon.play-ico.flaticon-arrow:before, .kat-project-user-timeline-toggler .kat-workstream__task-icon.play-ico.flaticon-pause:before {
  font-size: 16px;
  position: relative;
  top: 7px;
  left: 2px;
}

.kat-project-user-timeline-toggler .kat-workstream__task-icon.play-ico.flaticon-arrow:before {
  margin-left: 0;
}

.kat-project-user-timeline-toggler .kat-workstream__task-icon.play-ico.flaticon-pause:before {
  left: 0;
}

.kat-project-user-timeline__header__container {
  background: #E2E5EC;
  height: 70px;
  position: relative;
  padding:20px;
}

button.kat-project-user-timeline__header__nav {
  height: 100%;
  width: 55px;
  margin: 0;
  padding: 0;
  position: relative;
}

button.kat-project-user-timeline__header__nav:before {
  font-size: 24px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  margin: 0;
  color: #898E99;
}

.kat-project-user-timeline__header__title {
  position: absolute;
  width: calc(100% - 110px);
  left: 55px;
  height: 100%;
  text-align: center;
  padding-top: 20px;
}

span.kat-project-user-timeline__header__title__text {
  font-size: 22px;
  font-weight: 200;
  color: rgba(41, 49, 65, 0.6);
  cursor: pointer;
}

.kat-project-user-timeline__header__progress-bar__wrapper {
  height: 18px;
  background: #9CA2AF;
  position: relative;
}

.kat-project-user-timeline__header__progress-bar {
  position: absolute;
  width: 57%;
  height: 100%;
  left: 0;
  top: 0;
  background: #656B76;
}

span.kat-project-user-timeline__header__progress-bar__time-text {
  position: relative;
  font-size: 8px;
  color: #fff;
  padding: 4px 8px;
}

span.kat-project-user-timeline__header__title__arrow {
  width: 15px;
  height: 15px;
  position: relative;
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
}

span.kat-project-user-timeline__header__title__arrow:before {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  border: 2px solid #5F6673;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  left: 2px;
}

.kat-project-user-timeline__time-span__wrapper {
  width: 100%;
  position: absolute;
  top: 18px;
  bottom: -48px;
}

.kat-project-user-timeline {
  height: 100%;
}


.kat-project-user-timeline__time-span__timer {
  position: absolute;
  height: 1px;
  width: 326px;
  background: #F24E4E;
  z-index: 100;
  right: 0;
  top: 50%;
}

.kat-project-user-timeline__time-span__timer:after {
  content: '';
  position: absolute;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F24E4E;
  top: -4px;
}

ul.kat-project-user-timeline__time-span__list {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
ul.kat-project-user-timeline__time-span__list .kat-project-user-timeline__time-span__list__row:first-child{
  height:50px;
}
ul.kat-project-user-timeline__time-span__list .kat-project-user-timeline__time-span__list__row:last-child {
  margin-bottom: 10px;
}

li.kat-project-user-timeline__time-span__list__row {
  height: 140px;
  border-bottom: 1px solid #E8E9EB;
  position: relative;
}

.kat-project-user-timeline__time-span__list__row__left-section {
  position: absolute;
  width: 75px;
  text-align: center;
  top: 5px;
  transform: translateY(-50%);
  color: #5F636C;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: #fff;
}

.kat-project-user-timeline__time-span__list__row__right-section {
  float: left;
  height: 80px;
  width: 317px;
  margin-left: calc(100% - 315px);
}

.kat-project-user-timeline__time-span__list__row__right-section-divider li {
  width: 114%;
  height: 35px;
  position: relative;
  left: -46px;
  cursor: default;
}

.kat-project-user-timeline__time-span__list__row__right-section-divider li.show-timer-bottom {
  border-bottom: 2px solid #2bbee8;
}

.kat-project-user-timeline__time-span__list__row__right-section-divider-timer.bottom {
  background: #2bbee8;
  padding: 3px;
  color: #fff;
  font-size: 11px;
  border-radius: 3px;
  position: absolute;
  top: 23px;
  display: none;
}

.kat-project-user-timeline__time-span__list__row__right-section-divider li.show-timer-bottom .kat-project-user-timeline__time-span__list__row__right-section-divider-timer {
  display: block;
}

.kat-project-user-timeline__time-span__list__row__right-section-divider li.show-timer-top {
  border-top: 1px solid #2bbee8;
}

.kat-project-user-timeline__time-span__list__row__right-section-divider-timer.top {
  background: #2bbee8;
  padding: 3px;
  color: #fff;
  font-size: 11px;
  border-radius: 3px;
  position: absolute;
  top: -10px;
  display: none;
}

.kat-project-user-timeline__time-span__list__row__right-section-divider li.show-timer-top .kat-project-user-timeline__time-span__list__row__right-section-divider-timer {
  display: block;
}

span.kat-project-user-timeline__time-span__list__row__left-section__title {
  display: block;
  font-size: 28px;
  font-weight: 100;
  margin-bottom: 3px;
}

span.kat-project-user-timeline__time-span__list__row__left-section__sub-title {
  display: block;
  font-size: 14px;
  font-weight: 100;
}

ul.kat-project-user-timeline__time-span__list__row__task-list {
  width: 315px;
  position: relative;
  left: 47px;
}

.kat-project-user-timeline__time-span__list__row__task-list__card {
  position: absolute;
  padding: 10px;
  color: #fff;
}

.kat-project-user-timeline__time-span__list__row__task-list__card.purple {
  background: #AC93EB;
  z-index: 1;
  -webkit-box-shadow: inset 0 -2px 0 -1px #fff;
  -moz-box-shadow: inset 0 -2px 0 -1px #fff;
  position: absolute;
}

.kat-project-user-timeline__time-span__list__row__task-list__card-content-wrapper {
  overflow: hidden;
  position: absolute;
  top: 8px;
  bottom: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: calc(100% - 23px);
}

.kat-project-user-timeline__time-span__list__row__task-list__card .kat_task__right-control {
  height: 27px;
  width: 26px;
  right: 1px;
  top: -17px;
  transform: rotate(90deg);
  border-radius: 4px 0 0 4px;
  text-align: center;
  padding: 5px 2px 0 2px;
  position: absolute;
  background: #AC93EB;
  opacity: 0;
  transition: all ease-in-out 0.2s;
}

.kat-project-user-timeline__time-span__list__row__task-list__card .kat_task-icon {
  cursor: pointer;
  opacity: 0.7;
}

.kat-project-user-timeline__time-span__list__row__task-list__card .kat-workstream__task__right-control .kat_task-icon {
  margin: 5px 0 0;
  height: 16px;
}

.kat-project-user-timeline__time-span__list__row__task-list__card .kat_task-icon.drag-select-ico {
  height: 18px;
  width: 18px;
  border: 1px solid #fff;
  border-radius: 50%;
  margin-left: 2px;
  margin-bottom: 6px;
}

.kat-project-user-timeline__time-span__list__row__task-list__card .kat_task-icon.play-ico {
  display: inline-block;
  height: 18px;
  width: 18px;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 50%;
  padding: 2px 7px;
  margin-top: 2px;
  margin-left: 0;
  margin-bottom: 5px;
  transform: rotate(31deg);
}

.kat-project-user-timeline__time-span__list__row__task-list__card .kat_task-icon.play-ico:before {
  font-size: 9px;
  color: #fff;
  margin-left: 0;
  position: relative;
  top: -6px;
  left: -2px;
}

.kat-project-user-timeline__time-span__list__row__task-list__card .kat_task-icon.check-ico:not(.flaticon-check) {
  height: 15px;
  width: 15px;
  border: 1px solid #fff;
  border-radius: 2px;
  margin-left: 3px;
  margin-bottom: 5px;
  margin-top: 5px;
}

.kat-project-user-timeline__time-span__list__row__task-list__card .kat_task-icon.flaticon-cross-icon::before {
  margin-left: 0;
  font-size: 12px;
  color: #fff;
  position: relative;
}

.kat-project-user-timeline__time-span__list__row__task-list__card .kat_task-icon.flaticon-more-vertical::before {
  font-size: 9px;
  color: #fff;
  margin-left: 0;
  position: relative;
  display: inline-block;
  margin-bottom: 4px;
}

.kat-project-user-timeline__time-span__list__row__task-list__card:hover .kat_task__right-control {
  opacity: 1;
  transform: translate(0%, -34%) rotate(90deg);
  display: block;
}

span.kat-project-user-timeline__time-span__list__row__task-list__card__title {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 95%;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

span.kat-project-user-timeline__time-span__list__row__task-list__card__sub-title {
  display: block;
  font-size: 12px;
  width: calc(100% - 13px);
  word-wrap: break-word;
  white-space: normal;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

li.kat-project-user-timeline__time-span__list__row__task-list__card.blue {
  background: #63CCE6;
}

li.kat-project-user-timeline__time-span__list__row__task-list__card.grey-pattern {
  background: #9CA2AF;
}

.progress-pie-chart {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #E5E5E5;
  position: relative;
  left: 8px;
}

.progress-pie-chart.gt-50.green {
  background-color: #a1d046;
}

.progress-pie-chart.gt-50.orange {
  background: #f0c600;
}

.ppc-progress {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 19px);
  top: calc(50% - 19px);
  width: 38px;
  height: 38px;
  clip: rect(0, 38px, 38px, 19px);
}

.ppc-progress .ppc-progress-fill {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 19px);
  top: calc(50% - 19px);
  width: 38px;
  height: 38px;
  clip: rect(0, 19px, 38px, 0);
  transform: rotate(60deg);
}

.gt-50 .ppc-progress {
  clip: rect(0, 19px, 38px, 0);
}

.gt-50 .ppc-progress .ppc-progress-fill {
  clip: rect(0, 38px, 38px, 19px);
  background: #E5E5E5 !important;
}

.ppc-percents {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 35.0937px;
  background: #fff;
  text-align: center;
  display: table;
  height: 34.78261px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ppc-percents span {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  color: #d5d8e0;
}

.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.kat-project-user-timeline-toggler-hdr {
  color: #494D50;
  font-weight: bold;
  font-size: 14px;
  position: relative;
  top: -13px;
  margin-left: 5px;
  margin-bottom: -2px;
  margin-top: 28px;
}

.kat-project-user-timeline-toggler-task-status {
  font-size: 11px;
  text-align: center;
  margin-top: 5px;
  font-weight: bold;
  margin-bottom: 15px;
}

.kat-project-user-timeline-toggler .progress-pie-chart:last-child {
  margin-top: 20px;
}

.progress-pie-chart.green .ppc-progress .ppc-progress-fill {
  background: #a1d046;
}

.progress-pie-chart.orange .ppc-progress .ppc-progress-fill {
  background: #f0c600;
}

/*.kat-project-user-timeline .DayPicker.DayPicker--en {
  background: #E2E5EC;
  width: 400px;
  top: 70px;
  box-shadow: none;
  right: 0;
}*/

/*
.kat-project-user-timeline .DayPicker-Month {
  width: 368px;
}
*/

/*.kat-project-user-timeline .DayPicker-Caption {
  height: 2.5rem;
  text-align: center;
  color: black;
  display: none;
}*/

/*.kat-project-user-timeline .DayPicker-NavBar {
  display: none;
}*/

/*.kat-project-user-timeline .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
  color: #FFF;
  background-color: #2bbee8;
  border-radius: 61%;
  width: 40px;
  margin-left: 6px;
  height: 34px;
  padding-top: 6px;
  line-height: 20px;
}*/

/*.kat-project-user-timeline .DayPicker-Day--today {
  font-weight: 500;
  border: 1px solid #c7c7c7 !important;
  border-radius: 50%;
  display: table-caption;
  width: 40px;
  margin-left: 6px;
}

.kat-project-user-timeline .DayPicker-Body {
  color: #515252;
}

.kat-project-user-timeline .DayPicker-Weekday {
  color: #5f646f;
  font-weight: 600;
  border-bottom: 1px solid #d7d9dd;
}*/

.kat-project-user-timeline__header__progress-bar__wrapper_move {
  height: calc(100% - 0vh);
}

.kat-project-user-timeline__header__progress-bar__wrapper_move_wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 47px;
  top: 71px;
}

.kat-project-user-timeline-drag-indicator-wrapper-bottom {
  position: absolute;
  bottom: 1px;
  height: 8px;
  right: 0;
  left: 0;
  cursor: ns-resize;
}

.kat-project-user-timeline-drag-indicator-wrapper-top {
  position: absolute;
  top: 1px;
  height: 24px;
  right: 0;
  left: 0;
  cursor: pointer !important;
  z-index: 1;
}

.task-preview-wrapper {
  position: absolute;
  top: 0;
  bottom: -48px;
  left: 78px;
  right: 0;
}

/*.time-slot-wrapper:hover {
  z-index: 98;
}*/

/*Weekly timeline css starts*/

.kat-project-user-timeline__wrapper.weekly{
  width:673px;
  transition: all 0s ease-in-out;
}
.kat-project-user-timeline__weekly{
  width: 100%;
  position: absolute;
  top: 18px;
  bottom: -48px;
}
.weekly-day-section-wrapper{
  /* border-bottom:1px solid #e9e9ea;*/
  height:55px;
  width:100%;
}
.weekly-day-section-list-item{
  width:calc(100%/7.99999);
  border-right:1px solid #e9e9ea;
  height:55px;
  float:left;
}
.weekly-day-section-list{
  float: left;
  width: 98.82%;
}
.weekly-day-section-list-item:last-child{
  border-right:none;
}
.weekly-day-section-list-info{
  width: 100%;
  text-align: center;
  line-height: 23px;
  position: relative;
  top: 17px;
}
.weekly-day-section-list-info .primary-txt{
  font-weight:bold;
  font-size: 21px;
  color:#000;
  display:block;

}

.weekly-day-section-list-item.current_day{
  background:#f9f9f9;
}
.weekly-time-section-list.current_day{
  background:#f9f9f9;
}
.weekly-time-section-list li:first-child,.weekly-time-section-list li:first-child{
  /*margin-top:20px;*/
}
.weekly-time-section-list-item:first-child{
  margin-top:26px;
  border-top:1px solid #e9e9ea;
}
.weekly-day-section-list-item.current_day .primary-txt{
  color:#36bbe1;
}
.weekly-day-section-list-info .secondary-txt{
  font-weight:normal;
  font-size:13px;
  color:#000;
  display:block;
  position: relative;
  top: -2px;
}
.weekly-day-section-list-item.current_day .secondary-txt{
  color:#36bbe1;
}
.weekly-time-section-wrapper{
  width: 100%;
  position: absolute;
  top: 55px;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.weekly-time-section-list{
  width:calc(100%/7.999);
  border-right:1px solid #e9e9ea;
  float:left;
  padding-bottom:30px;
}
.weekly-time-section-list-item{
  width:100%;
  height:140px;
  border-bottom:1px solid #e9e9ea;
}
.weekly-time-section-list-info{
  text-align: center;
  line-height: 22px;
  position: relative;
  top: 6px;
  right: -21px;
}
.weekly-time-section-list-info .primary-txt {
  color: #62666f;
  font-size: 22px;
  display: block;
  font-weight: bold;
}
.weekly-time-section-list-info .secondary-txt {
  color:#62666f;
  font-size:13px;
  display:block;
  font-weight:normal;
  margin-top:7px;
}
.timeline-date-display{
  color: #000;
  font-size: 16px;
  margin-top: 6px;
  width: 200px;
}
.timeline-date-display sup {
  font-size: 10px;
  position: relative;
  top: -1px;
}
.kat-project-user-timeline__header .toggle-button{
  position: relative;
  top: -3px;
  margin-left: 20px;
}
.kat-project-user-timeline__header .toggle-button .toggle-button-left,.kat-project-user-timeline__header .toggle-button .toggle-button-right{
  min-width: 70px;
  border-radius: 4px 0 0 4px;
  border: 1px solid #c7c7c8;
  color: #91969f;
  height: 35px;
  text-align: center;
  cursor: pointer;
  background:#f1f2f6;
  font-weight:bold;
}
.kat-project-user-timeline__header .toggle-button .toggle-button-left.active,.kat-project-user-timeline__header .toggle-button .toggle-button-right.active{
  background:#ffffff;
}
.kat-project-user-timeline__header .toggle-button .toggle-button-left.active span,.kat-project-user-timeline__header .toggle-button .toggle-button-right.active span{
  color:#000;
}
.kat-project-user-timeline__header .toggle-button .toggle-button-left span,.kat-project-user-timeline__header .toggle-button .toggle-button-right span{
  display:inline-block;
  margin-top:9px;
}
.kat-project-user-timeline__header .toggle-button .toggle-button-right{
  border-radius:0 4px 4px 0;
  margin-left:-1px;
}
.kat-project-user-timeline__header__container  .calendar-wrapper-div{
  margin-left:8px;
}
.calendar-wrapper-div {
  position: relative;
}
.kat-project-user-timeline__header__container .date-filter-option{
  width: 121px;
  min-width: 121px;
  background: #fff;
  height: 35px;
  margin-top: -3px;
  margin-right:0;
}
.kat-project-user-timeline__header__container .date-filter-option:hover,.kat-project-user-timeline__header__container .date-filter-option.active{
  background: #27bfe9;
  color: #fff;
}
.kat-project-user-timeline__header__container .kat-select-date-arrow{
  height:31px;
  margin-right:0;
}
.kat-project-user-timeline__header__container .date-filter-option.calendar-wrapper .primary-txt{
  font-size: 12px;
  width: 76%;
  padding-right: 5px;
  margin-top: 3px;
  padding-left: 5px;
  font-weight:bold;
}
.kat-project-user-timeline__header__container .date-filter-option .flaticon-calendar-icon:before{
  font-size:15px;
  top: 1px;
}
.kat-project-user-timeline__wrapper.weekly .timeline-date-display{
  width: 220px;
}
.kat-project-user-timeline__wrapper.weekly .kat-project-user-timeline__header .toggle-button{
  width: 183px;
}
.kat-project-user-timeline__wrapper.weekly .kat-project-user-timeline__header__container .date-filter-option{
  width: 143px;
}

.kat-project-user-timeline__wrapper.slide-in.weekly .kat-project-user-timeline__time-span__list__row__right-section-divider li {
  width:100%;
  left: 0;
}
.kat-project-user-timeline__wrapper.slide-in.weekly ul.kat-project-user-timeline__time-span__list__row__task-list{
  width: 99.5%;
  left: 2px;
}
.task-bubble {
  padding: 4px 5px;
  border-radius: 3px;
  background: #000;
  color: #fff;
  position: absolute;
  top: 5px;
  font-size: 10px;
  left: 104%;
  z-index: 2;
  display:none;
  pointer-events: none;
}
.task-bubble .bubble-arrow {
  position: absolute;
  width: 0;
  height: 0;
  top: 4px;
  left: -9px;
  border-style: solid;
  border-width: 6px 5px 5px;
  border-color: #000 rgba(87,92,101,0) rgba(87,92,101,0);
  cursor: pointer;
  transform: rotate(89deg);
}
.task-bubble-txt{
  display:inline-block;
  word-wrap: break-word;
}

.kat-project-user-timeline__wrapper.slide-in.weekly .kat-project-user-timeline__time-span__list__row__right-section-divider li.purple:hover .task-bubble{
  display:block;
}
.kat-project-user-timeline__wrapper.slide-in.weekly .kat-project-user-timeline__time-span__list__row__right-section-divider li.purple:hover{
  z-index:2;
}
.task-bubble.left{
  right:102%;
  left:initial;
}
.task-bubble.left .bubble-arrow{
  right: -9px;
  left:initial;
  transform: rotate(-90deg);
}

.time-highlighter{
  position: absolute;
  width: 710%;
  height: 1px;
  background: #27bfe9;
  right: 0;
  top:0;
}
.kat-project-user-timeline__time-span__list__row__right-section-divider-timer-weekly{
  background: #27bfe9;
  padding: 3px;
  color: #fff;
  font-size: 11px;
  border-radius: 3px;
  position: absolute;
  top: -10px;
  left:-35px;
}
.drop-active-zone {
  background: #e3f2fd !important;
}
.google-icon-representation{
  width: 3px;
  height: 100%;
  background: yellow;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.stripe{
  width:100%;
  height:calc(100% / 6);
}
.google-blue{
  background:#3369e8;
}
.google-red{
  background:#d50f25;
}
.google-yellow{
  background:#eeb211;
}
.google-green{
  background:#009925;
}
.kat-project-user-timeline__time-span__list__row__task-list__card-content-wrapper.google-calendar-task-txt{
  width: calc(100% - 37%);
}
.task-card-icon-wrapper .google-calendar-icon, .task-card-icon-wrapper .google-calendar-small-icon{
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggc3R5bGU9ImZpbGw6I0ZCQkIwMDsiIGQ9Ik0xMTMuNDcsMzA5LjQwOEw5NS42NDgsMzc1Ljk0bC02NS4xMzksMS4zNzhDMTEuMDQyLDM0MS4yMTEsMCwyOTkuOSwwLDI1NgoJYzAtNDIuNDUxLDEwLjMyNC04Mi40ODMsMjguNjI0LTExNy43MzJoMC4wMTRsNTcuOTkyLDEwLjYzMmwyNS40MDQsNTcuNjQ0Yy01LjMxNywxNS41MDEtOC4yMTUsMzIuMTQxLTguMjE1LDQ5LjQ1NgoJQzEwMy44MjEsMjc0Ljc5MiwxMDcuMjI1LDI5Mi43OTcsMTEzLjQ3LDMwOS40MDh6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiM1MThFRjg7IiBkPSJNNTA3LjUyNywyMDguMTc2QzUxMC40NjcsMjIzLjY2Miw1MTIsMjM5LjY1NSw1MTIsMjU2YzAsMTguMzI4LTEuOTI3LDM2LjIwNi01LjU5OCw1My40NTEKCWMtMTIuNDYyLDU4LjY4My00NS4wMjUsMTA5LjkyNS05MC4xMzQsMTQ2LjE4N2wtMC4wMTQtMC4wMTRsLTczLjA0NC0zLjcyN2wtMTAuMzM4LTY0LjUzNQoJYzI5LjkzMi0xNy41NTQsNTMuMzI0LTQ1LjAyNSw2NS42NDYtNzcuOTExaC0xMzYuODlWMjA4LjE3NmgxMzguODg3TDUwNy41MjcsMjA4LjE3Nkw1MDcuNTI3LDIwOC4xNzZ6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiMyOEI0NDY7IiBkPSJNNDE2LjI1Myw0NTUuNjI0bDAuMDE0LDAuMDE0QzM3Mi4zOTYsNDkwLjkwMSwzMTYuNjY2LDUxMiwyNTYsNTEyCgljLTk3LjQ5MSwwLTE4Mi4yNTItNTQuNDkxLTIyNS40OTEtMTM0LjY4MWw4Mi45NjEtNjcuOTFjMjEuNjE5LDU3LjY5OCw3Ny4yNzgsOTguNzcxLDE0Mi41Myw5OC43NzEKCWMyOC4wNDcsMCw1NC4zMjMtNy41ODIsNzYuODctMjAuODE4TDQxNi4yNTMsNDU1LjYyNHoiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0YxNDMzNjsiIGQ9Ik00MTkuNDA0LDU4LjkzNmwtODIuOTMzLDY3Ljg5NmMtMjMuMzM1LTE0LjU4Ni01MC45MTktMjMuMDEyLTgwLjQ3MS0yMy4wMTIKCWMtNjYuNzI5LDAtMTIzLjQyOSw0Mi45NTctMTQzLjk2NSwxMDIuNzI0bC04My4zOTctNjguMjc2aC0wLjAxNEM3MS4yMyw1Ni4xMjMsMTU3LjA2LDAsMjU2LDAKCUMzMTguMTE1LDAsMzc1LjA2OCwyMi4xMjYsNDE5LjQwNCw1OC45MzZ6Ii8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
  height: 23px;
  background-position: 0;
  background-size: 15px;
  position: relative;
  margin-top: -1px;
  margin-left: 3px;
  display: block;
}
.google-calendar-small-icon {
  margin-top: -6px !important;
  margin-left: 2px !important;
  background-size: 8px !important;
}
.task-card-icon-wrapper .google-calendar-icon-wrapper, .task-card-icon-wrapper .google-calendar-small-icon-wrapper{
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  top: -3px;
  margin-right:0 !important;
  position: relative;
  display: inline-block;
}
.google-calendar-small-icon-wrapper {
  width: 12px  !important;
  height: 12px  !important;
  top: -1px !important;
  right:-7px;
}
.task-card-icon-wrapper .repetative-task-icon{
  background: url(/dist/repeated-task.png) no-repeat;
  display:inline-block;
  width:20px;
  height:20px;
  position:relative;
  top:-3px;
}
.task-card-icon-wrapper .repetative-task-small-icon{
  background: url(/dist/repeated-task-10.png) no-repeat !important;
  width: 12px  !important;
  height: 12px  !important;
  top: -1px !important;
  right:-7px;
}

/*for creating new task in timeline*/
.new-timeline-task-wrapper{
  border: 1px solid #dedee8;
  border-radius: 5px;
  position: relative;
  width: 370px;
  top: 111px;
  left: 275px;
  padding-bottom: 20px;
  background: #f5f6fa;
  z-index:100;
  box-shadow: 0 3px 8px rgba(67,65,90,.42);
}
.new-timeline-task-wrapper-header{
  padding:15px;
  border-bottom:1px solid #dedee8;
  background: #fff;
  height: 46px;
}

.new-timeline-task-wrapper-header .flaticon-cross-icon:before{
    font-size:12px;
    cursor:pointer;
}

.new-timeline-task-wrapper-body{
  background: #f5f6fa;
  padding:15px;
}
.new-timeline-task-bubble-arrow{
  position: absolute;
  left: -2px;
  top: 101px;
}
.new-timeline-task-bubble-arrow.bottom{
  position: absolute;
  left: -2px;
  top: 173px;
}
input.event-name::-webkit-input-placeholder{
  color:#c0c2c4;
  font-size:12px;
}
input.event-name{
  width:100%;
  height:30px;
  padding:10px;
  border-radius:3px;
  border:1px solid #dedee8;
  background: #fff;
}

.new-timeline-task-wrapper-body-pretxt{
  margin-top:20px;
}
.new-timeline-task-wrapper-body-pretxt .primary-txt{
  font-weight: bold;
  color:#898c94;
  margin-bottom:15px;
}
.new-timeline-task-wrapper-body-pretxt .secondary-txt{
  color:#80828b;

}
.new-timeline-task-wrapper-body .button-wrapper .kat-default-button{
  min-width:70px;
  background:#5cb150;
}
.new-timeline-task-wrapper-body .button-wrapper .kat-default-button:hover{
  background:#54A24D;
}
.new-timeline-task-wrapper-body .button-wrapper{
  margin-top:20px;
}
/*

.new-timeline-task-bubble-arrow{
  position: absolute;
  width: 0;
  height: 0;
  top: 9px;
  left: 8px;
  border-style: solid;
  border-width: 25px 15px 8px 16px;
  border-color: #9aa4ab rgba(87, 92, 101, 0) rgba(87, 92, 101, 0) rgba(87, 92, 101, 0);
  transform: rotate(-35deg);
}*/

.new-timeline-task-bubble-arrow:before, .new-timeline-task-bubble-arrow:after {
  content: "";
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  top: 47%;
  left: -1%;
  margin-left: -10px;
  transform: rotate(88deg);
}

.new-timeline-task-bubble-arrow:before {
  border-top: 20px solid #dedee8;
  margin-top: -2px;
  left: -7px;
}

.new-timeline-task-bubble-arrow:after{
  border-top: 16px solid #f5f6fa;
  margin-top: 0;
  z-index: 1;
  left: -5px;
}

.date-filter-option {
  padding: 8px;
  border: 1px solid #e6e9ed;
  border-radius: 5px;
  color: #a6a8ac;
  cursor: pointer;
  height: 50px;
  margin-right: 30px;
  min-width: 134px;
}

.date-filter-option:hover {
  background: #27bfe9;
  color: #fff;
}

.date-filter-option:hover .primary-txt {
  color: #fff;
}

.date-filter-option.active {
  background: #27bfe9;
  color: #fff;
}

.date-filter-option.active .primary-txt {
  color: #fff;
}

.date-filter-option.calendar-wrapper .primary-txt {
  margin-top: 7px;
  padding-left: 10px;
}

.date-filter-option .flaticon-calendar-icon:before {
  margin-left: 8px;
  position: relative;
  top: 5px;
}

.date-filter-option .primary-txt {
  font-size: 16px;
  text-align: center;
  display: block;
  color: #a6a8ac;
  font-weight: normal;
  padding: 0 15px;
}

.date-filter-option .secondary-txt {
  font-weight: normal;
  font-size: 12px;
  text-align: center;
  display: block;
}
.calendar-wrapper-div .DayPicker.DayPicker--en {
    top: 51px;
}
.select-box{
  height: 50px;
  width: 170px;
  display: flex;
  padding: 5px;
  border: 1px solid #e5e5e5;
  position: relative;
  left: 20px;
  border-radius: 5px;
  cursor: pointer;
  width: 30%;
}
.select-text {
  font-size: 14px;
  color: #222222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  top: 10px;
  font-weight: normal;
}
.leaveType{
  width: 180px;
}
.yearDropdown{
  min-width: 155px !important;
}
.drop-down-list{
  position: absolute;
  top: 45px;
  left: 0px;
  font-weight: normal;
}
.apply-leave{
    padding: 8px;
    border: 1px solid #e6e9ed;
    border-radius: 5px;
    cursor: pointer;
    height: 50px;
    min-width: 300px;
}
.calendar-icon{
  color: #fff;
  background-color: #5ABD50;
  width: 50px;
  height: 50px;
  position: relative;
  bottom: 9px;
  left: 8px;
  text-align: center;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.calendar-icon:before{
  content: "\F116";
  top: 13px;
  right: 15px;
  position: absolute;
}
.calendar-text {
  padding: 6px;
  font-size: 14px;
  color: #222222;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.placeholder{
  font-size: 14px;
  color: #5F636C;
  opacity: 0.3;
}
.calendar-wrapper-leave{
  width: 55%;
  position: relative;
  margin-right: 20px;
}.navigationtabwrapper{
  width:100%;
  margin-top:20px;
}
.navigationtablistitems{
  float: left;
  position: relative;
  margin: 0 10px;
  cursor: pointer;
  min-width: 107px;
  text-align: center;
}
.navigationtablistitems:first-child{
  margin-left:0;
}
.navigationtablistitems:last-child{
  margin-right:0;
}
.navigationtablistitems.active:after {
  content: '';
  position: absolute;
  height: 3px;
  background: #24c8f3;
  bottom: -1px;
  left: 0;
  right: 0;
}
.navigationtablistitems .navigationtablabel {
  font-size: 14px;
  color:#b1b2b6;
  padding: 10px 12px;
  display: inline-block;
}
.navigationtablistitems.active .navigationtablabel{
   color: #2d3339;
 }
.navigationtablistitems .flaticon-arrow-right-1:before{
  font-size: 12px;
  margin-left: 0;
  color: #979b9f;
  position: relative;
  transform: rotate(87deg);
  display: inline-block;
  top: 10px;
  left: -5px;
}.kat-projects-add-people__body__status__list__item .kat-profile-thumbnail__alphabet:hover span.flaticon-cross-icon.circle-close {
  top: 0;
  left: -1px;
}

.kat-projects-add-people__body__status__list__item .kat-profile-thumbnail__alphabet:hover span.flaticon-cross-icon.circle-close {
  visibility:visible;
}
span.flaticon-cross-icon.circle-close:before {
  margin-left: 0;
  font-size: 5px;
  position: relative;
  top: -4px;
}

span.flaticon-cross-icon.circle-close {
  position: absolute;
  background: #E42F2F;
  color: #fff;
  line-height: 4px;
  padding: 1px 0 0 0;
  border-radius: 50%;
  margin-left: -5px;
  margin-top: 6px;
  height: 13px;
  width: 13px;
  left: -1px;
  border: 1px solid #fff;
  cursor: pointer;
  top:0;
  visibility:hidden;
}

.kat-task-detail__right-section__bottom-bar__watcher:hover span.flaticon-cross-icon.circle-close, .kat-task-detail__right-section__header__toolbar__dropdown__list__img:hover span.flaticon-cross-icon.circle-close {
  visibility:visible;
}.TaskDetailsRightWrapper{
    position:absolute;
    right:-490px;
    width:490px;
    background:#fff;
    bottom:0;
    top:58px;
    z-index:99;
    box-shadow: 0 0 8px rgba(67, 65, 90, 0.42);
    display:flex;
    flex-direction:column;
    transition: all 0.25s ease-in-out;
}

.TaskDetailsRightWrapper.slidein {
    -webkit-animation: slidein 0.25s ease-in-out forwards;
            animation: slidein 0.25s ease-in-out forwards;
}

@-webkit-keyframes slidein {
    from {
        right: -490px;
    }
    to {
        right: 0;
    }
}

@keyframes slidein {
    from {
        right: -490px;
    }
    to {
        right: 0;
    }
}

.TaskDetailsRightWrapper.slideout {
    -webkit-animation: slideout 0.25s ease-in-out forwards;
            animation: slideout 0.25s ease-in-out forwards;
}

@-webkit-keyframes slideout {
    from {
        right: 0;
    }
    to {
        right: -490px;
    }
}

@keyframes slideout {
    from {
        right: 0;
    }
    to {
        right: -490px;
    }
}
.taskdetails-headerWrapper{
    background: #f6f7fa;
    border-bottom:1px solid #e8e9ed;
}
.kat-task-detail__right-section__header{
    padding:30px 30px 10px 30px;
}
.kat-task-detail__right-section__header .kat-task-details-action-status-btn{
    margin:0;
}
.kat-task-detail__top-menu__items_icon.flaticon-three:before {
    font-size: 28px !important;
    position: relative;
    top: 0;
    left: 29px;
    float: left;
}
.kat-task-detail__top-menu__meeting-block{
    margin:10px 66px 0 0;
}
.kat-task-detail__close-button.close-button-float.flaticon-cross-icon{
    z-index: 20;
    position: absolute;
    right: 32px;
    color: #8c8c8c;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    float: right;
    top: 42px;
}

.kat-task-detail__close-button.close-button-float:before {
    position: relative;
    left: 10px;
    top: -5px;
    margin-left: 0;
    font-size: 14px;
    color: #3e3d55;
}

.kat-task-detail__close-button-txt {
    position: relative;
    left: -8px;
    top: 10px;
    font-size: 13px;
    color: #3e3d55;
}
/*task details title*/

.kat-task-detail__header__title {
    color: #202736;
    font-size: 22px;
    margin: 0 12px 10px 12px;
    resize: none;
    border: 1px solid transparent;
    padding: 10px 15px;
    font-weight: 700;
    overflow:hidden;
    text-overflow:ellipsis;
}

.kat-task-detail__header__title.kat-task-detail__header__title-edit {
    text-overflow: initial;
    white-space: normal;
    word-wrap: break-word;
}

.kat-task-detail__header__title:hover {
    border: 1px solid #d6d6d6;
    border-radius: 3px;
}

.kat-task-detail__header__title div {
    font-weight: 700;
}

/*meeting checkbox starts*/

input[type=checkbox].kat-check-cell-meeting:checked, input[type=checkbox].kat-check-cell-meeting:not(:checked) {
    position: absolute;
    top: -9999px;
    left: -9999px;
}





input[type="checkbox"].kat-check-cell-meeting:checked + label.kat-custom-checkbox-meeting:after, input[type="checkbox"].kat-check-cell-meeting:not(:checked) + label.kat-custom-checkbox-meeting:after {
    content: '';
    position: absolute;
    left: -2px;
    top: -1px; /* color: lightseagreen; */
    /* transition: all .2s; */
    font-size: 20px;
    width: 17px;
    height: 7px;
    border: 3px solid #28bde8;
    background: transparent;
    border-top: none;
    border-right: none;
    transform-origin: center center;
    transform: rotate(-45deg);
}

input[type="checkbox"].kat-check-cell-meeting:not(:checked) + label.kat-custom-checkbox-meeting:after {
    opacity: 0; /* transform:scale(0); */
}

input[type="checkbox"].kat-check-cell-meeting:checked + label.kat-custom-checkbox-meeting:after {
    opacity: 1; /* transform:scale(1); */
}

input[type="checkbox"].kat-check-cell-meeting:checked:focus + label:before {
    border: 1px solid #28bde8;
    background: #fff;
}

input[type="checkbox"].kat-check-cell-meeting:not(:checked):focus + label.kat-custom-checkbox-meeting:before {
    border: 1px solid #b6b6b6;
}


label.kat-custom-checkbox-meeting:hover:before {
    border: 1px solid #28bde8;
}

/*===================================== Task-details meeting style starts here =====================================*/
/*meeting checkbox ends*/
/*Progress*/

.kat-task-detail__right-section__header__progress__wrapper {
    width: 100%;
    height: 20px;
    margin-left:19px;
}
.kat-task-detail__right-section__header__progress__bar {
    width: calc(100% - 75px);
    height: 1px;
    background: #EBEBEB;
    position: relative;
    top: 50%;
    left:21px;
    transform: translateY(-50%);
}
.kat-task-detail__right-section__header__progress__bar__highlighter, .kat-task-detail__right-section__header__progress__bar__highlighter-right {
    position: absolute;
    width: 56%;
    height: 5px;
    top: -2px;
    background: #a1d046;
}

.kat-task-detail__right-section__header__progress__bar__highlighter-right {
    right: 0;
    background: red;
}

span.kat-task-detail__right-section__header__progress__text {
    position: relative;
    left: 10px;
    top: 50%;
    font-size: 14px;
    transform: translateY(-50%);
    color: #6C7078;
    font-weight: 600;
}
/*body wrapper*/

.taskdetails-bodyWrapper{
    flex:auto;
    overflow-y: auto;
    overflow-x:hidden;
    position: relative;
    bottom: 41px;
    margin-top: 41px;
}

/*Add tag and watcher bar*/

.kat-task-detail__right-section__bottom-bar {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 41px;
    border-top: 1px solid #E6E6E6;
    padding: 0 30px;
    background:#f6f7fa;
}

.kat-task-detail__right-section__bottom-bar__tags__title, .kat-task-detail__right-section__bottom-bar__watchers__title {
    font-size: 14px;
    font-weight: 600;
    color: #202736;
    margin-top: 2px;
    margin-right: 12px;
    float: left;
}

.kat-task-detail__right-section__bottom-bar__tag {
    background: #D8DAE1;
    position: relative;
    height: 22px;
    float: left;
    padding: 0 8px;
    margin-left: 7px;
    border-radius: 3px;
    max-width: 120px;
}

.kat-task-detail__right-section__bottom-bar__tag.add .kat-task-detail__right-section__bottom-bar__tag__title {
    top: 1px;
}

.kat-task-detail__right-section__bottom-bar__tag__title {
  color: #636770;
  font-size: 12px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 41px;
  display: inline-block;
  top: 4px;
}

.kat-task-detail__right-section__bottom-bar__tag-dropdown-wrapper .kat-task-detail__right-section__bottom-bar__tag {
    max-width: 168px;
}

.kat-task-detail__right-section__bottom-bar__tag-dropdown-wrapper .kat-task-detail__right-section__bottom-bar__tag__title {
    max-width: 132px;
}

.kat-task-detail__right-section__bottom-bar__tags__wrapper {
    margin-top: 9px;
}

.kat-task-detail__right-section__bottom-bar__tag.add {
    background: none;
    box-sizing: content-box;
    border: 1px dashed #D8DAE1;
    height: 20px;
    pointer-events: auto;
}

.kat-task-detail__right-section__bottom-bar__tag.add .kat-add-roles__dropdown__list {
    max-height: 250px !important;
    overflow-y: auto !important;
}

/*meeting checkbox starts*/
.text-grey {
    color: #b6b6b6;
}
input[type=checkbox].kat-check-cell-meeting:checked+label.kat-custom-checkbox-meeting, input[type=checkbox].kat-check-cell-meeting:not(:checked)+label.kat-custom-checkbox-meeting {
    position: relative;
    cursor: pointer;
    margin: 0 7px;
    padding: 0;
}
input[type=checkbox].kat-check-cell-meeting:checked+label.kat-custom-checkbox-meeting:before, input[type=checkbox].kat-check-cell-meeting:not(:checked)+label.kat-custom-checkbox-meeting:before {
    left: -5px;
}
input[type=checkbox].kat-check-cell-meeting:not(:checked)+label.kat-custom-checkbox-meeting:before{
    border: 1px solid #b6b6b6;
}
input[type=checkbox].kat-check-cell-meeting:checked+label.kat-custom-checkbox-meeting:before, input[type=checkbox].kat-check-cell-meeting:not(:checked)+label.kat-custom-checkbox-meeting:before{
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    border: 1px solid #b6b6b6;
    left: 66px;
    background: #fff;
    border-radius: 3px;
}
input[type=checkbox].kat-check-cell-meeting:checked+label.kat-custom-checkbox-meeting:after, input[type=checkbox].kat-check-cell-meeting:not(:checked)+label.kat-custom-checkbox-meeting:after {
    left: -2px;
}
input[type=checkbox].kat-check-cell-meeting:checked+label.kat-custom-checkbox-meeting:after, input[type=checkbox].kat-check-cell-meeting:not(:checked)+label.kat-custom-checkbox-meeting:after {
    content: "";
    position: absolute;
    left: 70px;
    top: -1px;
    font-size: 20px;
    width: 17px;
    height: 7px;
    border: 3px solid #28bde8;
    background: transparent;
    border-top: none;
    border-right: none;
    transform-origin: center center;
    transform: rotate(-45deg);
}

.kat-custom-checkbox-line:before {
    content: "";
    width: 19px;
    height: 9px;
    position: absolute;
    top: -1px;
    left: 76px;
    background: #f6f7fa;
    transform: rotate(-45deg);
    z-index: 9;
}
input[type=checkbox].kat-check-cell-meeting:not(:checked)+label.kat-custom-checkbox-meeting:after {
    opacity: 0;
}
input[type=checkbox].kat-check-cell-meeting:checked+label.kat-custom-checkbox-meeting:after {
    opacity: 1;
    z-index: 10;
}

/*meeting checkbox ends*/

/*simple tab wrapper*/
/*Two coloumn layout*/

.kat-task-detail__right-section__content-body-col2 {
  width: calc(100% / 2);
  padding: 0 10px;
  text-align: center;
}

.kat-task-detail__right-section__content-body-col2 .billable-wrapper {
  margin-right: 20px;
}

.kat-task-detail__right-section__content-body-col2 .billable-icon.flaticon-dollar-icon:before {
  font-size: 18px;
  font-weight: 600;
  margin-right: 1px;
}

.kat-task-detail__right-section__content-body-col2 .billable-wrapper span.billable-txt, .kat-task-detail__right-section__content-body-col2 .billable-wrapper span.non-billable-txt {
  font-size: 15px;
  top: -2px;
}

.kat-task-detail__right-section__content-body-col2 .billable-wrapper span.non-billable-txt {
  top: -9px;
}

.kat-task-detail__right-section__content-body-col2 .billable-wrapper.active span.non-billable-txt {
  top: -16px;
}

.kat-task-detail__right-section__content-body-col2 .billable-wrapper.active .non-billable-icon {
  margin-top: 2px;
  margin-right: -7px;
  background-size: 18px !important;
}

.kat-task-detail__right-section__content-body-col2 .non-billable-icon {
  margin-top: -5px;
  margin-right: -7px;
  background-size: 18px;
}

.kat-task-detail__right-section__content-body-col2 .card-info-wrapper {
  width: 100%;
  position:relative;
}

/*category dropdown starts*/
.kat-task-detail__right-section__content-body-col2 .kat-settings-dropdown-list{
  width: 202px !important;
}

.task-category-div .kat-userlist__dropdown__list__text {
  margin-left: 8px;
  margin-top: 5px;
  display: inline-block;
}

.task-category-div .block-cards-info .category-colorcode {
  margin-right: 7px;
  margin-top: 7px;
  float: left;
}

.task-category-div .card-info-full {
  width: calc(100% - 17px);
}

.task-category-div .kat-userlist__dropdown__items_icon {
  margin-top: 0;
}

.task-category-div ul.kat-userlist__dropdown__list {
  max-height: 187px;
}

.task-category-div ul.kat-userlist__dropdown__list li {
  padding: 10px 15px 10px 15px;
}

.task-category-div ul.kat-userlist__dropdown__list li:hover {
  background: #f5f8fd;
}

.task-category-div ul.kat-userlist__dropdown__list li:hover .kat-userlist__dropdown__list__text {
  font-weight: bold;
}

/*category dropdown ends*/
/*two coloumn layout ends*/
.FieldWrapperDiv{
  padding:0 20px;
}
/*simple tab layout ends*/

/*for comments,activity,notes*/

.kat-task-detail__left-section {
    width: 100%;
    height: 100%;
    padding: 10px;
    position: absolute;
}

.kat-notification {
  height: 42px;
  position: fixed;
  top: 0;
  background: grey;
  left: 0;
  right: 0;
  z-index: 999999;
  text-align: center;
  padding-top: 8px;
  color: #fff;
  font-weight: 700;
}

.kat-notification .kat-tick::before {
  position: relative;
  top: 2px;
}

.kat-notification.visible {
  -webkit-animation: slideIn 0.25s ease-out;
          animation: slideIn 0.25s ease-out;
}

.kat-notification.hidden {
  -webkit-animation: slideOut 0.25s ease-out;
          animation: slideOut 0.25s ease-out;
}

@-webkit-keyframes slideIn {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}

@-webkit-keyframes slideOut {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-100px);
  }
}

@keyframes slideOut {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-100px);
  }
}

.kat-notification .kat-close-ico:before {
  font-size: 13px;
  color: #581C16;
}

.kat-notification .kat-close-ico {
  cursor: pointer;
  position: relative;
  top: -1px;
}

.kat-notification.success {
  background: #59BD50;
}

.kat-notification.success span.kat-close-ico {
  color: #1C5F16;
}

.kat-notification.success .kat-tick {
  display: inline-block;
}

.kat-notification.success .kat-error {
  display: none;
}

.kat-notification.error {
  background: #D23F31;
  padding-top: 7px;
}

.kat-notification.error span.kat-close-ico {
  color: #581C16;
}

.kat-notification.error .kat-error {
  display: inline-block;
}

.kat-notification.error .kat-tick {
  display: none;
}

span.kat-tick:before {
  margin-left: 0;
  font-size: 14px;
}

span.kat-tick {
  border: 2px solid white;
  padding: 1px 3px;
  text-align: center;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  margin-right: 10px;
  position: relative;
  top: 1px;
  display: none;
}

span.kat-error {
  position: relative;
  top: 1px;
  display: none;
}

.kat-error:before {
  margin-left: 0;
  margin-right: 10px;
}input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

.kat-workstream__task__drag-image-wrapper {
  top: 10px;
  left: 50px;
  position: absolute;
  z-index: 9;
}

.kat-workstream__task__drag-image .kat-workstream__task {
  border: 3px solid #2abde7;
  background: #b5e1ee;
  margin: 0;
  z-index: 3;
}

.kat-workstream__task__drag-image .kat-workstream__task .kat-workstream__task__foot {
  border-top: 1px solid #abd5e1;
}

.kat-workstream__task-count {
  position: absolute;
  height: 25px;
  width: 25px;
  background: #f97777;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  top: -6px;
  z-index: 99999;
  left: -6px;
}

.kat-workstream__task__drag-image .task-2 {
  position: absolute;
  top: 8px;
  left: 8px;
  right: -8px;
  border: 3px solid #2abde7;
  background: #b5e1ee;
  bottom: -8px;
  border-radius: 3px;
  z-index: 2;
  opacity: .4;
}

.kat-workstream__task__drag-image .task-3 {
  position: absolute;
  top: 16px;
  left: 16px;
  right: -16px;
  border: 3px solid #2abde7;
  background: #b5e1ee;
  bottom: -16px;
  border-radius: 3px;
  z-index: 1;
  opacity: .2;
}

.kat-workstream__task__drag-image {
  position: relative;
  width: 292px;
  top: -23px;
  left: -50%;
}.preview-wrapper{
  left:-70px;
}
.taskworkstream-custom-scroll-preview{
  width:100%;
  height: 350px;
  overflow:auto;
  position:relative;
}.kat-margin-top-10px {
    margin-top: 10px;
}

.kat-edittask-detail__overlay, .kat-repeatevent-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(31, 37, 50, 0.47);
    z-index: 9999;
    overflow: auto;
}

.kat-repeatevent-overlay {
    background: transparent;
}

.edit-timelinetask-popup {
    background: #fff;
    border-radius: 4px;
    color: #94989e;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .38);
    -webkit-animation: workStreamEntry .15s ease-in-out;
            animation: workStreamEntry .15s ease-in-out;
    width: calc(100% - 200px);
    margin: 0 auto;
    position: relative;
    top: 50px;
    min-width: 1135px;
    height: 100%;
    min-height: 720px;
}
.edit-timelinetask-popup .kat-task-detail__right-section__content-body__desc{
    width: 100%;
    resize: none;
    font-size: 14px;

}
.edit-timelinetask-header {
    background: #eaedf4;;
    width: 100%;
    min-height: 50px;
    padding: 30px 30px 40px 30px;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #dce0e7;
}

.edit-timelinetask-header-section1 {
    width: 100%;
}

.edit-timelinetask-header-section1 .hdr-txt {
    font-weight: bold;
    font-size: 17px;
    color: #252c3b;
    padding: 10px;
    margin-left: -10px;
    border: 1px solid transparent;
    border-radius: 3px;
    display: block;
    width: 100%;
    background:transparent;
}

.edit-timelinetask-header-section1 .hdr-txt:hover, .edit-timelinetask-header-section1 .hdr-txt.edit-mode {
    border: 1px solid #94989E;
    margin-top:0;
    margin-bottom:0;
}

.popupbody-right-section .kat-task-detail__right-section__content-body__desc.edit-mode {
    margin-left: 0;
    margin-top:0;
    margin-bottom:0;
}

.edit-timelinetask-header-section1 .connecting-txt {
    font-weight: bold;
    font-size: 15px;
    color: #252c3b;
    margin: 50px 20px 0 20px;
}

.edit-timelinetask-header-section2 {
    width: 150px;

}

.edit-timelinetask-header-section1 .kat-task-detail__right-section__content-body-col4 {
    width: 208px !important;
    padding-left: 0;
}

.popupbody-subsection2 .kat-task-detail__right-section__content-body-col4 {
    width: 340px !important;
    padding-left: 0;
}

/* .popupbody-subsection1 .kat-task-detail__right-section__content-body-col3 {

} */

.edit-timelinetask-header-subsection-wrapper {
    margin-top: 50px;
    margin-left: 20px;
    position:relative;
    min-height: 24px;
}

.edit-timelinetask-header-subsection-wrapper .check-label {
    color: #252c3b;
    margin-top: 3px;
    margin-left: 10px;
    font-weight: bold;
}

.edit-timelinetask-header-subsection-wrapper .check-ico.flaticon-check .check-label {
    font-weight: bold;
    display: inline-block;
    margin-left: 8px;
    color: #252c3b;
}

.edit-timelinetask-header-subsection-wrapper .check-ico {
    margin-top: 0;

}

.edit-timelinetask-header-subsection-wrapper .check-ico.flaticon-check:before {
    margin-left: 30px;
}

.edit-timelinetask-header-subsection-wrapper .check-ico .check-label {
    font-weight: bold;
    display: inline-block;
    margin-left: 26px;
    color: #252c3b;
}

.checkboxunchecked.check-ico:not(.flaticon-check) {
    height: 18px;
    width: 18px;
    border: 1px solid #94989E;
    border-radius: 2px;
    margin-left: 30px;
    margin-bottom: -1px;
    margin-top: 3px;
    cursor: pointer;
}

.edit-timelinetask-header-section2 .kat-button, .edit-timelinetask-header-section2 .kat-default-button {
    padding: 12px;
    min-width: 85px;
}

.edit-timelinetask-header-section2 .kat-default-button {
    margin-bottom: 20px;
}

.popupbody-navigation-wrapping {
    padding: 0 30px;
    position: relative;
    top: -31px;
}

.popupbody-navigation-list {
    float: left;
    padding: 7px 20px;
    border: 1px solid #dce0e7;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    background: #fff;
}

.popupbody-navigation-list-label {
    font-weight: 700;
    color: #252c3b;
}

.cal-time-wrapper {
    background: #fff;
    width: 430px;
    height: 307px;
    position: absolute;
    z-index: 10;
    transform-origin: top;
    -webkit-animation: dropdownEntry 0.16s;
            animation: dropdownEntry 0.16s;
    border: 1px solid #dce0e7;
    box-shadow: 0 0 8px rgba(67, 65, 90, 0.42);
}
.cal-time-wrapper .kat-header__checkinout-block__time-edit{
    width:141px !important;
    margin-top: 15px;
}
.cal-time-wrapper .kat-header__checkinout-block__time-edit__heading-title{
    margin-left:0;
    color:#8b9898;
}
.cal-time-wrapper .kat-header__checkinout-block__time-edit__box-wrap{
    border:none;
    width: 139px;
}
.cal-time-wrapper .kat-header__checkinout-block__time-edit__box__footer{
    margin-top:15px;
}
.cal-time-wrapper .kat-header__checkinout-block__time-edit__box__input__cell{
    border:1px solid transparent;
    font-size: 18px;
    border-radius: 4px;
}
.cal-time-wrapper .kat-header__checkinout-block__time-edit__box__footer__text{
    font-size:17px;
}
.cal-time-wrapper .kat-header__checkinout-block__time-edit__box__input__cell:hover,.cal-time-wrapper .kat-header__checkinout-block__time-edit__box__input__cell:focus{
    border:1px solid #dce0e7 !important;
}
.cal-time-wrapper .kat-checkinout-arrow.up:after{
    border-width: 0 5px 8px 5px;
}
.cal-time-wrapper .kat-checkinout-arrow.down:after{
    border-width: 8px 5px 10px 5px;
}
.edit-timelinetask-popup .popupbody {
    padding: 0 20px 20px 20px;
    min-height: inherit;
    /* edittimelinetask ui */
}

.popupbody-right-section {
    width: calc(100% - 420px);
    float: left;
    padding-right: 20px;
    padding-left: 13px;
}

.popupbody-left-section {
    float: left;
    width: 420px;
    padding: 20px;
    background: #f4f6f9;
    border: 1px solid #dce0e7;
    border-radius: 3px;
    position: relative;
    /* min-height: 333px; */
    min-height: 464px;
}

.inactive-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #eaedf4;
    opacity: 0.7;
    z-index:2;
}

.popupbody-subsection1 .email-notification {
    margin-top: 10px;
    width: 89%;
}

.popupbody-subsection1 {
    width: calc(100% - 50%);
    height: auto;
    float: left;
}

.popupbody-subsection1 .kat-task-detail__right-section__content-body-col3 {
    margin-top: 18px;
}

.popupbody-subsection2 {
    width: calc(100% - 50%);
    height: auto;
    float: left;
}

.popupbody-subsection1 .kat-task-detail__right-section__content-body-col3 {
    width: 90%;
    padding-left: 0;
}

.popupbody-subsection1 .email-notification .recipient-wrapper {
    width: 100%;
    margin-left: -10px;
    margin-bottom:10px;
}

.repeat-wrapper-div {
    margin-bottom: 20px;
}
.repeat-wrapper-div .DayPicker.DayPicker--en {
    margin-top: 36px;
}
.repeat-wrapper-div-txt, .repeat-wrapper-div-txt1 {
    font-weight: bold;
    display: inline-block;
    margin-right: 20px;
    color: #252c3b;
}

.repeat-wrapper-div-txt1 {
    margin-left: 20px;
}

.repeat-wrapper-div-value {
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #dce0e7;
    border-radius: 3px;
    width: 132px;
    /*text-align: center;*/
    background: #fff;
}

.repeat-wrapper-div .kat-setting__right-block {
    width: initial;
    margin-left: 20px;
}

input.repeat-wrapper-div-value {
    width: 37px;
    padding: 10px;
}

.repeat-wrapper-div .radio-div-wrapper {
    margin-right: 33px;
    margin-top: 10px;
    min-width: 11%;
}

.repeat-wrapper-div .radio-div-wrapper .flaticon-radio-active:before {
    color: #2bbee8;
    margin-left: 0;
    font-size: 12px;
    cursor: pointer;
}

.repeat-wrapper-div .radio-div-wrapper .radio-lable {
    color: #2a303d !important;
    font-size: 14px !important;
    margin-left: 8px;
    cursor: pointer;
}

.repeat-wrapper-div .radio-div-wrapper .flaticon-round:before {
    color: #cecdd3;
    margin-left: 0;
    font-size: 12px;
    cursor: pointer;
}

.repeat-wrapper-div .date-input-value {
    color: #2bbee8;
    cursor: pointer;
    float: left;
    margin-top: 10px;
    margin-left: -14px;
}

.cal-time-wrapper .DayPicker.DayPicker--en {
    width: 281px;
    box-shadow: none;
    border-right: 1px solid #dce0e7;
}

.cal-time-wrapper .timepicker-without-calendar {
    width: 172px;
    right: 0;
    left: initial;
    height: 100%;
}

.cal-time-wrapper .timepicker-wrapper {
    margin-left: 30px;
}

.cal-time-wrapper .timepicker-wrapper .radio-div-wrapper:first-child {
    margin-right: 20px;
}

.cal-time-wrapper .timepicker-wrapper .button-set {
    margin-top: 75px;
}

.popupbody-subsection1 .email-notification .avatar-lable-wrapper {
    max-width: 270px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.popupbody-subsection1 span.kat-popup__close-icon {
    position: static;
}

.popupbody-subsection1 span.kat-popup__close-icon:before {
    font-size: 12px;
    margin-left: 0;
    position: relative;
    top: 4px;
}

.popupbody-subsection1 .email-notification .kat-task-detail__right-section__bottom-bar__watcher {
    margin-right: 6px;
}

.popupbody-left-section tr td:first-child {
    color: #252c3b;
    font-size: 14px;
    font-weight: bold;
}

.popupbody-left-section .increment-input-wrapper.repeat_input {
    background: #fff;
    display: inline-block;
    cursor:pointer;
}

.popupbody-left-section .increment-input-wrapper-input {
    color: #252c3b;
    font-size: 14px;
}

.popupbody-left-section .kat-increment-drop-arrow-up, .popupbody-left-section .repeat_input .kat-increment-drop-arrow {
    display: none;
}

.popupbody-left-section .kat-increment-drop-arrow {
    top: 15px;
}

.popupbody-left-section .kat-setting__right-block {
    width: 100%;
}

.popupbody-left-section .increment-input-wrapper.repeat-interval {
    background: #fff;
}

.popupbody-left-section .increment-input-wrapper.repeat_interval.repeat-interval .kat-increment-drop-arrow-up {
    display: block;
}

.popupbody-left-section .increment-input-wrapper.repeat_interval.repeat-interval .kat-increment-drop-arrow {
    top: 22px;
}

.kat-repeatevent-popup {
    background: #fff;
    border-radius: 4px;
    color: #94989e;
    box-shadow: 1px 2px 8px rgba(0, 0, 0, .38);
    -webkit-animation: workStreamEntry .15s ease-in-out;
            animation: workStreamEntry .15s ease-in-out;
    width: calc(100% - 800px);
    margin: 0 auto;
    position: relative;
    top: 100px;
    min-width: 560px;
}

.kat-repeatevent-popup .popuphdr {
    width: 100%;
    border-bottom: 1px solid #e1e1e7;
    background: #eaedf4;
    padding: 20px;
    min-height: 50px;
    overflow: hidden;
}

.kat-repeatevent-popup .popuphdrtxt {
    font-weight: bold;
    color: #313845;
    font-size: 16px;
}

.kat-repeatevent-popup .popup-body {
    padding: 20px;
    background: #fff;

}

.kat-repeatevent-popup .kat-integration-wrapper-button {
    min-width: 159px;
    margin-left: 0;
    margin-bottom: 10px;
}

.kat-repeatevent-popup .popup-body-content-wrapper {
    display: table;
    width: 100%;
}

.kat-repeatevent-popup .popup-body-content-wrappersection {
    display: table-row;
}

.kat-repeatevent-popup .popup-body-content-wrappersubsection1 {
    display: table-cell;

}

.kat-repeatevent-popup .popup-body-content-wrappersubsection2 {
    display: table-cell;
    line-height: 2;
}

.kat-repeatevent-popup .popup-body-content-wrappersubsection2-sec {
    font-size: 12px;
}

.kat-repeatevent-popup .kat-grey-button {
    padding: 10px;
    min-width: 50px;
    background: #eaedf4;
    border: 1px solid #d6d6e2;
    color: #282f3d;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}
.popup-body-content-wrappersubsection1:first-child{
    width:31%;
}
.popup-body-content-wrappersubsection1:nth-child(2){
    position: relative;
    top: -5px;
}

.google-edit-event-disable {
    position: absolute;
    left: 0;
    right: 131px;
    top: 0;
    bottom: 0;
    z-index: 2;
}.overlay {
  height: 100%;
  width: 100%;
  background: rgba(38, 45, 60, 0.7);
}

.invite-users-body-custom-scroll{
  height:100%;
}

.invite__users__error-message {
  position: absolute;
  top: 10px;
  font-size: 11px;
  color: #D86162;
}

span.invite__users__error-message {
  -webkit-animation: errorTextEntry 0.25s ease-in-out;
          animation: errorTextEntry 0.25s ease-in-out;
}

@-webkit-keyframes errorTextEntry {
  0% {
    transform: translateX(-100px) scaleY(0.4);
    opacity: 0;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(0px) scaleY(1);
    opacity: 1;
  }
}

@keyframes errorTextEntry {
  0% {
    transform: translateX(-100px) scaleY(0.4);
    opacity: 0;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(0px) scaleY(1);
    opacity: 1;
  }
}

.invite-users-wrapper {
  height: 80%;
  width: 500px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  border-radius: 2px;
}

.invite-users-wrapper .kat-login-board__data__secondary-data__bar__action-button .small-spinner {
  position: relative;
  top: 2px;
  right: -15px;
  height: 20px;
  width: 20px;
}

.invite-users-header {
  background: #F5F6FA;
  height: 200px;
  border-bottom: 1px solid #E9E9E9;
}

.invite-users-header__nav-icon {
  transform: rotate(45deg);
  margin-right: -4px;
}

.invite-users-header__nav-icon:before {
  font-size: 16px !important;
  font-weight: bold;
}

.invite-users-header__heading > h1 {
  color: #747386;
  font-size: 40px;
  text-align: center;
  display: block;
  margin: 15px 0 25px;
  font-weight: 400;
}

.kat-login-board__data__secondary-data input {
  background: none;
  font-size: 14px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #D8DADF;
  color: #757575;
}

.invite-users-input, .invite-bar {
  width: 100% !important;
  padding-right: 80px !important;
}

.kat-login-board__data__secondary-data__bar__action-button {
  position: absolute;
  right: 0;
  top: 0;
  font-weight: bold;
  font-size: 14px;
}

.kat-login-board__data__secondary-data__bar__action-button__active {
  color: #82C484;
  font-weight: 700;
}

.kat-login-board__data__secondary-data__bar__action-button__active:hover {
  color: #59945B;
}

.invite-users-body {
  padding: 0 50px;
  min-height: 80%;
  background: #fff;
  height: 100%;
  overflow-y: scroll;
}

.invite-users-body__users-list-holder__item {
  padding: 15px;
  position: relative;
  border-bottom: 1px solid #F5F6FA;
  background: #fff;
}

.invite-users-body__users-list-holder__item:last-child {
  border-bottom: none;
}

.invite-users-body__users-list-holder__item__user-image-holder {
  height: 35px;
  width: 35px;
  border-radius: 100%;
  background: #242B39;
  display: inline-block;
  position: relative;
  margin-right: 10px;
  cursor: default;
  text-align: center;
  line-height: 34px;
  color: #D7D8DA;
  font-size: 20px;
}

.invite-users-body__users-list-holder__item__user__info-holder {
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(100% - 110px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-overflow, .invite-users-body__users-list-holder__item__user-name, .invite-users-body__users-list-holder__item__user-info {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-users-body__users-list-holder__item__user-name {
  color: #6F6D80;
  font-size: 14px;
}

.invite-users-body__users-list-holder__item__user-info {
  color: #C3C4CA;
  font-size: 10px;
}

.invite-users-body__users-list-holder__item__user-info.cancel {
  color: #e74c2b;
}

.invite-users-body__users-list-holder__item__action-button.flaticon-sign {
  position: absolute;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
  top: 50%;
  visibility: hidden;
  cursor: pointer;
}

.invite-users-body__users-list-holder__item__action-button.flaticon-sign:before {
  transform: rotate(98deg);
  margin: 0 !important;
  border: 1px solid #EEEFF3;
  padding: 6px;
  border-radius: 50%;
  font-size: 12px;
  color: #DBDCDE;
  font-weight: bold;
}

.invite-users-body__users-list-holder__item:hover .invite-users-body__users-list-holder__item__action-button.flaticon-sign {
  visibility: visible;
}

.invite-users-body__placeholder {
  font-weight: 700;
  font-size: 35px;
  text-align: center;
  color: rgba(128, 128, 128, 0.43);
  position: relative;
  top: 20px;
  margin: 0 0 40px;
}

.invite-users-body__users-list-holder__item {
  -webkit-animation: listEntry 0.17s ease-in;
          animation: listEntry 0.17s ease-in;
}

@-webkit-keyframes listEntry {
  from {
    transform: translateY(-50px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes listEntry {
  from {
    transform: translateY(-50px);
  }
  to {
    transform: translateY(0);
  }
}

.input-group__success-message {
  font-size: 11px;
  color: #82C484;
}

.invite-users-input, .invite-bar, .invite-bar {
  width: 100% !important;
  padding-right: 80px !important;
}

.text-overflow, .invite-users-body__users-list-holder__item__user-name, .invite-users-body__users-list-holder__item__user-info, .invite-users-body__users-list-holder__item__user-name, .invite-users-body__users-list-holder__item__user-info {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-users-body {
  -webkit-animation: inviteUsersListBodyEntry 0.25s ease-out;
          animation: inviteUsersListBodyEntry 0.25s ease-out; /* display: none; */
  background: #fff;
  z-index: 8;
}

@-webkit-keyframes inviteUsersListBodyEntry {
  from {
    transform: translateY(-150px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes inviteUsersListBodyEntry {
  from {
    transform: translateY(-150px);
  }
  to {
    transform: translateY(0);
  }
}

.invite-users-header {
  -webkit-animation: inviteUsersListHeadEntry 0.25s ease-out;
          animation: inviteUsersListHeadEntry 0.25s ease-out;
}

@-webkit-keyframes inviteUsersListHeadEntry {
  from {
    transform: translateY(150px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes inviteUsersListHeadEntry {
  from {
    transform: translateY(150px);
  }
  to {
    transform: translateY(0);
  }
}

.invite-users-body-wrapper {
  height: calc(100% - 185px);
  position: relative;
}

.resend-link {
  color: #807f8d;
  text-decoration: underline;
  margin-left: 10px;
  display: inline-block;
}.full-height-form .kat-login-board__data__primary-data {
  padding: 10px 0 35px;
}

.kat-login-board__login-info__form.full-height-form {
  padding-top: 0;
}

.kat-login-board__login-info__form.full-height-form .kat-login-board__data__primary-data {
  padding: 24px 0 38px 0;
}

.kat-login-board__login-info__form.full-height-form .kat-login-board__data__primary-data h1 {
  font-size: 30px;
}

.kat-login-board__login-info__form.fright.full-height-form {
  padding-top: 0;
}

.kat-login-board__login-info__form.fright.full-height-form .kat-login-board__data__primary-data {
  padding-left: 0;
  padding-top: 22px;
}

.kat-login-board__login-info__form.fright.full-height-form .kat-login-board__data__primary-data > h1 {
  font-weight: 400;
}

.kat-login-board__login-info__form.fright.full-height-form {
  padding-bottom: 3px;
}.pagenotfound.kat-task-detail__overlay {
  background: #434159;
}

.pagenotfound-wrapper {
  width: calc(100% - 541px);
  height: calc(100% - 225px);
  background: url(/dist/space_bg@1x.png) no-repeat;
  position: absolute;
  background-size: cover;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0;
  left: 0;
  box-shadow: 0 0 80px -20px #141321;
  border-radius: 4px;
  overflow: hidden;
  border-left: 1px solid rgba(0, 0, 0, 0.47);
}

.pagenotfound-subwrapper {
  width: calc(100% - 541px);
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.pagenotfound-wrapper {
  text-align: center;
}

.pagenotfound-hdr {
  text-align: center;
  font-weight: bold;
  font-size: 10vw;
  color: #fff;
}

.pagenotfound-hdr .pagenotfound-hdr-txt {
  position: relative;
  left: 18px;
  top: -17px;
}

.pagenotfound-hdr .pagenotfound-hdr-txt-1 {
  position: relative;
  left: -18px;
  top: -17px;
}

.pagenotfound-hdr-secondary .pagenotfound-hdr-txt {
  font-size: 2.5vw;
  font-weight: bold;
  color: #fff;
  letter-spacing: 5px;
}

.pagenotfound-cnt {
  margin-top: 5vh;
}

.pagenotfound-cnt .pagenotfound-hdr-txt {
  font-size: 1.3vw;
  color: #fff;
  line-height: 2.3vw;
}

.moon-img {
  background: url(/dist/moon@1x.png) no-repeat -1px 8px;
  width: 1.2em;
  height: 20.2vh;
  display: inline-block;
  background-size: cover;
  position: relative;
}

.pagenotfound-btn-wrapper {
  margin-top: 6vh;
}

.pagenotfound-btn {
  color: #fff;
  padding: 15px 20px;
  border-radius: 30px;
  background: #58b358;
  cursor: pointer;
  display: inline-block;
}

@media only screen and (max-width: 1366px) {
  .pagenotfound-hdr {
    text-align: center;
    font-weight: bold;
    font-size: 8vw;
    color: #fff;
  }
  .pagenotfound-hdr-secondary .pagenotfound-hdr-txt {
    font-size: 2vw;
  }
  .pagenotfound-subwrapper {
    width: auto;
  }
  .pagenotfound-btn-wrapper {
    margin-top: 6vh;
  }
}