update dist files

dist/css/alt/adminlte.extra-components.css

@@ -1,10 +1,255 @@
 /*!
- *   AdminLTE v3.1.0-rc
+ *   AdminLTE v3.1.0
  *     Only Extra Components
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>
  */
+@-webkit-keyframes flipInX {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transition-timing-function: ease-in;
+    opacity: 0;
+  }
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transition-timing-function: ease-in;
+  }
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+  100% {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+@keyframes flipInX {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transition-timing-function: ease-in;
+    opacity: 0;
+  }
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transition-timing-function: ease-in;
+  }
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+  100% {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes shake {
+  0% {
+    -webkit-transform: translate(2px, 1px) rotate(0deg);
+    transform: translate(2px, 1px) rotate(0deg);
+  }
+  10% {
+    -webkit-transform: translate(-1px, -2px) rotate(-2deg);
+    transform: translate(-1px, -2px) rotate(-2deg);
+  }
+  20% {
+    -webkit-transform: translate(-3px, 0) rotate(3deg);
+    transform: translate(-3px, 0) rotate(3deg);
+  }
+  30% {
+    -webkit-transform: translate(0, 2px) rotate(0deg);
+    transform: translate(0, 2px) rotate(0deg);
+  }
+  40% {
+    -webkit-transform: translate(1px, -1px) rotate(1deg);
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+  50% {
+    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
+    transform: translate(-1px, 2px) rotate(-1deg);
+  }
+  60% {
+    -webkit-transform: translate(-3px, 1px) rotate(0deg);
+    transform: translate(-3px, 1px) rotate(0deg);
+  }
+  70% {
+    -webkit-transform: translate(2px, 1px) rotate(-2deg);
+    transform: translate(2px, 1px) rotate(-2deg);
+  }
+  80% {
+    -webkit-transform: translate(-1px, -1px) rotate(4deg);
+    transform: translate(-1px, -1px) rotate(4deg);
+  }
+  90% {
+    -webkit-transform: translate(2px, 2px) rotate(0deg);
+    transform: translate(2px, 2px) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translate(1px, -2px) rotate(-1deg);
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}
+
+@keyframes shake {
+  0% {
+    -webkit-transform: translate(2px, 1px) rotate(0deg);
+    transform: translate(2px, 1px) rotate(0deg);
+  }
+  10% {
+    -webkit-transform: translate(-1px, -2px) rotate(-2deg);
+    transform: translate(-1px, -2px) rotate(-2deg);
+  }
+  20% {
+    -webkit-transform: translate(-3px, 0) rotate(3deg);
+    transform: translate(-3px, 0) rotate(3deg);
+  }
+  30% {
+    -webkit-transform: translate(0, 2px) rotate(0deg);
+    transform: translate(0, 2px) rotate(0deg);
+  }
+  40% {
+    -webkit-transform: translate(1px, -1px) rotate(1deg);
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+  50% {
+    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
+    transform: translate(-1px, 2px) rotate(-1deg);
+  }
+  60% {
+    -webkit-transform: translate(-3px, 1px) rotate(0deg);
+    transform: translate(-3px, 1px) rotate(0deg);
+  }
+  70% {
+    -webkit-transform: translate(2px, 1px) rotate(-2deg);
+    transform: translate(2px, 1px) rotate(-2deg);
+  }
+  80% {
+    -webkit-transform: translate(-1px, -1px) rotate(4deg);
+    transform: translate(-1px, -1px) rotate(4deg);
+  }
+  90% {
+    -webkit-transform: translate(2px, 2px) rotate(0deg);
+    transform: translate(2px, 2px) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translate(1px, -2px) rotate(-1deg);
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}
+
+@-webkit-keyframes wobble {
+  0% {
+    -webkit-transform: none;
+    transform: none;
+  }
+  15% {
+    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+  30% {
+    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+  45% {
+    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+  60% {
+    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+  75% {
+    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+  100% {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes wobble {
+  0% {
+    -webkit-transform: none;
+    transform: none;
+  }
+  15% {
+    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+  30% {
+    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+  45% {
+    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+  60% {
+    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+  75% {
+    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+  100% {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
 .small-box {
   border-radius: 0.25rem;
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
@@ -93,7 +338,9 @@
   position: absolute;
   right: 15px;
   top: 15px;
+  transition: -webkit-transform 0.3s linear;
   transition: transform 0.3s linear;
+  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
 }
 
 .small-box .icon > i.fa, .small-box .icon > i.fas, .small-box .icon > i.far, .small-box .icon > i.fab, .small-box .icon > i.fal, .small-box .icon > i.fad, .small-box .icon > i.ion {
@@ -106,7 +353,9 @@
   position: absolute;
   right: 15px;
   top: 15px;
+  transition: -webkit-transform 0.3s linear;
   transition: transform 0.3s linear;
+  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
 }
 
 .small-box:hover {
@@ -114,10 +363,12 @@
 }
 
 .small-box:hover .icon > i, .small-box:hover .icon > i.fa, .small-box:hover .icon > i.fas, .small-box:hover .icon > i.far, .small-box:hover .icon > i.fab, .small-box:hover .icon > i.fal, .small-box:hover .icon > i.fad, .small-box:hover .icon > i.ion {
+  -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
 
 .small-box:hover .icon > svg {
+  -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
 
@@ -137,6 +388,7 @@
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
   border-radius: 0.25rem;
   background-color: #fff;
+  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   margin-bottom: 1rem;
@@ -158,11 +410,14 @@
 
 .info-box .info-box-icon {
   border-radius: 0.25rem;
+  -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   font-size: 1.875rem;
+  -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   text-align: center;
@@ -174,13 +429,17 @@
 }
 
 .info-box .info-box-content {
+  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   line-height: 1.8;
+  -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   padding: 0 10px;
@@ -336,6 +595,86 @@
   color: #fff;
 }
 
+.dark-mode .info-box .info-box .bg-primary,
+.dark-mode .info-box .info-box .bg-gradient-primary {
+  color: #fff;
+}
+
+.dark-mode .info-box .info-box .bg-primary .progress-bar,
+.dark-mode .info-box .info-box .bg-gradient-primary .progress-bar {
+  background-color: #fff;
+}
+
+.dark-mode .info-box .info-box .bg-secondary,
+.dark-mode .info-box .info-box .bg-gradient-secondary {
+  color: #fff;
+}
+
+.dark-mode .info-box .info-box .bg-secondary .progress-bar,
+.dark-mode .info-box .info-box .bg-gradient-secondary .progress-bar {
+  background-color: #fff;
+}
+
+.dark-mode .info-box .info-box .bg-success,
+.dark-mode .info-box .info-box .bg-gradient-success {
+  color: #fff;
+}
+
+.dark-mode .info-box .info-box .bg-success .progress-bar,
+.dark-mode .info-box .info-box .bg-gradient-success .progress-bar {
+  background-color: #fff;
+}
+
+.dark-mode .info-box .info-box .bg-info,
+.dark-mode .info-box .info-box .bg-gradient-info {
+  color: #fff;
+}
+
+.dark-mode .info-box .info-box .bg-info .progress-bar,
+.dark-mode .info-box .info-box .bg-gradient-info .progress-bar {
+  background-color: #fff;
+}
+
+.dark-mode .info-box .info-box .bg-warning,
+.dark-mode .info-box .info-box .bg-gradient-warning {
+  color: #1f2d3d;
+}
+
+.dark-mode .info-box .info-box .bg-warning .progress-bar,
+.dark-mode .info-box .info-box .bg-gradient-warning .progress-bar {
+  background-color: #1f2d3d;
+}
+
+.dark-mode .info-box .info-box .bg-danger,
+.dark-mode .info-box .info-box .bg-gradient-danger {
+  color: #fff;
+}
+
+.dark-mode .info-box .info-box .bg-danger .progress-bar,
+.dark-mode .info-box .info-box .bg-gradient-danger .progress-bar {
+  background-color: #fff;
+}
+
+.dark-mode .info-box .info-box .bg-light,
+.dark-mode .info-box .info-box .bg-gradient-light {
+  color: #1f2d3d;
+}
+
+.dark-mode .info-box .info-box .bg-light .progress-bar,
+.dark-mode .info-box .info-box .bg-gradient-light .progress-bar {
+  background-color: #1f2d3d;
+}
+
+.dark-mode .info-box .info-box .bg-dark,
+.dark-mode .info-box .info-box .bg-gradient-dark {
+  color: #fff;
+}
+
+.dark-mode .info-box .info-box .bg-dark .progress-bar,
+.dark-mode .info-box .info-box .bg-gradient-dark .progress-bar {
+  background-color: #fff;
+}
+
 .timeline {
   margin: 0 0 45px;
   padding: 0;
@@ -546,6 +885,7 @@
 }
 
 .direct-chat.chat-pane-open .direct-chat-contacts {
+  -webkit-transform: translate(0, 0);
   transform: translate(0, 0);
 }
 
@@ -558,6 +898,7 @@
 }
 
 .direct-chat-messages {
+  -webkit-transform: translate(0, 0);
   transform: translate(0, 0);
   height: 250px;
   overflow: auto;
@@ -581,7 +922,9 @@
 
 .direct-chat-messages,
 .direct-chat-contacts {
+  transition: -webkit-transform .5s ease-in-out;
   transition: transform .5s ease-in-out;
+  transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
 }
 
 .direct-chat-text {
@@ -654,10 +997,12 @@
 }
 
 .direct-chat-contacts-open .direct-chat-contacts {
+  -webkit-transform: translate(0, 0);
   transform: translate(0, 0);
 }
 
 .direct-chat-contacts {
+  -webkit-transform: translate(101%, 0);
   transform: translate(101%, 0);
   background-color: #343a40;
   bottom: 0;
@@ -1027,6 +1372,276 @@
   border-right-color: transparent;
 }
 
+.dark-mode .direct-chat-primary .right > .direct-chat-text {
+  background-color: #3f6791;
+  border-color: #3f6791;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-primary .right > .direct-chat-text::after, .dark-mode .direct-chat-primary .right > .direct-chat-text::before {
+  border-left-color: #3f6791;
+}
+
+.dark-mode .direct-chat-secondary .right > .direct-chat-text {
+  background-color: #6c757d;
+  border-color: #6c757d;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-secondary .right > .direct-chat-text::after, .dark-mode .direct-chat-secondary .right > .direct-chat-text::before {
+  border-left-color: #6c757d;
+}
+
+.dark-mode .direct-chat-success .right > .direct-chat-text {
+  background-color: #00bc8c;
+  border-color: #00bc8c;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-success .right > .direct-chat-text::after, .dark-mode .direct-chat-success .right > .direct-chat-text::before {
+  border-left-color: #00bc8c;
+}
+
+.dark-mode .direct-chat-info .right > .direct-chat-text {
+  background-color: #3498db;
+  border-color: #3498db;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-info .right > .direct-chat-text::after, .dark-mode .direct-chat-info .right > .direct-chat-text::before {
+  border-left-color: #3498db;
+}
+
+.dark-mode .direct-chat-warning .right > .direct-chat-text {
+  background-color: #f39c12;
+  border-color: #f39c12;
+  color: #1f2d3d;
+}
+
+.dark-mode .direct-chat-warning .right > .direct-chat-text::after, .dark-mode .direct-chat-warning .right > .direct-chat-text::before {
+  border-left-color: #f39c12;
+}
+
+.dark-mode .direct-chat-danger .right > .direct-chat-text {
+  background-color: #e74c3c;
+  border-color: #e74c3c;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-danger .right > .direct-chat-text::after, .dark-mode .direct-chat-danger .right > .direct-chat-text::before {
+  border-left-color: #e74c3c;
+}
+
+.dark-mode .direct-chat-light .right > .direct-chat-text {
+  background-color: #f8f9fa;
+  border-color: #f8f9fa;
+  color: #1f2d3d;
+}
+
+.dark-mode .direct-chat-light .right > .direct-chat-text::after, .dark-mode .direct-chat-light .right > .direct-chat-text::before {
+  border-left-color: #f8f9fa;
+}
+
+.dark-mode .direct-chat-dark .right > .direct-chat-text {
+  background-color: #343a40;
+  border-color: #343a40;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-dark .right > .direct-chat-text::after, .dark-mode .direct-chat-dark .right > .direct-chat-text::before {
+  border-left-color: #343a40;
+}
+
+.dark-mode .direct-chat-lightblue .right > .direct-chat-text {
+  background-color: #86bad8;
+  border-color: #86bad8;
+  color: #1f2d3d;
+}
+
+.dark-mode .direct-chat-lightblue .right > .direct-chat-text::after, .dark-mode .direct-chat-lightblue .right > .direct-chat-text::before {
+  border-left-color: #86bad8;
+}
+
+.dark-mode .direct-chat-navy .right > .direct-chat-text {
+  background-color: #002c59;
+  border-color: #002c59;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-navy .right > .direct-chat-text::after, .dark-mode .direct-chat-navy .right > .direct-chat-text::before {
+  border-left-color: #002c59;
+}
+
+.dark-mode .direct-chat-olive .right > .direct-chat-text {
+  background-color: #74c8a3;
+  border-color: #74c8a3;
+  color: #1f2d3d;
+}
+
+.dark-mode .direct-chat-olive .right > .direct-chat-text::after, .dark-mode .direct-chat-olive .right > .direct-chat-text::before {
+  border-left-color: #74c8a3;
+}
+
+.dark-mode .direct-chat-lime .right > .direct-chat-text {
+  background-color: #67ffa9;
+  border-color: #67ffa9;
+  color: #1f2d3d;
+}
+
+.dark-mode .direct-chat-lime .right > .direct-chat-text::after, .dark-mode .direct-chat-lime .right > .direct-chat-text::before {
+  border-left-color: #67ffa9;
+}
+
+.dark-mode .direct-chat-fuchsia .right > .direct-chat-text {
+  background-color: #f672d8;
+  border-color: #f672d8;
+  color: #1f2d3d;
+}
+
+.dark-mode .direct-chat-fuchsia .right > .direct-chat-text::after, .dark-mode .direct-chat-fuchsia .right > .direct-chat-text::before {
+  border-left-color: #f672d8;
+}
+
+.dark-mode .direct-chat-maroon .right > .direct-chat-text {
+  background-color: #ed6c9b;
+  border-color: #ed6c9b;
+  color: #1f2d3d;
+}
+
+.dark-mode .direct-chat-maroon .right > .direct-chat-text::after, .dark-mode .direct-chat-maroon .right > .direct-chat-text::before {
+  border-left-color: #ed6c9b;
+}
+
+.dark-mode .direct-chat-blue .right > .direct-chat-text {
+  background-color: #3f6791;
+  border-color: #3f6791;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-blue .right > .direct-chat-text::after, .dark-mode .direct-chat-blue .right > .direct-chat-text::before {
+  border-left-color: #3f6791;
+}
+
+.dark-mode .direct-chat-indigo .right > .direct-chat-text {
+  background-color: #6610f2;
+  border-color: #6610f2;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-indigo .right > .direct-chat-text::after, .dark-mode .direct-chat-indigo .right > .direct-chat-text::before {
+  border-left-color: #6610f2;
+}
+
+.dark-mode .direct-chat-purple .right > .direct-chat-text {
+  background-color: #6f42c1;
+  border-color: #6f42c1;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-purple .right > .direct-chat-text::after, .dark-mode .direct-chat-purple .right > .direct-chat-text::before {
+  border-left-color: #6f42c1;
+}
+
+.dark-mode .direct-chat-pink .right > .direct-chat-text {
+  background-color: #e83e8c;
+  border-color: #e83e8c;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-pink .right > .direct-chat-text::after, .dark-mode .direct-chat-pink .right > .direct-chat-text::before {
+  border-left-color: #e83e8c;
+}
+
+.dark-mode .direct-chat-red .right > .direct-chat-text {
+  background-color: #e74c3c;
+  border-color: #e74c3c;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-red .right > .direct-chat-text::after, .dark-mode .direct-chat-red .right > .direct-chat-text::before {
+  border-left-color: #e74c3c;
+}
+
+.dark-mode .direct-chat-orange .right > .direct-chat-text {
+  background-color: #fd7e14;
+  border-color: #fd7e14;
+  color: #1f2d3d;
+}
+
+.dark-mode .direct-chat-orange .right > .direct-chat-text::after, .dark-mode .direct-chat-orange .right > .direct-chat-text::before {
+  border-left-color: #fd7e14;
+}
+
+.dark-mode .direct-chat-yellow .right > .direct-chat-text {
+  background-color: #f39c12;
+  border-color: #f39c12;
+  color: #1f2d3d;
+}
+
+.dark-mode .direct-chat-yellow .right > .direct-chat-text::after, .dark-mode .direct-chat-yellow .right > .direct-chat-text::before {
+  border-left-color: #f39c12;
+}
+
+.dark-mode .direct-chat-green .right > .direct-chat-text {
+  background-color: #00bc8c;
+  border-color: #00bc8c;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-green .right > .direct-chat-text::after, .dark-mode .direct-chat-green .right > .direct-chat-text::before {
+  border-left-color: #00bc8c;
+}
+
+.dark-mode .direct-chat-teal .right > .direct-chat-text {
+  background-color: #20c997;
+  border-color: #20c997;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-teal .right > .direct-chat-text::after, .dark-mode .direct-chat-teal .right > .direct-chat-text::before {
+  border-left-color: #20c997;
+}
+
+.dark-mode .direct-chat-cyan .right > .direct-chat-text {
+  background-color: #3498db;
+  border-color: #3498db;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-cyan .right > .direct-chat-text::after, .dark-mode .direct-chat-cyan .right > .direct-chat-text::before {
+  border-left-color: #3498db;
+}
+
+.dark-mode .direct-chat-white .right > .direct-chat-text {
+  background-color: #fff;
+  border-color: #fff;
+  color: #1f2d3d;
+}
+
+.dark-mode .direct-chat-white .right > .direct-chat-text::after, .dark-mode .direct-chat-white .right > .direct-chat-text::before {
+  border-left-color: #fff;
+}
+
+.dark-mode .direct-chat-gray .right > .direct-chat-text {
+  background-color: #6c757d;
+  border-color: #6c757d;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-gray .right > .direct-chat-text::after, .dark-mode .direct-chat-gray .right > .direct-chat-text::before {
+  border-left-color: #6c757d;
+}
+
+.dark-mode .direct-chat-gray-dark .right > .direct-chat-text {
+  background-color: #343a40;
+  border-color: #343a40;
+  color: #fff;
+}
+
+.dark-mode .direct-chat-gray-dark .right > .direct-chat-text::after, .dark-mode .direct-chat-gray-dark .right > .direct-chat-text::before {
+  border-left-color: #343a40;
+}
+
 .users-list {
   padding-left: 0;
   list-style: none;

dist/css/alt/adminlte.pages.css

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.1.0-rc
+ *   AdminLTE v3.1.0
  *     Only Pages
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
@@ -34,6 +34,252 @@ a.close.disabled, a.disabled.mailbox-attachment-close {
   pointer-events: none;
 }
 
+@-webkit-keyframes flipInX {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transition-timing-function: ease-in;
+    opacity: 0;
+  }
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transition-timing-function: ease-in;
+  }
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+  100% {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+@keyframes flipInX {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transition-timing-function: ease-in;
+    opacity: 0;
+  }
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transition-timing-function: ease-in;
+  }
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+  100% {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes shake {
+  0% {
+    -webkit-transform: translate(2px, 1px) rotate(0deg);
+    transform: translate(2px, 1px) rotate(0deg);
+  }
+  10% {
+    -webkit-transform: translate(-1px, -2px) rotate(-2deg);
+    transform: translate(-1px, -2px) rotate(-2deg);
+  }
+  20% {
+    -webkit-transform: translate(-3px, 0) rotate(3deg);
+    transform: translate(-3px, 0) rotate(3deg);
+  }
+  30% {
+    -webkit-transform: translate(0, 2px) rotate(0deg);
+    transform: translate(0, 2px) rotate(0deg);
+  }
+  40% {
+    -webkit-transform: translate(1px, -1px) rotate(1deg);
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+  50% {
+    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
+    transform: translate(-1px, 2px) rotate(-1deg);
+  }
+  60% {
+    -webkit-transform: translate(-3px, 1px) rotate(0deg);
+    transform: translate(-3px, 1px) rotate(0deg);
+  }
+  70% {
+    -webkit-transform: translate(2px, 1px) rotate(-2deg);
+    transform: translate(2px, 1px) rotate(-2deg);
+  }
+  80% {
+    -webkit-transform: translate(-1px, -1px) rotate(4deg);
+    transform: translate(-1px, -1px) rotate(4deg);
+  }
+  90% {
+    -webkit-transform: translate(2px, 2px) rotate(0deg);
+    transform: translate(2px, 2px) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translate(1px, -2px) rotate(-1deg);
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}
+
+@keyframes shake {
+  0% {
+    -webkit-transform: translate(2px, 1px) rotate(0deg);
+    transform: translate(2px, 1px) rotate(0deg);
+  }
+  10% {
+    -webkit-transform: translate(-1px, -2px) rotate(-2deg);
+    transform: translate(-1px, -2px) rotate(-2deg);
+  }
+  20% {
+    -webkit-transform: translate(-3px, 0) rotate(3deg);
+    transform: translate(-3px, 0) rotate(3deg);
+  }
+  30% {
+    -webkit-transform: translate(0, 2px) rotate(0deg);
+    transform: translate(0, 2px) rotate(0deg);
+  }
+  40% {
+    -webkit-transform: translate(1px, -1px) rotate(1deg);
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+  50% {
+    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
+    transform: translate(-1px, 2px) rotate(-1deg);
+  }
+  60% {
+    -webkit-transform: translate(-3px, 1px) rotate(0deg);
+    transform: translate(-3px, 1px) rotate(0deg);
+  }
+  70% {
+    -webkit-transform: translate(2px, 1px) rotate(-2deg);
+    transform: translate(2px, 1px) rotate(-2deg);
+  }
+  80% {
+    -webkit-transform: translate(-1px, -1px) rotate(4deg);
+    transform: translate(-1px, -1px) rotate(4deg);
+  }
+  90% {
+    -webkit-transform: translate(2px, 2px) rotate(0deg);
+    transform: translate(2px, 2px) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translate(1px, -2px) rotate(-1deg);
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}
+
+@-webkit-keyframes wobble {
+  0% {
+    -webkit-transform: none;
+    transform: none;
+  }
+  15% {
+    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+  30% {
+    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+  45% {
+    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+  60% {
+    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+  75% {
+    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+  100% {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes wobble {
+  0% {
+    -webkit-transform: none;
+    transform: none;
+  }
+  15% {
+    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+  30% {
+    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+  45% {
+    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+  60% {
+    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+  75% {
+    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+  100% {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
 .mailbox-messages > .table {
   margin: 0;
 }
@@ -226,14 +472,18 @@ a.close.disabled, a.disabled.mailbox-attachment-close {
 
 .login-page,
 .register-page {
+  -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   background-color: #e9ecef;
+  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   height: 100vh;
+  -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
 }
@@ -442,8 +692,10 @@ a.close.disabled, a.disabled.mailbox-attachment-close {
 }
 
 .product-image-thumbs {
+  -webkit-align-items: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   margin-top: 2rem;
@@ -454,6 +706,7 @@ a.close.disabled, a.disabled.mailbox-attachment-close {
   border-radius: 0.25rem;
   background-color: #fff;
   border: 1px solid #dee2e6;
+  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   margin-right: 1rem;
@@ -464,6 +717,7 @@ a.close.disabled, a.disabled.mailbox-attachment-close {
 .product-image-thumb img {
   max-width: 100%;
   height: auto;
+  -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
@@ -518,6 +772,32 @@ body.iframe-mode-fullscreen {
   height: 100%;
 }
 
+.content-wrapper.iframe-mode .btn-iframe-close {
+  color: #dc3545;
+  position: absolute;
+  line-height: 1;
+  right: .125rem;
+  top: .125rem;
+  z-index: 10;
+  visibility: hidden;
+}
+
+.content-wrapper.iframe-mode .btn-iframe-close:hover, .content-wrapper.iframe-mode .btn-iframe-close:focus {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+  -webkit-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  visibility: visible;
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .content-wrapper.iframe-mode .btn-iframe-close {
+    visibility: visible;
+  }
+}
+
 .content-wrapper.iframe-mode .navbar-nav {
   overflow-y: auto;
   width: 100%;
@@ -527,16 +807,43 @@ body.iframe-mode-fullscreen {
   white-space: nowrap;
 }
 
+.content-wrapper.iframe-mode .navbar-nav .nav-item {
+  position: relative;
+}
+
+.content-wrapper.iframe-mode .navbar-nav .nav-item:hover .btn-iframe-close, .content-wrapper.iframe-mode .navbar-nav .nav-item:focus .btn-iframe-close {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+  -webkit-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  visibility: visible;
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .content-wrapper.iframe-mode .navbar-nav .nav-item:hover .btn-iframe-close, .content-wrapper.iframe-mode .navbar-nav .nav-item:focus .btn-iframe-close {
+    visibility: visible;
+  }
+}
+
 .content-wrapper.iframe-mode .tab-content {
   position: relative;
 }
 
+.content-wrapper.iframe-mode .tab-pane + .tab-empty {
+  display: none;
+}
+
 .content-wrapper.iframe-mode .tab-empty {
   width: 100%;
+  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
 }
@@ -551,10 +858,13 @@ body.iframe-mode-fullscreen {
 }
 
 .content-wrapper.iframe-mode .tab-loading > div {
+  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   width: 100%;
@@ -565,6 +875,7 @@ body.iframe-mode-fullscreen {
   border: 0;
   width: 100%;
   height: 100%;
+  margin-bottom: -8px;
 }
 
 .content-wrapper.iframe-mode iframe .content-wrapper {
@@ -583,6 +894,13 @@ body.iframe-mode-fullscreen .content-wrapper.iframe-mode {
   z-index: 1048;
 }
 
+.permanent-btn-iframe-close .btn-iframe-close {
+  -webkit-animation: none !important;
+  animation: none !important;
+  visibility: visible !important;
+  opacity: 1;
+}
+
 .content-wrapper.kanban {
   height: 1px;
 }
@@ -598,8 +916,10 @@ body.iframe-mode-fullscreen .content-wrapper.iframe-mode {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
+  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
 }
@@ -623,10 +943,15 @@ body.iframe-mode-fullscreen .content-wrapper.iframe-mode {
 }
 
 .content-wrapper.kanban .card.card-row .card-body {
-  height: 100%;
+  height: calc(100% - (12px + (1.8rem * 1.2) + .5rem));
   overflow-y: auto;
 }
 
+.content-wrapper.kanban .card.card-row .card:last-child {
+  margin-bottom: 0;
+  border-bottom-width: 1px;
+}
+
 .content-wrapper.kanban .card.card-row .card .card-header {
   padding: .5rem .75rem;
 }