/**------------------------------------------------------
Item Name: Kiton - Mobile Chat App PWA Template.
Author: ashishmaraviya
Version: 1
Copyright 2023
-----------------------------------------------------------**/
/*------------------------------------------------------------------
[Table of contents]

01. Typography
02. Components
    - Common
    - Popup

03. Layouts
    - Login
    - Maintenance
    - Chat-list
    - Chat
    - Welcome

-------------------------------------------------------------------*/
/*------------------------------------------------------------------
# [Color codes]

Template contains couple color like:
$main-primary-color : #7963e0;

# */
/*-------------------------------------------------
  Fonts Family & Style CSS
---------------------------------------------------*/
/*--  Quicksand font  --*/
@font-face {
  font-family: "Quicksand";
  src: url("./../fonts/quicksand/Quicksand-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Quicksand";
  src: url("./../fonts/quicksand/Quicksand-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Quicksand";
  src: url("./../fonts/quicksand/Quicksand-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Quicksand";
  src: url("./../fonts/quicksand/Quicksand-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Quicksand";
  src: url("./../fonts/quicksand/Quicksand-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
/*--  Montserrat font  --*/
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-ExtraLightItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("./../fonts/montserrat/Montserrat-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
}
/*===== Commen css =====*/
body {
  background-color: #f8fafb;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  font-family: "Montserrat";
  background-image: linear-gradient(#f7f7f7 1px, transparent 1px), linear-gradient(to right, #f7f7f7 1px, #fff 1px);
  background-size: 20px 20px;
}

main {
  max-width: 767px;
  min-height: 100vh;
  margin: auto;
  background-color: #fff;
  -webkit-box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
}
main::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
  padding: 8px !important;
  border-radius: 10px !important;
}
main::-webkit-scrollbar-track {
  height: 5px !important;
  padding: 8px !important;
  background-color: #ececec !important;
  -webkit-box-shadow: inset 0 0 0px rgba(29, 37, 49, 0.09) !important;
  border-radius: 10px !important;
}
main::-webkit-scrollbar-thumb {
  height: 5px !important;
  padding: 8px !important;
  background-color: rgba(29, 37, 49, 0.09) !important;
  border-radius: 10px !important;
}
main::-webkit-scrollbar-thumb:hover {
  background-color: rgba(29, 37, 49, 0.09) !important;
}

h1 {
  font-family: "Quicksand";
  font-weight: 700;
  letter-spacing: 0.01rem;
}

h2, h3, h4, h5, h6 {
  font-family: "Quicksand";
  font-weight: 400;
  letter-spacing: 0.01rem;
}

.padding-tb-80 {
  padding: 80px 0;
}

.padding-b-80 {
  padding: 0 0 80px 0;
}

p, li, span {
  letter-spacing: 0.02rem;
}

p {
  font-size: 16px;
  line-height: 28px;
}

ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}

.navbar-dark .navbar-nav .nav-link {
  margin-left: 15px;
}

a {
  text-decoration: none;
}

.ki-flash:after {
  content: "";
  width: 2000px;
  height: 2000px;
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-animation: ki-flash 3s ease-in-out infinite;
          animation: ki-flash 3s ease-in-out infinite;
  z-index: 99;
}

@-webkit-keyframes ki-flash {
  0% {
    -webkit-transform: translateX(-100%) rotate(45deg);
            transform: translateX(-100%) rotate(45deg);
  }
  100% {
    -webkit-transform: translateX(100%) rotate(45deg);
            transform: translateX(100%) rotate(45deg);
  }
}
.mb-m-30 {
  margin-bottom: -30px;
}

.m-r-5px {
  margin-right: 5px;
}

.m-r-30 {
  margin-right: 30px;
}

.m-t-80 {
  margin-top: 80px;
}

.m-l-5 {
  margin-left: 5px;
}

.p-b-30 {
  padding-bottom: 30px !important;
}

.p-b-15 {
  padding-bottom: 15px !important;
}

.m-t-15 {
  margin-top: 15px;
}

.m-b-15 {
  margin-bottom: 15px;
}

.m-tb-15 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.m-b-minus-24px {
  margin-bottom: -24px;
}

.m-tb-minus-12px {
  margin: -12px;
}

.ml-auto {
  margin-left: auto;
}

.centerd {
  height: 100vh;
}

.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  padding: 10px 15px;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
}

.ki-btn, .ki-btn-1 {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  padding: 8px 20px;
  border: none;
  background: #2d76e1;
  color: #fff;
  overflow: hidden;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 30px;
}

.ki-btn:before {
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  -webkit-animation: shiny-btn1 3s ease-in-out infinite;
          animation: shiny-btn1 3s ease-in-out infinite;
}

.ki-btn:hover, .ki-btn-1:hover {
  opacity: 0.7;
  text-decoration: none;
  color: #fff;
}

.get-started {
  padding: 12px 30px;
  border-radius: 16px;
  font-size: 15px;
  background-color: #2d76e1;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}
.get-started:hover {
  color: #fff;
}

#ki-overlay {
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #fff;
  z-index: 99;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#ki-overlay .loader {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  color: #2d76e1;
  left: -100px;
  -webkit-animation: shadowRolling 2s linear infinite;
          animation: shadowRolling 2s linear infinite;
}
@-webkit-keyframes shadowRolling {
  0% {
    -webkit-box-shadow: 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0);
            box-shadow: 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0);
  }
  12% {
    -webkit-box-shadow: 100px 0 #2d76e1, 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0);
            box-shadow: 100px 0 #2d76e1, 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0);
  }
  25% {
    -webkit-box-shadow: 110px 0 #2d76e1, 100px 0 #2d76e1, 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0);
            box-shadow: 110px 0 #2d76e1, 100px 0 #2d76e1, 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0);
  }
  36% {
    -webkit-box-shadow: 120px 0 #2d76e1, 110px 0 #2d76e1, 100px 0 #2d76e1, 0px 0 rgba(45, 118, 225, 0);
            box-shadow: 120px 0 #2d76e1, 110px 0 #2d76e1, 100px 0 #2d76e1, 0px 0 rgba(45, 118, 225, 0);
  }
  50% {
    -webkit-box-shadow: 130px 0 #2d76e1, 120px 0 #2d76e1, 110px 0 #2d76e1, 100px 0 #2d76e1;
            box-shadow: 130px 0 #2d76e1, 120px 0 #2d76e1, 110px 0 #2d76e1, 100px 0 #2d76e1;
  }
  62% {
    -webkit-box-shadow: 200px 0 rgba(45, 118, 225, 0), 130px 0 #2d76e1, 120px 0 #2d76e1, 110px 0 #2d76e1;
            box-shadow: 200px 0 rgba(45, 118, 225, 0), 130px 0 #2d76e1, 120px 0 #2d76e1, 110px 0 #2d76e1;
  }
  75% {
    -webkit-box-shadow: 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 130px 0 #2d76e1, 120px 0 #2d76e1;
            box-shadow: 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 130px 0 #2d76e1, 120px 0 #2d76e1;
  }
  87% {
    -webkit-box-shadow: 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 130px 0 #2d76e1;
            box-shadow: 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 130px 0 #2d76e1;
  }
  100% {
    -webkit-box-shadow: 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0);
            box-shadow: 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0);
  }
}
@keyframes shadowRolling {
  0% {
    -webkit-box-shadow: 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0);
            box-shadow: 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0);
  }
  12% {
    -webkit-box-shadow: 100px 0 #2d76e1, 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0);
            box-shadow: 100px 0 #2d76e1, 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0);
  }
  25% {
    -webkit-box-shadow: 110px 0 #2d76e1, 100px 0 #2d76e1, 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0);
            box-shadow: 110px 0 #2d76e1, 100px 0 #2d76e1, 0px 0 rgba(45, 118, 225, 0), 0px 0 rgba(45, 118, 225, 0);
  }
  36% {
    -webkit-box-shadow: 120px 0 #2d76e1, 110px 0 #2d76e1, 100px 0 #2d76e1, 0px 0 rgba(45, 118, 225, 0);
            box-shadow: 120px 0 #2d76e1, 110px 0 #2d76e1, 100px 0 #2d76e1, 0px 0 rgba(45, 118, 225, 0);
  }
  50% {
    -webkit-box-shadow: 130px 0 #2d76e1, 120px 0 #2d76e1, 110px 0 #2d76e1, 100px 0 #2d76e1;
            box-shadow: 130px 0 #2d76e1, 120px 0 #2d76e1, 110px 0 #2d76e1, 100px 0 #2d76e1;
  }
  62% {
    -webkit-box-shadow: 200px 0 rgba(45, 118, 225, 0), 130px 0 #2d76e1, 120px 0 #2d76e1, 110px 0 #2d76e1;
            box-shadow: 200px 0 rgba(45, 118, 225, 0), 130px 0 #2d76e1, 120px 0 #2d76e1, 110px 0 #2d76e1;
  }
  75% {
    -webkit-box-shadow: 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 130px 0 #2d76e1, 120px 0 #2d76e1;
            box-shadow: 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 130px 0 #2d76e1, 120px 0 #2d76e1;
  }
  87% {
    -webkit-box-shadow: 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 130px 0 #2d76e1;
            box-shadow: 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 130px 0 #2d76e1;
  }
  100% {
    -webkit-box-shadow: 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0);
            box-shadow: 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0), 200px 0 rgba(45, 118, 225, 0);
  }
}

