/***************GLOBALES*****************/

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: #ffffff;
    margin: 0px;
}

body.body_login {
    background-image: url(../images/fondo_login.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: cover;
    width: 100vw;
    margin: 0px;
    height: 100vh;
}

body.body_loading {
    /*background-image: url(../images/fondo_login.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
background-size: cover;*/
    width: 100vw;
    margin: 0px;
    height: 100vh;
}

body.chat {
    overflow-y: hidden;
}

p {
    margin: 0px;
}

.no-sel {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.hiden {
    visibility: hidden;
}

.hide{
    display: none;
}

.f-right {
    float: right;
}

#divPopupFondo {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-color: #666;
    z-index: 1;
}

#divPopup {
    position: absolute;
    left: 0px;
    width: 100%;
    z-index: 1;
    padding-top: 25%;
    padding-left: 37%;
    font-size: 22px;
    color: black;
}

.spanDivCargando {
    background-color: #fff;
    padding: 15px;
    border-radius: 20px;
}

/*
    BOTONES
*/
.btn.btn-primary {
    background-color: #32549F;
    border-color: #32549F;
}

.btn.btn-primary:hover {
    background-color: #4473da;
    border-color: #4473da;
}

.btn.btn-user {
    border: 1px solid #32549f;
    padding: 2px 6px;
    border-radius: 100px;
    background-color: #ffffff;
    color: #32549f;
    margin-right: 3px;
    margin-top: 3px;
}

.btn.btn-search {
    border: 1px solid #32549f;
    padding: 2px 6px;
    border-radius: 100px;
    background-color: #ffffff;
    color: #32549f;
    margin-right: 3px;
    margin-top: 3px;
}

.btn.btn-user:hover {
    background-color: #32549f;
    color: #ffffff;
}

.btn.btn-edit {
    position: absolute;
    margin-top: 30px;
    margin-left: 26px;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 100px;
    background-color: #28a745;
    color: #fff;
    z-index: 2000;
}

.btn-back {
    position: absolute;
    top: 25px;
    left: 40px;
    z-index: 100;
}

.btn-info {
    color: #32549F;
    background-color: #ffffff;
    border-color: #32549F;

}

.btn-info:hover {
    background-color: #32549F;
    border-color: #32549F;
}

.btn-mostrar-mas-mensajes {
    margin: 24px 0 24px 0;
    text-align: center;
}

/*
    SCROLLBAR
*/

/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #c4c4c4;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #32549F;
}

/*
    Tipografias
*/

.bold-30-blue {
    font-weight: bold;
    font-size: 30px;
    color: #32549F;
}

.bold-20-blue {
    font-weight: bold;
    font-size: 20px;
    color: #32549F;
}

.bold-16-blue {
    font-weight: bold;
    font-size: 16px;
    color: #32549F;
}

.bold-14-blue {
    font-weight: bold;
    font-size: 14px;
    color: #32549F;
    margin-top: 20px;
    text-align: center;
}

.bold-20-white {
    font-weight: bold;
    font-size: 20px;
    color: #fff;
}

.bold-20-white-i {
    font-weight: bold;
    color: #fff;
}

.bold-16-white {
    font-weight: bold;
    font-size: 16px;
    color: #fff;
}

.bold-16-white-i {
    font-weight: bold;
    color: #fff;
}

.bold-70-white {
    font-weight: bold;
    font-size: 70px;
    color: #fff;
}

.bold-17-black {
    font-weight: bold;
    font-size: 17px;
    color: #666;
}

.reg-17-black {
    font-size: 17px;
    color: #666;
}

.reg-12-black {
    font-size: 12px;
    color: #666;
}

.reg-15-black {
    font-size: 15px;
    color: #666;
}

.reg-15-black img {
    /*width:100%;*/
    max-width: 100%;
}

.reg-14-black {
    font-size: 14px;
    color: #666;
}

.reg-14-black img {
    /*width:100%;*/
    max-width: 100%;
}

.bold-11-black {
    font-weight: bold;
    font-size: 11px;
    color: #666;
}

