.integrated-chat {
    --verde-claro: #51c878;
    --verde-escurecido: #00a65a;
    --preto-claro: #787878;
    --preto: #444;
    --branco: #FFF;
    --cinza-borda: #e6e6e6;
    --cinza-texto: #999;
}

#btn-chat {
    cursor: pointer;
    margin: 0px !important;
    min-width: 47px;
}
#btn-chat:disabled {
    color: #9a9a9a;
    cursor: not-allowed;
}
.label-chat-notifications {
    font-size: 9px;
    position: relative;
    bottom: 15px;
    right: 10px;
    cursor: pointer;
}

.direct-chat {
    overflow-y: auto;
    float: right;
    height: calc(100vh - 70px);
    margin-top: 50px; /* margin para respeitar o header */
    margin-bottom: 20px; /* margin para respeitar o footer */
    box-shadow: 0 0 13px 0 rgb(62 44 90 / 8%);
    width: 20%;
    border-left: solid 2px var(--cinza-borda);
    border-bottom: 2px solid var(--verde-escurecido);
}
.direct-chat .box-header {
    height: 40px;
    padding: 0px;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid var(--cinza-borda);
}

.btn-chat-header {
    padding: 0 7px;
    width: auto;
    height: 100%;
    border: none;
    background: none;
    font-size: 20px;
}
.btn-chat-header:hover {
    color: #444444d1;
}
.container-header-chat {
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.container-btn-return-chat{
    width: 10%;
}
.container-title-chat {
    width: 65%;
    padding-left: 5px;
}
.container-title-conversation {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
}
.title-conversation {
    width: 100%;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
}
.container-tools-chat {
    width: 25%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    padding-right: 10px;
}

.direct-chat .box-header .box-tools button {
    border-bottom: 2px solid transparent;
}
.direct-chat .box-body {
    height: calc(100% - 100px);
}
.direct-chat .box-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    border-radius: 0px;
    padding: 0;
}
#chat-messages-container, .direct-chat-contacts{
    transition-duration: 0.2s;
    height: 100%;
}
.another-msg-same-contact {
    margin-top: 2px;
}
.another-msg-same-contact:after, .another-msg-same-contact:before {
    border: 0;
}
.center-console-message {
    position: relative;
    margin: 20px 10px;
}

.center-console-message .direct-chat-text::after, .center-console-message .direct-chat-text::before { 
    border: 0!important;
}

.direct-chat-text {
    box-shadow: 0px 1px 9px -5px;
    word-wrap: break-word;
    padding-bottom: 15px;
    margin: 1px 0 0 45px;
    box-shadow: 0px 1px 9px -5px; 
    border: 1px solid #d2d6de00;
}
.right .direct-chat-text {
    margin: 1px 45px 0 0;
}
.direct-chat-timestamp {
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    color: var(--preto);
    position: absolute;
    right: 10px;
    bottom: 0px;
}
.right .direct-chat-timestamp {
    color: var(--branco);
}
.messages-user-container .direct-chat-text:only-child {
    border-radius: 16px !important;
}
.messages-user-container .direct-chat-text:first-child {
    border-radius: 16px 16px 5px 5px;
}
.messages-user-container .direct-chat-text:last-child {
    border-radius: 5px 5px 20px 20px;
}
.message-received:after, .message-received:before {
    border-right-color: var(--branco)!important;
}

.send-message-container {
    background-color: #f3f0f3;
    display: flex;
    border: none;
}
#btn-send-message {
    height: 34px;
    padding: 5px 21px 5px 12px;
    width: 25%;
    border-radius: 0 20px 20px 0;
}
#input-send-message {
    border-radius: 20px 0 0 20px;
}

.container-contacts-chat {
    width: 30px
}
.btn-contacts-chat {
    width: 30px;
    height: 100%;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    font-size: 20px;
    color: var(--preto);
}
.btn-contacts-chat:hover{
    color: #5a5858;
    transition: all .2s ease-in-out;
}
.email-conversation {
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    color: var(--cinza-texto);
}
.title-chat {
    font-size: 22px!important;
    font-weight: 500;
}

.direct-chat-contacts {
    background-color:var(--branco);
}

