.chat-bg-inbox {
  background-repeat: repeat;
  background-color: #e2e8ef;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100dvh;
}
.file-box {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.file-manager h5 {
  text-transform: uppercase;
}
.file-manager {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
.folder-list li a {
  color: #666666;
  display: block;
  padding: 5px 0;
}
.folder-list li {
  border-bottom: 1px solid #e7eaec;
  display: block;
}
.folder-list li i {
  margin-right: 8px;
  color: #3d4d5d;
}
.category-list li a {
  color: #666666;
  display: block;
  padding: 5px 0;
}
.category-list li {
  display: block;
}
.category-list li i {
  margin-right: 8px;
  color: #3d4d5d;
}
.category-list li a .text-navy {
  color: #1ab394;
}
.category-list li a .text-primary {
  color: #1c84c6;
}
.category-list li a .text-info {
  color: #23c6c8;
}
.category-list li a .text-danger {
  color: #EF5352;
}
.category-list li a .text-warning {
  color: #F8AC59;
}
.file-manager h5.tag-title {
  margin-top: 20px;
}
.tag-list li {
  float: left;
}
.tag-list li a {
  font-size: 10px;
  background-color: #f3f3f4;
  padding: 5px 12px;
  color: inherit;
  border-radius: 2px;
  border: 1px solid #e7eaec;
  margin-right: 5px;
  margin-top: 5px;
  display: block;
}
.file {
  border: 2px dashed #e7eaec;
  padding: 0;
  background-color: #ffffff;
  position: relative;
}
.file-manager .hr-line-dashed {
  margin: 15px 0;
}
.file .icon,
.file .image {
  height: 80px;
  overflow: hidden;
}
.file .image img {
  object-position: 50% top;
  object-fit: cover;
}
.file .icon {
  padding: 15px 10px;
  text-align: center;
}
.file-control {
  color: inherit;
  font-size: 11px;
  margin-right: 10px;
}
.file-control.active {
  text-decoration: underline;
}
.file .icon i {
  font-size: 50px;
  color: #dadada;
}
.file .file-name {
  padding: 10px;
  background-color: #f8f8f8;
  border-top: 1px solid #e7eaec;
}
.file-name small {
  color: #676a6c;
}
ul.tag-list li {
  list-style: none;
}
.file-close {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  padding: 0px 6px;
}
.corner {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  line-height: 0;
  border: 0.6em solid transparent;
  border-right: 0.6em solid #f1f1f1;
  border-bottom: 0.6em solid #f1f1f1;
  right: 0em;
  bottom: 0em;
}
a.compose-mail {
  padding: 8px 10px;
}
.mail-search {
  max-width: 300px;
}
.ibox {
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
}
.ibox.collapsed .ibox-content {
  display: none;
}
.ibox.collapsed .fa.fa-chevron-up:before {
  content: "\f078";
}
.ibox.collapsed .fa.fa-chevron-down:before {
  content: "\f077";
}
.ibox:after,
.ibox:before {
  display: table;
}
.ibox-title {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 3px 0 0;
  color: inherit;
  margin-bottom: 0;
  padding: 14px 15px 7px;
  min-height: 48px;
}
.ibox-content {
  background-color: #ffffff;
  color: inherit;
  padding: 15px 20px 20px 20px;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
}
.ibox-footer {
  color: inherit;
  border-top: 1px solid #e7eaec;
  font-size: 90%;
  background: #ffffff;
  padding: 10px 15px;
}

.skeleton .box-shadow {
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12);
}
.skeleton .square {
  height: 80px;
  border-radius: 5px;
  background: rgba(130, 130, 130, 0.2);
  background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.3)), color-stop(33%, rgba(130, 130, 130, 0.2)));
  background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
  background-size: 800px 100px;
  animation: wave-squares 2s infinite ease-out;
}
.skeleton .line {
  height: 12px;
  margin-bottom:6px;
  border-radius: 2px;
  background: rgba(130, 130, 130, 0.2);
  background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.3)), color-stop(33%, rgba(130, 130, 130, 0.2)));
  background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
  background-size: 800px 100px;
  animation: wave-lines 2s infinite ease-out;
}
.skeleton-right{
 flex:1;
}
.skeleton-left{
 flex:2;
 padding-right:15px;
}
.flex1{
 flex: 1;
}
.flex2{
 flex: 2;
}
.skeleton .line:last-child{
 margin-bottom: 0;
}
.h8{
 height: 8px !important;
}
.h10{
 height: 10px !important;
}
.h12{
 height: 12px !important;
}
.h15{
 height: 15px !important;
}
.h17{
 height: 17px !important;
}
.h20{
 height: 20px !important;
}
.h25{
 height: 25px !important;
}
.h35{
 height: 35px !important;
}
.w180px {
  width: 180px!important;
}
.w200px {
  width: 200px!important;
}
.w220px {
  width: 220px!important;
}
.w35{
 width: 35px !important;
}
.w10{
 width: 10% !important
}
.w25{
 width: 25% !important
}
.w30{
 width: 30% !important
}
.w40{
 width:40% !important;
}
.w50{
 width: 50% !important
}
.w60{
 width: 60% !important
}
.w70{
 width: 70% !important
}
.w75{
 width: 75% !important
}
.w80{
 width: 80% !important
}
.w85{
 width: 85% !important
}
.w90{
 width: 90% !important
}
.w95{
 width: 95% !important
}
.w100{
 width: 100% !important
}
.m10{
 margin-bottom: 10px !important;
}
.circle{
 border-radius: 50% !important;
}

