* {
     margin: 0;
     padding: 0;
     -webkit-margin-before: 0;
     margin-block-start: 0;
     -webkit-margin-after: 0;
     margin-block-end: 0;
     -webkit-margin-start: 0;
     margin-inline-start: 0;
     -webkit-margin-end: 0;
     margin-inline-end: 0;
     box-sizing: border-box
 }
 p {
     margin-bottom: 0 !important;
}
.isDisabled {
    color: currentColor;
    cursor: not-allowed !important;
    opacity: 0.5;
    text-decoration: none;
    pointer-events: none !important; 
  }
 .ClienteMessage__Company{
    align-content: center;
    justify-self: center;
    justify-items: center;
    margin-top: 10px;
 }
 body {
     overflow: hidden;
     font-family: Hind;
     font-weight: 500
 }
 
 input {
     font-family: Hind!important
 }
 .Template {
     display: grid;
     grid-template-rows: -webkit-min-content 1fr;
     grid-template-rows: min-content 1fr;
     height: 100vh
 }
 
 .Template__main {
     display: grid;
     grid-auto-flow: column;
     grid-template-columns: -webkit-min-content 1fr;
     grid-template-columns: min-content 1fr
 }
 
 .Template__tasks {
     display: grid;
     grid-template-columns: 1fr -webkit-min-content;
     grid-template-columns: 1fr min-content
 }
 
 @media only screen and (max-width:800px) {
     .Template__main {
         grid-template-columns: 1fr
     }
     .Template__main .MainBox {
         width: 100%;
         min-width: auto
     }
     .Template__main .Interaction {
         display: none
     }
     .Template__main--interaction .Interaction {
         display: grid
     }
     .Template__main--interaction .MainBox,
     .Template__tasks .TaskSidebar {
         display: none
     }
     .Template__tasks--task .TaskSidebar {
         display: block;
         width: 100%;
         min-width: auto
     }
     .Template__tasks--task .TaskBox {
         display: none
     }
 }
 
 .TaskBox {
     position: relative;
     display: grid;
     grid-template-rows: -webkit-min-content 1fr;
     grid-template-rows: min-content 1fr;
     grid-gap: 2rem;
     gap: 2rem
 }
 
 .TaskBox>.CommonInput {
     display: none
 }
 
 .TaskBox__top {
     display: grid;
     grid-auto-flow: column;
     grid-template-columns: -webkit-min-content 1fr -webkit-min-content -webkit-max-content;
     grid-template-columns: min-content 1fr min-content max-content;
     align-items: center;
     padding: 3rem 7rem 0;
     grid-gap: 2rem;
     gap: 2rem
 }
 
 .TaskBox__top>h1 {
     margin-right: 10rem;
     font-size: 2.35rem;
     font-weight: 500;
     color: var(--color-dark)
 }
 
 .TaskBox__actions {
     display: flex
 }
 
 .TaskBox__newTask {
     width: auto;
     min-width: inherit;
     background-color: var(--color-green);
     font-size: 1.1rem;
     text-transform: none;
     padding: 1.2rem 2rem;
     letter-spacing: normal
 }
 
 .TaskBox__filter {
     display: flex;
     width: 3.8rem;
     height: 3.8rem;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     outline: none;
     border-radius: 50%;
     position: relative
 }
 
 .TaskBox__filter--selected:before {
     content: "";
     width: .8rem;
     height: .8rem;
     background-color: var(--color-blue);
     position: absolute;
     z-index: 2;
     top: 0;
     right: 0;
     border-radius: 50%
 }
 
 .TaskBox__filter i {
     color: var(--color-dark)
 }
 
 .TaskBox__filter_wrapper {
     position: relative;
     cursor: pointer;
     outline: none
 }
 
 @media only screen and (max-width:800px) {
     .TaskBox {
         grid-template-rows: -webkit-min-content -webkit-min-content 1fr;
         grid-template-rows: min-content min-content 1fr;
         padding: 0 2rem
     }
     .TaskBox>.CommonInput {
         display: grid
     }
     .TaskBox__top {
         grid-template-columns: 1fr -webkit-min-content -webkit-max-content;
         grid-template-columns: 1fr min-content max-content;
         padding: 3rem 0 0
     }
     .TaskBox__top>.CommonInput {
         display: none
     }
     .TaskBox__top>h1 {
         margin-right: 0
     }
 }
 
 .AgentTasks {
     position: absolute;
     width: 100%;
     height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 3rem 7rem
 }
 
 .AgentTasks_wrapper {
     position: relative
 }
 
 .AgentTasks>p {
     text-align: center;
     color: var(--color-dark);
     margin-top: 3rem
 }
 
 @media only screen and (max-width:800px) {
     .AgentTasks {
         padding: 3rem 0
     }
 }
 
 .AgentTasks__group {
     margin-bottom: 2rem
 }
 
 .AgentTasks__group__title {
     font-size: 1.6rem;
     font-weight: 500;
     color: var(--color-dark);
     padding-bottom: 1rem
 }
 
 .AgentTaskItem,
 .AgentTasks__group__title {
     border-bottom: 1px solid var(--color-light-grey)
 }
 
 .AgentTaskItem {
     display: grid;
     grid-template-columns: -webkit-min-content -webkit-min-content 1fr -webkit-min-content;
     grid-template-columns: min-content min-content 1fr min-content;
     grid-gap: 1.5rem;
     padding: 1.5rem 1rem;
     cursor: pointer;
     position: relative
 }
 
 .AgentTaskItem--active {
     background: var(--color-light-grey)
 }
 
 .AgentTaskItem--active .AgentTaskItem__arrow {
     display: block
 }
 
 .AgentTaskItem:hover {
     background: var(--color-light-grey)
 }
 
 .AgentTaskItem__time {
     font-size: 1.6rem;
     font-weight: 500;
     color: var(--color-dark)
 }
 
 .AgentTaskItem--expiring {
     margin-bottom: 1.5rem;
     background: var(--color-light-orange);
     border: 1px solid var(--color-orange);
     border-left-width: 5px;
     border-radius: 5px
 }
 
 .AgentTaskItem--expiring:hover {
     opacity: .8
 }
 
 .AgentTaskItem--expiring .AgentTaskItem__title {
     color: var(--color-orange)
 }
 
 .AgentTaskItem--expiring p.AgentTaskItem__data,
 .AgentTaskItem__title {
     color: var(--color-dark)
 }
 
 .AgentTaskItem__title {
     font-size: 1.3rem;
     margin-bottom: 1rem
 }
 
 .AgentTaskItem__warning {
     font-size: 1.1rem;
     font-size: 500;
     color: var(--color-orange);
     margin-bottom: .5rem
 }
 
 .AgentTaskItem__data {
     font-size: 1rem;
     font-weight: 400;
     margin-bottom: .4rem;
     color: var(--color-dark-grey)
 }
 
 .AgentTaskItem__status {
     display: flex;
     align-items: center;
     padding-right: 2.5rem
 }
 
 .AgentTaskItem__arrow {
     display: none;
     position: absolute;
     top: 50%;
     right: 1.5rem;
     margin-top: -.5rem;
     transform: rotate(-90deg)
 }
 
 .AgentTaskItem__arrow__arrow>i {
     width: 1rem;
     height: .625rem
 }
 
 @media only screen and (max-width:800px) {
     .AgentTaskItem {
         grid-auto-flow: row;
         grid-template-columns: auto
     }
 }
 
 .TaskCheckbox {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 2.8rem;
     height: 2.8rem;
     border: 1px solid var(--color-light-grey);
     border-radius: 50%;
     background: #fff;
     cursor: pointer
 }
 
 .TaskCheckbox>i {
     display: none;
     width: 1.3rem;
     height: 1.029rem;
     color: var(--color-white);
     pointer-events: none
 }
 
 .TaskCheckbox:hover {
     background: var(--color-grey)
 }
 
 .TaskCheckbox.TaskCheckbox--active {
     border-color: transparent;
     background: var(--color-green)
 }
 
 .TaskCheckbox.TaskCheckbox--active>i {
     display: block
 }
 
 .Spinner {
     font-size: 10px;
     position: relative;
     text-indent: -9999em;
     border: .6rem solid var(--color-grey);
     border-left-color: var(--color-primary);
     transform: translateZ(0);
     -webkit-animation: spin .7s linear infinite;
     animation: spin .7s linear infinite;
     display: flex;
     justify-self: center
 }
 
 .Spinner,
 .Spinner:after {
     border-radius: 50%;
     width: 3rem;
     height: 3rem
 }
 
 .Spinner__wrapper {
     display: grid;
     padding: 1rem
 }
 
 @-webkit-keyframes spin {
     0% {
         transform: rotate(0deg)
     }
     to {
         transform: rotate(1turn)
     }
 }
 
 @keyframes spin {
     0% {
         transform: rotate(0deg)
     }
     to {
         transform: rotate(1turn)
     }
 }
 
 .Wrapper {
     outline: none
 }
 
 .Tooltip {
     position: relative;
     font-size: 12px;
     display: block;
     z-index: 10;
     overflow: visible
 }
 
 .Tooltip:hover>.Tooltip__body {
     visibility: visible
 }
 
 .Tooltip__body {
     width: -webkit-max-content;
     width: -moz-max-content;
     width: max-content;
     padding: 6px 7px;
     opacity: .9;
     visibility: hidden;
     border-radius: 3px;
     transition: all .3s;
     color: var(--color-white);
     box-shadow: 0 0 12px rgba(10, 10, 10, .12);
     max-width: 20rem;
     margin-top: 1rem
 }
 
 .Tooltip__body,
 .Tooltip__body:before {
     position: absolute;
     background-color: var(--color-dark)
 }
 
 .Tooltip__body:before {
     content: "";
     width: 1rem;
     height: 1rem;
     top: -.5rem;
     transform: rotate(45deg)
 }
 
 .Tooltip__body--center {
     left: 50%;
     transform: translateX(-50%)
 }
 
 .Tooltip__body--center:before {
     left: 50%;
     transform: translateX(-50%) rotate(45deg)
 }
 
 .Tooltip__body--right {
     left: 0
 }
 
 .Tooltip__body--right:before {
     left: .4rem
 }
 
 .Tooltip__body--left {
     right: 0
 }
 
 .Tooltip__body--left:before {
     right: .4rem
 }
 
 .InfiniteList {
     height: 100%
 }
 
 .InfiniteList--scroll-vertical {
     overflow-y: auto;
     overflow-x: hidden
 }
 
 .InfiniteList--scroll-horizontal {
     overflow-y: hidden
 }
 
 .Button {
     background-color: var(--color-primary);
     border-radius: .8rem;
     color: var(--color-white);
     padding: .6rem 1.2rem;
     min-width: 3rem;
     font-weight: 600;
     cursor: pointer;
     border: 1px solid transparent;
 }
 
 .Button:hover {
     -webkit-filter: brightness(.9);
     filter: brightness(.9)
 }
 
 .Button:focus {
     border: 1px solid var(--color-grey)
 }
 
 .Button img {
     width: 1.8rem;
     height: 1.8rem
 }
 
 .Button--inactive {
    color: var(--color-dark);
    background-color: var(--color-light-grey);
    cursor: not-allowed !important;
    opacity: .5;
    pointer-events: none !important;
 }
 
 .Button--onlyText {
     display: flex;
     background-color: transparent;
     color: var(--color-blue);
     text-transform: none;
     letter-spacing: normal;
     padding: 0;
     width: auto;
     min-width: auto
 }
 
 .Button--success {
     background-color: var(--color-green)!important;
     cursor: not-allowed
 }
 
 .Loader {
     display: flex;
     justify-self: center;
     justify-content: center;
     align-items: center
 }
 
 .Loader__img {
     width: 3rem;
     height: 3rem
 }
 
 .Loader__img--small {
     width: 2.2rem;
     height: 2.2rem
 }
 
 .CommonInput {
     display: grid;
     grid-gap: 1rem;
     gap: 1rem
 }
 
 .CommonInput>p:first-of-type {
     font-weight: 600;
     color: var(--color-dark-grey)
 }
 
 .CommonInput__input {
     display: grid;
     grid-auto-flow: column;
     grid-template-columns: 1fr -webkit-min-content;
     grid-template-columns: 1fr min-content;
     position: relative;
     align-items: center
 }
 
 .CommonInput__input>input {
     padding: .65rem 3.5rem .65rem 1rem!important;
     border: 2px solid var(--color-grey);
     font-family: Hind!important;
     font-size: 1.4rem;
     font-weight: 600;
     outline: none;
     color: var(--color-dark);
     border-radius: .8rem;
     background-color: transparent
 }
 
 .CommonInput__input>input::-webkit-input-placeholder {
     color: var(--color-grey)!important
 }
 
 .CommonInput__input>input:-ms-input-placeholder {
     color: var(--color-grey)!important
 }
 
 .CommonInput__input>input::-ms-input-placeholder {
     color: var(--color-grey)!important
 }
 
 .CommonInput__input>input::placeholder {
     color: var(--color-grey)!important
 }
 
 .CommonInput__input>input:focus {
     border: 2px solid var(--color-primary)
 }
 
 .CommonInput__input>input:disabled {
     color: var(--color-grey)!important;
     background-color: var(--color-light-grey);
     border: var(--color-light-grey)
 }
 
 .CommonInput__input>input:disabled:hover {
     cursor: not-allowed
 }
 
 .CommonInput--clear i {
     display: none
 }
 
 .CommonInput--clear>input,
 .CommonInput--clear>input:focus {
     border: none;
     border-radius: 0
 }
 
 .CommonInput__image {
     position: absolute;
     right: 1rem;
     display: flex;
     align-items: center
 }
 
 .CommonInput__image>i,
 .CommonInput__image img {
     height: 2rem;
     width: 2rem
 }
 
 .CommonInput__image i {
     color: var(--color-grey)
 }
 
 .FilterMultiple {
     background-color: var(--color-white);
     position: absolute;
     top: 4rem;
     box-shadow: var(--shadow);
     padding: 1rem;
     border-radius: .5rem;
     right: 0;
     z-index: 101
 }
 
 .FilterMultipleItem {
     display: grid;
     grid-gap: 1rem;
     gap: 1rem;
     grid-auto-flow: column;
     grid-template-columns: -webkit-min-content 1fr;
     grid-template-columns: min-content 1fr;
     margin: 1rem 0;
     padding: .5rem 1rem;
     color: var(--color-dark)
 }
 
 .CheckBox__label,
 .FilterMultipleItem {
     outline: none;
     cursor: pointer;
     align-items: center
 }
 
 .CheckBox__label {
     width: 2.1rem!important;
     height: 2.1rem!important;
     border-radius: .8rem;
     border: .2rem solid var(--color-grey);
     position: relative;
     display: flex;
     justify-content: center
 }
 
 .CheckBox__label i {
     width: .8rem;
     color: var(--color-white);
     stroke: var(--color-white);
     stroke-width: .3rem
 }
 
 .CheckBox__label:hover {
     border: .2rem solid var(--color-primary)
 }
 
 .CheckBox input {
     display: none
 }
 
 .CheckBox input:checked+.CheckBox__label {
     background-color: var(--color-primary);
     border: none
 }
 
 .Backdrop {
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     background-color: var(--backdropColor);
     width: 100%;
     height: 100%;
     z-index: 100;
     outline: none
 }
 
 .Backdrop__closeAction {
     position: absolute!important;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 100
 }
 
 .Backdrop--higher {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 111
 }
 
 .Backdrop--clear {
     background-color: transparent
 }
 
 .IconButton {
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: .8rem;
     height: 2rem;
     width: 2rem;
     transition: all .2s;
     position: relative;
     z-index: 99
 }
 
 .IconButton:hover {
     cursor: pointer;
     opacity: .8;
     transition: all .2s
 }
 
 .IconButton:hover .IconButton__info {
     display: block
 }
 
 .IconButton>i {
    /* height: 1.8rem;*/
     color: var(--color-white)
 }
 
 .IconButton--grey {
     background-color: var(--color-grey)
 }
 
 .IconButton--red {
     background-color: var(--color-red)
 }
 
 .IconButton--green {
     background-color: var(--color-green)
 }
 
 .IconButton--blue {
     background-color: #007bff;
 }
 .IconButton--yellow {
    background-color: #ff7407;
}
 .IconButton--white {
     background-color: var(--color-white)
 }
 
 .IconButton--white>i,
 .IconButton--white i {
     color: var(--color-dark)
 }
 
 .IconButton--white:hover>i {
     color: var(--color-blue);
     transition: all .2s
 }
 
 .IconButton--grey-light {
     background-color: var(--color-light-grey)
 }
 
 .IconButton--grey-light  {
     color: var(--color-dark)!important
 }
 
 .TaskSidebar {
     width: 25vw;
     min-width: 40rem;
     border-left: 1px solid var(--color-light-grey);
     height: 100%;
     overflow: auto;
     position: relative
 }
 
 .TaskSidebar__empty {
     color: var(--color-dark);
     text-align: center
 }
 
 .TaskSidebar__empty h3 {
     color: var(--color-blue)
 }
 
 .TaskSidebar__empty>h3 {
     margin-top: 2rem;
     font-size: 1.6rem;
     font-weight: 500
 }
 
 .TaskSidebar__empty>p {
     margin-top: .5rem;
     font-size: 1.2rem
 }
 
 .TaskSidebar__empty__image {
     width: 10rem;
     height: 10rem;
     margin: 0 auto;
     background-color: var(--color-grey);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center
 }
 
 .TaskSidebar__empty__image>i {
     color: var(--color-white);
     width: 4rem;
     height: 4.8rem
 }
 
 .TaskSidebar__close {
     position: absolute;
     display: flex;
     align-items: flex-start;
     justify-content: flex-end;
     width: 3rem;
     height: 3rem;
     right: 4rem;
     top: 3rem;
     outline: none;
     cursor: pointer;
     z-index: 10
 }
 
 .TaskSidebar__close i {
     width: 1.8rem;
     height: 1.8rem
 }
 
 .TaskSidebarInfo {
     padding: 2rem
 }
 
 .TaskSidebarInfo>h3 {
     font-size: 1.3rem;
     font-weight: 500;
     color: var(--color-dark);
     margin-top: .5rem;
     margin-bottom: 1rem
 }
 
 .TaskSidebarInfo__data {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 1rem;
     margin-bottom: 2rem;
     border-bottom: 1px solid var(--color-light-grey)
 }
 
 .TaskSidebarInfo__close {
     text-align: right
 }
 
 .TaskSidebarInfo__close>i {
     width: 1rem;
     height: 1rem;
     color: var(--color-dark);
     cursor: pointer
 }
 
 .TaskSidebarInfo__status {
     font-size: 1.2rem;
     font-weight: 500;
     border-radius: 2.5rem;
     width: 9.4rem;
     height: 2.7rem;
     text-align: center;
     line-height: 2.7rem
 }
 
 .TaskSidebarInfo__status.TaskSidebarInfo__status--opened {
     color: var(--color-dark);
     background: var(--color-grey)
 }
 
 .TaskSidebarInfo__status.TaskSidebarInfo__status--finished {
     color: var(--color-green);
     background: var(--color-light-green)
 }
 
 .TaskSidebarInfo__status.TaskSidebarInfo__status--expired {
     color: var(--color-red);
     background: var(--color-light-red)
 }
 
 .TaskSidebarInfo__edit {
     margin-top: 1.5rem
 }
 
 .TaskSidebarInfo__edit>a {
     margin-left: .5rem;
     font-size: 1rem;
     color: var(--color-dark)
 }
 
 .TaskSidebarInfo__edit>i {
     width: 1.2rem;
     height: 1.2rem;
     vertical-align: middle
 }
 
 .TaskSidebarInfo__edit>i  {
     color: var(--color-dark)
 }
 
 .TaskSidebarInfo__actives {
     display: grid;
     grid-gap: 1rem;
     gap: 1rem;
     border-bottom: 1px solid var(--color-light-grey);
     padding-bottom: 2rem;
     margin-bottom: 1rem
 }
 
 .TaskSidebarInfo__actives p {
     font-size: 1.3rem;
     color: var(--color-dark)
 }
 
 p.TaskSidebarInfo__description {
     font-size: 1.2rem;
     font-weight: 400;
     color: var(--color-grey);
     white-space: pre-wrap;
     max-height: 30rem;
     overflow: hidden;
     overflow-y: auto;
     margin-bottom: 1rem
 }
 
 p.TaskSidebarInfo__item {
     font-size: 1rem;
     font-weight: 400;
     color: var(--color-dark-grey);
     margin-bottom: .4rem
 }
 
 .ActiveInteractions {
     display: grid;
     grid-gap: 1rem;
     gap: 1rem;
     grid-auto-flow: column;
     justify-content: start;
     position: relative
 }
 
 .ActiveInteractions__actions {
     position: relative
 }
 
 .ActiveInteractions>p {
     color: var(--color-grey)!important
 }
 
 .ActiveInteraction__icon {
     width: 2.5rem;
     height: 2.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     box-shadow: var(--shadow);
     outline: none;
     cursor: pointer
 }
 
 .ActiveInteraction__icon>i {
     height: 100%;
     width: 100%
 }
 
 .ActiveInteraction__icon--conference--inactive>i,
 .ActiveInteraction__icon--phone--inactive  {
     color: var(--color-grey)!important;
     cursor: not-allowed
 }
 
 .ActiveInteraction__icon--addToconf {
     background-color: var(--color-green)
 }
 
 .ActiveInteraction__icon--addToconf i {
     height: 1.5rem;
     width: 1.5rem
 }
 
 .SelectOptions {
     background-color: var(--color-blue);
     position: absolute;
     border-radius: .5rem;
     box-shadow: var(--shadow-light);
     z-index: 10;
     top: 4rem
 }
 
 .SelectOptions div:first-of-type {
     padding-top: 1rem
 }
 
 .SelectOptions div:last-of-type {
     padding-bottom: 1rem
 }
 
 .SelectOptions:before {
     content: "";
     width: 1rem;
     height: 1rem;
     top: -.3rem;
     left: .8rem;
     background-color: var(--color-blue);
     position: absolute;
     transform: rotate(45deg);
     z-index: 1
 }
 
 .SelectOptionsItem {
     padding: .5rem 1rem;
     outline: none
 }
 
 .SelectOptionsItem:hover {
     opacity: .7
 }
 
 .SelectOptionsItem p {
     color: var(--color-white)!important
 }
 
 .WhatsappTemplates {
     cursor: auto;
     max-width: 75rem
 }
 
 .WhatsappTemplates__list {
     display: grid;
     grid-gap: 3rem;
     gap: 3rem
 }
 
 .WhatsappTemplates__list__item {
     display: grid;
     grid-template-columns: minmax(5rem, 10rem) 1fr -webkit-max-content;
     grid-template-columns: minmax(5rem, 10rem) 1fr max-content;
     grid-gap: 2rem;
     gap: 2rem;
     color: var(--color-dark-grey);
     padding: 1rem .5rem;
     border-radius: .8rem
 }
 
 .WhatsappTemplates__list__item:hover {
     cursor: pointer;
     background-color: var(--color-light)
 }
 
 .WhatsappTemplates__list__item p {
     color: var(--color-dark);
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap
 }
 
 .Modal {
     position: relative;
     z-index: 120;
     min-width: 30vw
 }
 
 .Modal__close {
     position: absolute;
     display: flex;
     width: 2rem;
     height: 2rem;
     top: 2rem;
     right: 2rem;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 120
 }
 
 .Modal__close i {
     height: 1.8rem;
     width: 1.8rem
 }
 
 @media only screen and (max-width:800px) {
     .Modal {
         width: 100%;
         height: 100%
     }
     .Modal .Card {
         border-radius: 0;
         height: 100%
     }
 }
 
 .Card {
     border-radius: .8rem;
     box-shadow: var(--shadow-notification);
     background-color: var(--color-white);
     padding: 2rem;
     overflow: hidden
 }
 
 .WhatsAppTemplate {
     display: grid;
     grid-template-rows: -webkit-min-content;
     grid-template-rows: min-content;
     grid-gap: 2rem;
     gap: 2rem
 }
 
 .WhatsAppTemplate>.Button:first-of-type {
     justify-self: left
 }
 
 .WhatsAppTemplate>.Button:last-of-type {
     justify-self: center
 }
 
 .WhatsAppTemplate__header {
     text-align: center;
     color: var(--color-dark-grey)
 }
 
 .WhatsAppTemplate__header>p:first-of-type {
     color: var(--color-dark);
     margin-bottom: 1rem
 }
 
 .WhatsAppTemplate__content {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: 1fr;
     justify-content: center;
     grid-gap: 2rem;
     gap: 2rem;
     height: 30vh
 }
 
 .WhatsAppTemplate__content__form {
     display: grid;
     grid-auto-rows: -webkit-min-content;
     grid-auto-rows: min-content;
     grid-gap: 2rem;
     gap: 2rem
 }
 
 .MobilePreview__body {
     display: grid;
     grid-template-rows: -webkit-min-content 1fr;
     grid-template-rows: min-content 1fr;
     height: 100%;
     border-radius: 24px;
     overflow: hidden
 }
 
 .MobilePreview__content {
     position: relative
 }
 
 .MobilePreview__header {
     height: 60px;
     width: 100%;
     background-color: var(--color-white)
 }
 
 .MobilePreview .MessageList {
     background-color: var(--color-light-grey)
 }
 
 .MessageList {
     display: flex;
     flex-flow: column;
     grid-auto-rows: -webkit-min-content;
     grid-auto-rows: min-content;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 3rem 2rem;
     background-color: var(--color-light)
 }
 
 .MessageList>* {
     margin-bottom: .2rem
 }
 
 .MessageWrapper {
     display: flex;
     align-items: flex-end
 }
 
 .MessageWrapper--agent {
     padding: 0 0 0 3.5rem;
     justify-content: flex-end
 }
 
 .MessageWrapper--client {
     padding: 0 6.5rem 0 0
 }
 
 .MessageWrapper__avatar {
     margin-left: .5rem;
     width: 3rem;
     height: 3rem;
     min-width: 3rem;
     min-height: 3rem
 }
 
 .Bubble {
     display: flex;
     grid-auto-flow: column;
     border-radius: .8rem;
     color: var(--color-white);
     padding: .5rem;
     position: relative;
     overflow-wrap: break-word;
     word-wrap: break-word;
     -webkit-hyphens: auto;
     -ms-hyphens: auto;
     hyphens: auto;
     word-break: break-word;
     font-weight: 500
 }
 
 .Bubble--timeOnBottom {
     flex-flow: column
 }
 
 .Bubble--timeOnBottom .Bubble__content {
     margin-right: 0;
     border-radius: .8rem;
     overflow: hidden
 }
 
 .Bubble--timeOnBottom .Bubble__info {
     justify-content: end
 }
 
 .Bubble>p {
     overflow-wrap: break-word;
     word-wrap: break-word;
     -webkit-hyphens: auto;
     -ms-hyphens: auto;
     hyphens: auto
 }
 
 .Bubble__info {
     display: grid;
     grid-auto-flow: column;
     align-content: end;
     grid-gap: .4rem;
     gap: .4rem;
     min-width: 3.55rem;
     justify-content: end
 }
 
 .Bubble__info i {
     width: 1rem
 }
 
 .Bubble__info i  {
     color: var(--color-white)
 }
 
 .Bubble--client {
     background-color: var(--color-grey);
     color: var(--color-dark);
     justify-self: start
 }
 
 .Bubble--client .Bubble__info {
     margin-left: -1rem
 }
 
 .Bubble__content {
     font-size: 0.8rem;
    /* white-space: pre-wrap;*/
     margin-right: 1rem
 }
 
 .Bubble__attachments {
     display: grid;
     grid-auto-flow: column;
     grid-gap: 1rem;
     gap: 1rem;
     grid-auto-columns: -webkit-min-content;
     grid-auto-columns: min-content
 }
 
 .Bubble__attachments__item {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: var(--color-white);
     border-radius: .5rem;
     padding: 1rem
 }
 
 .Bubble__attachments__item i {
     height: 2rem;
     width: 2rem
 }
 
 .Bubble__attachments__item i  {
     color: var(--color-dark)
 }
 .Bubble__agent{
    background-color: rgb(37, 211, 102); opacity: 0.8;
 }
 .CheckTick {
     display: flex;
     align-items: center;
     font-size:10px
 }
 
 .CheckTick i {
     color: var(--color-dark-grey)
 }
 
 .CheckTick--read i {
     color: var(--color-blue)
 }
 
 .MessageState {
     display: flex;
     margin: .8rem 0;
     justify-content: center;
     width: 100%
 }
 
 .MessageState>p {
     border-radius: .3rem;
     color: var(--color-dark)
 }
 
 .MessageImage {
     width: 35%;
     min-width: 21rem
 }
 
 .MessageImage img {
     width: 100%
 }
 
 .MessageImage a {
     position: absolute;
     right: 1rem;
     box-shadow: var(--shadow-light);
     border-radius: .8rem;
     opacity: 0;
     transition: all .2s
 }
 
 .MessageImage:hover a {
     opacity: 1;
     transition: all .2s
 }
 
 .MessageAudio {
     width: 35%;
     min-width: 21rem
 }
 
 .MessageAudio audio {
     width: 100%;
     min-width: 13rem;
     outline: none
 }
 
 .MessageVideo {
     width: 35%;
     min-width: 21rem
 }
 
 .MessageVideo video {
     width: 100%;
     min-width: 13rem
 }
 
 .MessageAttachment__info {
     display: grid;
     grid-auto-flow: column;
     grid-gap: .8rem;
     gap: .8rem;
     align-items: center
 }
 
 .MessageAttachment__info a {
     display: flex
 }
 
 .MessageAttachment__info i {
     position: relative;
     width: 2.2rem;
     height: 2.2rem;
     border-radius: .3rem
 }
 
 .MessageAttachment__info i  {
     color: var(--color-white)
 }
 
 .MessageAttachment__info--client i  {
     color: var(--color-dark)
 }
 
 .MessageAttachment__info p {
     font-size: 0.8rem
 }
 
 .AvatarName {
     display: flex;
     align-items: center;
     justify-content: center;
     text-transform: uppercase;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     color: var(--color-white);
     letter-spacing: -.1rem;
     position: relative;
     background-color: var(--color-grey);
     font-size: 1.1rem
 }
 
 .AvatarName i  {
     color: var(--color-white)
 }
 
 .AvatarName__info {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     overflow: hidden
 }
 
 .AvatarName__info>img {
     max-width: 100%;
     max-height: 100%
 }
 
 .AvatarName__info>i {
     width: 40%;
     height: 40%
 }
 .navbar_name{
     font-size: 1rem;
     margin-bottom: auto;
 }
 .AvatarName--status:before {
     content: "";
     position: absolute;
     width: 0.8rem;
     height: 0.8rem;
     border-radius: 50%;
     bottom: 0;
     right: 0;
     z-index: 3
 }
 
 .AvatarName--online:before {
     background-color: var(--color-green)
 }
 
 .AvatarName--offline:before {
     background-color: var(--color-dark-grey)
 }
 
 .AvatarName--connecting:before {
     background-color: var(--color-orange)
 }
 
 .MessageDate {
     font-size: 0.8rem;
     color: var(--color-dark);
     text-align: center;
     margin: .8rem 0
 }
 
 .MessageTyping {
     display: flex;
     justify-content: flex-start
 }
 
 .MessageTyping__animation .dot {
     display: inline-block;
     width: .5rem;
     height: .5rem;
     border-radius: 50%;
     margin-right: 3px;
     background: var(--color-white);
     -webkit-animation: wave 1.3s linear infinite;
     animation: wave 1.3s linear infinite
 }
 
 .MessageTyping__animation .dot:nth-child(2) {
     -webkit-animation-delay: -1.1s;
     animation-delay: -1.1s
 }
 
 .MessageTyping__animation .dot:nth-child(3) {
     -webkit-animation-delay: -.9s;
     animation-delay: -.9s
 }
 
 @-webkit-keyframes wave {
     0%,
     60%,
     to {
         transform: none
     }
     30% {
         transform: translateY(-.6rem)
     }
 }
 
 @keyframes wave {
     0%,
     60%,
     to {
         transform: none
     }
     30% {
         transform: translateY(-.6rem)
     }
 }
 
 .TaskForm {
     position: absolute;
     height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
     width: 100%
 }
 
 .TaskForm__wrapper {
     position: relative;
     height: 100%
 }
 
 .TaskForm__form {
     display: grid;
     grid-gap: 1.2rem;
     gap: 1.2rem;
     padding: 0 2rem
 }
 
 .TaskForm__header {
     display: grid;
     grid-auto-flow: column;
     justify-content: space-between;
     align-items: center;
     padding: 2rem
 }
 
 .TaskForm__header h2 {
     font-size: 1.6rem;
     font-weight: 500;
     color: var(--color-dark)
 }
 
 .FormInput {
     display: grid;
    /* grid-gap: .5rem;
     gap: .5rem;*/
     position: relative;
     color: var(--color-dark)
 }
 
 .FormInput>input {
     font-weight: 600;
     width: 100%;
     color: var(--color-dark);
     font-family: Hind!important;
     outline: none;
     padding: .3rem 0.5rem;
     border: .2rem solid var(--color-grey);
     border-radius: .8rem
 }
 
 .FormInput>input:focus {
     border: 2px solid var(--color-primary)
 }
 
 .FormInput>input::-webkit-input-placeholder {
     color: var(--color-grey)!important
 }
 
 .FormInput>input:-ms-input-placeholder {
     color: var(--color-grey)!important
 }
 
 .FormInput>input::-ms-input-placeholder {
     color: var(--color-grey)!important
 }
 
 .FormInput>input::placeholder {
     color: var(--color-grey)!important
 }
 
 .FormInput>input:disabled {
     color: var(--color-grey)!important;
     background-color: var(--color-light-grey);
     border: var(--color-light-grey)
 }
 
 .FormInput>textarea {
     font-size: 1.4rem;
     font-weight: 600;
     width: 100%;
     height: 10rem;
     color: var(--color-dark)!important;
     font-family: Hind!important;
     outline: none;
     padding: 1rem;
     transition: all .2s;
     border: .2rem solid var(--color-grey);
     border-radius: .8rem;
     resize: vertica
 }
 
 .FormInput>textarea:focus {
     border: 2px solid var(--color-primary)
 }
 
 .FormInput>textarea::-webkit-input-placeholder {
     color: var(--color-grey)!important
 }
 
 .FormInput>textarea:-ms-input-placeholder {
     color: var(--color-grey)!important
 }
 
 .FormInput>textarea::-ms-input-placeholder {
     color: var(--color-grey)!important
 }
 
 .FormInput>textarea::placeholder {
     color: var(--color-grey)!important
 }
 
 .FormInput>textarea:disabled {
     color: var(--color-grey)!important;
     background-color: var(--color-light-grey);
     border: var(--color-light-grey)
 }
 
 .FormInput--invalid>input {
     transition: all .2s;
     color: var(--color-red)!important
 }
 
 .FormInput--invalid>input,
 .FormInput--invalid>input:focus {
     border: .2rem solid var(--color-red)
 }
 
 .FormInput__alert {
     color: var(--color-red)!important;
     opacity: 0;
     height: 1rem
 }
 
 .FormInput__alert--show {
     opacity: 1
 }
 

 .Select__select {
     position: relative
 }
 
 .Select select {
     width: 100%;
     color: var(--color-dark)!important;
     font-family: Hind!important;
     outline: none;
     border: 2px solid var(--color-grey);
     border-radius: .8rem;
     background: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none
 }
 
 .Select select:focus {
     border: 2px solid var(--color-primary)
 }
 
 .Select select:hover {
     cursor: pointer
 }
 
 .Select select:hover  {
     color: var(--color-dark)
 }
 
 .Select i {
     position: absolute;
     top: 50%;
     right: 1.5rem;
     width: 1.4rem;
     height: .875rem;
     margin-top: -.5rem;
     pointer-events: none;
     stroke-width: .3rem;
     stroke: var(--color-primary)
 }
 
 .Select  {
     color: var(--color-primary)
 }
 
 .SearchInput {
     position: relative
 }
 
 .SearchInput__list {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     max-height: 15rem;
     border: 1px solid var(--color-grey);
     border-radius: 3px;
     background: var(--color-white);
     list-style: none;
     z-index: 1;
     overflow: auto
 }
 
 .SearchInput__list>li {
     border-bottom: 1px solid var(--color-grey)
 }
 
 .SearchInput__list>li:last-child {
     border-bottom: none
 }
 
 .SearchInput__list>li:hover {
     background: var(--color-light-grey)
 }
 
 .SearchInput__list>li>a {
     display: block;
     color: var(--color-dark);
     padding: 1.2rem 2rem;
     text-decoration: none
 }
 
 .MainBox {
     display: grid;
     width: 20vw;
     min-width: 37rem;
     height: 100%;
     grid-gap: 1rem;
     gap: 1rem;
     border-right: .5px solid var(--color-grey-light);
     padding: 1rem 2rem;
     position: relative
 }
 
 .MainBox--default {
     grid-template-rows: -webkit-min-content -webkit-min-content;
     grid-template-rows: min-content min-content
 }
 
 .MainBox__interactions {
     position: relative
 }
 
 .MainBoxHeader {
     display: grid;
     grid-gap: 1.5rem;
     gap: 1.5rem
 }
 
 .MainBoxHeader__actions {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-radius: .3rem
 }
 
 .ToggleNav {
     display: grid;
     grid-auto-flow: column;
     width: 100%;
     cursor: pointer;
     transition: all .2s;
     font-weight: 600
 }
 
 .ToggleNav-responsive {
     border-radius: 0;
     box-shadow: none;
     border-bottom: 1px solid var(--color-light)
 }
 
 .ToggleNav__item {
     display: grid;
     grid-auto-flow: column;
     grid-gap: .5rem;
     gap: .5rem;
     align-items: center;
     justify-content: center;
     padding: 1rem .5rem;
     position: relative;
     color: var(--color-dark);
     border-bottom: 2px solid var(--color-grey)
 }
 
 .ToggleNav__item--active,
 .ToggleNav__item:hover {
     color: var(--color-primary)
 }
 
 .ToggleNav__item--active {
     transition: all .2s;
     border-bottom: 2px solid var(--color-primary)
 }
 
 .ToggleNav__item--info .ToggleNav__item__info {
     display: flex
 }
 
 .ToggleNav__item--notify {
     -webkit-animation: flashing 2s infinite;
     animation: flashing 2s infinite;
     transition: all
 }
 
 .ToggleNav i  {
     color: var(--color-white)
 }
 
 @-webkit-keyframes flashing {
     0% {
         color: var(--color-primary)
     }
     50% {
         color: var(--color-light-grey);
         color: var(--color-dark)
     }
     to {
         color: var(--color-primary)
     }
 }
 
 @keyframes flashing {
     0% {
         color: var(--color-primary)
     }
     50% {
         color: var(--color-light-grey);
         color: var(--color-dark)
     }
     to {
         color: var(--color-primary)
     }
 }
 
 .CircleDisplay {
     display: flex;
     align-items: center;
     justify-content: center;
     content: "";
     width: 2rem;
     height: 2rem;
     border-radius: 50%;
     color: var(--color-white);
     box-shadow: var(--shadow-light);
     font-weight: 300
 }
 
 .CircleDisplay--green {
     background-color: var(--color-green)
 }
 
 .CircleDisplay--red {
     background-color: var(--color-red)
 }
 
 .CircleDisplay--grey {
     background-color: var(--color-grey)
 }
 
 .CircleDisplay--blue {
     background-color: var(--color-blue)
 }
 
 .CircleDisplay--white {
     background-color: var(--color-white)
 }
 
 .CircleDisplay--small {
     height: .8rem;
     width: .8rem
 }
 
 .CircleDisplay--animate {
     -webkit-animation: fading 1s infinite;
     animation: fading 1s infinite
 }
 
 @-webkit-keyframes fading {
     0% {
         opacity: 1
     }
     50% {
         opacity: .2
     }
     to {
         opacity: 1
     }
 }
 
 @keyframes fading {
     0% {
         opacity: 1
     }
     50% {
         opacity: .2
     }
     to {
         opacity: 1
     }
 }