.bold-9-black {
    font-weight: bold;
    font-size: 9px;
    color: #666;
}

/************************************LOGIN*******************************************/

.divTxt {
    width: 35%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    padding: 60px 45px 70px 45px;
    position: absolute;
    left: 32.5%;
    top: 10%;
}

.logo_mst_login {
    width: 100px;
    position: absolute;
    right: 45px;
    top: 20px;
}

.login_input {
    margin-top: 20px;
    height: 40px;
}

.login_input label{
    position: absolute;
}

.login_input label i{
    font-size: 30px;
    color: #666;
}

.login_input input {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #666;
    padding-left: 40px;
    padding-bottom: 5px;
    font-size: 20px;
}

.login_input input:focus{
    outline: none;
}

.btn.center {
    display: block;
    margin: 0 auto;
}

.texto-mensaje-login {
    margin-top: 20px;
    text-align: center;
}

/************************************LOADING*******************************************/

.loading_page {
    height: 100vh;
    width: 100vw;
    text-align: center;
}

.loading_page img.logo_loading {
    max-width: 90%;
    width: 500px;
    margin-top: 15%;
}

.loading_page span {
    display: block;
    color: #3c3c3c;
}

.loading_page span.myges-txt {
    font-weight: 600;
    letter-spacing: 5.5px;
    font-size: 30px;
    /*margin-left: 1.4%;*/
    text-align: center;
    text-indent: 0.9em;
    padding-top: 50px;
}

.loading_page span.loading {
    margin-top: 20px;
    font-size: 20px;
}

.loading_page .load-3 {
    margin-top: 20px;
}

.loading_page .line {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 15px;
    background-color: #00aeae;
    margin: 0px 5px;
}

/************************** ADJUNTAR FICHERO *************************/
#CHAT_ADJUNTO {
    padding: 40px;
    flex: 0 0 75%;
    max-width: 75%;
}

/************************** BOTON CHAT *************************/
#CHAT {
    padding: 1px 11px;
    background-color: #32549E;
    color: #FFF;
    text-align: center;
    cursor: pointer;
    z-index: 9999;
    font-size: 20px;
    transition: all .3s ease;
}

#CHAT:hover {
    background-color: #4d6aab;
}


@keyframes fa-blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}


.fa-blink {
    -webkit-animation: fa-blink .90s linear infinite;
    -moz-animation: fa-blink .90s linear infinite;
    -ms-animation: fa-blink .90s linear infinite;
    -o-animation: fa-blink .90s linear infinite;
    animation: fa-blink .90s linear infinite;
}

.chat-no-leidos {
    font-size: 9px;
    position: absolute;
    top: 5px;
    right: 5px;
}

/******************************* LOGO MST ************************************/

.logo_mst {
    width: 100px;
    float: right;
    margin-left: 15px;
}

.logo {
    width: 100%;
}

.FondoMST {
    background-image: url(../images/Fondo2.jpg);
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: center;
    opacity: 0.7;
    height: 100vh;
}

/******************* menu lateral - perfil / estado / busqueda / selección *******************/
.menu-chat {
    height: 100vh;
    border-right: 1px solid #c4c4c4;
}

/*
    perfil / estado
*/

.menu-chat .perfil-p {
    /*border-bottom: 1px solid #c4c4c4;*/
    margin-top: 20px;
}

.menu-chat .perfil-p .avatar-p {
    display: inline;
}

.menu-chat .perfil-p .info-p {
    display: inline;
}

.avatar-i {
    width: 42px;
    height: 42px;
    /*padding: 9px 0px;*/
    text-align: center;
    border-radius: 100%;
    /*position: relative;*/
    display: inline-block;
    overflow: hidden;    
}

.avatar-i-padding {
    padding: 9px 0;
}

.avatar-i-abr {
    width: 42px;
    height: 42px;
    padding: 7px 0px;
    text-align: center;
    border-radius: 100%;
}

.avatar-ic-photo {
    width: 100%;
}

