/* ---------- Messages styles ---------- */
.messages-right-body{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: block;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 30vw;
  height: 100%;
  max-height: 100%;
  position: absolute;
  top: 0px;
  right: 0;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
  box-sizing: border-box;
  border-right: 1px solid #e0e0e0;
  background: #fafafa;
  -webkit-transform: translateX(-30vw);
  transform: translateX(calc(100vh + 430px));
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-property: transform;
  transition-property: transform,-webkit-transform;
  color: #424242;
  overflow: visible;
  overflow-y: hidden;
  z-index: 6;
}
@media (max-width: 900px) {
  .messages-right-body{
    width: 100vw;
  }
}
.visible-messages-right-body{
  -webkit-transform: translateX(0);
  transform: translateX(0);
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
.messages-right-body.expanded{
  width: 80vw;
  height: calc(100% - 100px);
  top: 50px;
  right: 10vw;
}
.messages-right-body h6{
  margin:24px 16px 0px;
}
.conversationHolder{
  width: 100%;
  background-color: transparent;
  height: calc(100% - 154px);
  box-sizing: border-box;
  padding-top: 24px;
  overflow-y: auto;
  scroll-behavior: smooth;
  margin:0px;
  transition: all 150ms ease-in-out;
}
.conversationHolder.padding-bottom{
  padding-bottom: 346px;
}
.mb-holder{
  width: 100%;
  padding: 8px 40px;
  box-sizing: border-box;
}
.conversationHolder .mb-holder .actions{
  border-top: 1px solid #e9e9e9;
}
.conversationHolder .mb-holder .actions .attached{
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 0px;
}
.message-bubble{
  background-color: #fff;
  padding: 10px 15px 12px;
  border-radius: 5px;
  position: relative;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
  max-width: 80vw;
  border: 1px solid rgba(0,0,0,0.15);
  width:100%;
} 
.message-out{
  float: right;
  background-color: #F3F4F4;
}
.message-in{
  float: left;
}
.tail.message-out {
  border-top-right-radius: 0px;
}
.tail.message-in {
    border-top-left-radius: 0px;
}
.mb-holder:after {
  content: "";
  display: table;
  clear: both;
  
}
.message-out.tail:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-right: 6px solid transparent;
  border-left: 6px solid rgba(0,0,0,0.15);
  border-top: 6px solid rgba(0,0,0,0.15);
  border-bottom: 6px solid transparent;
  right: -12px;
  top: -1px;
}
.message-out.tail:after {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-right: 5px solid transparent;
  border-left: 5px solid #F3F4F4;
  border-top: 5px solid #F3F4F4;
  border-bottom: 5px solid transparent;
  right: -10px;
  top: 0px;
}
.message-in.tail:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 6px solid transparent;
  border-right: 6px solid rgba(0,0,0,0.15);
  border-top: 6px solid rgba(0,0,0,0.15);
  border-bottom: 6px solid transparent;
  left: -12px;
  top: -1px;
}
.message-in.tail:after {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid #fff;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
  left: -10px;
  top: 0px;
}
.conversationHolder .mdl-list__item--three-line{
  height: auto;
}
.conversationHolder .mdl-list__item--three-line .mdl-list__item-text-body{
  height: auto;
  margin-bottom: 4px;
  cursor:pointer;
}

.conversationHolder .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-icon{
  margin-right: 8px;
}
.message-bubble .actions.full-width .material-icons{
  color: #14b253;
}
.mdl-list__item-created-time{
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 19px;
  /* height: 52px; */
  color: rgba(0,0,0,.84);
  display: flex;
  align-items: center;
  padding: 0;
  margin-top: 8px;
  border-top: 1px solid #f6f6f6;
}
.conversationHolder .message-bubble .mdl-list__item-created-time .material-icons.mdl-list__item-icon {
  font-size: 15px;
  line-height: 24px;
}
.compose{
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  background-color: #FFF;
  height: 414px;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 -2px 4px 0 #CCCCCC;
  
}
.compose.expanded{
  transform: translateY(-336px);
}
.composeToolbarTop{
  display: flex;
  justify-content: space-between;
  padding: 24px 8px;
  height: auto;
  width: 100%;
  box-sizing: border-box;
}
.down{
  transform: rotate(180deg);
}


