/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.light-style .menu .app-brand.demo {
  height: 64px;
}

.dark-style .menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo svg {
  width: 38px;
  height: 20px;
}

.app-brand-text.demo {
  font-size: 1.25rem;
}

/* ! For .layout-navbar-fixed added fix padding top to .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1.25rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 300px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}
/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1.25rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1.25rem;
}

#view-code {
  color: #89a2b5;
  opacity: 0.7;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  position: absolute;
  top: 660px;
  left: 50%;
  margin-left: -50px;
  z-index: 200;
}

#view-code:hover {
  opacity: 1;
}

#chatbox {
  width: 290px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  height: 484px;
  border: 2px solid #e3e9ed;
}

#friendslist {
  width: 290px;
  height: 100%;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-grow: 1;
}

#friendslist::-webkit-scrollbar {
  display: none;
}

#topmenu {
  height: 69px;
  width: 290px;
  border-bottom: 1px solid #d8dfe3;
  flex-shrink: 0;
}

#topmenu span {
  float: left;
  width: 96px;
  height: 70px;
  background: url("../img/chatbox/top-menu.png") -3px -118px no-repeat;
}

#topmenu span.friends {
  margin-bottom: -1px;
}

#topmenu span.chats {
  background-position: -95px 25px;
  cursor: pointer;
}

#topmenu span.chats:hover {
  background-position: -95px -46px;
  cursor: pointer;
}

#topmenu span.history {
  background-position: -190px 24px;
  cursor: pointer;
}

#topmenu span.history:hover {
  background-position: -190px -47px;
  cursor: pointer;
}

.friend {
  height: 70px;
  border-bottom: 1px solid #e7ebee;
  position: relative;
}

.friend:hover {
  background: #f1f4f6;
  cursor: pointer;
}

.friend img {
  width: 40px;
  border-radius: 50%;
  margin: 15px;
  float: left;
}

.floatingImg {
  width: 40px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 12px;
  border: 3px solid #fff;
  background-color: #fff;;
}

.friend p strong {
  font-weight: 600;
  font-size: 15px;
  color: #597a96;

}

#friends {
  padding-bottom: 70px;
}

.friend p span {
  font-size: 13px;
  font-weight: 400;
  color: #aab8c2;
}

.friend .status {
  background: #26c281;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  position: absolute;
  top: 31px;
  right: 17px;
}

.friend .status.away {
  background: #ffce54;
}

.friend .status.inactive {
  background: #eaeef0;
}

#search {
  background: #e3e9ed url("../img/chatbox/search.png") -16px 0 no-repeat;
  height: 50px;
  width: 290px;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#searchfield {
  background: #e3e9ed;
  margin: 25px 20px 15px;
  /* padding: 20px 18px; */
  border: none;
  padding: 0;
  width: 75%;
  font-size: 14px;
  font-weight: 400px;
  color: #8198ac;
}

#searchfield:focus {
  outline: 0;
}

#chatview {
  width: 290px;
  height: 484px;
  top: 0;
  left: 0;
  background: #fff;
}

#profile {
  height: 153px;
  overflow: hidden;
  text-align: center;
  color: #fff;
}

.p1 #profile {
  background: #fff url("../img/chatbox/timeline1.png") 0 0 no-repeat;
}

#profile .avatar {
  width: 68px;
  border: 3px solid #fff;
  margin: 23px 0 0;
  border-radius: 50%;
}

#profile p {
  font-weight: 600;
  font-size: 15px;
  margin: 118px 0 -1px;
  opacity: 0;
  -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}

#profile p.animate {
  margin-top: 97px;
  opacity: 1;
  -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}

#profile span {
  font-weight: 400;
  font-size: 11px;
}

#chat-messages {
  opacity: 0;
  margin-top: 30px;
  width: 290px;
  height: 270px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 20px;
  -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
 scrollbar-width: none;
-ms-overflow-style: none; 
}

#chat-messages::-webkit-scrollbar {
display: none;
}

#chat-messages.animate {
  opacity: 1;
  margin-top: 0;
}

#chat-messages label {
  color: #aab8c2;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  margin: 15px 0;
  width: 290px;
  display: block;
}

#chat-messages div.message {
  padding: 0 0 30px 58px;
  clear: both;
  margin-bottom: 45px;
}

#chat-messages div.message.right {
  padding: 0 58px 30px 0;
  margin-right: -19px;
  margin-left: 19px;
}

#chat-messages .message img ,
#chat-messages .message div.avatar{
  float: left;
  margin-left: -38px;
  border-radius: 50%;
  width: 30px;
  margin-top: 12px;
}

#chat-messages div.message.right img ,
#chat-messages div.message.right div.avatar  {
  float: right;
  margin-left: 0;
  margin-right: -38px;
}

.message .bubble {
  background: #f0f4f7;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 13px;
  border-radius: 5px 5px 5px 0px;
  color: #8495a3;
  position: relative;
  float: left;
}

#chat-messages div.message.right .bubble {
  float: right;
  border-radius: 5px 5px 0px 5px;
}

.bubble .corner {
  background: url("../img/chatbox/bubble-corner.png") 0 0 no-repeat;
  position: absolute;
  width: 7px;
  height: 7px;
  left: -5px;
  bottom: 0;
}

div.message.right .corner {
  background: url("../img/chatbox/bubble-cornerR.png") 0 0 no-repeat;
  left: auto;
  right: -5px;
}

.bubble span {
  color: #aab8c2;
  font-size: 11px;
  position: absolute;
  right: 0;
  bottom: -22px;
}

#sendmessage {
  height: 60px;
  border-top: 1px solid #e7ebee;
  position: absolute;
  bottom: 0;
  right: 0px;
  width: 290px;
  background: #fff;
  padding-bottom: 50px;
}