.ki-btn:active {
  -webkit-box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.3), -4px -4px 6px 0 rgba(116, 125, 136, 0.2), inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2), inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.3), -4px -4px 6px 0 rgba(116, 125, 136, 0.2), inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2), inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
}

@-webkit-keyframes shiny-btn1 {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
.border-r {
  border-right: 10px dashed #fff;
}

.main-bg {
  height: 100%;
  background: #2d76e1;
}

.ki-row {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.section-title {
  padding-bottom: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 5;
}
.section-title h2 {
  max-width: 300px;
  margin-bottom: 0;
  font-size: 35px;
  line-height: 40px;
  font-weight: 700;
  color: #17181c;
}
.section-title h2 span {
  color: #2d76e1;
}
.section-title .ligh-title {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  font-family: "Montserrat";
  font-size: 80px;
  font-weight: 700;
  color: #fff;
  line-height: 60px;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  opacity: 0.05;
  z-index: 1;
}

section {
  position: relative;
  background-color: #fff;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.show-section {
  display: block !important;
}

.hide-section {
  z-index: 7;
  -webkit-transform: translate3d(0px, -100%, 0px);
          transform: translate3d(0px, -100%, 0px);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

#overlay_shine {
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position: fixed;
  z-index: 15;
  display: block;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
  top: 0px;
  left: -50%;
  width: 200%;
  height: 100%;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

#scrollup {
  display: inline-block;
  background: #2d76e1;
  width: 36px;
  height: 36px;
  text-align: center;
  border-radius: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  right: 15px;
  bottom: 15px;
  opacity: 0;
  visibility: hidden;
  z-index: 11;
}
#scrollup i {
  color: #fff;
}

#scrollup.show {
  opacity: 1;
  visibility: visible;
}