.composeToolbarBottom{
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.composeToolbarBottom .section{
  display: flex;
  justify-content: space-between;
  padding: 12px 8px;
  height: auto;
  width: 100%;
  box-sizing: border-box;
}
.composeToolbarBottom .section .header{
  
}
.composeWriteContainer{
  width: 100%;
  box-sizing: border-box;
  padding: 0px 8px;
  height: 32px;
  line-height: 32px;
}

.composeWriteInput{
  width: 100%;
  box-sizing: border-box;
  display: block;
  height: 100%;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #c5c5c5;
}
.composeWriteInput:focus{
  outline-color: #14b253;
}
.composeWriteReferenceToUser{
  width: 100%;
  box-sizing: border-box;
  display: block;
  height: 100%;
  padding: 4px 8px;
  border-radius: 4px;
  border: none;
  /*
  border-bottom: 1px solid #c5c5c5;
  */
  
}
.composeWriteReferenceToUser:focus{
  outline: none;
}

.composeWriteTextArea{
  width: 100%;
  box-sizing: border-box;
  display: block;
  height: 100%;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #c5c5c5;
  text-rendering: auto;
  color: initial;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  margin: 0px 0em;
  font: 400 13.3333px Arial;
  line-height: 22px;
  resize: none;
}
.composeWriteTextArea:focus{
 outline-color: #14b253;
}

/* ---------- Messages END styles ---------- */
.nofunction-link{
  color: #a1a1a1;
}
.mdl-data-table th.active-cell{
  background-color: #14b253;
  color: #FFF;
}
.mdl-data-table th.active-cell-orange{
  background-color: #fd9726;
  color: #FFF;
}

.productSearchInputContainer{
  display: flex;
  justify-content: space-between;
  padding: 12px 0px;
}
.productSearchInputContainerInput{
  width: 100%;
  box-sizing: border-box;
  display: block;
  height: 100%;
  padding: 4px 8px;
  
  border-radius: 4px;
  border: 1px solid #c5c5c5;
}
.productSearchInputContainerInput:focus{
  outline-color: #14b253;
}


.productSearchResultsContainer{
  position: absolute;
  width: calc(100% + 2px);
  height: 0px;
  margin: 0px 0px 0px -11px;
  background-color: #FFF;
  z-index: 3;
  overflow: hidden;
  overflow: auto;
}
.productSearchResultsContainer.visible{
  height: 350px;
  box-shadow: 0px 4px 2px 0 rgba(0,0,0,.14);
}
.leadProductToolbar{
  display: flex;
  justify-content: space-between;
  background-color: #f7f7f7;
  border: 1px solid rgba(0,0,0,.12);
  border-bottom: none;
  min-height: 50px;
  position:relative;
}
.leadProductToolbar .toolbarGroup{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.leadProductToolbar .mdl-button--icon{
  margin: 0px 10px;
}
.leadProductToolbar .mdl-button--icon .material-icons{
  color: #707171!important;
}

.toolbarInfoRight{
  margin-right: 10px;
  color: #14b253;
}
#productSearchResultsTable{
  border-left-color: rgba(0, 0, 0, 0.12);
  border-left-style: solid;
  border-left-width: 1px;
  border-top:none;
}
#leadProductTable{
  border-left-color: rgba(0, 0, 0, 0.12);
  border-left-style: solid;
  border-left-width: 1px;
}
.input-number{
  width: 100%;
  min-width:50px;
  padding: 4px 8px 5px 8px;
  border-radius: 4px;
  border: 1px solid #c5c5c5;
  box-sizing: border-box;
}
.input-number:focus{
  outline-color: #14b253;
}
.input-text{
  width: 100%;
  min-width:50px;
  padding: 4px 8px 5px 8px;
  border-radius: 4px;
  border: 1px solid #c5c5c5;
  box-sizing: border-box;
}
.input-text:focus{
  outline-color: #14b253;
}