@keyframes wave-lines {
 0% {
     background-position: -468px 0;
 }
  100% {
     background-position: 468px 0;
 }
}
@keyframes wave-squares {
 0% {
     background-position: -468px 0;
 }
  100% {
     background-position: 468px 0;
 }
}

.inbox-font-small-select {
  max-width: 220px;
  border: 1px dashed #dddddd;
  font-size: 12px!important;
  font-weight: 400!important;
  padding: 0;
  width: 100%;
}

#inbox .dropdown-menu.dropdown-menu-right {
  overflow-x: hidden;
  height: 550px;
}
.border-2 {
  border: 2px solid #f0eff5;
}
#contacts .unread-message {
  line-height: 1;
  gap: 3px;
}

.chat-input textarea {
  resize: none;
  height: 40px;
}

.media-video {
  width: 100%;
  max-width: 500px;
}

.inbox-messages-context {
  border-radius: 4px;
  width: 100%;
  max-width: 300px;
  background-color: #f5f7fb;
  padding: 5px 10px;
  margin-bottom: 0.25rem!important;
}
.inbox-messages-context p {
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.chat-conversation .right .conversation-list .ctext-wrap .ctext-wrap-content {
  width: 100%;
}

.chat-conversation .conversation-list .ctext-wrap-content {
  padding: 10px!important;
}

.media-video .plyr {
  margin-bottom: 0.25rem!important;
}

.loader{
  width: 100px;
  height: 75px;
  margin: 0 auto;
  background: #fff;
  position: absolute;
  border-radius: 100%;
}
.loader:before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  border: 15px solid transparent;
  border-top: 25px solid #fff;
  transform: rotate(45deg);
  top: 50px;
  left: -15px;
}

.loader:after {
  content: '';
  width: 12px;
  height: 12px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50% , -50%);
  border-radius: 50%;
  background-color: #7269ef;
  box-shadow: 20px 0 #7269ef, -20px 0 #7269ef;
  animation: flash 0.5s ease-out infinite alternate;
}

@keyframes flash {
  0% {
    background-color: rgba(255, 60, 0, 0.25);
    box-shadow: 20px 0 rgba(255, 60, 0, 0.25), -20px 0 #7269ef;
  }
  50% {
    background-color: #7269ef;
    box-shadow: 20px 0 rgba(255, 60, 0, 0.25), -20px 0 rgba(255, 60, 0, 0.25);
  }
  100% {
    background-color: rgba(255, 60, 0, 0.25);
    box-shadow: 20px 0 #7269ef, -20px 0 rgba(255, 60, 0, 0.25);
  }
}

/* Estilos para el botón de grabación de audio */
.chat-send.recording {
    animation: pulse-recording 1.5s ease-in-out infinite;
    background-color: #ef5350 !important;
    border-color: #ef5350 !important;
}

@keyframes pulse-recording {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 83, 80, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(239, 83, 80, 0);
    }
}

@media (max-width: 991px) {
    .chat-leftsidebar {
        min-width: 100%;
        max-width: 100%;
        height: calc(100dvh - 70px);
        display: block;
    }

    .user-chat {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100dvh;
        z-index: 9999;
        background: #fff;
        transform: translateX(100%);
        transition: all 0.3s ease;
        visibility: hidden;
    }

    .user-chat.user-chat-show {
        transform: translateX(0);
        visibility: visible;
    }
    
    .user-chat-nav .nav-btn {
        color: #fff;
    }
}