.avatar-i, .avatar-i-s, avatar-vc span img {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

.avatar-vc {
    width: 150px;
    height: 150px;
    text-align: center;
    display: inline-block;
    overflow: hidden;
}

.avatar-vc-abr {
    width: 135px;
    height: 135px;
    padding: 15px 0px;
    text-align: center;
    border-radius: 100%;
    margin: 5px 0;
}

.p-fecha {
    /*position: relative;
    top: 34px;*/
    display: block;
}

.estado-inp {
    height: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 17%);
    box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 17%);
    cursor: pointer;
}

.estado-inp i {
    margin-top: 13px;
}

.acciones-cuenta-inp {
    height: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 17%);
    box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 17%);
    cursor: pointer;
}

.acciones-cuenta-inp i {
    margin-top: 13px;
}

.menu-servicios-usuario-inp {
    height: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 17%);
    box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 17%);
    cursor: pointer;
}

.menu-servicios-usuario-inp i {
    margin-top: 13px;
}

.estado-textarea {
    /*height: 100px;*/
    height: 150px;
    margin-top: 20px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 17%);
    box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 17%);
    overflow-y: scroll;
    overflow-x: hidden;
}

i.aviable {
    color: #22D92A;
}

i.ausente {
    color: #FF7B1B;
}

i.ocupado {
    color: #FF3434;
}

i.gris {
    color: #A5A5A5;
}

div.aviable {
    border: 3px solid #22D92A;
}

div.aviable:before {
    position: absolute;
    display: block;
    content: '';
    border: 1px solid #fff;
    height: 34px;
    width: 34px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 100%;
    top: 2px;
    left: 2px;
}

div.ausente {
    border: 3px solid #FF7B1B;
}

div.ausente:before {
    position: absolute;
    display: block;
    content: '';
    border: 1px solid #fff;
    height: 34px;
    width: 34px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 100%;
    top: 2px;
    left: 2px;
}

div.ocupado {
    border: 3px solid #FF3434;
}

div.ocupado:before {
    position: absolute;
    display: block;
    content: '';
    border: 1px solid #fff;
    height: 34px;
    width: 34px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 100%;
    top: 2px;
    left: 2px;
}

div.aviable_avatar {
    border: 3px solid #22D92A;
}

div.ausente_avatar {
    border: 3px solid #FF7B1B;
}

div.ocupado_avatar {
    border: 3px solid #FF3434;
}

div.gris {
    border: 0px solid #A5A5A5;
}

.estado-inp .input-e {
    height: 97%;
    width: calc(100% - 18px);
    border: none;
    -moz-appearance: none;
}

.estado-inp .input-e:focus, .estado-inp .input-r:focus {
    outline: none;
}

.estado-inp .input-r {
    height: 100%;
    width: 100%;
    border: none;
}

.acciones-cuenta-inp .input-ac {
    height: 97%;
    width: calc(100% - 18px);
    border: none;
    -moz-appearance: none;
}

.acciones-cuenta-inp .input-ac:focus, .acciones-cuenta-inp .input-r:focus {
    outline: none;
}

.acciones-cuenta-inp .input-r {
    height: 100%;
    width: 100%;
    border: none;
}

.menu-servicios-usuario-inp .input-msu {
    height: 97%;
    width: calc(100% - 18px);
    border: none;
    -moz-appearance: none;
}

.menu-servicios-usuario-inp .input-msu:focus, .menu-servicios-usuario-inp .input-r:focus {
    outline: none;
}

.menu-servicios-usuario-inp .input-r {
    height: 100%;
    width: 100%;
    border: none;
}

#usuarios-online{
    height: 22px;
}

/*
    busqueda
*/
.menu-chat .buscador {
    height: 85px;
}

.menu-chat .usuarios-online {
    border-bottom: 1px solid #c4c4c4;
}

.input-busqueda {
    width: 90%;
    height: 95%;
    border: 0;
}

.input-busqueda:focus {
    outline: none;
}

/* acciones cuenta */
.menu-chat .acciones-cuenta {
    height: 85px;
}
/*
    menu desplegable busqueda
*/

.CampoTextoBusquedaRapida:hover {
    color: #fff;
    background-color: #467cb1;
}

/*
    Selección
*/