.input-group-chat {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0px 10px;
    align-items: center;
    justify-content: flex-end;
    align-content: center;
    flex-wrap: nowrap;
    position: relative;
}
.search-icon-container {
    color: rgb(218 213 213);
    padding-right: 6px;
    border-right: 2px solid rgb(229, 229, 229);
    bottom: 18px;
    left: 24px;
    display: inline-block;
    position: absolute;
}
#contacts-filter-input {
    padding-left: 45px;border-radius: 20px;
}
.chat-contacts-img {
    color: var(--preto) ;
}
.contacts-list-name{
    color: var(--preto-claro);
    font-weight: 600;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.chat-contacts-img {
    padding: 4px 0 !important;
    position: absolute !important;
    font-size: 35px;
    color: var(--preto);
}
.li-contacts {
    transition: box-shadow .2s ease-in-out;
    padding: 10px 5px !important;
    cursor: pointer;
    margin: 0 !important;
    display: flex;
}
.li-contacts:hover {
    box-shadow: inset 1px -1px 12px 8px rgba(68,68,68,0.1);
}
.container-contact {
    display: flex;
    width: 100%;
    max-width: 100%;
}
.container-img-contact {
    display: flex;
    width: 15%;
    min-width: 15%;
    justify-content: center;
}
.container-infos-contact {
    padding-left: 5px;
    width: 65%;
    min-width: 65%
}
.container-contact-identifier {
    line-height: 1;
    font-size: 13px;
}
.contact-code {
    color: var(--preto-claro);
    font-size: 11px;
}
.contact-list-name {
    color: var(--preto) !important;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.contact-list-msg {
    font-size: 11px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.container-activity-contact {
    display: flex;
    flex-wrap: wrap;
    width: 20%;
    min-width: 20%;
}
.container-activity-notification, .container-activity-date {
    display: flex;
    align-content: flex-end;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    height: 50%;
    width: 100%;
}
.contacts-list-date {
    color: var(--cinza-texto);
    font-size: 11px;
}

.circle-notification {
    display: none;
    background: var(--verde-claro);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
}
.circle-notification-contacts-li {
    display: inline-block;
    background: var(--verde-claro);
    width: 17px;
    height: 17px;
    border-radius: 50%;
    position: unset;
}
.circle-notification-btn-chat {
    font-size: 13px;
    padding: 2px;
    top: 8px;
    margin-left: 16px;
    width: auto;
    height: auto;
    min-width: 21px;
    text-align: center;
    min-height: 21px;
    color: var(--branco);
    background-color: #00a65a !important;
    border: 1px solid var(--branco);
    line-height: 1;
}

.contacts-list-msg {
    color: var(--cinza-texto);
    text-transform: capitalize;
    font-size: 11px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.box-alerts-chat {
    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    transition: all .5s ease-in-out;
    height: 0;
    overflow: hidden;
}
.chat-alerts {
    font-weight: 600;
    text-align: center;
    border-radius: 0 0 5px 5px;
    width: 100%;
    cursor: pointer;
}
.chat-warn {
    color: #856404;
    background-color: #FFCC3E!important;
}
.chat-error {
    color: #721c24;
    background-color: #FF3E6C!important;
}
.chat-success {
    color: #155724;
    background-color: #34CD86!important;
}

.direct-chat-messages {
    background-color: #f3f0f3;
}
.text-message-console {
    margin: 0px;
}

.direct-chat-img-icon-message {
    cursor: default;
    text-align: center;
    position: relative;
    top: 5px;
    right: -1px;
}
.direct-chat-name {
    font-size: 11px;
}
.direct-chat-name.pull-right {
    margin-right: 9px !important;
}
.direct-chat-info .clearfix {
    margin: 0;
}
.message-received {
    background-color: var(--branco)
}
.direct-chat-success .right .direct-chat-text {
    background: var(--verde-claro);
    border-color: var(--verde-claro);
    color: var(--branco);
}
.direct-chat-success .right .direct-chat-text:after, .direct-chat-success .right .direct-chat-text:before {
    border-left-color: var(--verde-claro);
}

.icon-img-notification {
    position: absolute;
    left: 0px;
    top: 12px;
}
.container-message-info {
    line-height: 1.2;
    margin-left: 0px;
}
.group-name-notification {
    color: var(--branco);
    font-weight: 600;
    width: 100%;
    display: block;
}
.message-info-notification {
    color: var(--preto);
    font-size: 13px
}
.sender-name-notification {
    vertical-align: bottom;
    font-weight: 600;
    margin-right: 5px;
    max-width: 45%;
    display: inline-block;
}
.message-received-notification {
    vertical-align: bottom;
    width: calc(55% - 8px);
    display: inline-block;
}
.overflow-hidden-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.div-absolute-centralizer {
    height: 100%;
    width: 100%;
    display: flex;
    position: absolute;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.contacts-empty {
    color: var(--cinza-texto);
    font-weight: 600;
}
.contacts-empty-text {
    text-align: justify;
    font-size: 14px;
}
.span-clique-aqui {
    font-size: 14px;
    font-weight: 600;
    height: inherit!important;
    width: inherit!important;
    border: 1px solid #00000012;
    border-radius: 8px;
    padding: 5px 20px;
    cursor: pointer;
}

.container-chat-spinner {
    background-color: #f1f1f1eb;
    top: 0;
}
.chat-message-for-spinner {
    font-size: 16px;
    text-align: center;
    width: 100%;
    font-weight: 600;
}

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* comentado pois o html não sera utilizado ainda.
.list {
    margin: 0px;
    padding: 0px;
}
.list__item {
    display: flex;
    text-align: left;
    line-height: 1.1;
    position: relative;
    margin-bottom: 5px;
    align-content: center;
    align-items: center;
}
.list__status-container {
    margin-right: 5px;
    margin-bottom: 5px;
    height: 10px;
}
.list__status {
    display: inline-block;
    margin: 0px;
    background: var(--verde-claro);
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.list__info {
    border-bottom: 1px solid var(--cinza-borda);
    padding-bottom: 5px;
}
.list__name {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
}
.list__type {
    line-height: 0.9;
    font-size: 11px;
    color: var(--cinza-texto);
} */

@media (max-width: 430px) { 
    .direct-chat {
        bottom: 50px;
        right: 9px;
    }
}

@media (max-width: 768px) {
    .direct-chat {
        width: 35%;
    }
    .retract-main-content {
        width: 65% !important;
    }
    .retract-main-content .barraIcons {
        right: 35% !important;
    }
}

/* adaptações para navegação com chat aberto */
.retract-main-content { /* comprime o wraper class que engloba o conteudo do direct para encaixar o chat ao lado dele*/
    float: left;
    width: 80%;
}
.retract-main-content .barraIcons, .retract-main-content .infosPagamento {
    right: 20% !important;
}
.retract-main-content .row-calcados-exibir .card-calcado .desc-tempo {
    margin-top: 0px;
}
.container-chat-notification {
    padding: 10px 10px 10px 40px !important;
    background-color: var(--verde-claro);
    box-shadow: 2px 3px 10px 0px #38403c4f;
}
.info-cliente__container {
    min-width: 200px;
}
.info-cliente__title {
    font-size: 30px;
    margin: 5px 0;
    font-weight: 600;
}
.info-cliente__icon--title {
    font-size: 25px;
    margin-right: 10px;
}
.info-cliente__row {
    margin-bottom: 5px;
    text-align: left;
}
.info-cliente__label{
    font-size: 15px;
    margin: 0px;
}
.info-cliente__content:before {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}
.info-cliente__content {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--cinza-texto);
    height: 1.5rem;
    line-height: 1;
    margin: 0 0 0 10px;
}
.info-cliente>div:not(:first-child) {
    border-left: 2px solid var(--cinza-borda);
}
.container-list {
    height: 19.4rem;
    overflow:scroll;
    overflow-x:hidden;
}
.info-cliente__marker {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 5px double var(--cinza-borda);
    margin-right: 5px;
}

@media only screen and (max-width: 768px) {
    /* ajustes responsividade content-wraper retraido */
    .retract-main-content .filtro-produto li{
      padding: 5px 1px !important;
      margin: 0px 0px 0px 2px !important;
      font-size: 12px !important;
    }
    .retract-main-content .row-calcados-exibir .card-calcado { 
      height: 340px; 
    }
    .retract-main-content .container-navbar .nav-produtos #searchBar-products {
      padding-left: 2px;
    }
    .retract-main-content #conteudo .rodape_pedidos .rodape-coluna-direita {
        width: 70%;
    }
    .retract-main-content #conteudo .rodape_pedidos .h5_rodape { 
        margin: 0 12px;
    }
    .retract-main-content #conteudo .rodape_pedidos .button-action-pedido {
        margin: 0px 10px 0px 0px;
    }
}

@media only screen and (max-width: 500px) {
    /* chat full screen */
    .direct-chat {
        margin: 0px;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 10000;
        bottom: 0;
        left: 0;
    } 
}