.input-date{
  width: 100%;
  min-width:142px;
  padding: 1px 8px;
  border-radius: 4px;
  border: 1px solid #c5c5c5;
  box-sizing: border-box;
}
.input-date:focus{
  outline-color: #14b253;
}

.input-select{
  width: 100%;
  min-width: 30px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #c5c5c5;
  font-size: 14px;
  box-sizing: border-box;
}
.input-select:focus{
  outline-color: #14b253;
}

.errorColor{
  color: #f00!important;
}
.mdl-chip-icon{
  box-sizing: border-box;
  padding-top: 4px;
}
.section.composeReferenceContainer .mdl-chip.mdl-chip--contact.mdl-chip--deletable{
  height: 27px;
  line-height: 27px;
  margin-right:4px;
  padding-right: 2px;
  user-select: none;
}
.section.composeReferenceContainer .mdl-chip.mdl-chip--contact.mdl-chip--deletable .mdl-chip__contact.mdl-color--teal.mdl-color-text--white.mdl-chip-icon{
  height: 27px;
  width: 27px;
  padding-top: 1px;
}
.section .mdl-chip.mdl-chip--contact.mdl-chip--deletable{
  height: 27px;
  line-height: 27px;
  margin-right:4px;
  padding-right: 2px;
  user-select: none;
}
.section .mdl-chip.mdl-chip--contact.mdl-chip--deletable .mdl-chip__contact.mdl-color--teal.mdl-color-text--white.mdl-chip-icon{
  height: 27px;
  width: 27px;
  padding-top: 1px;
}

.message-bubble .references{
  padding: 16px 0 8px;
  border-top: 1px solid #e6e6e6;
  margin-top: 16px;
}
.references .mdl-chip.mdl-chip--contact.mdl-chip--deletable{
  height: 27px;
  line-height: 27px;
  margin-right:4px;
  user-select: none;
}
.references .mdl-chip.mdl-chip--contact.mdl-chip--deletable .mdl-chip__contact.mdl-color--teal.mdl-color-text--white.mdl-chip-icon{
  height: 27px;
  width: 27px;
  padding-top: 1px;
}

.mdl-data-table tbody tr.td-warning:hover{
  background-color: #fd9726;
  color: #000;
}
.mdl-data-table tbody tr.td-changed:hover{
  background-color: #afdfb1;
}
.composeWriteReferenceToUserSearchContainer{
  display: block;
  width: 100%;
  position: absolute;
  margin: 34px 0px 0px;
  height: 0px;
  box-sizing: border-box;
  left: 0;
  right: 0;
  background-color: #FFF;
  z-index: 2;
  transition-duration: .25s;
  overflow-y:auto;
  padding: 0;
}
.composeWriteReferenceToUserSearchContainer.show{
  height: 281px;
  padding: 8px 0;
}


.composeWriteReferenceToUserSearchContainer .mdl-list__item:hover{
  transition-duration: 150ms;
  background-color: #f7f7f7;
}
.composeWriteReferenceToUserSearchContainer .mdl-list__item.active{
  background-color: #f7f7f7;
}
.composeWriteSetTaskToUserSearchContainer{
  display: block;
  width: 100%;
  position: absolute;
  margin: 34px 0px 0px;
  height: 0px;
  box-sizing: border-box;
  left: 0;
  right: 0;
  background-color: #FFF;
  z-index: 2;
  transition-duration: .25s;
  overflow-y:auto;
  padding: 0;
}
.composeWriteSetTaskToUserSearchContainer.show{
  height: 170px;
  padding: 8px 0;
}
.composeWriteSetTaskToUserSearchContainer .mdl-list__item:hover{
  transition-duration: 150ms;
  background-color: #f7f7f7;
}
.composeWriteSetTaskToUserSearchContainer .mdl-list__item.active{
  background-color: #f7f7f7;
}


.mdl-list__item .mdl-list__item-primary-content .mdl-list__item-icon{
  margin-right: 16px;
}
#composeWriteReferenceToUserSearchCloseBtn{
  opacity:0;
  transition-duration: 250ms;
}
#composeWriteSetTaskToUserSearchCloseBtn{
  opacity:0;
  transition-duration: 250ms;
}