.listado-chats {
    height: calc(100% - 122px);
    max-height: calc(100% - 122px);
    overflow-y: scroll;
    overflow-x: hidden;
}

.user-sel {
    /*padding-top: 5px;
    padding-bottom: 5px;*/
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid #c4c4c4;
    cursor: pointer;
    transition: all .3s ease;
}

.p-name {
    width: 100%;
    white-space: pre-wrap;
}

.padding-l-none {
    padding-left: 0px;
}

.user-sel:hover {
    background-color: #CDD8EF;
}

.user-sel2 {
    padding-top: 15px;
    padding-bottom: 22px;
    border-bottom: 1px solid #c4c4c4;
}

.avatar-i-s {
    /*width: 38px;
    height: 38px;
    padding: 7px 0px;*/
    width: 24px;
    height: 24px;
    padding: 4px 0px;
    text-align: center;
    border-radius: 100%;
}

.avatar-i-i {
    /*width: 38px;
    height: 38px;*/
    width: 24px;
    height: 24px;
    text-align: center;
    border-radius: 100%;
    overflow: hidden;
}

.avatar-i-photo {
    width: 100%;
}

.listado-chats i.fa-circle {
    margin-left: 5px;
}

.listado-chats .id-user {
    margin-left: 10px;
}

.info-user {
    width: 270px;
    height: 100px;
    border: 1px solid #c4c4c4;
    background: white;
    position: absolute;
    left: 50px;
    margin-top: 40px;
    z-index: 2000;
    padding: 10px 20px;
}

.boton-menu {
    cursor: pointer;
}

#IMAGEN_USUARIO {
    border-top: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
    padding: 10px;
    margin: 10px 0;
}

#divBUSQUEDA_USUARIO {
    background-color: #FFFFFF;
}

.row.padding-user {
    padding: 1px 0px;
}

.user-grupo {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #c4c4c4;
}

/******************Crear Grupo****************************/
#Grupo_Nombre {
    height: 40px;
    margin-top: 10px;
    margin-bottom: 20px;
    /*-webkit-box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 17%);
    box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 17%);*/
    width: 70%;
}

#Grupo_Nombre:focus{
    outline: none;
}

/******************Crear Servicio****************************/
#Servicio_Nombre {
    height: 40px;
    margin-top: 10px;
    margin-bottom: 20px;
    width: 70%;
}

#Servicio_Nombre:focus {
    outline: none;
}

/****************************** chat - perfil compañero / chat / mensaje ********************************/
.input-chat-text, .perfil-c {
}

.input-chat-text {
    border-top: 1px solid #c4c4c4;
}

.textarea-chat-text {
    /*height: 85px;*/
    height: 180px;
    border-top: 1px solid #c4c4c4;
}

.registro-chat {
    /*height: calc(100vh - 170px);*/
    /*max-height: calc(100vh - 170px);*/
    /*height: calc(100vh - 220px);*/
    /*max-height: calc(100vh - 220px);*/
    height: calc(100vh - 270px);
    max-height: calc(100vh - 270px);    
    overflow: auto;
    background-color: #F3F3F3;
}

/*.perfil-c i {
    margin-left: 10px;
}*/

.perfil-c .id-user {
    margin-left: 10px;
}

.chat-no-leidos {
    font-size: 9px;
    position: absolute;
    top: 5px;
    right: 5px;
}

.send-b {
    margin-top: 75px;
    width: 35px;
    float: right;
    cursor: pointer;
}

.btn-send {
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: 10px 11px;
    background: #50d92a;
    color: #fff;
    border-radius: 20px;
    margin-top: 20px;
    cursor: pointer;
}

.btn-send:hover {
    background: #32a013;
}

.btn-adj {
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: 10px 12px;
    background: #fff;
    color: #c4c4c4;
    border: 1px solid #c4c4c4;
    border-radius: 20px;
    margin-top: 20px;
    cursor: pointer;
}

.btn-adj:hover {
    background: #c4c4c4;
    color: #fff;
}

.mensaje-enviado .mensaje {
    background-color: #CDD8EF;
}