.ki-cursor {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 1px solid #555;
  -webkit-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  -webkit-transform: translate(calc(-50% + 15px), -50%);
          transform: translate(calc(-50% + 15px), -50%);
  -webkit-animation: morphing-image 10s linear infinite forwards;
          animation: morphing-image 10s linear infinite forwards;
  z-index: 999;
}

.ki-cursor-2 {
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background-color: #555;
  position: fixed;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-transition: width 0.3s, height 0.3s, opacity 0.3s;
  transition: width 0.3s, height 0.3s, opacity 0.3s;
  z-index: 999;
}

.ki-hover-cursor {
  width: 50px;
  height: 50px;
  background-color: #2d76e1;
  opacity: 0.5;
  z-index: 999;
}

.ki-cursorinnerhover {
  width: 30px;
  height: 30px;
  opacity: 0.5;
  z-index: 999;
}

@-webkit-keyframes morphing-image {
  0% {
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
  }
  10% {
    border-radius: 39% 61% 38% 62%/53% 54% 46% 47%;
  }
  20% {
    border-radius: 56% 44% 52% 48%/57% 35% 65% 43%;
  }
  30% {
    border-radius: 41% 59% 45% 55%/43% 56% 44% 57%;
  }
  40% {
    border-radius: 46% 54% 60% 40%/55% 65% 26% 45%;
  }
  50% {
    border-radius: 44% 56% 42% 65%/41% 65% 46% 69%;
  }
  60% {
    border-radius: 41% 69% 42% 68%/41% 71% 29% 69%;
  }
  70% {
    border-radius: 44% 56% 60% 40%/63% 46% 64% 37%;
  }
  80% {
    border-radius: 46% 54% 38% 62%/44% 48% 52% 56%;
  }
  90% {
    border-radius: 66% 45% 57% 43%/49% 51% 49% 51%;
  }
  100% {
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
  }
}

@keyframes morphing-image {
  0% {
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
  }
  10% {
    border-radius: 39% 61% 38% 62%/53% 54% 46% 47%;
  }
  20% {
    border-radius: 56% 44% 52% 48%/57% 35% 65% 43%;
  }
  30% {
    border-radius: 41% 59% 45% 55%/43% 56% 44% 57%;
  }
  40% {
    border-radius: 46% 54% 60% 40%/55% 65% 26% 45%;
  }
  50% {
    border-radius: 44% 56% 42% 65%/41% 65% 46% 69%;
  }
  60% {
    border-radius: 41% 69% 42% 68%/41% 71% 29% 69%;
  }
  70% {
    border-radius: 44% 56% 60% 40%/63% 46% 64% 37%;
  }
  80% {
    border-radius: 46% 54% 38% 62%/44% 48% 52% 56%;
  }
  90% {
    border-radius: 66% 45% 57% 43%/49% 51% 49% 51%;
  }
  100% {
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
  }
}
/* Responsive css sidebar */
@media only screen and (min-width: 767px) {
  .container-md, .container-sm, .container {
    max-width: 100% !important;
  }
}
@media only screen and (min-width: 575px) {
  .container-md, .container-sm, .container {
    max-width: 100% !important;
  }
}
/*===== App Popup css =====*/
.popup-overlay {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: none;
}

.app-popup {
  max-width: 500px;
  margin: auto;
  padding: 80px 30px 30px 30px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: none;
  text-align: center;
  -webkit-clip-path: polygon(50% 0%, 100% 20%, 100% 100%, 0 100%, 0% 20%);
          clip-path: polygon(50% 0%, 100% 20%, 100% 100%, 0 100%, 0% 20%);
}
.app-popup .app-popup-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.app-popup .app-popup-detail img {
  width: 70px;
  height: 70px;
  margin-bottom: 30px;
}
.app-popup .app-popup-detail h6 {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  line-height: 28px;
}
.app-popup .app-popup-detail p {
  margin-bottom: 30px;
  font-size: 13px;
  color: #fff;
  line-height: 22px;
}
.app-popup .app-popup-detail .btn-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.app-popup .app-popup-detail .btn-group button {
  margin-right: 5px;
}

/*===== Login, Signup, Forgot, Reset css =====*/
.form-layout {
  height: 100vh;
  overflow-y: auto;
}
.form-layout::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
  padding: 8px !important;
  border-radius: 10px !important;
}
.form-layout::-webkit-scrollbar-track {
  height: 5px !important;
  padding: 8px !important;
  background-color: #ececec !important;
  -webkit-box-shadow: inset 0 0 0px rgba(29, 37, 49, 0.09) !important;
  border-radius: 10px !important;
}
.form-layout::-webkit-scrollbar-thumb {
  height: 5px !important;
  padding: 8px !important;
  background-color: rgba(29, 37, 49, 0.09) !important;
  border-radius: 10px !important;
}
.form-layout::-webkit-scrollbar-thumb:hover {
  background-color: rgba(29, 37, 49, 0.09) !important;
}