#composeAttachedRemoveBtn{
  display:none;
  transition-duration: 250ms;
}
tbody#prokLogisticProkFituesTableBody td{
  padding: 12px;
}
tbody#prokOfferTableBody td{
  padding: 12px;
}
tbody#prokFinishedProkFituesTableBody td{
  padding: 12px;
}


#prokOfferTable th{
  padding: 12px;
}
.dashboardStatus{
  display:flex;
  justify-content: space-between;
}
@media (max-width: 900px) {
  .dashboardStatus{
    flex-direction: column;
  }
}

.dashboardStatus .statusContainer{
  max-height: 400px;
  width: 100%;
  padding-right: 8px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}
.dashboardStatus .statusContainer .tittle{
  width:100%;
  height:60px;
  line-height:30px;
  padding-left: 8px;
}
.dashboardStatus .statusContainer .leadsContainer{
  flex-grow: 1;
  padding: 8px 8px;
  overflow-y: auto;
  overflow-x: visible;
}
.dashboardStatus .statusContainer .leadsContainer::-webkit-scrollbar {
  width: 4px;
  height:4px;
}
.dashboardStatus .statusContainer .leadsContainer::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-left: 1px solid #b4b4b4;
  border-right: 1px solid #dcdcdc;
  border-top:1px solid #b4b4b4;
}
.dashboardStatus .statusContainer .leadsContainer::-webkit-scrollbar-thumb:hover {
  background: #bcbcbc;
}

.dashboardStatus .statusContainer .leadsContainer .lead{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 0 12px;
  padding: 4px 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.dashboardStatus .statusContainer .leadsContainer .lead .mdl-button.mdl-js-button.mdl-button--icon{
  height: 26px;
  width: 26px;
}
.dashboardStatus .statusContainer .leadsContainer .lead label{
  font-size: 14px;
}
.dashboardTodo{
  max-height: 250px;
  overflow: auto;
}
.dashboardTodo::-webkit-scrollbar {
  width: 4px;
  height:4px;
}
.dashboardTodo::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-left: 1px solid #b4b4b4;
  border-right: 1px solid #dcdcdc;
  border-top:1px solid #b4b4b4;
}
.dashboardTodo::-webkit-scrollbar-thumb:hover {
  background: #bcbcbc;
}
.dashboardHeader{
  display: flex;
  justify-content: space-between;
}
.dashboardHeader .rightText{
  font-size: 15px;
  /*color: rgba(0,0,0,.77)*/
  
}
.dashboardCard{
  padding: 0px 8px 8px;
  overflow-x: auto;
}
.dashboardCard .dashboardHeaderH5{
  color: rgba(0,0,0,.87);
  display: flex;
  justify-content: space-between;
}
.dashboardCard .dashboardHeaderH5 label{
  line-height: 24px;
}

.dashboardCard .dashboardHeaderH5 .rightText{
  font-size: 14px;
}

.legendContainer{
  display: flex;
  justify-content: flex-start;
}
.legendContainer .legendItem{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /*padding: 0px 8px;*/
  margin-left: 8px;
}

.legendContainer .legendItem .color{
  width: 14px;
  height: 14px;
  background-color: #e2e3e5;
}
.legendContainer .legendItem .text{
  margin: 0px 8px;
  /*
  font-size: 14px;
  letter-spacing: 0;
  margin: 0 0 16px;
  font-weight: 400;
  line-height: 24px;
  padding: 0;
  */
    
}
.chartContainer{
  width: 100%;
  /*min-height: 300px;*/
  display: flex;
  justify-content: flex-start;
}
.chartContainer .chartContainerCanvas{
  width: 100%;
  min-height: 100%;
}
.dashboardTableContainer{
  width: 100%;
  min-height: 300px;
  display: flex;
  justify-content: flex-start;
}
.dashboardTableContainer::-webkit-scrollbar {
  width: 4px;
  height:4px;
}
.dashboardTableContainer::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-left: 1px solid #b4b4b4;
  border-right: 1px solid #dcdcdc;
  border-top:1px solid #b4b4b4;
}
.dashboardTableContainer::-webkit-scrollbar-thumb:hover {
  background: #bcbcbc;
}