.mensaje-recibido .mensaje {
    background-color: #fff;
}

.mensaje-recibido span.fecha {
    float: right;
}

.mensaje-recibido .avatar-i {
    margin-top: 15px;
    margin-right: 24px;
}

.mensaje-recibido .avatar-i-abr {
    margin-top: 0 !important;
    margin-right: 10px !important;
}

.mensaje-enviado .avatar-i-abr {
    margin-top: 0 !important;
    margin-right: 10px !important;
}

.mensaje-recibido,
.mensaje-enviado {
    align-items: center;
    margin-top: 20px;
}

.mensaje-recibido .avatar-i,
.mensaje-enviado .avatar-i {
    margin-top: 0 !important;
    margin-right: 10px !important; /*Puto Miguel!!!*/
}

.mensaje-recibido .avatar-i-abr,
.mensaje-enviado .avatar-i-abr,
.row .avatar-i-abr,
.padding-l-none .avatar-i-s,
.row .avatar-i {
    align-items: center;
    justify-content: center;
    display: flex;
}

.mensaje-recibido .avatar-i-abr .bold-16-white,
.mensaje-enviado .avatar-i-abr .bold-16-white {
    line-height: 0;
}

#ChatHistorico {
    margin-top: 40px !important;
}

.mensaje-enviado .avatar-i {
    margin-top: 15px;
    margin-left: 10px;
}

.mensaje-enviado .avatar-i-abr {
    margin-top: 15px;
    margin-left: 10px;
}
.mensaje {
    margin-top: 0 !Important;
    padding: 8px 15px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 15%);
    box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 15%);
    word-break: break-word;
}

.menu-usuario-chat {
    position: absolute;
    top: 8px;
    right: -10px;
    width: 65px;
}

.mini-menu {
    position: absolute;
    right: 6px;
    top: 0px;
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 5px 0px;
    border-radius: 100%;
}

    .mini-menu:hover {
        color: white;
        background: #32549F;
    }

.papelera-usuario-chat {
    position: absolute;
    right: 6px;
    /*top: 2px;*/
    top: 0px;
}

.papelera-usuario-chat:hover {
    color: #FF3434;
}

.fecha-ultimo-mensaje {
    position: absolute;
    right: -16px !important;
    top: -9px !important;
    z-index: 1;
    background-color: #fff;
    padding: 0 10px;
}

.usuarios-mensajes-no-leidos {
    /*width: 20px;*/
    /*height: 20px;*/
    background-color: #ff0000;
    color: #ffffff;
    border: 1px solid #fff;
    border-radius: 20px;
    text-align: center;
    padding: 0px 4px;
    position: absolute;
    left: -10%;
    font-size: 11px;
    top: 51%;
    z-index: 1;
}

.usuarios-estados {
    width: 10px;
    height: 10px;
    background-color: #c0c0c0;
    color: #ffffff;
    border: 1px solid #fff;
    border-radius: 20px;
    text-align: center;
    padding: 0px 4px;
    position: absolute;
    left: 15px;
    font-size: 11px;
    top: 70%;
    z-index: 1;
}

.estado-disponible {
    width: 10px;
    height: 10px;
    background-color: #22D92A;
    color: #ffffff;
    border: 1px solid #fff;
    border-radius: 20px;
    text-align: center;
    padding: 0px 4px;
    position: absolute;
    left: 15px;
    font-size: 11px;
    top: 70%;
    z-index: 1;
}

.estado-ausente {
    width: 10px;
    height: 10px;
    background-color: #FF7B1B;
    color: #ffffff;
    border: 1px solid #fff;
    border-radius: 20px;
    text-align: center;
    padding: 0px 4px;
    position: absolute;
    left: 15px;
    font-size: 11px;
    top: 70%;
    z-index: 1;
}

.estado-ocupado {
    width: 10px;
    height: 10px;
    background-color: #FF3434;
    color: #ffffff;
    border: 1px solid #fff;
    border-radius: 20px;
    text-align: center;
    padding: 0px 4px;
    position: absolute;
    left: 15px;
    font-size: 11px;
    top: 70%;
    z-index: 1;
}