.login-form, .signup-form, .forgot-form, .reset-form, .maintenance-layout {
  padding: 0 15px;
}
.login-form .page-title, .signup-form .page-title, .forgot-form .page-title, .reset-form .page-title, .maintenance-layout .page-title {
  margin-top: 30px;
  margin-bottom: 0;
  font-size: 26px;
  text-align: center;
}
.login-form .page-desc, .signup-form .page-desc, .forgot-form .page-desc, .reset-form .page-desc, .maintenance-layout .page-desc {
  max-width: 500px;
  margin: 15px auto 0 auto;
  font-size: 14px;
  color: #777;
  text-align: center;
}
.login-form .input-control, .signup-form .input-control, .forgot-form .input-control, .reset-form .input-control, .maintenance-layout .input-control {
  padding: 30px 5px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.login-form .input-control label, .signup-form .input-control label, .forgot-form .input-control label, .reset-form .input-control label, .maintenance-layout .input-control label {
  color: #777;
}
.login-form .input-control .forgot-btn, .signup-form .input-control .forgot-btn, .forgot-form .input-control .forgot-btn, .reset-form .input-control .forgot-btn, .maintenance-layout .input-control .forgot-btn {
  font-weight: 600;
}
.login-form input, .signup-form input, .forgot-form input, .reset-form input, .maintenance-layout input {
  width: 100%;
  padding: 15px 20px;
  margin: 5px 0 15px 0;
  display: inline-block;
  border-bottom: 2px solid #ccc;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 14px;
  color: #666;
  background-color: #f3f3f3;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.login-form input:focus, .signup-form input:focus, .forgot-form input:focus, .reset-form input:focus, .maintenance-layout input:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
}
.login-form input::-webkit-input-placeholder, .signup-form input::-webkit-input-placeholder, .forgot-form input::-webkit-input-placeholder, .reset-form input::-webkit-input-placeholder, .maintenance-layout input::-webkit-input-placeholder {
  color: #999;
}
.login-form input::-moz-placeholder, .signup-form input::-moz-placeholder, .forgot-form input::-moz-placeholder, .reset-form input::-moz-placeholder, .maintenance-layout input::-moz-placeholder {
  color: #999;
}
.login-form input:-ms-input-placeholder, .signup-form input:-ms-input-placeholder, .forgot-form input:-ms-input-placeholder, .reset-form input:-ms-input-placeholder, .maintenance-layout input:-ms-input-placeholder {
  color: #999;
}
.login-form input::-ms-input-placeholder, .signup-form input::-ms-input-placeholder, .forgot-form input::-ms-input-placeholder, .reset-form input::-ms-input-placeholder, .maintenance-layout input::-ms-input-placeholder {
  color: #999;
}
.login-form input::placeholder, .signup-form input::placeholder, .forgot-form input::placeholder, .reset-form input::placeholder, .maintenance-layout input::placeholder {
  color: #999;
}
.login-form .password-field-show, .signup-form .password-field-show, .forgot-form .password-field-show, .reset-form .password-field-show, .maintenance-layout .password-field-show {
  width: 100%;
  position: relative;
  display: block;
}
.login-form .password-field-show .field-icon, .signup-form .password-field-show .field-icon, .forgot-form .password-field-show .field-icon, .reset-form .password-field-show .field-icon, .maintenance-layout .password-field-show .field-icon {
  position: absolute;
  top: 23px;
  right: 10px;
  z-index: 0;
  color: #999;
  cursor: pointer;
}
.login-form .login-btns, .signup-form .login-btns, .forgot-form .login-btns, .reset-form .login-btns, .maintenance-layout .login-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.login-form .label-container, .signup-form .label-container, .forgot-form .label-container, .reset-form .label-container, .maintenance-layout .label-container {
  padding-left: 30px;
  margin: 10px 0;
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-size: 14px;
  color: #999;
  line-height: 23px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.login-form .label-container input, .signup-form .label-container input, .forgot-form .label-container input, .reset-form .label-container input, .maintenance-layout .label-container input {
  outline: 2px solid #999;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  border-radius: 10px;
}
.login-form .label-container input:checked ~ .checkmark, .signup-form .label-container input:checked ~ .checkmark, .forgot-form .label-container input:checked ~ .checkmark, .reset-form .label-container input:checked ~ .checkmark, .maintenance-layout .label-container input:checked ~ .checkmark {
  background-color: #2d76e1;
}
.login-form .label-container input:checked ~ .checkmark:after, .signup-form .label-container input:checked ~ .checkmark:after, .forgot-form .label-container input:checked ~ .checkmark:after, .reset-form .label-container input:checked ~ .checkmark:after, .maintenance-layout .label-container input:checked ~ .checkmark:after {
  display: block;
}
.login-form .label-container span.psw, .signup-form .label-container span.psw, .forgot-form .label-container span.psw, .reset-form .label-container span.psw, .maintenance-layout .label-container span.psw {
  float: right;
  padding-top: 12px;
}
.login-form .label-container .checkmark, .signup-form .label-container .checkmark, .forgot-form .label-container .checkmark, .reset-form .label-container .checkmark, .maintenance-layout .label-container .checkmark {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 20px;
  width: 20px;
  outline: 2px solid transparent;
  border: 2px solid #ccc;
  border-radius: 10px;
}
.login-form .label-container .checkmark:after, .signup-form .label-container .checkmark:after, .forgot-form .label-container .checkmark:after, .reset-form .label-container .checkmark:after, .maintenance-layout .label-container .checkmark:after {
  content: "";
  width: 4px;
  height: 7px;
  position: absolute;
  display: none;
  left: 6px;
  top: 4px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.login-form form, .signup-form form, .forgot-form form, .reset-form form, .maintenance-layout form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.login-form .division-lines, .signup-form .division-lines, .forgot-form .division-lines, .reset-form .division-lines, .maintenance-layout .division-lines {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}
.login-form .division-lines p, .signup-form .division-lines p, .forgot-form .division-lines p, .reset-form .division-lines p, .maintenance-layout .division-lines p {
  font-size: 14px;
  color: #999;
  position: relative;
}
.login-form .division-lines p:after, .login-form .division-lines p:before, .signup-form .division-lines p:after, .signup-form .division-lines p:before, .forgot-form .division-lines p:after, .forgot-form .division-lines p:before, .reset-form .division-lines p:after, .reset-form .division-lines p:before, .maintenance-layout .division-lines p:after, .maintenance-layout .division-lines p:before {
  content: "";
  width: 30px;
  height: 1px;
  background-color: #ddd;
  position: absolute;
  top: 14px;
}
.login-form .division-lines p:after, .signup-form .division-lines p:after, .forgot-form .division-lines p:after, .reset-form .division-lines p:after, .maintenance-layout .division-lines p:after {
  right: -40px;
}
.login-form .division-lines p:before, .signup-form .division-lines p:before, .forgot-form .division-lines p:before, .reset-form .division-lines p:before, .maintenance-layout .division-lines p:before {
  left: -40px;
}
.login-form .login-with-btns, .signup-form .login-with-btns, .forgot-form .login-with-btns, .reset-form .login-with-btns, .maintenance-layout .login-with-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.login-form .already-acc, .signup-form .already-acc, .forgot-form .already-acc, .reset-form .already-acc, .maintenance-layout .already-acc {
  width: 100%;
  margin-top: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 14px;
  color: #999;
}
.login-form .already-acc a, .signup-form .already-acc a, .forgot-form .already-acc a, .reset-form .already-acc a, .maintenance-layout .already-acc a {
  margin-left: 5px;
  color: #2d76e1;
  font-weight: 600;
}
.login-form .d-inline, .signup-form .d-inline, .forgot-form .d-inline, .reset-form .d-inline, .maintenance-layout .d-inline {
  width: 100%;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.img-container {
  padding: 50px 0;
  background-color: #2d76e1;
  border-radius: 0 0 30px 30px;
  text-align: center;
  position: relative;
  -webkit-clip-path: polygon(0 calc(100% - 80px), 0 0, 100% 0, 100% calc(100% - 80px), 50% 100%);
          clip-path: polygon(0 calc(100% - 80px), 0 0, 100% 0, 100% calc(100% - 80px), 50% 100%);
}

/* Responsive css sidebar */
@media only screen and (max-width: 575px) {
  h1 {
    font-size: 24px !important;
  }
}
@media only screen and (max-width: 320px) {
  .login-form .d-inline {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
/*===== Maintenance css =====*/
.animation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 100px 0;
}
.animation .gear-one {
  -webkit-animation: gear-one 2.5s infinite linear;
  animation: gear-one 2.5s infinite linear;
}
.animation .gear-two {
  -webkit-animation: gear-two 3s infinite linear;
  animation: gear-two 3s infinite linear;
}
.animation .one {
  background-image: url(../img/maintenance/gear-2.png);
  width: 80px;
  height: 80px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-top: -10px;
  margin-right: 8px;
}
.animation .two {
  background-image: url(../img/maintenance/gear-1.png);
  width: 100px;
  height: 100px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.animation .three {
  background-image: url(../img/maintenance/gear-2.png);
  width: 80px;
  height: 80px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-top: -50px;
  margin-left: -10px;
}
@-webkit-keyframes gear-one {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-359deg);
    transform: rotate(-359deg);
  }
}
@-webkit-keyframes gear-two {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/* Responsive css sidebar */
@media only screen and (max-width: 575px) {
  .animation {
    margin: 70px 0;
  }
  .animation .one {
    width: 40px;
    height: 40px;
  }
  .animation .two {
    width: 50px;
    height: 50px;
  }
  .animation .three {
    width: 40px;
    height: 40px;
    margin-top: -38px;
  }
}
/*===== Chat list css =====*/
.list-head {
  height: 100px;
  padding: 15px;
  background-color: #f0f2f5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.list-head .ki-profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.list-head .ki-profile .ki-main-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.list-head .ki-profile .ki-main-detail p {
  margin: 0 0 -5px 0;
  font-size: 13px;
  color: #999;
}
.list-head .ki-profile img {
  width: 70px;
  height: 70px;
  margin-right: 15px;
  border-radius: 50%;
  border: 1px solid #d4d4d4;
}
.list-head .ki-profile h6 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #55656f;
}
.list-head .head-tool {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.list-head .head-tool > a {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.list-head .head-tool > a:hover {
  background-color: #d4d4d4;
}
.list-head .head-tool button {
  margin-right: 5px;
}
.list-head .head-tool i {
  color: #55656f;
  font-size: 20px;
}

/** Profile sidebar **/
.ki-profile-overlay {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 18;
}

.ki-profile-open {
  -webkit-transform: translateX(0) !important;
          transform: translateX(0) !important;
}

.ki-profile-bar {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: translateX(300px);
          transform: translateX(300px);
  max-width: 300px;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 99;
  top: 0;
  right: 0;
  left: auto;
  display: block;
  z-index: 55;
  background: #fff;
  overflow: auto;
}
.ki-profile-bar::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
  padding: 8px !important;
  border-radius: 10px !important;
}
.ki-profile-bar::-webkit-scrollbar-track {
  height: 5px !important;
  padding: 8px !important;
  background-color: #ececec !important;
  -webkit-box-shadow: inset 0 0 0px rgba(29, 37, 49, 0.09) !important;
  border-radius: 10px !important;
}
.ki-profile-bar::-webkit-scrollbar-thumb {
  height: 5px !important;
  padding: 8px !important;
  background-color: rgba(29, 37, 49, 0.09) !important;
  border-radius: 10px !important;
}
.ki-profile-bar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(29, 37, 49, 0.09) !important;
}
.ki-profile-bar .ki-profile-title {
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid #f0f2f5;
}
.ki-profile-bar .ki-profile-title a i {
  font-size: 26px;
  color: #55656f;
}
.ki-profile-bar .ki-profile-title h6 {
  margin: 0;
  width: 100%;
  font-size: 18px;
  font-weight: 700;
  line-height: 35px;
  color: #55656f;
}
.ki-profile-bar .ki-profile-block {
  padding: 15px;
  border-bottom: 1px solid #f0f2f5;
}
.ki-profile-bar .ki-profile-block ul li a {
  padding: 7px 0;
  position: relative;
  display: block;
  color: #777;
  font-weight: 500;
  font-size: 14px;
}
.ki-profile-bar .ki-profile-block ul li a i {
  margin-right: 8px;
  font-size: 17px;
}
.ki-profile-bar .ki-profile-block.img {
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.ki-profile-bar .ki-profile-block.img h6 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #55656f;
}
.ki-profile-bar .ki-profile-block.img h6 i {
  position: absolute;
  right: 15px;
  color: #999;
}
.ki-profile-bar .ki-profile-block.img img {
  width: 100px;
  height: 100px;
  margin-bottom: 15px;
  border-radius: 50%;
}

/** Contact sidebar **/
.ki-contact-open {
  -webkit-transform: translateX(0) !important;
          transform: translateX(0) !important;
}

.ki-contact {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  right: auto;
  display: block;
  z-index: 55;
  background: #fff;
  width: 100%;
}
.ki-contact .ki-chat-list .ki-user-list {
  height: calc(100vh - 140px);
  overflow-y: scroll;
}
.ki-contact .ki-chat-list .ki-user-list::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
  padding: 8px !important;
  border-radius: 10px !important;
}
.ki-contact .ki-chat-list .ki-user-list::-webkit-scrollbar-track {
  height: 5px !important;
  padding: 8px !important;
  background-color: #ececec !important;
  -webkit-box-shadow: inset 0 0 0px rgba(29, 37, 49, 0.09) !important;
  border-radius: 10px !important;
}
.ki-contact .ki-chat-list .ki-user-list::-webkit-scrollbar-thumb {
  height: 5px !important;
  padding: 8px !important;
  background-color: rgba(29, 37, 49, 0.09) !important;
  border-radius: 10px !important;
}
.ki-contact .ki-chat-list .ki-user-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(29, 37, 49, 0.09) !important;
}

.ki-chat-list .ki-side-title {
  width: 100%;
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #f0f2f5;
}
.ki-chat-list .ki-side-title h6 {
  width: 100%;
  margin: 0 0 0 -24px;
  font-size: 18px;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
  color: #55656f;
}
.ki-chat-list .ki-side-title a {
  cursor: pointer;
  z-index: 1;
}
.ki-chat-list .ki-side-title a i {
  font-size: 26px;
  color: #55656f;
}
.ki-chat-list .ki-search {
  padding: 15px;
  border-bottom: 1px solid #f0f2f5;
  position: relative;
}
.ki-chat-list .ki-search a {
  position: absolute;
  top: 50%;
  right: 30px;
  font-size: 16px;
  color: #55656f;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.ki-chat-list .ki-search input {
  width: 100%;
  height: 40px;
  padding: 0 40px 0 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  color: #777;
}
.ki-chat-list .ki-search input:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
}
.ki-chat-list .ki-search input::-webkit-input-placeholder {
  color: #999;
}
.ki-chat-list .ki-search input::-moz-placeholder {
  color: #999;
}
.ki-chat-list .ki-search input:-ms-input-placeholder {
  color: #999;
}
.ki-chat-list .ki-search input::-ms-input-placeholder {
  color: #999;
}
.ki-chat-list .ki-search input::placeholder {
  color: #999;
}
.ki-chat-list .ki-user-list {
  height: calc(100vh - 171px);
  overflow-y: scroll;
}
.ki-chat-list .ki-user-list::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
  padding: 8px !important;
  border-radius: 10px !important;
}
.ki-chat-list .ki-user-list::-webkit-scrollbar-track {
  height: 5px !important;
  padding: 8px !important;
  background-color: #ececec !important;
  -webkit-box-shadow: inset 0 0 0px rgba(29, 37, 49, 0.09) !important;
  border-radius: 10px !important;
}
.ki-chat-list .ki-user-list::-webkit-scrollbar-thumb {
  height: 5px !important;
  padding: 8px !important;
  background-color: rgba(29, 37, 49, 0.09) !important;
  border-radius: 10px !important;
}
.ki-chat-list .ki-user-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(29, 37, 49, 0.09) !important;
}
.ki-chat-list ul li {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  padding: 0 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.ki-chat-list ul li:not(:last-child) .fi-list-detail {
  border-bottom: 1px solid #f0f2f5;
}
.ki-chat-list ul li:hover {
  background-color: #f0f2f5;
}
.ki-chat-list ul li:hover .head-tool .dropdown-menu {
  z-index: 20;
}
.ki-chat-list ul li:hover .head-tool .fi-list-tool button {
  opacity: 1;
  z-index: 0;
}
.ki-chat-list ul li:hover .head-tool .date {
  opacity: 0;
}
.ki-chat-list ul li .fi-list-detail {
  width: 100%;
  padding: 15px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.ki-chat-list ul li .head-tool {
  position: relative;
}
.ki-chat-list ul li .head-tool .date {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #999;
  font-size: 13px;
  opacity: 1;
}
.ki-chat-list ul li .head-tool .fi-list-tool {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 50;
}
.ki-chat-list ul li .head-tool .fi-list-tool button {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  padding: 0;
  background-color: transparent;
  color: #777;
  border: 0;
  opacity: 0;
}
.ki-chat-list ul li .head-tool .fi-list-tool button:focus {
  background-color: transparent;
  color: #777;
}
.ki-chat-list ul li .head-tool .fi-list-tool button:after {
  display: none;
}
.ki-chat-list ul li .head-tool .fi-list-tool button i {
  font-size: 18px;
}
.ki-chat-list ul li .head-tool .dropdown-menu.show {
  z-index: 20;
  right: 25px !important;
}
.ki-chat-list ul li .head-tool .dropdown-menu {
  padding: 10px;
  -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.08);
          box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.08);
  border: 0;
  z-index: 10;
  background-color: #fff;
  right: 0px !important;
}
.ki-chat-list ul li .head-tool .dropdown-menu li {
  padding: 0;
}
.ki-chat-list ul li .head-tool .dropdown-menu li a {
  padding: 10px;
  font-size: 13px;
  color: #777;
  font-weight: 500;
}
.ki-chat-list ul li .head-tool .dropdown-menu li a:active {
  background-color: #f8f9fa;
}
.ki-chat-list .ki-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
}
.ki-chat-list .ki-list img {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  border-radius: 50%;
  border: 1px solid #d4d4d4;
}
.ki-chat-list .ki-list h6 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #777;
  line-height: 28px;
}
.ki-chat-list .ki-list .label {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ddd;
  border-radius: 30px;
  border: 2px solid #fff;
}
.ki-chat-list .ki-list .online {
  background-color: #7ac966;
}
.ki-chat-list .ki-list-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.ki-chat-list .ki-list-detail p {
  margin: 0;
  font-size: 14px;
  color: #999;
  font-weight: 400;
}