.dashboardTableContainer .chartContainerCanvas{
  width: 100%;
  min-height: 100%;
}

.tagetContainer{
  display: flex;
  justify-content: flex-start;
  height: 20px;
}
.tagetContainer .targetBarContainer{
  background-color: #e2e3e5;
  margin-left: 16px;
  flex-grow: 1;
}
.tagetContainer .targetBarContainer .targetBar{
  height: 100%;
  background-color: #14b253;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}


.filterContainerFloatingFilters{
  display: none;
  position: absolute;
  background-color: #ffffff;
  right: 20px;
  justify-content: flex-start;
  flex-direction: row;
  z-index: 1;
  margin-top: 46px;
  width: 921px;
  flex-wrap: wrap;
  
}
@media (max-width: 900px) {
  .filterContainerFloatingFilters{
    width: 100vw;
    left: 0px;
    right: 0px;
  }
}

.filterContainerFloatingFilters.visible {
  display: flex;
}
.pathRightFiltersContainer.opened{
  border-bottom: 1px solid #14b253;
}
.pathRightFiltersContainer.opened .material-icons{
  color: #14b253 !important;
}

.filterContainerFloatingFilters .section{
  display:flex;
  justify-content: flex-start;
  flex-direction: column;
  width:100%;
  padding: 8px;
}
.filterContainerFloatingFilters .section.footer{
  padding: 16px 16px;
  justify-content: space-between;
  flex-direction: row;
}

.filterContainerFloatingFilters .section.footer button{
  align-self: flex-end;
}

.filterContainerFloatingFilters .section .tittle{
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 8px;
  box-sizing: border-box;
  font-size: 18px;
  color: #14b253;
}

.filterContainerFloatingFilters .section .datesContainer{
  display:flex;
  
}
.filterContainerFloatingFilters .section .datesContainer div{
  flex-grow:1;
}

.ul-userContainer{
  display: none;
  position: absolute;
  background-color: #ffffff;
  right: 40px;
  justify-content: flex-start;
  flex-direction: column;
  z-index: 1;
}

.ul-searchContainer{
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 8px;
  box-sizing: border-box;
}


/*
.ul-userContainer.visible{
  display: flex;
}
*/


.ul-searchResults{
  width: 100%;
  height: 490px;
  padding: 0px 8px;
  box-sizing: border-box;
  overflow: auto;
}
.ul-searchResults::-webkit-scrollbar {
  width: 6px;
  height:6px;
}
.ul-searchResults::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-left: 1px solid #b4b4b4;
  border-right: 1px solid #dcdcdc;
  border-top:1px solid #b4b4b4;
}
.ul-searchResults::-webkit-scrollbar-thumb:hover {
  background: #bcbcbc;
}
.pathRightFiltersContainer{
  display:flex;
  justify-content: flex-end;
  flex-direction: row;
  cursor:pointer;
}
.pathRightFiltersContainer:hover{
  border-bottom: 1px solid #14b253;
}
.pathRightFiltersContainer:hover #toolbarFiltersUsersContainerExpand{
  color: #14b253 !important;
}
.directToolbarFilterContainer{
  display:flex;
  justify-content: flex-start;
  flex-direction: column;
  padding: 8px;
}
.directToolbarFilterContainer:last-child{
  padding-right: 0px;
}

.directToolbarFilterContainer .filterContainer{
  display: flex;
  align-items: center;
}

.directToolbarFilterContainer .toolbarFilterLabel{
  display: block;
  width: auto;
  /*min-width: 100px;*/
  
  background-color: transparent;
  border: none;
  font-size: 20px;
  color: #14b253;
  margin: 0px 8px;
  cursor: pointer;
  font-family: "Roboto","Helvetica","Arial",sans-serif;
  line-height: 24px;
  height: 24px;
}
#toolbardatesContainerDateRangePicker{
  width: 220px;
}
.statusTableHeader.cursor-pointer:hover{
  background-color:#94dab05c;
}
.statusTableHeader.cursor-pointer.active-cell:hover{
  background-color: #14b253;
}