@charset "utf-8";
/* CSS Document */

#ChatWebSocket {
    z-index: 20;
}

#ChatWebSocket .w3-input.ng-valid:focus,
#ChatWebSocket .w3-select.ng-valid:focus,
#ChatWebSocket .w3-textarea.ng-valid:focus,
#ChatWebSocket .w3-input.isOptional-valid:focus,
#ChatWebSocket .w3-select.isOptional-valid:focus,
#ChatWebSocket .w3-textarea.isOptional-valid:focus {
	color: #0093d9;
	border-color: #0093d9 !important;
}

#ChatWebSocket .wrpContainerBoxes {
    text-align: left;
}

#ChatWebSocket .wrpObjectWidth {
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    width: 320px;
    background-color: #fff;
}

#ChatWebSocket .wrpHeader {
    cursor: pointer;
    background-color: #0093d9;
    color: #fff;
}

#ChatWebSocket .wrpHeader.msgPends {
    background-color: #7fc9ec;
}

#ChatWebSocket .classBtnIcon {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0px;
}

#ChatWebSocket .classBtnIcon.online,
#ChatWebSocket .wrpHeader.online {
    background-color: #7fc9ec;
}

#ChatWebSocket .classBtnIcon.offline,
#ChatWebSocket .wrpHeader.offline {
    background-color: #b2b2b2;
}

#ChatWebSocket .btnGlobe {
    width: 25px;
    top: 50%;
    margin-top: -10px;
    background: url(../images/chat-icon-globo.png) no-repeat 0px 0px / 100% auto;
    transition: transform 0.3s ease-in-out 0s;
}

#ChatWebSocket .wrpObjectList.show .btnGlobe {
    transform: rotate(180deg);
}

#ChatWebSocket .wrpObjectList.msgPends {
    animation: animAtencion 1.5s ease-in-out 0s infinite;
}

#ChatWebSocket .wrp-pointer {
    position: relative;
    cursor: pointer;
}

#ChatWebSocket .wrpTituloChat {
    margin: 10px 0px;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
}

#ChatWebSocket .wrpLista,
#ChatWebSocket .wrpObjChat {
    display: none;
}

#ChatWebSocket .wrpObjChat.show {
    display: inline-block;
}

#ChatWebSocket .wrpUserChatNombre {
    position: relative;
    margin: 10px 0px;
    height: 30px;
    line-height: 30px;
}

#ChatWebSocket .wrpObjectList.show .wrpLista {
    display: block;
}

#ChatWebSocket .wrpLista .wrpCampoConIcono {
    margin: 16px 0px;
}

#ChatWebSocket .wrpListaUsuarios {
    height: 200px;
    overflow-y: auto;
}

#ChatWebSocket .wrpElemUserChat {
    position: relative;
    margin: 0px;
    padding: 5px 0px;
    height: 40px;
    line-height: 30px;
}

#ChatWebSocket .avatar {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 30px;
    overflow: hidden;
    margin-right: 5px;
    background: url(../images/icono-carita.png) no-repeat 0px 0px / auto 100%;
    border-radius: 50%;
}

#ChatWebSocket .wrpObjChat .avatar {
    background-position-x: 50%;
}

#ChatWebSocket .statusOnLine .avatar {
    background-position-x: 0%;
}

#ChatWebSocket .statusOffLine .avatar {
    background-position-x: 100%;
}

#ChatWebSocket .statusOnLine .avatar {
    background-position-x: 0%;
}

#ChatWebSocket .nombreUsuario,
#ChatWebSocket .usuarioNombreLargo {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#ChatWebSocket .nombreUsuario {
    width: 210px;
}

#ChatWebSocket .usuarioNombreLargo {
    width: 235px;
    font-weight: bold;
}

#ChatWebSocket .wrpContainerMsgs {
    position: relative;
    height: 200px;
    overflow-y: auto;
}

#ChatWebSocket .btnClose {
    background: url(../images/iconos-botones-accion.png) no-repeat 60% 100% / 600% auto;
    top: 50%;
    margin-top: -10px;
}

#ChatWebSocket .offline .btnClose {
    color: #fff;
}

#ChatWebSocket .w3-textarea {
    max-height: 60px;
    min-height: 60px;
    border-color: #0093d9 !important;
    color: #0093d9 !important;
}

#ChatWebSocket .iconStatus {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    top: 50%;
    margin-top: -5px;
    right: 5px;
}

#ChatWebSocket .wrpMsg {
    position: relative;
    margin: 8px 10px;
    padding: 0px 5px;
}

#ChatWebSocket .wrpMsg p {
    display: inline-block;
    position: relative;
    border-radius: 8px;
    font-size: 12px;
    margin: 0px;
    padding: 4px 10px;
    width: 100%;
    text-align: left;
    border-width: 2px;
    border-style: solid;
}

#ChatWebSocket .wrpMsg.send {
    text-align: right;
}

#ChatWebSocket .wrpMsg.send p {
    border-color: #0093d9;
}

#ChatWebSocket .wrpMsg.recive p {
    border-color: #b2b2b2;
}

#ChatWebSocket .wrpMsg p::before {
    position: absolute;
    content: "";
    bottom: 0px;
    border-width: 5px;
    border-style: solid;
}

#ChatWebSocket .wrpMsg.send p::before {
    right: -10px;
    border-color: transparent transparent #0093d9 #0093d9;
}

#ChatWebSocket .wrpMsg.recive p::before {
    left: -10px;
    border-color: transparent #b2b2b2 #b2b2b2 transparent;
}

#ChatWebSocket .wrpMsg .fecha {
    display: none;
    text-align: right;
    font-size: 9px;
    font-weight: bold;
    color: #565655;
}

#ChatWebSocket .wrpMsg:hover .fecha {
    display: block;
}

#ChatWebSocket .cntMsgPend {
    background-color: #e95128;
    font-size: 12px;
    border-radius: 10px;
    color: #fff;
    margin-right: 25px;
    text-align: center;
    top: 50%;
    margin-top: -10px;
    font-weight: bold;
    line-height: 20px;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
}

@keyframes animAtencion {
    0%, 10% { bottom: 0px; }
    5% { bottom: 8px; }
}

@media (max-width: 1000px) {
    #ChatWebSocket {
        display: none;
    }
}