.message-input {
  width: 100%;
  height: 60px;
  padding: 0 15px;
  position: absolute;
  bottom: 0;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 16;
  -webkit-box-shadow: 0 0 10px -3px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 10px -3px rgba(0, 0, 0, 0.15);
}
.message-input .wrap-send {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.message-input .wrap-send input {
  width: calc(100% - 90px);
  height: 40px;
  padding: 11px 32px 10px 8px;
  font-size: 14px;
  color: #55656f;
  border: 1px solid #eee;
  border-radius: 5px;
}
.message-input .wrap-send input:focus {
  outline: none;
}
.message-input .wrap-send .p-btn {
  padding: 0 15px;
}
.message-input .wrap-send .dropdown-pin button {
  width: 40px;
  height: 40px;
}
.message-input .wrap-send .dropdown-pin button i {
  font-size: 20px;
}
.message-input .wrap-send .dropdown-pin .dropdown-menu.show li i {
  font-size: 18px;
}
.message-input .wrap-send .dropdown-pin .dropdown-menu.show li span {
  padding-left: 5px;
}
.message-input .wrap-send .dropdown-emoji button {
  width: 40px;
  height: 40px;
}
.message-input .wrap-send .dropdown-emoji button i {
  font-size: 20px;
}
.message-input .wrap-send .dropdown-emoji .dropdown-menu.show {
  width: 180px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.message-input .wrap-send .dropdown-emoji .dropdown-menu.show a {
  width: 30px;
  height: 30px;
  margin: 5px;
  padding: 0;
  font-size: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
}
.message-input .wrap-send .attachment {
  position: absolute;
  right: 60px;
  z-index: 4;
  margin-top: 10px;
  font-size: 1.1em;
  color: #ddd;
  opacity: 0.5;
  cursor: pointer;
}
.message-input .wrap-send .attachment:hover {
  opacity: 1;
}
.message-input .wrap-send .send-btn {
  width: 40px;
  height: 40px;
  margin-left: 15px;
  cursor: pointer;
  background: #2d76e1;
  color: #fff;
  border: 1px solid #eee;
  border-radius: 5px;
}
.message-input .wrap-send .send-btn:focus {
  outline: none;
}

/* Responsive */
@media only screen and (max-width: 575px) {
  .list-head .ki-profile img {
    width: 45px;
    height: 45px;
  }
  .list-head .ki-profile h6 {
    margin: 0;
    font-size: 15px;
  }
  .ki-chat-list .ki-list img {
    width: 35px;
    height: 35px;
  }
  .ki-chat-list .ki-list h6 {
    font-size: 15px;
    line-height: 22px;
  }
  .ki-chat-list .ki-list .label {
    top: -2px;
    left: -2px;
  }
  .ki-chat-list ul li .head-tool .date {
    font-size: 11px;
  }
  .ki-chat-list .ki-list-detail p {
    font-size: 13px;
    line-height: 20px;
  }
}
@media only screen and (max-width: 380px) {
  .list-head .ki-profile img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  .list-head .ki-profile h6 {
    margin: 0;
    font-size: 14px;
  }
  .ki-chat-list ul li .head-tool .date {
    display: none;
  }
  .ki-chat-list ul li .head-tool .fi-list-tool button {
    background-color: #fff;
  }
  .ki-chat-list ul li .head-tool .fi-list-tool button:focus {
    background-color: #fff;
  }
  .ki-profile-bar {
    max-width: 270px;
  }
  .list-head .head-tool > a {
    height: 30px;
    width: 30px;
  }
  .list-head .head-tool > a i {
    font-size: 17px;
  }
  .list-head .head-tool button {
    height: 30px;
    width: 30px;
  }
  .list-head .head-tool button i {
    font-size: 17px;
  }
}
@media only screen and (max-width: 340px) {
  .list-head .ki-profile .ki-main-detail p {
    display: none;
  }
  .message-input .wrap-send .dropdown-emoji button, .message-input .wrap-send .dropdown-pin button {
    width: 35px !important;
    height: 35px !important;
  }
  .message-input .wrap-send .p-btn {
    padding: 0 10px;
  }
  .message-input .wrap-send .send-btn {
    margin-left: 10px;
  }
}
/*===== Chat css =====*/
.ki-chat {
  height: calc(100vh - 120px);
}

.messages {
  width: 100%;
  height: calc(100% - 40px);
  padding: 30px 0;
  overflow-y: scroll;
  overflow-x: hidden;
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.messages:hover {
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.messages:hover::-webkit-scrollbar {
  width: 5px;
}
.messages:hover::-webkit-scrollbar-track {
  background: transparent;
}
.messages:hover::-webkit-scrollbar-thumb {
  background: rgba(80, 93, 113, 0.3);
  border-radius: 4px;
}
.messages:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(80, 93, 113, 0.3);
}
.messages::-webkit-scrollbar {
  width: 5px;
}
.messages::-webkit-scrollbar-track {
  background: transparent;
}
.messages::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}
.messages::-webkit-scrollbar-thumb:hover {
  background: transparent;
}
.messages ul {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  padding: 0;
  margin: 0;
}
.messages ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  clear: both;
  margin: 15px;
  width: calc(100% - 25px);
  font-size: 0.9em;
  position: relative;
}
.messages ul li:nth-last-child(1) {
  margin-bottom: 20px;
}
.messages ul li img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.messages ul li p {
  display: inline-block;
  padding: 10px 15px;
  max-width: 500px;
  font-size: 13px;
  line-height: 23px;
  border: 1px solid #eee;
  -webkit-box-shadow: 0 5px 8px 1px rgba(80, 93, 113, 0.09);
          box-shadow: 0 5px 8px 1px rgba(80, 93, 113, 0.09);
}
.messages ul li.replies {
  position: relative;
}
.messages ul li.replies img {
  margin: 0 8px 0 0;
}
.messages ul li.replies p {
  background: #fff;
  color: #777;
  border-radius: 0 15px 15px 15px;
}
.messages ul li.replies .date-time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 11px;
  color: #999;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  position: absolute;
  top: -22px;
  left: 30px;
}
.messages ul li.sent {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.messages ul li.sent img {
  margin: 0 0 0 5px;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.messages ul li.sent p {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  background: #f3f8ff;
  color: #777;
  border-radius: 15px 0 15px 15px;
}
.messages ul li.sent .date-time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 11px;
  color: #999;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  position: absolute;
  top: -22px;
  right: 30px;
}
.messages ul li.sent .date-time i {
  margin: -1px 3px 0 0;
  font-size: 14px;
}
.messages ul li.sent .see i {
  color: #2bbb93;
}

.dropdown .btn.show, .dropdown .btn:first-child:active {
  background-color: #d4d4d4;
}
.dropdown button {
  height: 40px;
  width: 40px;
  padding: 0;
  background-color: transparent;
  border: 0;
  border-radius: 50%;
}
.dropdown button:hover, .dropdown button:active {
  background-color: #d4d4d4;
}
.dropdown button:after {
  display: none;
}
.dropdown button i {
  color: #55656f;
}

.dropdown-menu {
  padding: 10px;
  -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.08);
          box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.08);
  border: 0;
  z-index: 10;
  background-color: #fff;
  right: 0px !important;
}
.dropdown-menu li {
  padding: 0;
}
.dropdown-menu li a {
  padding: 10px;
  font-size: 13px;
  color: #777;
  font-weight: 500;
}
.dropdown-menu li a:active, .dropdown-menu li a:hover {
  background-color: #f8f9fa;
  color: #777;
}

.dropdown-emoji button, .dropdown-pin button {
  border: 1px solid #f0f2f5;
  border-radius: 50%;
}

.list-head .ki-profile a {
  margin-right: 5px;
}
.list-head .ki-profile a i {
  font-size: 26px;
  color: #55656f;
}

/*===== Welcome(index.html) css =====*/
.wel-screen {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #2d76e1;
  background-image: url(../img/bg/1.png);
  background-size: cover;
}
.wel-screen h1 {
  margin-top: 30px;
  color: #fff;
  font-size: 26px;
}
.wel-screen .wel-nav {
  padding: 15px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.wel-screen .wel-nav a {
  color: #fff;
  font-size: 14px;
}
.wel-screen .wel-nav a i {
  font-size: 22px;
}

/*  Responsive  */
@media only screen and (max-width: 575px) {
  .wel-screen img {
    width: 80px;
  }
}
/*# sourceMappingURL=style.css.map */