/*/ BASIC /*/


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: linear-gradient(87deg, #579C44 0, #78bc43 100%) !important;
}


/*/ 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%;*/
    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: 65vh!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;
}

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

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

.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: #494747;
}
.messages ul li.sent p {
    background: #494747;
    color: #ffffff;
}
.messages ul li.replies i {
    float: right;
    margin: 15px 0 0 0;
    font-size: 12px;
}
.messages ul li.replies p {
    background: #579C44;
    color:white;
    float: right;
    border: #579C44;
}
.messages ul li img {
    width: 22px;
    border-radius: 50%;
    float: left;
}
.messages ul li p {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 20px;
    max-width: 205px;
    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: 5px;
    border: solid 1px #ebebeb;
}
.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: #141313;
}
.li-container-conversation a .icon-person-conversation{
    font-size: 25px!important;
    color: rgba(254, 167, 34, 0.77);
}
.li-container-conversation a span.circle-number-conversation{
    font-size: 12px;
    background: #579C44;
    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: #EBEBEB;
}

.foqueado{
    background: rgba(73, 71, 71, 0.91);
}
.foqueado:hover{
    background: rgba(73, 71, 71, 0.91);
}

.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;
}

.css-end-conversation{
    background: transparent !important;
    color: #4dc71f !important;
}

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

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

/* 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;
}


.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;
}