#sendmessage input {
  background: #fff;
  margin: 20px 47px 0 21px;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 400px;
  color: #aab8c2;
}

#sendmessage input:focus {
  outline: 0;
}

#sendmessage button {
  background: #fff url("../img/chatbox/send.png") 0 -41px no-repeat;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 15px;
  top: 23px;
  border: none;
}

#sendmessage button:hover {
  cursor: pointer;
  background-position: 0 0;
}

#sendmessage button:focus {
  outline: 0;
}

#close {
  position: absolute;
  top: 8px;
  opacity: 0.8;
  right: 10px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

#close:hover {
  opacity: 1;
}

.cx,
.cy {
  background: #fff;
  position: absolute;
  width: 0px;
  top: 15px;
  right: 15px;
  height: 3px;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}

.cx.s1,
.cy.s1 {
  right: 0;
  width: 20px;
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

.cy.s2 {
  -ms-transform: rotate(50deg);
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

.cy.s3 {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

.cx.s1 {
  right: 0;
  width: 20px;
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

.cx.s2 {
  -ms-transform: rotate(140deg);
  -webkit-transform: rotate(140deg);
  transform: rotate(140deg);
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

.cx.s3 {
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  -webkit-transition: all 100ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

#chatview,
#sendmessage {
  overflow: hidden;
  border-radius: 6px;
}

.sb-chat-btn {
  position: fixed;
  visibility: visible;
  bottom: 15px;
  right: 30px;
  left: auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 3px 32px rgba(0, 0, 0, 0.16);
  transition: all 0.4s;
  background-color: #028be5;
  z-index: 1084;
}

.sb-chat-btn img {
  max-width: 100%;
  width: 60px;
  height: 60px;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  min-height: 0 !important;
  min-width: 0 !important;
  z-index: 0;
  transition: opacity 0.4s ease;
}

.sb-close {
  opacity: 0;
  transform: rotate(90deg);
}

.sb-chat-btn.sb-active .sb-icon {
  opacity: 0;
}

.sb-chat-btn.sb-active .sb-close {
  opacity: 1;
  transform: rotate(0deg);
}

.sb-chat-btn .sb-close {
  opacity: 0;
  transform: rotate(90deg);
}

.sb-chat-btn img {
  max-width: 100%;
  width: 60px;
  height: 60px;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  min-height: 0 !important;
  min-width: 0 !important;
  z-index: 0;
  transition: all 0.4s;
}

.sb-rtl.sb-chat .sb-responsive-close-btn {
  left: 0;
  right: auto;
  text-align: left;
}

.sb-chat .sb-responsive-close-btn {
  display: none;
}

.sb-chat-btn .sb-close {
  opacity: 0;
  transform: rotate(90deg);
}

.sb-active .sb-chat-btn .sb-close {
  transform: rotate(0deg);
  opacity: 1;
}


@media screen and (max-width: 480px) {
  #chatbox {
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
  }

  #topmenu {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #friendslist {
    width: 100%;
    height: calc(100% - 129px);
  }

  .friend p {
    padding: 10px 40px 0 0;
    width: 185px
  }

  #search {
    width: 100%;
  }

  .close-btn {
    display: flex;
    justify-content: start;
    padding-right: 5px;
    width: 20px;
    height: 20px;
  }

  #chatview {
    width: 100%;
    height: 100%;
  }

  .p1 #profile {
    width: 100%;
    background-size: 100% 100%;
  }

  .info {
    text-align: center;
  }

  #chat-messages.animate {
    opacity: 1;
    margin-top: 0;
    width: 100%;
    height: 100%;
  }

  #sendmessage {
    width: 100%;
  }

  .floatingImg {
    left: 166px !important;
  }

  .close-btn {
    display: flex;
    justify-content: start;
    padding-right: 5px;
    padding-top: 12px;
  }

  .close-btn::before {
    font-size: 30px !important;
  }
}

@media screen and (min-width: 481px) {
  .friend p {
    padding: 10px 0 0 0;
    float: left;
    width: 170px;
  }

  .close-btn {
    display: flex;
    justify-content: start;
    padding-right: 5px;
  }
}

.sb-header {
  color: #fff;
  font-size: 14px;
  line-height: 26px;
  font-weight: 500;
  text-align: center;
  background-color: #028be5;
  background-size: cover;
  height: 63px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.sb-header::before,
.sb-header::after {
  content: '';
  position: absolute;
  background-color: rgb(119 98 98 / 22%);
  border-radius: 50%;
}

.sb-header::before {
  width: 13px;
  height: 13px;
  top: 5px;
  left: 5px;
  box-shadow:
    140px 10px 0 0 rgb(119 98 98 / 22%),
    85px 0 0 0 rgb(119 98 98 / 22%),
    38px 15px 0 0 rgb(119 98 98 / 22%),
    50px 35px 0 0 rgb(119 98 98 / 22%),
    10px 35px 0 0 rgb(119 98 98 / 22%),
    100px 30px 0 0 rgb(119 98 98 / 22%),
    125px 37px 0 0 rgb(119 98 98 / 22%),
    70px 25px 0 0 rgb(119 98 98 / 22%);
}

.sb-header::after {
  width: 13px;
  height: 13px;
  bottom: 5px;
  right: 10px;
  box-shadow:
    -50px -10px 0 0 rgb(119 98 98 / 22%),
    -95px 0 0 0 rgb(119 98 98 / 22%),
    -30px -20px 0 0 rgb(119 98 98 / 22%),
    -10px -40px 0 0 rgb(119 98 98 / 22%),
    -70px -25px 0 0 rgb(119 98 98 / 22%);
}