#mensajeriaDevelopers{
    position: fixed;
    margin: auto;
    left: 15px;
    bottom: 15px;
    z-index: 999999999999;
    font-family: Arial;
}
.mensajeria-icon{
    border-radius: 50%;
    background-color: #335d94;
    width: 60px;
    height: 60px;
    box-shadow: -3px 3px 7px 0px #00000033;
    cursor: pointer;
}
.mensajeria-icon svg{
    transition: all 0.20s;
}
.mensajeria-hidden svg{
    position: relative;
    width: 30px;
    height: 30px;
    fill: #efefef;
    top: 17px;
    left: 15px;
    transform: rotate(0deg);
}
.mensajeria-show svg{
    position: relative;
    width: 10px;
    height: 10px;
    fill: #efefef;
    top: 22px;
    left: 25px;
}
.activeMensajeria svg{
    position: relative;
    width: 30px;
    height: 30px;
    fill: #efefef;
    top: 15px;
    left: 15px;
}
.activeClosed svg{
    position: relative;
    width: 30px;
    height: 30px;
    fill: #efefef;
    top: 15px;
    left: 15px;
    transform: rotate(90deg);
}

#mensajeriaDevelopers .chat-online{
    width: 350px;
    height: 600px;
    margin: 0;
    opacity: 0;
    transition: all 0.5s;
}

#mensajeriaDevelopers .chat-online > div:nth-child(1), #mensajeriaDevelopers .chat-online > div:nth-child(2), #mensajeriaDevelopers .chat-online > div:nth-child(3) > form textarea{
    box-shadow: 1px 4px 20px 1px #00000017;
}
#mensajeriaDevelopers .chat-online > div:nth-child(1){
    width: 100%;
    height: 100px;
    background-color: #335d94;
    border-radius: 10px 10px 0 0;
}
#mensajeriaDevelopers .chat-online > div:nth-child(1) img{
    width: 90px;
    height: 90px;
    margin: 10px 0 0 0;
    float: left;
}
#mensajeriaDevelopers .chat-online > div:nth-child(1) > div:nth-child(3){
    margin: 11px 0;
    color: #cecece;
}
#mensajeriaDevelopers .chat-online > div:nth-child(1) > div:nth-child(2){
    float: left;
    width: 259px;
    height: 37px;
    font-size: 24px;
    color: #fff;
    padding: 4px 0 0 0;
}
#mensajeriaDevelopers .chat-online > div:nth-child(1) > div:nth-child(3) > form{
      float: left;
      width: 259px;
      height: 29px;
      color: #cecece;
}
#mensajeriaDevelopers .chat-online > div:nth-child(1) > div:nth-child(4){
    float: left;
    width: 259px;
    height: auto;
}
.online{
    background-color: #0e8d48;
    color: #fff;
    border-radius: 50px;
    padding: 5px 10px;
}
.offline{
    background-color: #d42335;
    color: #fff;
    border-radius: 50px;
    padding: 5px 10px;
}
#mensajeriaDevelopers .chat-online > div:nth-child(2){
    width: 100%;
    min-height: 368px;
    height: 451px;
    background-color: #fff;
    overflow-y: scroll;
}


#mensajeriaDevelopers .chat-online > div:nth-child(2) > .soporte > div > div:first-child{
    width: 80px;
    padding: 10px;
    float: left;
}
#mensajeriaDevelopers .chat-online > div:nth-child(2) > .soporte > div > div:first-child img{
    width: 60px;
    height: 60px;
    border:1px solid #cecece;
    border-radius: 50%;
    background-color: #605ca8;
}
#mensajeriaDevelopers .chat-online > div:nth-child(2) > .soporte > div > div:last-child{
    width: 240px;
    padding: 10px;
    float: right;
    border-radius: 5px;
    border: 1px solid #cecece54;
    background-color: #e6e6e638;
    margin: 10px 12px 5px 0px;
    box-shadow: 3px 3px 3px 0px #0000000a;
    font-size: 12px;
    color: #848484;
}
#mensajeriaDevelopers .chat-online > div:nth-child(2) > .soporte:first-child> div  > div:last-child{
    margin: 10px 12px 15px 0px;
}
#mensajeriaDevelopers .chat-online > div:nth-child(2) > .usuario:first-child> div  > div:first-child{
    margin: 10px 0px 15px 12px;
}
#mensajeriaDevelopers .chat-online > div:nth-child(2) > .usuario> div {
    width: 100%;
    height: auto;
    float: right;
}
#mensajeriaDevelopers .chat-online > div:nth-child(2) > .usuario> div  > div:last-child{
    width: 80px;
    padding: 10px;
    float: right;
}
#mensajeriaDevelopers .chat-online > div:nth-child(2) > .usuario> div  > div:last-child img{
    width: 60px;
    height: 60px;
    border:1px solid #cecece;
    border-radius: 50%;
    background-color: #5ca868;
}
#mensajeriaDevelopers .chat-online > div:nth-child(2) > .usuario> div  > div:first-child{
    width: 240px;
    padding: 10px;
    float: left;
    border-radius: 5px;
    border: 1px solid #cecece54;
    background-color: #e6e6e638;
    margin: 10px 0px 5px 12px;
    box-shadow: 3px 3px 3px 0px #0000000a;
    font-size: 12px;
    color: #848484;
}
#mensajeriaDevelopers .chat-online > div:nth-child(3) > form{
    width: 100%;
    height: 49px;
}
#mensajeriaDevelopers .chat-online > div:nth-child(3) > form textarea{
    width: 100%;
    height: 100%;
    background-color: #fff;
    resize: none;
    border:none;
    font-weight: 400;
    line-height: 1.33;
    padding: 15px 50px 15px 10px;
    background-color: #fff;
    border-radius: 0px 0px 10px 10px;
    border-top: 1px solid #cecece7d;
    overflow-y: hidden;
    display: flex;
    flex-direction: column-reverse;
}
#mensajeriaDevelopers .chat-online > div:nth-child(3) > form textarea:focus{
    outline: none;
}

#mensajeriaDevelopers .chat-online > div:nth-child(3) > form > div button{
    position: absolute;
    bottom: 90px;
    width: 30px;
    height: 20px;
    right: 22px;
    background-color: #fff;
    border: none;
}
#mensajeriaDevelopers .chat-online > div:nth-child(3) > form > div button:focus{
    outline: none;
}
#mensajeriaDevelopers .chat-online > div:nth-child(3) > form > div button svg{
    fill: #cecece;
}
#mensajeriaDevelopers .chat-online.chat-inactive{
    display: none;
}
#mensajeriaDevelopers .chat-online.chat-active{
    display: block;
    margin: 0px 0px 15px 0px;
    opacity: 1;
}