@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

*{

  margin: 10;

  /* padding: 0; */

  box-sizing: border-box;

  text-decoration: none;

  font-family: 'Poppins', sans-serif;

}

body{

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100vh;

  background: #000;

  padding: 0 10px;

}

@media (max-width: 700px) {
  .formChat{
    padding: 0;
    display: flex;
    justify-content: space-between;
  }
}

@media (min-width: 700px){
  .formChat{
    padding: 18px 30px;
    display: flex;
    justify-content: space-between;
  }
}

.wrapper{

  background: #fff;

  max-width: 600px;

  width: 100%;

  /* border-radius: 16px; */

  box-shadow: 0 0 6px 0 rgba(0,0,0,0.1),

              0 0px 64px -48px rgba(0,0,0,0.5);

}



/* Login & Signup Form CSS Start */

.form{

  padding: 25px 30px;

}

.form header{

  font-size: 25px;

  font-weight: 600;

  padding-bottom: 10px;

  border-bottom: 1px solid #e6e6e6;

}

.form form{

  margin: 20px 0;

}

.form form .error-text{

  color: #721c24;

  padding: 8px 10px;

  text-align: center;

  border-radius: 5px;

  background: #f8d7da;

  border: 1px solid #f5c6cb;

  margin-bottom: 10px;

  display: none;

}

.form form .name-details{

  display: flex;

}

.form .name-details .field:first-child{

  margin-right: 10px;

}

.form .name-details .field:last-child{

  margin-left: 10px;

}

.form form .field{

  display: flex;

  margin-bottom: 10px;

  flex-direction: column;

  position: relative;

}

.form form .field label{

  margin-bottom: 2px;

}

.form form .input input{

  height: 40px;

  width: 100%;

  font-size: 16px;

  padding: 0 10px;

  border-radius: 5px;

  border: 1px solid #ccc;

}

.form form .field input{

  outline: none;

}

.form form .image input{

  font-size: 17px;

}

.form form .button input{

  height: 45px;

  border: none;

  color: #fff;

  font-size: 17px;

  background: #1984bc;

  border-radius: 5px;

  cursor: pointer;

  margin-top: 13px;

}

.form form .field i{

  position: absolute;

  right: 15px;

  top: 70%;

  color: #ccc;

  cursor: pointer;

  transform: translateY(-50%);

}

.form form .field i.active::before{

  color: #333;

  content: "\f070";

}

.form .link{

  text-align: center;

  margin: 10px 0;

  font-size: 17px;

}

.form .link a{

  color: #333;

}

.form .link a:hover{

  text-decoration: underline;

}





/* Users List CSS Start */

.users{

  padding: 25px 30px;

}

.users header,

.users-list a{

  display: flex;

  align-items: center;

  padding-bottom: 20px;

  border-bottom: 1px solid #e6e6e6;

  justify-content: space-between;

}

.wrapper img{

  object-fit: cover;

  border-radius: 50%;

}

.users header img{

  height: 50px;

  width: 50px;

}

:is(.users, .users-list) .content{

  display: flex;

  align-items: center;

}

:is(.users, .users-list) .content .details{

  color: #000;

  margin-left: 20px;

}

:is(.users, .users-list) .details span{

  font-size: 18px;

  font-weight: 500;

}

.users header .logout{

  display: block;

  background: #333;

  color: #fff;

  outline: none;

  border: none;

  padding: 7px 15px;

  text-decoration: none;

  border-radius: 5px;

  font-size: 17px;

}

.users .search{

  margin: 20px 0;

  display: flex;

  position: relative;

  align-items: center;

  justify-content: space-between;

}

.users .search .text{

  font-size: 18px;

}

.users .search input{

  position: absolute;

  height: 42px;

  width: calc(100% - 50px);

  font-size: 16px;

  padding: 0 13px;

  border: 1px solid #e6e6e6;

  outline: none;

  border-radius: 5px 0 0 5px;

  opacity: 0;

  pointer-events: none;

  transition: all 0.2s ease;

}

.users .search input.show{

  opacity: 1;

  pointer-events: auto;

}

.users .search button{

  position: relative;

  z-index: 1;

  width: 47px;

  height: 42px;

  font-size: 17px;

  cursor: pointer;

  border: none;

  background: #fff;

  color: #333;

  outline: none;

  border-radius: 0 5px 5px 0;

  transition: all 0.2s ease;

}

.users .search button.active{

  background: #333;

  color: #fff;

}

.search button.active i::before{

  content: '\f00d';

}

.users-list{

  max-height: 350px;

  overflow-y: auto;

}

:is(.users-list, .chat-box)::-webkit-scrollbar{

  width: 0px;

}

.users-list a{

  padding-bottom: 10px;

  margin-bottom: 15px;

  padding-right: 15px;

  border-bottom-color: #f1f1f1;

}

.users-list a:last-child{

  margin-bottom: 0px;

  border-bottom: none;

}

.users-list a img{

  height: 40px;

  width: 40px;

}

.users-list a .details p{

  color: #67676a;

}

.users-list a .status-dot{

  font-size: 12px;

  color: #468669;

  padding-left: 10px;

}

.users-list a .status-dot.offline{

  color: #ccc;

}



/* Chat Area CSS Start */

.chat-area header{

  display: flex;

  align-items: center;

  padding: 18px 30px;

  justify-content: space-between;

}

.chat-area header .back-icon{

  color: #333;

  font-size: 18px;

}

.chat-area header img{

  height: 45px;

  width: 45px;

  margin: 0 15px;

}

.chat-area header .details span{

  font-size: 17px;

  font-weight: 500;

}

.chat-box{

  position: relative;

  min-height: 85px;

  max-height: 700px;

  overflow-y: auto;

  /* padding: 10px 30px 20px 30px; */

  background: #f7f7f7;

  box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%),

              inset 0 -32px 32px -32px rgb(0 0 0 / 5%);

}

