/*/ BASIC /*/

html {
    background-color: #141313;
}

body {
    font-family: "Poppins", sans-serif;
    height: 100vh;
}

a {
    color: #494747;
    display:inline-block;
    text-decoration: none;
    font-weight: 400;
}

h2 {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    display:inline-block;
    margin: 40px 8px 10px 8px;
    color: #cccccc;
}

/* Color de fondo del Navbar */
.bg-gradient-whatmas {
    /*background: #EEEEEE*/
    background: #f4f3ef;
    /*background: white;*/
}


/*/ STRUCTURE /*/

.wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 20px;
}

#formContent {
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    background: #fff;
    padding: 30px;
    width: 90%;
    max-width: 450px;
    position: relative;
    padding: 0px;
    -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    text-align: center;
}

#formFooter {
    background-color: #f6f6f6;
    border-top: 1px solid #dce8f1;
    padding: 25px;
    text-align: center;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}


/*/ TABS /*/

h2.inactive {
    color: #cccccc;
}

h2.active {
    color: #0d0d0d;
    border-bottom: 2px solid #5fbae9;
}


/* FORM TYPOGRAPHY*/

input[type=button], input[type=submit], input[type=reset], button.logIn  {
    background-color: #56baed;
    border: none;
    color: white;
    padding: 15px 80px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    margin: 5px 20px 40px 20px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button.logIn:hover  {
    background-color: #39ace7;
}

input[type=button]:active, input[type=submit]:active, input[type=reset]:active, button.logIn:active  {
    -moz-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -o-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}

input {
    background-color: #f6f6f6;
    border: none;
    color: #0d0d0d;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 5px;
    width: 85%;
    border: 2px solid #f6f6f6;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

input:focus {
    background-color: #fff;
    border-bottom: 2px solid #5fbae9;
}

input::placeholder {
    color: #cccccc;
}


/*/ ANIMATIONS /*/

/*/ Simple CSS3 Fade-in-down Animation /*/
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/*/ Simple CSS3 Fade-in Animation /*/
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.fadeIn.first {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    animation-delay: 0.4s;
    margin-bottom: 45px;
}

.fadeIn.second {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.fadeIn.third {
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.fadeIn.fourth {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}

/*/ Simple CSS3 Fade-in Animation /*/
.underlineHover:after {
    display: block;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 2px;
    background-color: #56baed;
    content: "";
    transition: width 0.2s;
}

.underlineHover:hover {
    color: #0d0d0d;
}

.underlineHover:hover:after{
    width: 100%;
}


/*/ OTHERS /*/

*:focus {
    outline: none;
}

#icon {
    width:60%;
}


/*LOG-IN*/
.icon-user-logIn{
    /*margin-top: 20px;*/
    /*width: 70px!important ;*/
    /*height: 70px;*/
}

.elementHide{
    display: none;
}

/*ESTILOS PERSONALIZADOS*/

/*Contenedor general <body>*/
html, body{
    height: 100vh;
    overflow-y: hidden;
    /*display: flex;*/
    /*flex-direction: column;*/
}

.custome-css-sidebar-conversations{
    /*left: 270px!important;*/
    /*width: 70%;*/
    /*background: #f4f3ef!important;*/
    z-index: 2000!important;
    padding-top: 0!important;/*Clase adicionada para aprovechar toodo el alto del div de las conversaciones*/
    padding-bottom: 0!important;
    /*overflow-y: hidden!important; (Propiedad comentada para aprovechar toodo el alto del div de las conversaciones)*/
}
.custome-css-ul-conversations{
    /*height: 1vh!important; !*(propiedades comentadas para aprovechar el alto del div de las conversaciones)*!*/
    /*overflow-y: auto!important; !*(propiedades comentadas para aprovechar el alto del div de las conversaciones)*!*/
}

.custome-css-main-content{
    margin-left: 250px;
}

.custome-css-icon-panel{
    color: #fff;
    cursor: pointer;
}

.custome-css-container-general-messages{
    padding-left: 5px !important;
    /*padding-right: 5px !important;*/
background: #f4f3ef!important;
    width: 100%;
}

.customer-css-messages-body{
    height: 84vh;
    overflow-y: auto;
}

.custome-css-footer-textarea{
    /*box-shadow: 0 1px 3px rgba(50, 50, 50, 0.75);*/
    background: #f4f3ef;
}

.custom-textarea{
    margin-left: 8%;
    border-radius: 20px;
    border: 1px solid;
    width: auto;
}

.custome-css-without-conversations{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

/*/ Configuracion para los efectos 'pulse' /*/
.pulse {
    border-radius: 50%;
    background: #20c852;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(32, 200, 82, 0.4);
    animation: pulse 2s infinite;
}
.pulse:hover {
    animation: none;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(32, 200, 82, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
    }
}
@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(32, 200, 82, 0.4);
        box-shadow: 0 0 0 0 rgba(32, 200, 82, 0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
        box-shadow: 0 0 0 10px rgba(204,169,44, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
        box-shadow: 0 0 0 0 rgba(204,169,44, 0);
    }
}

/*Header*/
.header-container{
    padding-top: 2rem !important;
    padding-bottom: 3rem !important;
}

/*Area donde se mostrarán los mensajes del chat*/
.messages {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /*background: #d0b9a0;*/
}
.messages::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}
.messages::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
}
.messages ul li {
    display: inline-block;
    clear: both;
    float: left;
    /*margin: 15px 15px 5px 15px;*/
    width: calc(100% - 25px);
    font-size: 0.9em;
}
.messages ul li:nth-last-child(1) {
    margin-bottom: 20px;
}
.messages ul li.sent i {
    margin: 0 8px 0 0;
    vertical-align: middle;
    /*color: #F4F3EF;*/
    font-weight: bold!important;
}
.messages ul li.sent p {
    background: #172B4D;
    color:white;
    border: #172B4D;
    font-weight: bold;

}
.messages ul li.replies i {
    float: right;
    margin: 15px 0 0 0;
    font-size: 12px;
}
.messages ul li.replies p {
    background: #005C4B;
    color: white;
    float: right;
    border: #005C4B;
    font-weight: bold;

}
.messages ul li img {
    width: 22px;
    border-radius: 50%;
    float: left;
}
.messages ul li p {
    /*width: 70%;*/
    display: inline-block;
    padding: 10px 15px;
    border-radius: 20px;
    max-width: 70%;
    line-height: 130%;
}

/*Barra para escribir el mensaje*/
.div-txt-write-text{
    max-height: 55px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.div-txt-write-text textarea{
    height: 52px;
    overflow-y: scroll;
    resize: none;
}
.icon-textarea{
    cursor: pointer;
    /*color: #525f7f;*/
}

/*Slidebar para Conversaciones*/
.li-container-conversation{
    padding: 3px;
    border-bottom: solid 1px #CCCCCC;
}
.li-container-conversation:hover{
    background: #F5F5F5;
    cursor: pointer;
}
.li-container-conversation a{
    padding: 10px 8px!important;
}
.li-container-conversation a .number-contact{
    font-weight: 500;
    color: #172B4D;
}
.li-container-conversation[state="en_curso"] .badge-circle {
    background: rgba(254, 167, 34, 0.77);
}
.li-container-conversation a span.circle-number-conversation{
    font-size: 12px;
    background: #172B4D;
    font-weight: bold;
    color: white;
    border-radius: 50%;
    padding: 2px 8px;
    right: 5%;
    position: absolute;
}
.li-container-conversation a span.date-info-conversation{
    font-size: 13px;
    float: right;
    margin-right: 18px;
}
.no_tocado{
    background: white;
    /*#f4f3ef*/
    /*#EEEEEE*/
}

.foqueado{
    /*border-radius: 10%;*/
    /*background: #525f7f;*/
    border-right: 5px solid #525f7f;
}
.foqueado:hover{
    border-right: 5px solid #525f7f;
    /*background: #525f7f;*/
}

.foqueado a span.circle-number-conversation{
    /*color: #579c44 !important;*/
    font-weight: bold!important;
    /*background: white;*/
}
.foqueado a span.number-contact{
    /*color: #ffffff !important;*/
    font-weight: bold!important;
}
.foqueado-icon a i{
    /*color: #ffffff !important;*/
    font-weight: bold!important;
}
.foqueado-icon-finish a i{
    /*color: #4dc71f !important;*/
    font-weight: bold!important;
}

.sin_margen{
    margin: 0;
}
.sin_padding{
    padding: 0!important;
}

/* Estilos para el 'Right-Panel' */
.img-company-right-panel{
    max-width: 70%;
}

/*/ Estilos para la modal que adiciona un contacto /*/
.icon-contact-more-fields{
    background: rgba(32, 200, 82, 0.77);
    color: white;
    padding: 5px;
    font-size: 15px;
    border-radius: 30%;
    cursor: pointer;
}
.icon-contact-delete-fields{
    background: rgba(200, 46, 38, 0.77);
    color: white;
    padding: 5px;
    font-size: 15px;
    border-radius: 30%;
    cursor: pointer;
}

.opacityHide{
    opacity: 0;
}

/**Color para los 'placeholder' **/
input.form-control-alternative, input.form-control-alternative:focus{
    color: #283451!important;
}

.form-control{
    color: #283451!important;
}

.css-cursor-pointer{
    cursor: pointer;
}
.css-cursor-not-allowed{
    cursor: not-allowed;
}

/* Contenedor para las utilidades de las conversaciones  **(Clase agregada para permitir aprovechar toodo el alto de las conversaciones)** */
.css-conversations-utilities{
    margin-left: -24px;
    margin-right: -24px;
    padding: 15px;
}

.system{

}

.css-end-conversation{
    /*background: #579C44 !important;*/
    /*color: #579C44 !important;*/
}

.css-icon-finish-conversation:hover{
    /*filter: invert(100%);*/
}



/* Estilos para 'RESPUESTAS PREDETERMINADAS' */

.css-li-container-autocomplete{
    border-bottom: solid 0.5px #ebebeb;
    padding: 5px;
}
.css-autocomplete-keys{
    color: #48901e;
    font-weight: bold;
}

.puntero{
    cursor: pointer!important;
}


.dropdown-submenu {
    position: relative;
}

.dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
}



.css-ellipsis-text{
    white-space: nowrap!important;
    width: 100%!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
}


.notification {
    position: relative;
    /*display: inline-block;*/

}


.notification .nombre_canal {
    position: absolute;
    bottom: -4px;
    right: -2px;
    padding: 2px 3px;
    border-radius: 10px;
    /*background: #525f7f;*/
    /*background: rgba(254, 167, 34, 0.77);*/
    color: white;
    font-size: 8px;
}
.loader-page {
    position: fixed;
    z-index: 25000;
    background: rgb(255, 255, 255);
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:all .3s ease;
}
.loader-page::before {
    content: "";
    position: absolute;
    border: 2px solid #2eaddf;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-sizing: border-box;
    border-left: 2px solid #80cf6c;
    border-top: 2px solid #3e7cbe;
    animation: rotarload 1s linear infinite;
    transform: rotate(0deg);
}
@keyframes rotarload {
    0%   {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}
.loader-page::after {

    content: "";
    position: absolute;
    border: 2px solid #2eaddf;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-sizing: border-box;
    border-left: 2px solid #80cf6c;
    border-top: 2px solid #3e7cbe;
    animation: rotarload 1s ease-out infinite;
    transform: rotate(0deg);
}

.css-dashboard-logo{
    width: 208px;
}

body{
    background: #f4f3ef!important;
    color:#172B4D!important;
    /*color:#172B4D!important;*/
}
.js-container-right-panel{
    background: #f4f3ef!important;
}

.js-show-hide-panel {
    /*top: 50%;*/
    position: absolute;
    /*top: 41%;*/
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(50%);
    transform: rotate(180deg);
    left: 97%;
    font-weight: 800;
    font-size: 26px;
    color: white;
    /*background: #6c757d !important;*/
    padding: 5px 10px 4px;
    bottom: 50%;
}

.js-a-name-contact,.js-user-name,.js-show-hide-panel{
color:#172B4D;
}

.avatar-sm{
background: #172B4D!important;
/*background: #172B4D!important;*/
}

.css-btn-ico-send-message{
    padding: 5px;
    color:#172B4D;
    /*vertical-align: middle !important;*/
}


@media only screen and (max-width: 5000px) {
    .container-textarea-message {
margin-left: 15%;
    }
}
@media only screen and (max-width: 1379px) {
    .container-textarea-message {
margin-left: 20%;
    }
}
@media only screen and (max-width: 955px) {
    .container-textarea-message {
margin-left: 27%;
    }
}


/*@media only screen and (max-width: 767px) {*/
/*    !*html, body{*!*/
/*    !*    height: 100vh;*!*/
/*    !*    overflow-y: hidden;*!*/
/*    !*    display: flex;*!*/
/*    !*    !*flex-direction: column;*!*!*/
/*    !*}*!*/

/*    !*.custome-css-main-content{*!*/
/*    !*    !*margin-left: 0px;*!*!*/
/*    !*}*!*/
/*}*/
.container_general_new_conversation{
    display: none;
}
.quick-reply {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.quick-reply-btn {
    background-color: #fff;
    color: #005C4B;;
    border: 2px solid #005C4B;;
    border-radius: 20px;
    padding: 10px 20px;
    margin-right: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: auto;
}

.quick-reply-btn:hover {
    background-color: #005C4B;;
    color: #fff;
}




.quick-replies-list {
    display: inline-block;
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 14px;
    line-height: 1.5;
    font-family: Arial, sans-serif;
    width: 68%;
}

.quick-replies-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.quick-reply-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 5px 10px;
    margin: 5px;
    cursor: pointer;
    color: #555;
    transition: all 0.3s ease-in-out;
}

.quick-reply-item:hover {
    background-color: #ddd;
}

.quick-reply-item.selected {
    background-color: #25d366;
    border-color: #25d366;
    color: #fff;
}

.container-integrante {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.card {
    background-color: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    margin-top: 20px;
}

.list-group {
    padding: 0;
    margin: 0;
}

.list-group-item {
    border: none;
    padding: 10px 15px;
    display: flex;
    align-items: center;
}

.list-group-item img {
    width: 50px;
    height: 50px;
}

.list-group-item span {
    font-size: 18px;
    line-height: 1.2;
    margin-left: 10px;
}



@keyframes wobble {
    15% { transform: translateX(5px); }
    30% { transform: translateX(-5px); }
    45% { transform: translateX(5px); }
    60% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}

li.sent[data_id_mensaje].selected {
    animation: wobble 0.6s ease-in-out;
}




 .quotedMessage {
     display: none;
     background-color: #E1FFC7;
     border-left: 5px solid #075E54;
     font-size: 0.9em;
     border-radius: 7px;
     width: 89%;
     left: 3%;
     position: relative;
     padding: 10px;
     margin: auto;
     /*border-right: 1px solid #075E54;*/
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background-color: #075E54;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
}


 .quotedMessageCit{
     display: none;
     background-color: #E1FFC7;
     font-size: 0.9em;
     border-radius: 7px;
     width: 50%;
     padding: 10px;
     margin: auto;
 }

 .CitReplies{
     position: relative;
     border-left: 7px solid #172b4d;
     left: 23%;
 }

.CitSent{
    position: relative;
    left: -20%;
    border-left: 7px solid #075E54;
}

.quotedMessage img, .quotedMessageCit img {
    height: 70px !important;
    width: 70px   !important;
    border-radius: 0;
}



@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.error-shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}




.css_grammar {
    cursor: pointer;
    position: absolute;
    right: 32px;
    top: 3px;
    font-size: 20px;
    /*opacity: 0.7;*/
    z-index: 1000;
    transition: none;
    color: black;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
    margin-top: 7px;
}

.css_grammar_container {
    cursor: pointer;
    position: absolute;
    right: -11px;
    width: 40%;
    top: -441%;
    font-size: 20px;
    z-index: 1000;
    transition: none;
    color: black;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
    margin-top: 7px;
}

.circle-number-conversation_grammar{
    font-size: 12px;
    background: red;
    font-weight: bold;
    color: white;
    border-radius: 50%;
    padding: 2px 8px;
    /*right: 5%;*/
    position: absolute;
}



.js-grammar_unique{
    border-bottom: 1px solid red!important;
}