.estado-gris {
    width: 10px;
    height: 10px;
    background-color: #A5A5A5;
    color: #ffffff;
    border: 1px solid #fff;
    border-radius: 20px;
    text-align: center;
    padding: 0px 4px;
    position: absolute;
    left: 15px;
    font-size: 11px;
    top: 70%;
    z-index: 1;
    opacity: 0;
}

.mini-menu-ddl {
    width: 140px;
    border: 1px solid #c4c4c4;
    background: white;
    position: absolute;
    left: 335px;
    margin-top: 35px;
    z-index: 2000;
}

.mini-menu-ddl div {
    padding: 10px 10px;
}

.mini-menu-ddl div:hover {
    color: #fff;
    background-color: #32549F;
}

.mini-menu-ddl div i {
    margin-right: 5px;
}

.fecha-mensaje {
    position: absolute;
    right: 0 !important;
    top: -15px !important;
}

.nuevo-mensaje-chat {
    background-color: #FFFFFF;
}

.mensaje-nuevos-usuarios-grupo {
    margin-top: 20px;
}

.mensaje-nuevos-usuarios-servicio {
    margin-top: 20px;
}

.editar-grupo-chat {
    position: absolute;
    right: 6px;
    top: 6px;
}

.editar-grupo-chat:hover {
    color: #FF3434;
}

#Videollamada {
    position: absolute;
    padding: 7px;
    border: 2px solid #004D71;
    background-color: #FFFFFF;
    z-index: 99999;
    border-radius: 15px;
    width: 626px;
    height: 285px;
}

#VideollamadaCabecera {
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #32549F;
    color: #fff;
}

#imagen1, #imagen2 {
    width: 300px;
    height: 150px;
    padding: 0 75px;
}

#MarcosVideollamada, #PrevioLlamada {
    text-align: center;
    display: flex;
    justify-content: center;
}

#LogVideollamada {
    height: 50px;
    overflow-y: scroll;
    margin-bottom: 5px;
    border: 1px solid #000;
}

.button-zoom-in {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

#ChatUsuarios {
    margin-top: 8px;
}

/****************************** MEDIA QUERIES ********************************/
@media (max-width: 1500px) {
    .bold-20-blue {
        font-size: 18px;
    }

    .bold-16-blue {
        font-size: 14px;
    }

    .reg-17-black {
        font-size: 14px;
    }

    .perfil-p .p-name, .perfil-p span.p-fecha {
        margin-left: 20px;
    }

    .user-sel span.id-user {
        font-size: 14px;
        margin-left: 20px;
        margin-right: 6px;
    }

    .user-sel .p-name {
        font-size: 14px;
    }

    .user-grupo span.id-user {
        font-size: 14px;
        margin-left: 20px;
        margin-right: 6px;
    }

    .user-grupo .p-name {
        font-size: 14px;
        white-space: nowrap;
    }

    .user-sel span.p-fecha {
        font-size: 12px;
    }


}

@media (max-width: 1200px) {

    .input-busqueda {
        width: 88%;
    }

    .user-sel .p-name {
        font-size: 12px;
    }

    .user-grupo .p-name {
        font-size: 12px;
    }

    .listado-chats i.fa-circle {
        margin-left: 5px;
    }

    .info-user {

        width: 189px;
        height: 70px;
        border: 1px solid #c4c4c4;
        background: white;
        position: absolute;
        left: 10px;
        margin-top: 40px;
        z-index: 2000;
        padding: 10px 20px;
    }

}

@media (max-width: 991px) {

    .p-name {
        
        width: auto !important;

    }

    .user-sel .p-name {
        font-size: 17px;
    }

    .hide-991 {
        display: none;
    }
}

@media (max-width: 900px) {

    .btn-back {
        left: 10px;
    }

    .user-sel2 {
        height: 100px;
    }

    .registro-chat {
        height: calc(100vh - 280px);
        max-height: calc(100vh - 280px);
    }

    .input-busqueda {
        width: 70% !important;
    }

    .btn.btn-search {
        max-width: 100% !important;
    }
}