.chat-box .text{

  position: absolute;

  top: 45%;

  left: 50%;

  width: calc(100% - 50px);

  text-align: center;

  transform: translate(-50%, -50%);

  font-size: large;
}

.chat-box .chat{

  margin: 15px 0;

}

.chat-box .chat div{

  word-wrap: break-word;

  padding: 8px 16px;

  /* box-shadow: 0 0 32px rgb(0 0 0 / 8%),

              0rem 16px 16px -16px rgb(0 0 0 / 10%); */

}

.chat-box .outgoing{

  display: flex;

}

.chat-box .outgoing .details{

  margin-left: auto;

  /* max-width: calc(100% - 130px); */

}

.outgoing .details div{

  /* background: #333; */
  background: #2255a4;

  color: #fff;

  border-radius: 18px 18px 0 18px;

}

.chat-box .incoming{

  display: flex;

  align-items: flex-end;

}

.chat-box .incoming img{

  height: 35px;

  width: 35px;

}

.chat-box .incoming .details{

  margin-right: auto;

  margin-left: 10px;

  /* max-width: calc(100% - 130px); */

}

.incoming .details div{

  background: #fff;

  color: #333;

  border-radius: 18px 18px 18px 0;

}

.formChat{

  padding: 18px 30px;

  display: flex;

  justify-content: space-between;

}

.formChat input{

  height: 45px;

  width: 100%;

  font-size: 16px;

  padding: 0 13px;

  border: 1px solid #e6e6e6;

  outline: none;

  /* border-radius: 5px 0 0 5px; */

}

.formChat select{
  border: 1px solid #e6e6e6;

}

.formChat button{

  color: #fff;

  width: 75px;

  border: none;

  outline: none;

  background: #000;

  font-size: 25px;

  cursor: pointer;

  /* opacity: 0.7; */

  /* pointer-events: none; */

  /* border-radius: 0 5px 5px 0; */

  transition: all 0.3s ease;

}

.formChat button.active{

  opacity: 1;

  pointer-events: auto;

}

.fotoPerfilChat{

    border: solid 1px #f7f7f7;

    border-radius: 50%;

    background-color: #f7f7f7;

    color: #000;

}

.botonOn, .botonOff{

  border-radius: 50%;

  padding: 10px;

  cursor: pointer;

}



.botonOff{

  background-color: red;

}



.botonOn{

  background-color: green;

}



.botonOn, .botonOff i{

  color: #FFF;

}



.chatApagado{

  max-height: 500px;

  min-height: 500px;

}

/* Responive media query */

@media screen and (max-width: 450px) {

  .form, .users{

    padding: 20px;

  }

  .form header{

    text-align: center;

  }

  .form form .name-details{

    flex-direction: column;

  }

  .form .name-details .field:first-child{

    margin-right: 0px;

  }

  .form .name-details .field:last-child{

    margin-left: 0px;

  }



  .users header img{

    height: 45px;

    width: 45px;

  }

  .users header .logout{

    padding: 6px 10px;

    font-size: 16px;

  }

  :is(.users, .users-list) .content .details{

    margin-left: 15px;

  }



  .users-list a{

    padding-right: 10px;

  }



  .chat-area header{

    padding: 15px 20px;

  }

  .chat-box{

    min-height: 400px;

    padding: 10px 15px 15px 20px;

  }

  .chat-box .chat div{

    font-size: 15px;

  }

  .chat-box .outogoing .details{

    max-width: 230px;

  }

  .chat-box .incoming .details{

    max-width: 265px;

  }

  .incoming .details img{

    height: 30px;

    width: 30px;

  }

  .chat-area form{

    padding: 20px;

  }

  .chat-area form input{

    height: 40px;

    width: calc(100% - 48px);

  }

  .chat-area form button{

    width: 45px;

  }

}



.textAreaStyle{

  width: 100%;

  border: 1px solid #e6e6e6;

  padding: 10px 13px;

  font-size: 16px;

  height: 150px;

}



.details div b{

  margin-bottom: 10px;

}

div.MultiFile-label{
  margin-bottom: 10px;
  padding: 10px 10px 10px 0px;
  font-size: 16px;
  border: 1px solid #e6e6e6;
}

.MultiFile-remove{
  padding: 11px 20px;
  background: #da542e;
  color: #FFF;
}

.MultiFile-title{
  padding: 10px;
}

.MultiFile-label a:hover {
  color: #e4e4e4;
}

.btnEnviarPrivado{
  background-color: #ffc107!important;
  width: fit-content!important;
}

.chat-box .warning{
  width: 100%;
  margin: 0;
}

.chat-box .warning .details{
  background: #908f8f;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-box .chat .details .divEliminarMsj{
  position: relative;
  width: 30px;
  height: 30px;

  background: #da542e;
  border-radius: 50%;
  cursor: pointer;
  padding: 0!important;
  margin-left: 30px;
}

.containerEliminarMsj {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.spinner {
  position: relative;
  width: calc(100% - 0px);
  height: calc(100% - 0px);
  border: 2px solid transparent!important;
  border-top-color: #FFF!important;
  border-radius: 50%!important;
  animation: spin 3s linear infinite;
  background: transparent!important;
  padding: 0!important;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.iconBtnMsj {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tooltip1 {
  display: none;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8)!important;
  color: #fff!important;
  padding: 5px 10px!important;
  border-radius: 5px!important;
  font-size: 14px!important;
  z-index: 999;
  top: 115%;
  left: 50%;
  transform: translateX(-50%);
}

.thead-dark{
  background-color: #000;
}

.msgError{
  font-size: 0.8em;
  color: red;
}