Y-SLD/assets/playkit/examples/css/apps/messaging.css

.app-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: 'Raleway', sans-serif;
  width: 100%;
  border: 1px solid #eceeef;
  border-radius: 0.25rem; }

.app-main {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-left: 1px solid #eceeef;
  background: #f7f7f9; }

.app-main-header {
  height: 90px;
  background: #fff;
  padding: 1.5rem;
  border-bottom: 1px solid #eceeef; }

.app-main-heading {
  margin-bottom: 0;
  line-height: 40px; }

.app-main-content {
  -webkit-box-flex: 2;
      -ms-flex: 2 2 0%;
          flex: 2 2 0%; }

.app-panel {
  height: calc(100% - 66px);
  top: 66px;
  position: fixed;
  width: 340px;
  left: -340px;
  right: auto;
  z-index: 997;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #fff;
  -webkit-transition: left .5s, top .5s;
  transition: left .5s, top .5s;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 340px;
          flex: 0 0 340px;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08); }
  .app-panel.show {
    left: 0; }
  body.navbar-collapse-in .app-panel {
    top: 132px; }
  body.menubar-open .app-panel {
    left: -340px; }
  @media (min-width: 768px) {
    .app-panel {
      position: static;
      height: auto;
      box-shadow: none; } }

.app-panel-inner {
  height: auto; }
  @media (max-width: 767px) {
    .app-panel-inner {
      height: calc(100% - 90px);
      overflow: hidden; } }

.app-panel-toggle {
  position: absolute;
  top: 25%;
  right: -30px;
  display: block;
  width: 30px;
  height: 50px;
  background: #fff;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08); }
  .app-panel-toggle .fa {
    text-align: center;
    line-height: 50px;
    width: 25px;
    font-size: 1.13rem; }
  .app-panel-toggle .fa-chevron-left {
    display: none; }
  .show .app-panel-toggle .fa-chevron-left {
    display: block; }
  .show .app-panel-toggle .fa-chevron-right {
    display: none; }
  @media (min-width: 768px) {
    .app-panel-toggle {
      display: none; } }

.panel-item {
  border: 1px solid #eceeef;
  border-radius: 0.25rem;
  margin-bottom: .5rem;
  padding: .75rem; }
  .panel-item:last-child {
    margin-bottom: 0; }

a.panel-item {
  display: block; }

.app-search {
  position: relative;
  height: 90px;
  padding: 1.5rem;
  border-bottom: 1px solid #eceeef; }
  .app-search .search-field {
    border: none;
    outline: none;
    box-shadow: none;
    width: 100%;
    height: 40px;
    padding: .75rem;
    border-radius: 500px;
    border: 1px solid #eceeef; }
  .app-search .search-icon {
    position: absolute;
    top: 2.25rem;
    right: 2.25rem; }

.app-messaging .app-main-content {
  max-height: 300px; }

@media (min-width: 768px) {
  .app-messaging .app-main-content .scroll-container {
    max-height: 300px; }
  .app-messaging .app-panel-inner .scroll-container {
    max-height: 400px; } }

.contacts-list .media.active, .contacts-list .media:hover {
  border-color: #60c84c; }

.contacts-list .connection-methods .btn {
  border-color: #eceeef; }
  .contacts-list .connection-methods .btn:hover, .contacts-list .connection-methods .btn.active {
    border-color: #60c84c;
    background: #60c84c; }

.messages-list .msg {
  padding: 1rem;
  border: 1px solid #eceeef;
  border-radius: 0.25rem;
  margin-bottom: 1.5rem; }
  .messages-list .msg:last-child {
    margin-bottom: 0; }

.messages-list .msg-in {
  background: #fff; }

.messages-list .msg-out {
  background: #eceeef; }

#app-messaging-form {
  border-top: 1px solid #eceeef;
  background: #fff;
  padding: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  #app-messaging-form .msg-form-field,
  #app-messaging-form .msg-form-submit {
    border: none;
    outline: none;
    box-shadow: none;
    height: 51px; }
  #app-messaging-form .msg-form-field {
    line-height: 50px;
    font-size: 1.25rem;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0%;
            flex: 1 1 0%; }
  #app-messaging-form .msg-form-submit {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 150px;
            flex: 0 0 150px; }

/*# sourceMappingURL=data:application/json;charset=utf8;base64,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QjtFQUNoQixxQkFBYztFQUFkLHFCQUFjO0VBQWQsY0FBYyxFQUFFO0VBQ2hCOztJQUVFLGFBQWE7SUFDYixjQUFjO0lBQ2QsaUJBQWlCO0lBQ2pCLGFBQWEsRUFBRTtFQUNqQjtJQUNFLGtCQUFrQjtJQUNsQixtQkFBbUI7SUFDbkIsb0JBQWE7UUFBYixpQkFBYTtZQUFiLGFBQWEsRUFBRTtFQUNqQjtJQUNFLG9CQUFnQjtRQUFoQixvQkFBZ0I7WUFBaEIsZ0JBQWdCLEVBQUUiLCJmaWxlIjoiYXBwcy9tZXNzYWdpbmcuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmFwcC13cmFwcGVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZm9udC1mYW1pbHk6ICdSYWxld2F5Jywgc2Fucy1zZXJpZjtcbiAgd2lkdGg6IDEwMCU7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNlY2VlZWY7XG4gIGJvcmRlci1yYWRpdXM6IDAuMjVyZW07IH1cblxuLmFwcC1tYWluIHtcbiAgZmxleDogMSAxIDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBib3JkZXItbGVmdDogMXB4IHNvbGlkICNlY2VlZWY7XG4gIGJhY2tncm91bmQ6ICNmN2Y3Zjk7IH1cblxuLmFwcC1tYWluLWhlYWRlciB7XG4gIGhlaWdodDogOTBweDtcbiAgYmFja2dyb3VuZDogI2ZmZjtcbiAgcGFkZGluZzogMS41cmVtO1xuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgI2VjZWVlZjsgfVxuXG4uYXBwLW1haW4taGVhZGluZyB7XG4gIG1hcmdpbi1ib3R0b206IDA7XG4gIGxpbmUtaGVpZ2h0OiA0MHB4OyB9XG5cbi5hcHAtbWFpbi1jb250ZW50IHtcbiAgZmxleDogMiAyIDAlOyB9XG5cbi5hcHAtcGFuZWwge1xuICBoZWlnaHQ6IGNhbGMoMTAwJSAtIDY2cHgpO1xuICB0b3A6IDY2cHg7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgd2lkdGg6IDM0MHB4O1xuICBsZWZ0OiAtMzQwcHg7XG4gIHJpZ2h0OiBhdXRvO1xuICB6LWluZGV4OiA5OTc7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGJhY2tncm91bmQ6ICNmZmY7XG4gIHRyYW5zaXRpb246IGxlZnQgLjVzLCB0b3AgLjVzO1xuICBmbGV4OiAwIDAgMzQwcHg7XG4gIGJveC1zaGFkb3c6IDJweCAwIDRweCByZ2JhKDAsIDAsIDAsIDAuMDgpOyB9XG4gIC5hcHAtcGFuZWwuc2hvdyB7XG4gICAgbGVmdDogMDsgfVxuICBib2R5Lm5hdmJhci1jb2xsYXBzZS1pbiAuYXBwLXBhbmVsIHtcbiAgICB0b3A6IDEzMnB4OyB9XG4gIGJvZHkubWVudWJhci1vcGVuIC5hcHAtcGFuZWwge1xuICAg