.toggle > input {
    display: none;
}

.toggle > label {
    position: relative;
    display: block;
    height: 20px;
    width: 44px;
    background: #898989;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.toggle > label:after {
    position: absolute;
    left: -2px;
    top: -3px;
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
    content: '';
    transition: all 0.3s ease;
}
.toggle > label:active:after {
    transform: scale(1.15, 0.85);
}
.toggle > input:checked ~ label {
    background: #6fbeb5;
}
.toggle > input:checked ~ label:after {
    left: 20px;
    background: #15e96e;
}
.toggle > input:disabled ~ label {
    background: #d5d5d5;
    pointer-events: none;
}
.toggle > input:disabled ~ label:after {
    background: #bcbdbc;
}
 .InteractionList {
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     position: absolute;
     overflow-y: auto;
     overflow-x: hidden
 }
 
 .InteractionList__empty {
     display: grid;
     grid-gap: 2rem;
     gap: 2rem;
     justify-content: center;
     color: var(--color-dark);
     text-align: center;
     margin: 2rem 0
 }
 
 .InteractionList__empty__info p:first-child {
     margin-bottom: .5rem;
     color: var(--color-blue)
 }
 
 .InteractionList__empty__image {
     background-color: var(--color-grey);
     border-radius: 50%;
     align-items: center;
     justify-self: center;
     height: 7rem;
     width: 7rem;
     font-size: 24px;
 }
 
 .InteractionList__empty__image div {
     height: 4rem;
     width: 4rem
 }
 
 .InteractionList__empty__image  {
     color: var(--color-white)
 }
 
 .InteractionList__section {
     display: grid
 }
 
 .InteractionList__section:last-child {
     margin-bottom: 10px
 }
 
 .InteractionList__section__status {
     display: flex;
     width: 2rem;
     align-items: center;
     justify-content: center
 }
 
 .ClientMessage {
     display: grid;
     grid-auto-flow: column;
     grid-gap: .8rem;
     gap: .8rem;
     cursor: pointer;
     grid-template-columns: -webkit-min-content 1fr;
     grid-template-columns: min-content 1fr;
     padding: 1rem 2rem;
     position: relative;
 }
 /*
 .ClientMessage:hover .ClientMessage__action {
     width: 6.5rem
 }
 
 .ClientMessage:hover .ClientMessage__action i {
     opacity: 1
 }
 */
 .ClientMessage__time{
     font-size: 0.5rem;
 }
 .ClientMessage__from_time{
     font-size:0.7rem;
 }
 .ClientMessage--selected {
     background-color: var(--color-light-grey)
 }
 
 .ClientMessage__department {
     margin: -4px 0
 }
 
 .ClientMessage__department p {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     color: var(--color-dark-grey)
 }
 
 .ClientMessage__type {
     position: relative;
     width: 2.5rem;
     height: 2.5rem
 }
 
 .ClientMessage__type__missed i {
     color: var(--color-dark-grey)!important
 }

 .ClientMessage__pendingMessages {
     position: absolute;
     bottom: 0;
     right: 0
 }
 
 .ClientMessage__message {
     display: flex;
     justify-content: space-between;
     flex-flow: column;
     min-width: 0
 }
 
 .ClientMessage__info {
     display: grid;
     grid-template-columns: 1fr -webkit-min-content;
     grid-template-columns: 1fr min-content;
     grid-gap: 2rem;
     gap: 2rem
 }
 
 .ClientMessage__customer {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     font-weight: 500
 }
 
 .ClientMessage__content {
     display: grid;
     grid-template-columns: -webkit-min-content 1fr;
     grid-template-columns: min-content 1fr
 }
 
 .ClientMessage__content p {
     font-style: italic;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     color: var(--color-dark-grey)
 }
 
 .ClientMessage__content__tick {
     display: flex;
     height: 1rem;
     width: 1rem;
     align-items: center;
     justify-content: center
 }
 
 .ClientMessage__content__tick i {
     width: 1rem
 }
 
 .ClientMessage__content__tick i {
     color: var(--color-dark-grey)!important;
 }
 
 .ClientMessage__from {
     display: flex;
     align-items: center;
     color: var(--color-dark-grey);
     font-size: 18px;
 }
 
 .ClientMessage__from i {
     height: 1rem;
     width: 1rem;
     margin-right: .5rem
 }
 
 .ClientMessage__from--agent i {
     color: var(--color-red)
 }
 
 .ClientMessage__from--client i {
    color: var(--color-green)
 }
 
 .ClientMessage__action {
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     width: 1rem;
     transition: all .2s
 }
 
 .ClientMessage__action i {
     height: 2rem;
     width: 2rem;
     opacity: 0
 }
 
 .ClientMessage__action i {
    color: var(--color-white)
 }
 
 .ClientMessage__action--ringing {
     -webkit-animation: ringing 1s infinite;
     animation: ringing 1s infinite
 }
 
 .ClientMessage__action--ringing>i {
     -webkit-animation: expanding 1s infinite;
     animation: expanding 1s infinite
 }
 
 .ClientMessage__action--queued {
     background-color: var(--color-green);
     font-size:20px;
 }
 
 .ClientMessage__action--ended {
     background-color: var(--color-red);
 }
 
 @media only screen and (max-width:800px) {
     .ClientMessage__action {
         width: 100%!important;
         opacity: .85;
         border-bottom: 2px solid var(--color-white)
     }
     .ClientMessage__action>i {
         display: block;
         width: 2.5rem;
         height: 2.5rem
     }
 }
 
 .VideoNotification {
     display: grid;
     grid-auto-flow: column;
     grid-gap: .5rem;
     gap: .5rem;
     padding: .5rem;
     background-color: var(--color-red);
     border-radius: 5rem;
     color: var(--color-white)!important;
     text-transform: uppercase;
     justify-content: center;
     align-items: center;
     width: 6rem;
     font-weight: 600;
     letter-spacing: .1rem
 }
 
 .VideoNotification>p {
     color: var(--color-white)
 }
 
 .InteractionListActive__section {
     display: grid;
     max-height: 25rem;
     overflow-y: auto;
     overflow-x: hidden
 }
 
 .InteractionListActive__section .ClientMessage__wrapper:last-of-type {
     margin-bottom: 1rem
 }
 
 .InteractionList__empty__image {
     display: flex;
     justify-content: center
 }
 
 .InteractionListTitle {
     display: grid;
     grid-auto-flow: column;
     grid-template-columns: 1fr -webkit-min-content;
     grid-template-columns: 1fr min-content;
     align-items: center;
     color: var(--color-dark);
     border-bottom: .1rem solid var(--color-light);
     padding: 0 2rem
 }
 
 .InteractionListTitle>p {
     margin-top: 1rem;
     margin-bottom: 1rem
 }
 
 .AgentHistory {
     display: grid;
     grid-template-rows: -webkit-min-content 1fr;
     grid-template-rows: min-content 1fr;
     grid-gap: 2rem;
     gap: 2rem
 }
 
 .AgentHistory__list {
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     position: absolute;
     overflow-y: auto;
     overflow-x: hidden
 }
 
 .AgentHistory__list__wrapper {
     position: relative
 }
 
 .AgentHistory__interactions>p {
     font-size: 1.6rem;
     text-align: center;
     padding-top: 1rem;
     color: var(--color-dark)
 }
 
 .AgentHistoryItem {
     display: grid;
     grid-template-columns: -webkit-min-content 1fr;
     grid-template-columns: min-content 1fr;
     grid-gap: 1rem;
     gap: 1rem;
     padding: 1rem 2rem;
     transition: all .2s;
     cursor: pointer
 }
 
 .AgentHistoryItem:hover {
     background-color: var(--color-light-grey);
     transition: all .2s
 }
 
 .AgentHistoryItem__avatar {
     height: 2.5rem;
     width: 2.5rem;
     position: relative
 }
 
 .AgentHistoryItem__avatar>i {
     position: absolute;
     height: 2rem;
     width: 2rem;
     right: -.1rem;
     bottom: -.1rem;
     z-index: 10;
     box-shadow: var(--shadow);
     border-radius: 50%
 }
 
 .AgentHistoryItem__header {
     display: grid;
     grid-template-columns: 1fr -webkit-min-content;
     grid-template-columns: 1fr min-content;
     color: var(--color-dark);
     font-size: .8rem;
     min-width: 0
 }
 
 .AgentHistoryItem__header p {
     color: var(--color-dark);
     font-size: 0.8rem
 }
 
 .AgentHistoryItem__header div:last-of-type {
     display: grid;
     grid-auto-flow: column;
     grid-gap: .5rem;
     gap: .5rem;
     align-items: center
 }
 
 .AgentHistoryItem__origin i {
     height: .9rem
 }
 
 .AgentHistoryItem__info {
     display: grid;
     font-size: 1.2rem;
     color: var(--color-dark);
     min-width: 0
 }
 
 .AgentHistoryItem__header>p:first-of-type {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden
 }
 
 .AgentHistoryItem--selected {
     background-color: var(--color-light-grey)
 }
 
 .AgentHistoryItem__origin--sent i {
    color: var(--color-red)
 }
 
 .AgentHistoryItem__origin--incoming i {
    color: var(--color-green)
 }
 
 .AgentContacts {
     display: grid;
     grid-template-rows: -webkit-min-content 1fr;
     grid-template-rows: min-content 1fr;
     grid-gap: 2rem;
     gap: 2rem
 }
 
 .AgentContacts>p {
     font-size: 1.6rem;
     text-align: center;
     color: var(--color-dark);
     padding-bottom: 1rem
 }
 
 .AgentContacts__customers {
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     position: absolute;
     overflow-y: auto;
     overflow-x: hidden
 }
 
 .AgentContacts__customers__wrapper {
     position: relative
 }
 
 .AgentContacts__customers>p {
     text-align: center;
     font-size: 1.6rem;
     color: var(--color-dark)
 }
 
 .AgentContacts__actions {
     display: grid;
     grid-gap: 1rem;
     gap: 1rem;
     grid-template-columns: 1fr -webkit-min-content;
     grid-template-columns: 1fr min-content;
     align-items: center
 }
 
 .AgentContactItem {
     display: grid;
     grid-template-columns: -webkit-min-content 1fr;
     grid-template-columns: min-content 1fr;
     grid-gap: 1.5rem;
     gap: 1.5rem;
     padding: 1rem 2rem;
     transition: all .2s;
     cursor: pointer;
     align-items: center
 }
 
 .AgentContactItem:hover {
     background-color: var(--color-light-grey);
     transition: all .2s
 }
 
 .AgentContactItem__avatar {
     height: 5rem;
     width: 5rem;
     position: relative
 }
 
 .AgentContactItem__avatar>i {
     position: absolute;
     height: 2rem;
     width: 2rem;
     right: -.1rem;
     bottom: -.1rem;
     z-index: 10;
     box-shadow: var(--shadow-light)
 }
 
 .AgentContactItem__header {
     display: grid;
     color: var(--color-dark);
     font-size: 1.1rem;
     margin-bottom: .5rem
 }
 
 .AgentContactItem__header p {
     color: var(--color-dark);
     font-size: 1.3rem;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap
 }
 
 .AgentContactItem__header div:last-of-type {
     display: grid;
     grid-auto-flow: column;
     grid-gap: .5rem;
     gap: .5rem;
     align-items: center
 }
 
 .AgentContactItem__origin i {
     height: .9rem
 }
 
 .AgentContactItem__origin--sent i {
    color: var(--color-red)
 }
 
 .AgentContactItem__origin--incoming i {
    color: var(--color-green)
 }
 
 .AgentContactItem__info {
     display: grid;
     font-size: 1.2rem;
     color: var(--color-dark)
 }
 
 .Interaction {
     display: grid;
     position: relative;
     box-shadow: 0 1px 15px 1px rgba(62, 57, 107, .07)
 }
 
 .Interaction__sections {
     display: grid;
     grid-template-columns: 1fr -webkit-min-content;
     grid-template-columns: 1fr min-content
 }
 
 .Interaction__empty {
     display: grid;
     grid-gap: 3rem;
     gap: 3rem;
     align-content: center;
     justify-self: center;
     justify-items: center;
     width: 42rem
 }
 
 .Interaction__empty__info {
     display: grid;
     grid-gap: 2.5rem;
     gap: 2.5rem;
     text-align: center;
     color: var(--color-dark)
 }
 
 .Interaction__empty__info p:first-of-type {
     color: var(--color-blue);
     font-weight: 600
 }
 
 .Interaction__empty__image {
     width: 15rem;
     height: 15rem;
     background-color: var(--color-grey);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 15px;
 }
 
 
 .Interaction .Interaction__responsive {
     display: none
 }
 
 .Interaction__responsive {
     display: grid;
     grid-auto-flow: column;
     grid-template-columns: -webkit-min-content 1fr;
     grid-template-columns: min-content 1fr
 }
 
 .Interaction__responsive .IconButton {
     border-radius: 0;
     height: 4rem;
     width: 4rem
 }
 
 .Interaction__responsive .ToggleNav {
     height: 4rem
 }
 
 .Interaction__responsive .ToggleNav__item {
     padding: 0
 }
 
 .Interaction__responsive--ringing {
     -webkit-animation: ringing 1s infinite;
     animation: ringing 1s infinite
 }
 
 .Interaction__responsive--ringing>i {
     color: var(--color-white)!important;
 }
 
 @media only screen and (max-width:800px) {
     .Interaction {
         grid-template-rows: -webkit-min-content 1fr;
         grid-template-rows: min-content 1fr
     }
     .Interaction .ClientBox {
         display: none
     }
     .Interaction .Interaction__responsive {
         display: grid
     }
     .Interaction-customer .ClientBox {
         display: grid;
         width: 100%;
         min-width: auto
     }
     .Interaction-customer .ChatBox {
         display: none
     }
 }
 
 @-webkit-keyframes ringing {
     0% {
         background-color: var(--color-green);
         opacity: 1
     }
     50% {
         opacity: .7
     }
     to {
         background-color: var(--color-green);
         opacity: 1
     }
 }
 
 @keyframes ringing {
     0% {
         background-color: var(--color-green);
         opacity: 1
     }
     50% {
         opacity: .7
     }
     to {
         background-color: var(--color-green);
         opacity: 1
     }
 }
 
 .ClientBox {
     display: grid;
     grid-template-rows: -webkit-min-content 1fr;
     grid-template-rows: min-content 1fr;
     width: 20vw;
     min-width: 37rem;
     height: 100%;
     background-color: var(--color-white);
     padding: 2rem 0;
     position: relative
 }
 
 .ClientBox__navigation {
     display: flex;
     justify-content: space-between;
     padding: 0 2rem
 }
 
 .ClientBox .TaskForm {
     padding: 2rem
 }
 
 .ClientInfo {
     display: grid;
     grid-template-rows: -webkit-min-content 1fr;
     grid-template-rows: min-content 1fr;
     grid-gap: 3rem;
     gap: 3rem
 }
 
 .ClientInfo__user {
     display: grid;
     grid-gap: 1rem;
     gap: 1rem;
     text-align: center;
     padding: 2rem 2rem;
 }
 
 .ClientInfo__user__actions {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 2rem
 }
 
 .ClientInfo__user__actions>div:first-child:hover,
 .ClientInfo__user__actions>div:last-child:hover {
     transform: scale(1.1);
     transition: all .2s
 }
 
 .ClientInfo__user__actions--search>div:last-of-type {
     background-color: var(--color-dark-grey)
 }
 
 .ClientInfo__user__actions--search>div:last-of-type i {
    color: var(--color-white);
     -webkit-animation: all .2s;
     animation: all .2s
 }
 
 .ClientInfo__user__actions--edit>div:first-of-type {
     background-color: var(--color-dark-grey);
     -webkit-animation: all .2s;
     animation: all .2s
 }
 
 .ClientInfo__user__actions--edit>div:first-of-type i {
    color: var(--color-white)
 }
 
 .ClientInfo__user__info {
     display: grid;
     grid-gap: .5rem;
     gap: .5rem;
     min-width: 0
 }
 
 .ClientInfo__user__info p:first-child {
     font-weight: 700;
     text-transform: capitalize;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden
 }
 
 .ClientInfo__user__info p:last-child {
     color: var(--color-dark)
 }
 
 .ClientInfo__action {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 4rem;
     height: 4rem;
     border-radius: 50%;
     background-color: var(--color-light-grey);
     transition: all .2s
 }
 
 .ClientInfo__action:hover {
     cursor: pointer
 }
 
 .ClientInfo__action>i:first-of-type {
     height: 1.7rem;
     height: 1.6rem
 }
 
 .ClientInfo__action>i {
    color: var(--color-grey);
 }
 
 .ClientInfo__avatar {
     width: 7rem;
     height: 7rem;
     font-size: 2rem
 }
 
 .ClientInfo__activeInteractions {
     display: flex;
     justify-content: center
 }
 
 .ClientForm__infos {
     display: grid;
     grid-auto-rows: -webkit-min-content;
     grid-auto-rows: min-content;
     position: relative;
     padding: 0 2rem
 }
 
 .ClientForm__infos .Button {
     width: 100
 }
 
 .ClientForm__form {
     top: 0;
     bottom: 0;
     right: 2rem;
     left: 2rem;
     position: absolute;
     overflow-y: auto;
     overflow-x: hidden
 }
 
 .ClientForm__form__item {
     display: grid;
     grid-template-columns: 1fr -webkit-min-content;
     grid-template-columns: 1fr min-content
 }
 
 .ClientForm__form__item i {
     height: 2rem;
     width: 2rem
 }
 
 .ClientForm__form__item .IconButton {
     margin-left: 1rem;
     margin-right: .1rem;
     transform: translateY(3rem)
 }
 
 .ClientSearch {
     display: grid;
     grid-template-rows: -webkit-min-content 1fr;
     grid-template-rows: min-content 1fr;
     grid-gap: 1.3rem;
     gap: 1.3rem
 }
 
 .ClientSearch .CommonInput {
     margin: 0 2rem
 }
 
 .ClientSearch__wrapper {
     position: relative;
     border-radius: .3rem;
     overflow: hidden
 }
 
 .ClientSearch__item {
     display: flex;
     flex-flow: column;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0
 }
 
 .ClientSearch__actions {
     display: grid;
     grid-auto-flow: column;
     justify-content: space-between
 }
 
 .ClientSearch__message {
     padding-left: 3rem
 }
 
 .ClientSearchItem {
     display: grid;
     grid-gap: 2rem;
     gap: 2rem;
     padding: 2rem;
     border-radius: .8rem;
     position: relative;
     transition: all .2s;
     margin: 0 2rem 1rem;
     border: 1px solid var(--color-light-grey)
 }
 
 .ClientSearch__info {
     display: grid;
     grid-gap: 1rem;
     gap: 1rem
 }
 
 .ClientSearch__info__additional {
     display: flex;
     justify-content: space-between
 }
 
 .ClientSearchItemField {
     display: grid;
     grid-gap: .3rem;
     gap: .3rem
 }
 
 .ClientSearchItemField p:first-of-type {
     color: var(--color-dark)
 }
 
 .ClientSearchItemField p:last-of-type {
     color: var(--color-dark-grey)
 }
 
 .MergeCustomer {
     display: grid;
     grid-template-rows: -webkit-min-content 1fr -webkit-min-content;
     grid-template-rows: min-content 1fr min-content;
     grid-gap: 3rem;
     gap: 3rem;
     padding: 3rem 2rem;
     position: relative
 }
 
 .MergeCustomer i {
     height: 1.5rem;
     width: 1.5rem
 }
 
 .MergeCustomer__info {
     display: grid;
     grid-gap: 2rem;
     gap: 2rem
 }
 
 .MergeCustomer__options {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: 1fr;
     justify-items: center;
     margin-top: 3rem
 }
 
 .MergeCustomer__header p:first-child {
     font-size: 2rem;
     margin-bottom: 2rem;
     color: var(--color-dark)
 }
 
 .MergeCustomer__header p:nth-child(2),
 .MergeCustomer__header p:nth-child(3) {
     font-size: 1.4rem;
     color: var(--color-dark);
     overflow-wrap: break-word;
     word-wrap: break-word;
     -webkit-hyphens: auto;
     -ms-hyphens: auto;
     hyphens: auto;
     word-break: break-word;
     margin-bottom: .5rem
 }
 
 .MergeCustomer__header p:nth-child(3) {
     font-style: italic;
     font-size: 1.2rem
 }
 
 .MergeCustomer__field {
     display: grid;
     grid-gap: 1rem;
     gap: 1rem;
     text-align: left;
     color: var(--color-dark)
 }
 
 .MergeCustomer__field p {
     font-size: 1.5rem
 }
 
 .MergeCustomer__field__values {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: 1fr;
     font-size: 1.4rem;
     box-shadow: var(--shadow-light);
     border-radius: .7rem;
     overflow: hidden;
     border: 1px solid var(--color-grey)
 }
 
 .MergeCustomer__emptyInfo {
     display: grid;
     grid-gap: 2rem;
     gap: 2rem;
     justify-items: center;
     color: var(--color-dark);
     font-size: 2rem
 }
 
 .MergeCustomer__emptyInfo div {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: var(--color-grey);
     border-radius: 50%;
     height: 10rem;
     width: 10rem
 }
 
 .MergeCustomer__emptyInfo i {
     height: 6rem;
     width: 6rem;
    color: var(--color-white);
 }
 
 .CheckName {
     display: flex;
     cursor: pointer;
     outline: none;
     color: var(--color-dark);
     padding: 1.5rem 1rem;
     justify-content: center;
     min-width: 0
 }
 
 .CheckName p {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap
 }
 
 .CheckName--selected {
     background-color: var(--color-primary);
     color: var(--color-white)
 }
 
 .History {
     display: grid;
     grid-template-rows: -webkit-min-content 1fr;
     grid-template-rows: min-content 1fr;
     padding: 0 2rem;
     grid-gap: 1rem;
     gap: 1rem
 }
 
 .History .CommonInput {
     margin-top: 1rem
 }
 
 .HistoryList {
     display: grid;
     grid-template-rows: -webkit-min-content 1fr;
     grid-template-rows: min-content 1fr
 }
 
 .HistoryList>div>p {
     color: var(--color-dark);
     text-align: center
 }
 
 .HistoryList__wrapper {
     position: relative
 }
 
 .HistoryList__list {
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     position: absolute;
     overflow-y: auto;
     overflow-x: hidden
 }
 
 .HistoryItem {
     display: grid;
     grid-auto-flow: row;
     grid-auto-rows: -webkit-min-content;
     grid-auto-rows: min-content;
     border-radius: 3px;
     padding: 1.5rem;
     grid-gap: 1.3rem;
     gap: 1.3rem;
     cursor: pointer;
     transition: all .2s;
     background-color: var(--color-white)
 }
 
 .HistoryItem--selected,
 .HistoryItem:hover {
     background-color: var(--color-light-grey)
 }
 
 .HistoryItem--selected {
     transition: all .2s;
     border-radius: .3rem .3rem 0 0
 }
 
 .HistoryItem__header {
     display: grid;
     grid-template-columns: -webkit-min-content 1fr;
     grid-template-columns: min-content 1fr;
     grid-gap: 1rem;
     gap: 1rem
 }
 
 .HistoryItem__icon {
     display: flex;
     width: 2.5rem;
     justify-content: flex-end;
     align-items: center
 }
 
 .HistoryItem__icon>i {
     width: 3rem;
     height: 3rem
 }
 
 .History__chat {
     display: grid;
     position: relative;
     border-bottom: 1px solid var(--color-grey);
     height: 40rem
 }
 
 .History__info {
     display: flex;
     flex-flow: column
 }
 
 .History__info div:first-of-type {
     display: flex;
     justify-content: space-between
 }
 
 .History__info div:first-of-type p:first-of-type,
 .History__info div:first-of-type p:last-of-type {
     color: var(--color-dark)
 }
 
 .History__info>p {
     color: var(--color-dark-grey)
 }
 
 .HistoryList__item__note {
     padding: 1rem
 }
 
 .HistoryList__item__tags {
     padding: .5rem
 }
 
 .PhoneInteraction {
     display: grid;
     width: 100%;
     height: 100%;
     align-content: center;
     text-align: center;
     grid-gap: 2rem;
     gap: 2rem;
     justify-items: center
 }
 
 .PhoneInteraction p {
     color: var(--color-dark)
 }
 
 .PhoneInteraction__time {
     font-size: 3.6rem
 }
 
 .PhoneInteraction__users {
     display: grid;
     grid-template-columns: repeat(4, -webkit-min-content);
     grid-template-columns: repeat(4, min-content);
     grid-gap: .3rem;
     gap: .3rem
 }
 
 .PhoneInteraction__actions {
     display: grid;
     grid-auto-flow: column;
     grid-gap: 1rem;
     gap: 1rem
 }
 
 .CallWave {
     position: relative
 }
 
 .CallWave__bar {
     display: inline-block;
     width: .7rem;
     height: 7rem;
     background: #ed6161;
     border-radius: 10px
 }
 
 .CallWave__bar:not(:last-of-type) {
     margin-right: 3px
 }
 
 .CallWave__bar.is-first {
     -webkit-animation: pulse-1 1.5s linear infinite;
     animation: pulse-1 1.5s linear infinite
 }
 
 .CallWave__bar.is-second {
     -webkit-animation: pulse-2 1.5s linear .3s infinite;
     animation: pulse-2 1.5s linear .3s infinite
 }
 
 .CallWave__bar.is-third {
     -webkit-animation: pulse-3 1.5s linear .6s infinite;
     animation: pulse-3 1.5s linear .6s infinite
 }
 
 .CallWave--stop * {
     -webkit-animation: none!important;
     animation: none!important;
     height: 1rem
 }
 
 @-webkit-keyframes pulse-1 {
     0% {
         transform: scaleY(1)
     }
     25% {
         transform: scaleY(.6)
     }
     50% {
         transform: scaleY(.4)
     }
     to {
         transform: scaleY(1)
     }
 }
 
 @keyframes pulse-1 {
     0% {
         transform: scaleY(1)
     }
     25% {
         transform: scaleY(.6)
     }
     50% {
         transform: scaleY(.4)
     }
     to {
         transform: scaleY(1)
     }
 }
 
 @-webkit-keyframes pulse-2 {
     0% {
         transform: scaleY(.8)
     }
     25% {
         transform: scaleY(.4)
     }
     50% {
         transform: scaleY(.6)
     }
     to {
         transform: scaleY(.8)
     }
 }
 
 @keyframes pulse-2 {
     0% {
         transform: scaleY(.8)
     }
     25% {
         transform: scaleY(.4)
     }
     50% {
         transform: scaleY(.6)
     }
     to {
         transform: scaleY(.8)
     }
 }
 
 @-webkit-keyframes pulse-3 {
     0% {
         transform: scaleY(.6)
     }
     25% {
         transform: scaleY(.2)
     }
     50% {
         transform: scaleY(.4)
     }
     to {
         transform: scaleY(.6)
     }
 }
 
 @keyframes pulse-3 {
     0% {
         transform: scaleY(.6)
     }
     25% {
         transform: scaleY(.2)
     }
     50% {
         transform: scaleY(.4)
     }
     to {
         transform: scaleY(.6)
     }
 }
 
 .ConferenceUser {
     display: flex;
     flex-flow: column;
     align-items: center;
     justify-content: center;
     height: 8rem;
     width: 8rem;
     box-shadow: var(--shadow-light);
     border-radius: .5rem
 }
 
 .ConferenceUser .AvatarName {
     width: 3.5rem;
     height: 3.5rem;
     margin-bottom: 1rem
 }
 
 .TagItem {
     display: inline-flex;
     flex-flow: row;
     align-items: center;
     font-size: 1.4rem;
     padding: 0 1rem;
     height: 3rem;
     position: relative;
     overflow: hidden;
     margin: .3rem;
     border-radius: .4rem;
     transition: all .2s;
     color: var(--color-white);
     cursor: pointer
 }
 
 .TagItem i {
    color: var(--color-white);
 }
 
 .TagItem__icon {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-left: 1rem;
     transform: rotate(45deg)
 }
 
 .TagItem__icon i {
     height: .8rem;
     width: .8rem;
     stroke-width: .1rem;
     stroke: var(--color-white)
 }
 
 .TagItem__icon--selected {
     transform: rotate(90deg)
 }
 
 .TagItem__icon--selected i {
     height: .85rem;
     width: .85rem;
     stroke-width: .1rem;
     stroke: var(--color-white)
 }
 
 .ChatBox {
     display: grid;
     position: relative;
     height: 100%;
     grid-template-rows: -webkit-min-content 1fr -webkit-max-content;
     grid-template-rows: min-content 1fr max-content;
     border-right: 1px solid var(--color-light-grey)
 }
 
 .ChatBox__chatInfo {
     display: grid;
     grid-template-rows: -webkit-min-content 1fr;
     grid-template-rows: min-content 1fr;
     background-color: var(--color-white)
 }
 
 .ChatBox__chat {
     position: relative
 }
 
 .ChatHeader {
     padding: 2rem;
     color: var(--color-dark);
     border-bottom: 1px solid var(--color-light-grey)
 }
 
 .ChatHeader,
 .ChatHeader__user {
     display: grid;
     grid-auto-flow: column;
     grid-gap: 1rem;
     gap: 1rem
 }
 
 .ChatHeader__user {
     align-items: center;
     justify-content: start
 }
 
 .ChatHeader__user__avatar {
     width: 4rem;
     height: 4rem;
     font-size: 1.2rem
 }
 
 .ChatHeader__user__info {
     min-width: 0
 }
 
 .ChatHeader__user__info p {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap
 }
 
 .ChatHeader__user__info p:first-of-type {
     margin-bottom: .8rem
 }
 
 .ChatHeader__user__info p:not(:first-of-type) {
     color: var(--color-dark-grey);
     font-size: 1.2rem
 }
 
 .ChatHeader__actions {
     display: grid;
     grid-auto-flow: column;
     grid-gap: 1rem;
     gap: 1rem;
     justify-content: end;
     align-items: center
 }
 
 .ChatHeader__actions div:hover .Tip {
     display: block;
     transition: all .2s
 }
 
 @media only screen and (min-width:320px) and (max-width:360px) {
     .ChatHeader {
         padding: 1rem
     }
     .ChatHeader__user__info--responsive {
         max-width: 6.5rem
     }
     .ChatHeader__user__info p:first-of-type {
         margin-bottom: 0
     }
 }
 
 @media only screen and (min-width:360px) and (max-width:395px) {
     .ChatHeader__user__info--responsive {
         max-width: 11.5rem
     }
 }
 
 .Transfer {
     display: grid;
     grid-gap: 1.5rem;
     gap: 1.5rem;
     grid-auto-rows: -webkit-min-content;
     grid-auto-rows: min-content;
     background-color: var(--color-white);
     margin: .5rem 0;
     min-width: 40rem
 }
 
 .Transfer>p {
     color: var(--color-dark)
 }
 
 .TransferList {
     display: grid;
     max-height: 40rem
 }
 
 .TransferList>p {
     color: var(--color-grey);
     padding-left: 1rem
 }
 
 .TransferItem {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: -webkit-max-content -webkit-min-content;
     grid-auto-columns: max-content min-content;
     justify-content: space-between;
     padding: 1rem;
     border-radius: 3px
 }
 
 .TransferItem:hover {
     cursor: pointer;
     background-color: var(--color-light-grey)
 }
 
 .TransferItem__info {
     display: flex;
     justify-content: center;
     flex-flow: column
 }
 
 .TransferItem__info p:first-of-type {
     font-size: 1.3rem;
     color: var(--color-dark);
     margin-bottom: .2rem
 }
 
 .TransferItem__info p:last-of-type {
     font-size: 1.1rem;
     color: var(--color-dark-grey)
 }
 
 .TransferItem__operador {
     min-width: 6rem;
     height: 4rem
 }

 
 .CallControls {
     width: 100%;
     display: grid;
     grid-gap: 2rem;
     gap: 2rem;
     justify-items: center;
     color: var(--color-white)
 }
 
 .CallControls__buttons {
     display: grid;
     grid-auto-flow: column;
     grid-template-columns: repeat(4, -webkit-max-content);
     grid-template-columns: repeat(4, max-content);
     grid-gap: .5rem;
     gap: .5rem;
     justify-items: center;
     align-items: center
 }
 
 .CallControls__buttons>div {
     width: 4.5rem;
     height: 4.5rem
 }
 
 .Call {
     width: 100%;
     border-radius: 3px;
     overflow: hidden
 }
 
 .Call__controls {
     position: absolute;
     display: flex;
     align-items: flex-end;
     bottom: 0;
     width: 100%;
     height: 13.8rem;
     padding-bottom: 2rem;
     background-image: linear-gradient(180deg, rgba(48, 58, 70, 0), #303a46)
 }
 
 .Call__cam {
     display: flex;
     justify-content: center;
     position: relative;
     background-color: var(--color-dark)
 }
 
 .Call__cam__video {
     width: 100%;
     height: 27.5rem
 }
 
 .Call__cam__video--off {
     background-color: #000
 }
 
 .Call__cam--mini {
     position: absolute;
     top: 2rem;
     right: 2rem;
     background-color: var(--color-dark);
     border-radius: 3px
 }
 
 .Call__cam--mini>video {
     width: 10.5rem;
     height: 8rem
 }
 
 .Call__cam--mini--off {
     background-color: #000
 }
 
 .Call__cam--mini__info {
     position: absolute;
     width: 100%;
     height: 100%;
     display: grid;
     grid-auto-flow: column;
     grid-gap: 2rem;
     gap: 2rem;
     align-items: center;
     justify-content: center
 }
 
 .Call__cam--mini__info>i {
     width: 1.8rem
 }
 
 .Call__cam--mini__info>i {
    color: var(--color-white)
 }
 
 .ChatText {
     display: flex;
     align-items: center;
     height: 100%;
     overflow-x: hidden
 }
 
 .ChatText__input {
     width: 100%;
     max-height: 14rem;
     overflow-x: hidden;
     outline: none;
     font-size: 1.1rem!important;
     font-family: Hind!important;
     color: var(--color-dark);
     overflow-wrap: break-word;
     word-wrap: break-word;
     -webkit-hyphens: auto;
     -ms-hyphens: auto;
     hyphens: auto;
     word-break: break-word;
     padding: 1rem 0 1rem 1rem;
     white-space: pre-wrap;
     resize: none;
     border: none
 }
 
 .ChatText__input--disabled {
     color: var(--color-light);
     cursor: not-allowed
 }
 
 .Attachment__label {
     display: flex;
     align-items: center;
     justify-content: center;
    /* height: 4rem;
     width: 4rem;*/
     border-radius: 50%;
     margin-bottom: auto !important;
 }
 
 .Attachment__label--disabled {
     display: none
 }
 
 .Attachment__label:hover:not(.Attachment__label--disabled) {
     cursor: pointer
 }
 
 .Attachment__label:hover:not(.Attachment__label--disabled)>i {
    color: var(--color-dark)
 }
 
 .Attachment__label>i {
    color: var(--color-primary)
 }
 
 .Attachment__input {
     opacity: 0;
     position: fixed;
     top: -10rem
 }
 
 .Send {
     display: flex;
     height: 4rem;
     width: 4rem;
     align-items: center;
     justify-content: center
 }
 
 .Send i {
     width: 2rem;
     height: 2rem;
     transform: translateX(.2rem)
 }
 
 .Send i {
    color: var(--color-primary)
 }
 
 .Send i:hover {
    color: var(--color-dark)
 }
 
 .Send:hover {
     cursor: pointer
 }
 
 .Answers {
     display: grid;
     font-size: 1.3rem;
     border-radius: 3px;
     background-color: var(--color-white);
     position: relative;
     z-index: 120
 }
 
 .Answers__answers {
     max-height: 8rem;
     overflow-y: auto; 
     overflow-x: hidden;
 }
 
 .Answers__item {
     display: grid;
     grid-template-columns: 10rem 1fr;
     align-items: center;
     grid-gap: 1rem;
     gap: 1rem;
     color: var(--color-dark);
 }
 
 .Answers__item p {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 10pt;
 }
 
 .Answers__item:hover {
     cursor: pointer;
     background-color: var(--color-grey)
 }
 
 .Answers__item span:first-child {
     color: var(--color-blue)
 }
 
 .Answers__loader {
     display: flex;
     justify-content: center
 }
 
 .Answers__loader .Spinner {
     margin: 0 1rem
 }
 
 .ActionHeader {
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: var(--color-white);
     background-color: var(--color-grey);
     padding: 1rem;
     height: 2rem;
     z-index: 10
 }
 
 .ActionHeader--invalid div:last-of-type:hover {
     cursor: not-allowed
 }
 
 .ActionHeader--clear {
     background-color: var(--color-white);
     padding: 0;
     color: var(--color-dark)
 }
 
 .Annotation {
     display: grid;
     grid-template-rows: -webkit-min-content 1fr;
     grid-template-rows: min-content 1fr;
     grid-gap: 2rem;
     gap: 2rem;
     min-height: 35vh
 }
 
 .Textarea {
     border: 2px solid var(--color-grey);
     border-radius: .8rem;
     resize: none;
     outline: none;
     padding: 1rem;
     font-family: Hind!important;
     font-weight: 700;
     color: var(--color-dark)
 }
 
 .Textarea:focus {
     border: 2px solid var(--color-primary)
 }
 
 .Textarea::-webkit-input-placeholder {
     color: var(--color-grey)
 }
 
 .Textarea:-ms-input-placeholder {
     color: var(--color-grey)
 }
 
 .Textarea::-ms-input-placeholder {
     color: var(--color-grey)
 }
 
 .Textarea::placeholder {
     color: var(--color-grey)
 }
 
 .Tags {
     display: grid;
     grid-template-rows: -webkit-min-content;
     grid-template-rows: min-content;
     background-color: var(--color-white);
     position: relative;
     z-index: 121
 }
 
 .Tags__tags {
     max-height: 20rem;
     overflow: auto
 }
 
 .Tags__selected {
     max-height: 8rem;
     overflow: auto;
     border-bottom: 1px solid var(--color-grey);
     transition: all .2s
 }
 
 .ChatButton {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 2rem;
     height: 2rem;
     border-radius: 50%;
     position: relative
 }
 
 .ChatButton:before {
     content: "";
     position: absolute;
     border-radius: 50%;
     height: .8rem;
     width: .8rem;
     top: 0;
     right: 0
 }
 
 .ChatButton i {
     height: 2rem;
     width: 2rem
 }
 
 .ChatButton--changed:before {
     background-color: var(--color-orange)
 }
 
 .ChatButton--filled:before {
     background-color: var(--color-blue)
 }
 
 .ChatButton--success:before {
     background-color: var(--color-green)
 }
 
 .ChatButton--error:before {
     background-color: var(--color-red)
 }
 
 .ChatButton--disabled {
     display: none
 }

 .ChatButton:hover:not(.ChatButton--disabled) {
     cursor: pointer
 }
 
 .ChatButton:hover:not(.ChatButton--disabled)>i {
     color: var(--color-dark)
 }
 
 .ChatButton>i {
     color: var(--color-primary)
 }
 
 .ChatInput {
     display: grid;
     grid-auto-flow: column;
     grid-template-columns: 1fr -webkit-min-content;
     grid-template-columns: 1fr min-content;
     align-items: start;
     grid-gap: 1rem;
     gap: 1rem;
     min-height: 6rem;
     padding: 0 1rem;
     border-top: .1rem solid var(--color-light-grey);
     position: relative;
     z-index: 11
 }
 
 .ChatInput__input {
     padding-top: 1rem
 }
 
 .ChatInput__actions {
     display: grid;
     grid-auto-flow: column;
     align-items: center;
     padding-top: 1rem
 }
 
 .ChatInput__emojiPicker .emoji-mart {
     position: relative;
     width: 100%!important;
     z-index: 120
 }
 
 .ChatInput input {
     border: none
 }
 
 @media (max-width:1024px) and (min-width:800px) {
     .ChatInput,
     .ChatInput .ChatInput__actions {
         display: flex;
         flex-direction: row
     }
     .ChatInput .ChatInput__actions {
         flex-wrap: wrap;
         justify-content: flex-end;
         align-items: center
     }
 }
 
 @media only screen and (max-width:800px) {
     .ChatInput__actions__emoji {
         display: none
     }
 }
 
 .ChatMail {
     display: grid;
     border-top: 1px solid var(--color-light-grey)
 }
 
 .ChatMail input {
     padding: 1rem;
     border: none;
     outline: none;
     font-size: 1.4rem;
     color: var(--color-dark)
 }
 
 .ChatMail input input::-webkit-input-placeholder {
     color: var(--color-grey)
 }
 
 .ChatMail input input:-ms-input-placeholder {
     color: var(--color-grey)
 }
 
 .ChatMail input input::-ms-input-placeholder {
     color: var(--color-grey)
 }
 
 .ChatMail input input::placeholder {
     color: var(--color-grey)
 }
 
 .ChatMail__input {
     grid-auto-flow: column;
     grid-template-columns: -webkit-min-content 1fr;
     grid-template-columns: min-content 1fr;
     align-items: center;
     padding: 1rem;
     border-bottom: 1px solid var(--color-light-grey);
     color: var(--color-dark);
     font-size: 1.4rem
 }
 
 .ChatMail .ChatEmail,
 .ChatMail__input {
     display: grid;
     background-color: var(--color-white)
 }
 
 .ChatMail .ChatEmail {
     align-items: flex-start;
     min-height: 15rem
 }
 
 .ChatMail__main {
     display: grid;
     grid-template-columns: 1fr -webkit-min-content;
     grid-template-columns: 1fr min-content;
     align-content: start;
     padding: 1rem 0;
     background-color: var(--color-white);
     cursor: text
 }
 
 .ChatMail__main--disabled .ChatEmail {
     min-height: 3rem
 }
 
 .ChatMail__actions {
     display: grid;
     padding: 0 1rem;
     grid-auto-rows: -webkit-min-content;
     grid-auto-rows: min-content;
     grid-gap: 1rem;
     gap: 1rem
 }
 
 .Attachments {
     display: flex;
     grid-auto-flow: column;
     padding: 1rem
 }
 
 @media only screen and (max-width:800px) {
     .ChatMail__input {
         padding: 0 1rem
     }
     .ChatMail__main {
         padding: 0
     }
     .ChatMail__actions {
         grid-gap: 0;
         gap: 0;
         padding: 0
     }
     .ChatMail .ChatEmail {
         min-height: 12rem
     }
     .Attachments {
         padding: 0 1rem
     }
 }
 
 .ChatEmail {
     display: flex;
     align-items: center
 }
 
 .ChatEmail,
 .ChatEmail__input {
     height: 100%;
     overflow-x: hidden
 }
 
 .ChatEmail__input {
     width: 100%;
     max-height: 14rem;
     outline: none;
     font-size: 1.4rem;
     color: var(--color-dark);
     overflow-wrap: break-word;
     word-wrap: break-word;
     -webkit-hyphens: auto;
     -ms-hyphens: auto;
     hyphens: auto;
     word-break: break-word;
     padding: 1rem;
     white-space: pre-wrap;
     border: none;
     resize: none;
     font-family: Hind!important;
     font-weight: 500!important
 }
 
 .ChatEmail__input:hover:not(.ChatEmail__input--disabled) {
     cursor: text
 }
 
 .ChatEmail__input:empty:before {
     content: attr(placeholder);
     color: var(--color-grey);
     display: block
 }
 
 .Attachment {
     display: grid;
     grid-auto-flow: column;
     background-color: var(--color-dark);
     font-size: 1.3rem;
     border-radius: .5rem;
     color: var(--color-white);
     margin-right: 1rem;
     overflow: hidden;
     font-weight: 600
 }
 
 .Attachment a {
     text-decoration: none;
     color: var(--color-white);
     padding: 1rem
 }
 
 .Attachment div:last-of-type {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 3rem;
     background-color: var(--color-dark);
     outline: none
 }
 
 .Attachment:hover {
     cursor: pointer
 }
 
 .Attachment i {
     height: 1rem;
     width: 1rem
 }
 
 .Attachment i  {
     color: var(--color-white);
     stroke: var(--color-white)
 }
 
 .ChatProtocol {
     grid-template-columns: 1fr -webkit-min-content;
     grid-template-columns: 1fr min-content;
     width: 100%;
     height: 4.5rem;
     padding: 0 2rem;
     border-bottom: .1rem solid var(--color-light-grey)
 }
 
 .ChatProtocol,
 .ChatProtocol__department {
     display: grid;
     grid-auto-flow: column;
     align-items: center
 }
 
 .ChatProtocol__department {
     justify-content: start;
     grid-gap: 1rem;
     gap: 1rem;
     font-size: 1.1rem;
     color: var(--color-dark-grey)
 }
 
 .ChatProtocol__department>i {
     height: 2rem;
     width: 2rem
 }
 
 .ChatProtocol__department>i {
     color: var(--color-dark)
 }
 
 .NavBar {
     display: grid;
     grid-auto-flow: column;
     align-content: center;
     justify-content: space-between;
     background-color: var(--color-white);
     z-index: 101;
     border-bottom: 2px solid var(--color-light)
 }
 
 .NavBar>.Logo {
     display: none
 }
 
 .NavBar__agentActions {
     display: grid;
     grid-gap: 1rem;
     gap: 1rem
 }
 
 .NavBar__user {
     display: grid;
     grid-auto-flow: column;
     align-items: center;
    /* padding: 1rem 0 1rem 1rem;*/
     cursor: pointer
 }
 
 .NavBar__user__info {
     display: grid;
     align-items: center;
     text-transform: uppercase;
     padding: 0 0 0 1rem;
     color: var(--color-dark-grey)
 }
 
 .NavBar__user__info>p:last-of-type {
     font-weight: 700
 }
 
 .NavBar__user .AvatarName {
     width: 2rem;
     height: 2rem
 }
 
 .NavBar__user .AvatarName:before {
     border: 2px solid var(--color-white)
 }
 
 .NavBar__user:hover {
     background-color: var(--color-light)
 }
 
 .NavBar__user:hover .NavbarDropDown {
     display: flex;
     flex-flow: column
 }
 
 .NavBar__actions {
     display: grid;
     grid-auto-flow: column;
     grid-gap: 1.5rem;
     gap: 1.5rem;
     position: relative
 }
 
 .NavBar__actions span {
     font-size: 1.4rem
 }
 
 .NavBar__actions div:nth-child(4)>i {
     transform: translateX(.38rem)
 }
 
 .NavBar__options {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 4rem;
     height: 4rem;
     cursor: pointer;
     outline: none;
     border-radius: 50%;
     transition: all .2s
 }
 
 .NavBar__options  {
     color: var(--color-primary)!important
 }
 
 .NavBar__options i {
     width: 1.4rem
 }
 
 .NavBar__dialButton {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 1rem;
     height: 1rem;
     outline: none;
     cursor: not-allowed
 }
 
 .NavBar__dialButton  {
     color: var(--color-grey)!important
 }
 
 .NavBar__dialButton--active {
     cursor: pointer
 }
 
 .NavBar__dialButton--active  {
     color: var(--color-blue)!important
 }
 
 .NavBar__navigation {
     display: grid;
     grid-auto-flow: column
 }
 
 .NavBar__navigation__wrapper {
     display: grid
 }
 
 .NavBar__navigation__wrapper .Backdrop {
     display: none
 }
 
 .NavBar__navigation__icon {
     display: none;
     justify-content: center;
     height: 100%;
     padding: 1rem;
     cursor: pointer;
     outline: none
 }
 
 .NavBar__navigation__icon i {
     height: 2.5rem;
     width: 2.5rem
 }
 
 @media only screen and (max-width:800px) {
     .NavBar {
         grid-auto-columns: 1fr
     }
     .NavBar>.Logo {
         display: grid
     }
     .NavBar>.Logo>.Logo>img {
         height: 2.5rem
     }
     .NavBar__navigation,
     .NavBar__navigation .Logo,
     .NavBar__navigation .NavBarItem {
         display: none
     }
     .NavBar__navigation__icon {
         display: flex
     }
     .NavBar__navigation__wrapper {
         justify-content: flex-start;
         align-self: center
     }
     .NavBar .NavBar__user__info {
         display: none
     }
     .NavBar .NavBar--responsiveMenu {
         border: none
     }
     .NavBar .NavBar--responsiveMenu .NavBarItem {
         display: flex
     }
     .NavBar .NavBar--responsiveMenu .NavBar__navigation {
         display: flex;
         flex-flow: column;
         position: absolute;
         width: 100%;
         top: 6rem;
         background-color: var(--color-white);
         border-bottom: 2px solid var(--color-light);
         z-index: 110!important
     }
     .NavBar .NavBar .Backdrop {
         display: block
     }
     .NavBar__actions {
         justify-content: flex-end
     }
     .NavBarItem {
         justify-content: flex-start!important;
         padding-left: 1.5rem!important;
         font-weight: 600!important
     }
 }
 
 .Logo {
     display: grid;
     grid-auto-flow: column;
     align-items: center;
     justify-content: start;
     grid-gap: .8rem;
     gap: .8rem;
     padding: 0 1rem;
 }
 
 .Logo>img {
     height: 3rem
 }
 
 .NavBarItem {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: .8rem 1.2rem;
     cursor: pointer;
     outline: none;
     color: var(--color-dark);
     position: relative;
     font-weight: 400
 }
 
 .NavBarItem--active {
     color: var(--color-primary)
 }
 
 .NavBarItem--active,
 .NavBarItem:hover {
     background-color: var(--color-light)
 }
 
 .NavBarItem>p {
     display: grid;
     grid-auto-flow: column;
     align-items: center;
     grid-gap: .5rem;
     gap: .5rem
 }
 
 .NavBarItem__counter {
     display: flex;
     justify-content: center;
     align-items: center;
     right: 0;
     width: 1.4rem;
     height: 1.4rem;
     border-radius: 50%;
     font-size: .38rem;
     color: var(--color-white);
     background: var(--color-red)
 }
 
 .CallControl {
     display: grid;
     background-color: var(--color-white);
     border-radius: .5rem;
     margin-top: 2rem;
     grid-gap: 2rem;
     gap: 2rem;
     transition: all .2s;
     z-index: 110
 }
 
 .CallControl p {
     text-align: center
 }
 
 .CallControl__dial {
     display: grid;
     grid-gap: 1rem;
     gap: 1rem
 }
 
 .CallControl__dial__delete {
     cursor: pointer
 }
 
 .CallControl__dial__input {
     display: grid;
     grid-template-columns: 1fr -webkit-min-content;
     grid-template-columns: 1fr min-content;
     grid-gap: 1rem;
     gap: 1rem;
     border-bottom: 1px solid var(--color-dark);
     padding: 0 1rem 0 2rem;
     align-items: center
 }
 
 .CallControl__dial__input input {
     font-size: 2.6rem!important;
     padding: 1rem 0;
     font-weight: 600
 }
 
 .CallControl__dial__input>input {
     background-color: transparent;
     width: 100%;
     border: none;
     outline: none;
     color: var(--color-dark);
     font-size: 2rem
 }
 
 .CallControl__dial__input i {
     width: 2.2rem
 }
 
 .CallControl__dial__input i:hover {
     transition: all .2s;
     transform: scale(1.1)
 }
 
 .CallControl__dial__input i {
     color: var(--color-white)
 }

 
 .CallControl__actions {
     display: grid;
     grid-auto-flow: column;
     justify-content: space-around
 }
 
 .CallControl__action {
     display: flex;
     justify-content: center;
     align-items: center;
     outline: none;
     cursor: pointer;
     transition: all .2s
 }
 
 .CallControl__action:hover {
     transform: scale(1.1);
     transition: all .2s
 }
 
 .CallControl__action i {
     width: 4.5rem;
     height: 4.5rem
 }
 
 .CallControl__action__call {
     color: var(--color-grey)!important
 }
 
 .CallControl__action__call--active {
     color: var(--color-green)!important
 }
 
 .CallControl__action__finish {
     color: var(--color-red)!important
 }
 
 .CallControl__action__addToConf {
     background-color: var(--color-dark);
     border-radius: 50%;
     width: 4.5rem;
     height: 4.5rem
 }
 
 .CallControl__action__addToConf--active {
     background-color: var(--color-dark)!important
 }
 
 .CallControl__action__conference i>g>circle {
     color: var(--color-grey)
 }
 
 .CallControl__action__conference--active i>g>circle {
     color: var(--color-green)
 }
 
 .Dial {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 1rem;
     gap: 1rem;
     justify-items: center
 }
 
 .Dial__button {
     display: flex;
     flex-flow: column;
     align-items: center;
     justify-content: center;
     color: var(--color-dark);
     width: 100%;
     height: 5rem;
     border-radius: .5rem;
     outline: none;
     transition: all .2s;
     font-weight: 700
 }
 
 .Dial__button:hover {
     cursor: pointer;
     transition: all .2s;
     transform: scale(1.1)
 }
 
 .Dial__button span:first-of-type {
     font-size: 2rem
 }
 
 .Dial__button span:last-of-type {
     font-size: 1rem;
     color: var(--color-dark)
 }
 
 .EditAgent {
     display: grid;
     justify-items: center;
     grid-gap: 2rem;
     gap: 2rem
 }
 
 .EditAgent .Button {
     width: 100%
 }
 
 .EditAgent__user {
     display: grid;
     grid-gap: 1rem;
     gap: 1rem;
     justify-items: center
 }
 
 .EditAgent__user .AvatarName {
     width: 10rem;
     height: 10rem
 }
 
 .EditAgent__user__info {
     text-align: center
 }
 
 .EditAgent__user__info p:last-of-type {
     color: var(--color-primary);
     text-transform: uppercase
 }
 
 .EditAgent__password {
     display: grid;
     grid-gap: 1rem;
     gap: 1rem
 }
 
 .EditAgent__avatar {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 10rem;
     width: 10rem
 }
 
 @media only screen and (max-width:800px) {
     .EditAgent {
         height: 100%;
         align-content: space-between;
         padding: 5rem 2rem 2rem
     }
 }
 
 .UpdateAvatar {
     position: relative
 }
 
 .UpdateAvatar .IconButton {
     height: 2.5rem;
     width: 2.5rem
 }
 
 .UpdateAvatar .IconButton i {
     height: 1.5rem;
     width: 1.5rem
 }
 
 .UpdateAvatar__add {
     cursor: pointer
 }
 
 .UpdateAvatar__add input {
     display: none
 }
 
 .UpdateAvatar__icon {
     position: absolute;
     bottom: .4rem;
     right: .4rem
 }
 .pausa{
     font-size: 35pt;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative
 }
 .pausa_time_red{
     color:red;
 }
 .NavbarDropDown {
     position: absolute!important;
     background-color: var(--color-white);
     right: 0;
     top: 3.5rem;
     box-shadow: var(--shadow);
     border-radius: .8rem;
     z-index: 110;
     transition: all .2s;
     width: 23rem;
     display: none
 }
 
 .NavbarDropDown .LanguageChooser {
     padding: 1rem 0;
     justify-content: space-around
 }
 
 .NavbarDropDown .Button {
     width: 90%
 }
 
 .NavbarDropDown .DropDownItem:first-of-type  {
     color: var(--color-dark-grey)!important;
 }
 
 .DropDownItem {
     display: grid;
     grid-template-columns: 1fr -webkit-min-content;
     grid-template-columns: 1fr min-content;
     grid-gap: 2rem;
     gap: 2rem;
     font-size: 1rem;
     align-items: center;
     color: var(--color-dark);
     padding: .7rem 1rem;
     font-weight: 400;
     width: 100%;
     overflow: hidden;
     outline: none
 }
 
 .DropDownItem:hover {
     background-color: var(--color-light)
 }
 
 .DropDownItem-offline  {
     color: var(--color-dark-grey)!important
 }
 .DropDownItem-online  {
    color: var(--color-dark-green)!important
}
 
 .DropDownItem i {
     max-width: 2rem;
     max-height: 1.8rem
 }
 
 .Switch {
     outline: none
 }
 
 .Switch__label {
     cursor: pointer;
     text-indent: -9999rem;
     width: 4rem;
     height: 2.4rem;
     background: var(--color-dark-grey);
     display: block;
     border-radius: 1.25rem;
     position: relative;
     padding: .7rem
 }
 
 .Switch__label:after {
     content: "";
     position: absolute;
     display: flex;
     align-items: center;
     top: .4rem;
     left: .5rem;
     width: 1.6rem;
     height: 1.6rem;
     background: var(--color-white);
     border-radius: 1.12rem;
     transition: .3s
 }
 
 .Switch--active .Switch__label {
     background: var(--color-green)
 }
 
 .Switch--active .Switch__label:after {
     left: calc(97% - .4rem);
     transform: translate(-98%)
 }
 
 .LanguageChooser {
     display: flex
 }
 
 .InitialLoader {
     display: grid;
     grid-auto-flow: column;
     align-items: center;
     justify-content: center;
     grid-gap: 2rem;
     gap: 2rem;
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0
 }
 
 .InitialLoader i:first-of-type {
     height: 8rem;
     width: 8rem
 }
 
 .InitialLoader  {
     color: var(--color-white)
 }
 
 .InitialLoader__image {
     height: 20rem;
     width: 20rem;
     -webkit-animation: expanding 2s infinite;
     animation: expanding 2s infinite
 }
 
 .ErrorBoundary {
     display: grid;
     align-content: center;
     justify-items: center;
     grid-gap: 5rem;
     gap: 5rem;
     width: 100vw;
     height: 100vh;
     color: #ddd;
     background-color: #fafafa
 }
 
 .ErrorBoundary>button {
     background-color: #666;
     padding: 2rem;
     border-radius: .5rem;
     color: #fff;
     font-size: 1.5rem;
     font-family: Montserrat;
     font-weight: 500;
     transition: all .2s;
     outline: none;
     border: none
 }
 
 .ErrorBoundary>button:hover {
     transform: scale(1.01);
     transition: all .2s;
     cursor: pointer
 }
 
 .ErrorBoundary__image {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 20rem;
     width: 20rem;
     background-color: #ddd;
     border-radius: 50%
 }
 
 .ErrorBoundary__image i {
     width: 15rem;
     height: 15rem
 }
 
 .ErrorBoundary__image  {
     color: #fff
 }
 
 .Login {
     width: 100vw;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative
 }
 
 .Login .Logo {
     padding-left: 0
 }
 
 .Login__box {
     display: grid;
     border-radius: .5rem;
     padding: 3rem 2.5rem;
     background-color: var(--color-white);
     z-index: 100;
     grid-gap: 2rem;
     gap: 2rem
 }
 
 .Login__header {
     display: grid;
     grid-auto-flow: column;
     justify-content: space-between;
     grid-auto-rows: -webkit-min-content;
     grid-auto-rows: min-content
 }
 
 .Login__image {
     display: grid;
     width: 10rem;
     height: 10rem;
     justify-self: center;
     align-items: center;
     justify-content: center;
     background-color: var(--color-grey);
     border-radius: 50%;
     display: none
 }
 
 .Login__image i {
     height: 5rem;
     width: 5rem
 }
 
 .Login__image  {
     color: var(--color-white)
 }
 
 .Login__welcome {
     display: grid;
     align-content: end;
     grid-gap: 1.5rem;
     gap: 1.5rem;
     color: var(--color-dark)
 }

 .Login__welcome p:last-of-type {
     color: var(--color-dark)
 }
 
 .Login__form {
     display: grid;
     grid-auto-rows: -webkit-min-content;
     grid-auto-rows: min-content;
     align-content: end;
     grid-gap: 1.5rem;
     gap: 1.5rem
 }
 
 .Login__form .Button {
     width: 100%
 }
 
 .Login__form__error {
     color: var(--color-red);
     font-size: 1.2rem;
     height: 2rem
 }
 
 .Login__form>button:last-of-type {
     display: flex;
     justify-self: right;
     width: auto
 }
 
 .Login--color .Button:first-of-type {
     background-color: var(--color-primary)
 }
 
 @media only screen and (max-width:800px) {
     .Login__box {
         width: 100%;
         height: 100%;
         border-radius: none;
         padding: 6rem 2rem
     }
 }
 
 .ReceptiveCallModal {
     display: grid;
     grid-template-rows: 26rem 1fr;
     padding: 0
 }
 
 .ReceptiveCallModal__user {
     display: flex;
     flex-flow: column;
     justify-content: space-between;
     align-items: center;
     background-color: var(--color-light-grey);
     color: var(--color-dark);
     font-weight: 600;
     padding: 5rem 0 2rem
 }
 
 .ReceptiveCallModal__user .AvatarName {
     height: 13rem;
     width: 13rem;
     -webkit-animation: expanding 2s infinite;
     animation: expanding 2s infinite
 }
 
 .ReceptiveCallModal__call {
     background-color: var(--color-white);
     display: grid;
     grid-gap: 1.5rem;
     gap: 1.5rem;
     padding: 2rem;
     color: var(--color-dark-grey);
     text-align: center
 }
 
 .ReceptiveCallModal__call__actions {
     display: grid;
     grid-auto-flow: column;
     justify-content: center;
     grid-gap: 4rem;
     gap: 4rem
 }
 
 .ReceptiveCallModal__call__actions__item {
     display: grid;
     grid-gap: 1rem;
     gap: 1rem;
     justify-items: center;
     color: var(--color-dark-grey)
 }
 
 .ReceptiveCallModal__call__actions__item .IconButton {
     width: 5.7rem;
     height: 5.7rem
 }
 
 .ActiveInteractionsModal {
     display: grid;
     align-items: center;
     grid-auto-rows: 1fr;
     font-size: 1.6rem;
     padding: 0
 }
 
 .ActiveInteractionsModal__info {
     padding: 1.5rem;
     display: flex;
     flex-flow: column;
     justify-content: space-around;
     align-items: center;
     background-color: var(--color-light-grey);
     height: 23rem;
     color: var(--color-dark);
     font-weight: 600
 }
 
 .ActiveInteractionsModal__info i {
     height: 12rem;
     width: 12rem;
     -webkit-animation: expanding 2s infinite;
     animation: expanding 2s infinite
 }
 
 .ActiveInteractionsModal__loader {
     display: grid;
     grid-gap: 2rem;
     gap: 2rem;
     height: 100%;
     justify-content: space-around;
     align-items: center;
     color: var(--color-dark-grey);
     font-weight: 600;
     padding: 1.5rem
 }
 
 .ActiveInteractionsModal__loader .Button {
     width: 100%
 }
 
 @-webkit-keyframes expanding {
     0% {
         transform: scale(1.05)
     }
     50% {
         transform: scale(1)
     }
     to {
         transform: scale(1.05)
     }
 }
 
 @keyframes expanding {
     0% {
         transform: scale(1.05)
     }
     50% {
         transform: scale(1)
     }
     to {
         transform: scale(1.05)
     }
 }
 
 @media only screen and (max-width:800px) {
     .ActiveInteractionsModal {
         width: auto;
         height: auto;
         grid-template-rows: 1fr -webkit-min-content;
         grid-template-rows: 1fr min-content
     }
 }
 
 .AddCustomer {
     display: grid;
     grid-gap: 3rem;
     gap: 3rem;
     position: relative
 }
 
 .AddCustomer__info {
     display: grid;
     grid-gap: 1rem;
     gap: 1rem;
     color: var(--color-grey)
 }
 
 .AddCustomer__info__info>p:first-of-type {
     color: var(--color-dark);
     font-weight: 500
 }
 
 .AddCustomer i {
     height: 1.5rem;
     width: 1.5rem
 }
 
 .AddCustomer__form {
     display: grid;
     grid-gap: 1.2rem;
     gap: 1.2rem;
     font-size: 1rem;
     max-height: 45rem;
     overflow-y: auto
 }
 
 .AddCustomer__form .Button {
     width: 100%
 }
 
 .AddCustomer__form__item {
     display: grid;
     grid-template-columns: 1fr -webkit-min-content;
     grid-template-columns: 1fr min-content
 }
 
 .AddCustomer__form__item i {
     height: 2rem;
     width: 2rem
 }
 
 .AddCustomer__form__item .IconButton {
     margin-left: 1rem;
     margin-right: .1rem;
     transform: translateY(3rem)
 }
 
 @media only screen and (max-width:800px) {
     .AddCustomer {
         width: 100%
     }
 }
 
 .EditCustomer {
     display: grid;
     grid-gap: 3rem;
     gap: 3rem;
     position: relative
 }
 
 .EditCustomer__info {
     display: grid;
     grid-gap: 1rem;
     gap: 1rem;
     color: var(--color-grey)
 }
 
 .EditCustomer__info>p:first-of-type {
     color: var(--color-dark);
     font-weight: 500
 }
 
 .EditCustomer__form {
     display: grid;
     grid-gap: 1.2rem;
     gap: 1.2rem;
     font-size: 1rem;
     max-height: 45rem;
     overflow-y: auto
 }
 
 .EditCustomer__form .Button {
     width: 100%
 }
 
 .EditCustomer__form__item {
     display: grid;
     grid-template-columns: 1fr -webkit-min-content;
     grid-template-columns: 1fr min-content
 }
 
 .EditCustomer__form__item i {
     height: 2rem;
     width: 2rem
 }
 
 .EditCustomer__form__item .IconButton {
     margin-left: 1rem;
     margin-right: .1rem;
     transform: translateY(3rem)
 }
 
 @media only screen and (max-width:800px) {
     .EditCustomer {
         width: 100%
     }
 }
 
 .TaskNotification {
     display: grid;
     grid-gap: 3rem;
     gap: 3rem;
     align-items: center;
     justify-content: space-between;
     position: fixed;
     right: 3rem;
     bottom: 3rem;
     z-index: 300;
     box-shadow: var(--shadow-light);
     background: var(--color-orange-1);
     border: 1px solid var(--color-orange-dark-1);
     border-left-width: 5px;
     border-radius: .5rem;
     overflow: hidden;
     padding: 2rem
 }
 
 .TaskNotification__header {
     display: flex;
     justify-content: space-between;
     color: var(--color-dark);
     height: 2.5rem
 }
 
 .TaskNotification__header>p {
     align-self: flex-end
 }
 
 .TaskNotification__header>.IconButton {
     width: auto;
     height: auto;
     align-self: flex-start;
     transform: translate(.8rem, -.8rem)
 }
 
 .TaskNotification__header>.IconButton i {
     height: 1.2rem;
     width: 1.2rem;
     color: var(--color-dark);
 }
 
 .TaskNotification__actions {
     display: grid;
     grid-auto-flow: column;
     grid-gap: 3rem;
     gap: 3rem
 }
 
 .TaskNotification .Button {
     width: -webkit-max-content;
     width: -moz-max-content;
     width: max-content;
     min-width: auto;
     background-color: transparent;
     color: var(--color-orange-dark-2);
     padding: 0
 }
 
 .Notifications {
     display: grid;
     grid-gap: 1rem;
     gap: 1rem;
     position: fixed;
     top: 7rem;
     right: 6.4rem;
     z-index: 120
 }
 
 @media only screen and (max-width:800px) {
     .Notifications {
         left: 50%;
         transform: translateX(-50%);
         right: auto
     }
 }
 
 .Notification {
     display: grid;
     grid-gap: 2rem;
     gap: 2rem;
     grid-auto-flow: column;
     grid-auto-columns: -webkit-max-content;
     grid-auto-columns: max-content;
     align-items: center;
     min-width: 30rem;
     position: relative
 }
 
 .Notification__icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 3.7rem;
     height: 3.7rem;
     border-radius: 50%
 }
 
 .Notification__icon--success {
     background-color: var(--color-green)
 }
 
 .Notification__icon--warning {
     background-color: var(--color-orange)
 }
 
 .Notification__icon--error {
     background-color: var(--color-red)
 }
 
 .Notification__icon i {
     height: 2rem;
     width: 2rem;
     color: var(--color-white);
 }
 
 .Notification__close {
     position: absolute;
     top: 0;
     right: 0;
     width: 1.2rem;
     height: 1.2rem;
     cursor: pointer
 }
 
 .Notification__close__close i {
     width: 100%;
     height: 100%
 }
 
 .Notification__content {
     color: var(--color-dark-grey)
 }
 
 .Notification__content p:first-of-type {
     font-weight: 600;
     color: var(--color-dark)
 }
 
 @media only screen and (max-width:800px) {
     .Notification {
         padding: 1rem;
         border-radius: .8rem;
         min-width: auto
     }
     .Notification__content--responsive {
         word-wrap: break-word;
         word-break: break-all
     }
 }
 
 @media only screen and (max-width:400px) {
     .Notification__content {
         max-width: 20rem
     }
 }
 
 @media only screen and (max-width:330px) {
     .Notification__content {
         max-width: 16rem
     }
 }
 .chat_c{
    background: #007bff;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 18px;
    align-items: center;
    display: flex;
    justify-content: center;
 }
 .whatsapp_c {
     background: #25d366;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     font-size: 18px;
     align-items: center;
     display: flex;
     justify-content: center;
 }
 
 .fa-white {
     color: #fff;
 }
 
 :root {
     --color-blue: #0096dc;
     --color-light-blue: #0096dc1a;
     --color-green: #6eb419;
     --color-light-green: #e2f0d1;
     --color-orange: #eb6400;
     --color-light-orange: #fbe0cc;
     --color-red: #b72126;
     --color-light-red: #f1d3d4;
     --color-white: #ffffff;
     --color-light: #fafafa;
     --color-light-grey: #e6ebf1;
     --color-light-grey-1: #f7f7f7;
     --color-grey: #cad5e3;
     --color-dark-grey: #706c6d;
     --color-dark: #231f20;
     --backdropColor: rgba(10, 10, 10, 0.6);
     --shadow: 0 16px 72px rgba(0, 0, 0, 0.12);
     --shadow-notification: 0 0 2rem rgba(0, 0, 0, 0.08);
     --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
     --color-primary: #7d1e78;
 }

.toast {
    transition: 0.32s all ease-in-out
}

.toast-container--fade {
    right: 0;
    bottom: 0
}

.toast-container--fade .toast-wrapper {
    display: inline-block
}

.toast.fade-init {
    opacity: 0
}

.toast.fade-show {
    opacity: 1
}

.toast.fade-hide {
    opacity: 0
}
.invalid-tooltip {
     position: relative !important;
}
.image_modal{
    border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
.image_modal:hover {opacity: 0.7;}

/* The Modal (background) */
.modal_image {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0 0 0 / 80%); /* Black w/ opacity */
  }
  
  /* Modal Content (Image) */
  .modal_image-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
  }
  
  /* Caption of Modal Image (Image Text) - Same Width as the Image */
  #caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
  }
  
  /* Add Animation - Zoom in the Modal */
  .modal_image-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
  }
  
  @keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
  }
  
  /* The Close Button */
  .image_close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  
  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
    .modal_image-content {
      width: 100%;
    }
  }