
/***

TABLE OF CONTENTS

0.- FONT
  0.2.- FONTASTIC
1.- CONTENT - wrappers
2.- CONTENT CONNECTION - animation mky-spinner
3.- CONTENT APP
  3.1.- CONTENT OPTIONS
  3.2.- ASIDE - header, search panel, search list, conversation list
  3.3.- SECTION - header, chat timeline, preview, chat inputs
  3.4.- BANNER -  banner
  3.5 - ASIDE INFO
    3.5.1 - INFO conversation
    3.5.2 - INFO message
4.- MODAL
  4.1.- Image preview
  4.2.- Location preview
5.- POP UP
6.- GLOBAL SETTINGS
7.- MEDIA QUERIES

***/

/* 0.- FONT
   ----------------------------- */

@font-face {
    font-family: 'helvetica-normal';
    font-style: normal;
    font-weight: normal;
    src: local('helvetica-normal'), url('https://cdn.criptext.com/MonkeyUI/font/HelveticaNeueLTStd-Th.otf') format('opentype');
}

@font-face {
    font-family: 'helvetica-light';
    font-style: normal;
    font-weight: normal;
    src: local('helvetica-normal'), url('https://cdn.criptext.com/MonkeyUI/font/HelveticaLTStd-Light.otf') format('opentype');
}

@font-face {
  font-family: 'Verdana Pro W01 SemiBold';
  src: url('https://cdn.criptext.com/MonkeyUI/font/Verdana Pro W01 SemiBold.eot?89861472');
  src: url('https://cdn.criptext.com/MonkeyUI/font/Verdana Pro W01 SemiBold.eot?89861472#iefix') format('embedded-opentype'),
       url('https://cdn.criptext.com/MonkeyUI/font/Verdana Pro W01 SemiBold.woff?89861472') format('woff'),
       url('https://cdn.criptext.com/MonkeyUI/font/Verdana Pro W01 SemiBold.ttf?89861472') format('truetype'),
       url('https://cdn.criptext.com/MonkeyUI/font/Verdana Pro W01 SemiBold.svg?89861472#mky') format('svg');
  font-weight: normal;
  font-style: normal;
}

@charset "UTF-8";

@font-face {
  font-family: "monkey";
  src:url("https://cdn.criptext.com/MonkeyUI/font/monkey.eot");
  src:url("https://cdn.criptext.com/MonkeyUI/font/monkey.eot?#iefix") format("embedded-opentype"),
    url("https://cdn.criptext.com/MonkeyUI/font/monkey.woff") format("woff"),
    url("https://cdn.criptext.com/MonkeyUI/font/monkey.ttf") format("truetype"),
    url("https://cdn.criptext.com/MonkeyUI/font/monkey.svg#monkey") format("svg");
  font-weight: normal;
  font-style: normal;

}

  /* 0.1.- FONT: Fontastic
     ----------------------------- */

[data-icon]:before {
  font-family: "monkey" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="mky-icon-"]:before,
[class*=" mky-icon-"]:before {
  font-family: "monkey" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mky-icon-add-filled:before {
  content: "\61";
}
.mky-icon-add-regular:before {
  content: "\62";
}
.mky-icon-arrowback:before {
  content: "\63";
}
.mky-icon-attach-tilt:before {
  content: "\64";
}
.mky-icon-attach-regular:before {
  content: "\65";
}
.mky-icon-audio-ephemeral:before {
  content: "\66";
}
.mky-icon-back:before {
  content: "\67";
}
.mky-icon-check:before {
  content: "\69";
}
.mky-icon-download:before {
  content: "\6b";
}
.mky-icon-edit:before {
  content: "\6c";
}
.mky-icon-copy:before {
  content: "\6d";
}
.mky-icon-share:before {
  content: "\6e";
}
.mky-icon-align-center:before {
  content: "\6f";
}
.mky-icon-align-left:before {
  content: "\70";
}
.mky-icon-align-right:before {
  content: "\71";
}
.mky-icon-bold:before {
  content: "\76";
}
.mky-icon-bulletlist:before {
  content: "\77";
}
.mky-icon-icon-indentlees:before {
  content: "\41";
}
.mky-icon-indent-more:before {
  content: "\42";
}
.mky-icon-italic:before {
  content: "\43";
}
.mky-icon-numberlist:before {
  content: "\47";
}
.mky-icon-remove-formating:before {
  content: "\48";
}
.mky-icon-icon-size:before {
  content: "\49";
}
.mky-icon-textcolor:before {
  content: "\4a";
}
.mky-icon-underline:before {
  content: "\4b";
}
.mky-icon-info:before {
  content: "\4c";
}
.mky-icon-key:before {
  content: "\4d";
}
.mky-icon-location-filled:before {
  content: "\4e";
}
.mky-icon-lock:before {
  content: "\4f";
}
.mky-icon-logout-left:before {
  content: "\50";
}
.mky-icon-logout-right:before {
  content: "\51";
}
.mky-icon-mail:before {
  content: "\52";
}
.mky-icon-menu-hamburguer:before {
  content: "\53";
}
.mky-icon-arrow-down-regular:before {
  content: "\54";
}
.mky-icon-arrow-up-regular:before {
  content: "\55";
}
.mky-icon-mic-empty:before {
  content: "\56";
}
.mky-icon-mic-filled:before {
  content: "\57";
}
.mky-icon-minimize:before {
  content: "\58";
}
.mky-icon-photo:before {
  content: "\59";
}
.mky-icon-image-square:before {
  content: "\5a";
}
.mky-icon-push:before {
  content: "\31";
}
.mky-icon-search:before {
  content: "\32";
}
.mky-icon-send-regular:before {
  content: "\33";
}
.mky-icon-send-filled:before {
  content: "\34";
}
.mky-icon-text-ephemeral:before {
  content: "\35";
}
.mky-icon-timer-regular:before {
  content: "\36";
}
.mky-icon-timer-regular-1:before {
  content: "\37";
}
.mky-icon-timer-filled:before {
  content: "\38";
}
.mky-icon-trashcan-regular:before {
  content: "\39";
}
.mky-icon-trashcan-filled:before {
  content: "\21";
}
.mky-icon-webhook:before {
  content: "\22";
}
.mky-icon-menu-dots-strong:before {
  content: "\45";
}
.mky-icon-menu-dots:before {
  content: "\46";
}
.mky-icon-localization-regular:before {
  content: "\79";
}
.mky-icon-doc-regular:before {
  content: "\7a";
}
.mky-icon-image-regular:before {
  content: "\44";
}
.mky-icon-chats:before {
  content: "\68";
}
.mky-icon-arrow-up-light:before {
  content: "\72";
}
.mky-icon-arrow-up-bold:before {
  content: "\73";
}
.mky-icon-arrow-down-bold:before {
  content: "\23";
}
.mky-icon-arrow-down-light:before {
  content: "\24";
}
.mky-icon-close-light:before {
  content: "\6a";
}
.mky-icon-close:before {
  content: "\74";
}
.mky-icon-close-medium:before {
  content: "\75";
}
.mky-icon-picture-ephemeral:before {
  content: "\78";
}
.mky-icon-drawer-sober:before {
  content: "\30";
}
.mky-icon-file-sober:before {
  content: "\25";
}
.mky-icon-image-sober:before {
  content: "\26";
}
.mky-icon-mic-sober:before {
  content: "\27";
}
.mky-icon-send-sober:before {
  content: "\28";
}
.mky-icon-signout-sober:before {
  content: "\29";
}
.mky-icon-edit-sober:before {
  content: "\2a";
}
.mky-icon-close-sober:before {
  content: "\2b";
}
.mky-icon-check-sober:before {
  content: "\2c";
}

/* 1.- CONTENT
   ----------------------------- */

.mky-wrapper-out{
  background: transparent;
  border: none;
  font-family: 'helvetica-light', Helvetica, sans-serif;
  width: 100%;
  height: 100%;
  position: fixed;
  /*-webkit-font-smoothing: antialiased;*/
  letter-spacing: 0.2px;
}

.mky-partialsize{

}

.mky-fullsize{

}

.mky-classic, .mky-rightside{
  z-index: 1100;
}

.mky-classic{
  bottom: 0;
  box-shadow: rgb(176, 176, 176) 0px 0px 15px;
  right: 10px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.mky-rightside{
  bottom: 0;
  right: 0;
}

.mky-wrapper-in{
  box-shadow: 0px 0px 15px #B0B0B0;
  position: relative;
  background: white;
}

.mky-classic .mky-wrapper-in{
  box-shadow: none;
}

.mky-fullsize .mky-wrapper-in{
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  margin: 20px auto;
}

.mky-partialsize .mky-wrapper-in{
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.mky-sidebar .mky-wrapper-in, .mky-classic .mky-wrapper-in{
  height: calc(100% - 30px);
}

#mky-chat-login{
    position: relative;
    margin: 0 auto;
    border: 1px solid transparent;
    border-radius: 5px;
    text-align: left;
    font-size: 17px;
    color: #333;
    width: 90%;
    height: calc(100% - 20px);
    padding-top: 20px;
}

/* 2.- CONTENT CONNECTION
   ----------------------------- */

.mky-content-connection{
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  position: absolute;
  z-index: 10;
}

.mky-spinner > div{
	
}

.mky-spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.mky-spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.mky-spinner .mky-bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.mky-spinner .mky-bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/* 3.- CONTENT APP
   ----------------------------- */

#mky-content-app{
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

/* 3.1.- CONTENT OPTIONS
   ----------------------------- */
.mky-tab{
  height: 30px;
  top: 0px;
  right: 0px;
  z-index: 2;
  background-color: #FBA920;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 17px;
  width: 100%;
}

.mky-tab .mky-tablabel{
  position: relative;
  top: 5px;
  line-height: 25px;
}

.mky-tab span{
  color: #fff;
}

.mky-tab div, .mky-conversation-selected-header .mky-content-options div{
  width: 20px;
  height: 15px;
  float: right;
  background-repeat: no-repeat;
  background-position:50%;
  top: 50%;
  position: relative;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
}

.mky-tab div{
	right: 10px;
	color: white;
}

.mky-tab i{
  display: block;
  margin: 0;
}

.mky-conversation-selected-header .mky-content-options{
  display: block;
  position: absolute;
  width: 80px;
  height: 25px;
  right: 10px;
  top: 5px;
}

#mky-w-max,
#mky-w-close,
#mky-w-min, #mky-w-min-in{
  background-size: 10px;
}

#mky-w-max{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/w-max-white.png);
}

#mky-w-min{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/w-min-white.png);
}

#mky-w-close{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/w-close-gray.png);
}

#mky-w-min-in{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/w-min-gray.png);
}

#mky-w-max, #mky-w-min{
  right: 10px;
}

.mky-button{
  background-color: #FBA920;
  border-radius: 50%;
  margin-top: 12px;
  text-align: center;
  width: 48px;
  height: 48px;
  background-size: 48px 48px;
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.mky-button i{
  color: white;
  margin-top: 11px;
  font-size: 24px;
  display: block;
}

.mky-rightside-option{
  left: 90%;
  margin-top: 20px;
  position: absolute;
  top: 0;
}

.mky-rightside-option div{
  cursor: pointer;
}

.mky-rightside-option i {
  color: #b2b2b2;
  font-size: 12px;
}

/* 3.2.- ASIDE
   ----------------------------- */

.mky-content-aside{
  width: calc(28% - 1px);
  height: 100%;
  vertical-align: top;
  margin: 0;
  float: left;
  border-right: 1px solid rgba(219,219,219,0.7);

  display: flex;
  flex-direction: column;
/*   min-width: 240px; */
}

  /* 3.2.- ASIDE: Header
     ----------------------------- */

.mky-wrapper-out header{
  background-color: #eee;
  border-bottom: 1px solid rgba(219,219,219,0.7);
  display: flex;
  height: 65px;
  width: 100%;
}

.mky-session-header{
  display: flex;
}

#mky-expand-each-screen{
	width: 100%;
}

.mky-expand-each-screen{
	width: 100%;
}

.mky-session-image{
  width: 40px;
  height: 40px;
  margin: 12px 10px 0 20px;
  display: inline-table;
  vertical-align: top;
  float: left;
}

.mky-session-image img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.mky-session-description{
	width: calc(100% - 70px);
	height: 100%;
	display: inline-table;
	vertical-align: top;
	float: left;
}

.mky-header-exit{
  float: right;
  margin-top: 12px;
  margin-right: 16px;
  cursor: pointer;
}

.mky-header-exit .mky-icon-close-medium{
  color: #6e8191;
  font-size: 14px;
  position: relative;
  top: 12px;
}

.mky-header-exit .mky-icon-signout-sober{
  color: #F35E58;
  font-size: 32px;
  position: relative;
  top: 4px;
}

.mky-session-name{
    margin-top: 23px;
    float: left;
    display: flex;
    white-space: nowrap;
    width: calc(100% - 50px);
    justify-content: space-between;
    align-items: center;
}

.mky-session-name span{
  text-align: left;
  font-size: 14px;
  color: black;
}

.mky-ellipsify {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mky-typing{
  font-style: italic;
  color: #717171 !important;
  font-weight: bold;
}

/* 3.2.- ASIDE: Connection Panel
     ----------------------------- */

.mky-connection-div{
  width: 100%;
  background: red;
  color: white;
  height: auto;
  font-weight: bold;
  -webkit-transition: max-height 2s ease, background-color 0.5s ease;
  -moz-transition: max-height 2s ease, background-color 0.5s ease;
  -o-transition: max-height 2s ease, background-color 0.5s ease;
  transition: max-height 2s ease, background-color 0.5s ease;
}

.mky-connection-content{
  margin: 0 auto;
  padding: 12px 10px 10px 10px;
}

.mky-connection-content p{
  margin: 0.2em 0 0 0;
}

.mky-connection-height{
  max-height: 200px;
}

.mky-connection-hide{
  max-height: 0px;
}

.mky-bold-text{
    /*font-family: Verdana Pro W01 SemiBold;*/
    font-family: helvetica;
}

  /* 3.2.- ASIDE: Search Panel
     ----------------------------- */

.mky-session-conversations{
	height: calc(100% - 65px);
  position: relative;

  display: flex;
  flex-direction: column;
}

.mky-search-input {
  padding: 10px 18px;
  height: 30px;
  position: relative;
  border-bottom: 1px solid #ededed;
  background: #fbfbfb;
}

.mky-search-input > input, .mky-search-input > input:valid {
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/icon_search.png);
  background-repeat: no-repeat;
  background-position: 5%;
  background-size: 16px 16px;
  border-radius: 10px;
  border: 1px solid #EFF0F2;
  font-size: 12px;
  line-height: normal;
  -webkit-appearance: none;
  width: 100%;
  padding: 7px 4px 7px 40px;
  position: relative;
  outline: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  text-overflow: ellipsis;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  height: 32px;

}

.mky-search-input > input::-webkit-search-cancel-button{
  position: absolute;
  right: 10px;
  top: 31%;
}

.mky-search-input > input:focus {
  outline: none;
}

#mky-search-panel{
	width: 100%;
	height: 48px;
	background-color: #ffffff;
	border-bottom: 1px #efefef solid;
	text-align: center;
	position: relative;
}

.mky-search-contacts-input{
	width: calc(100% - 105px);
	margin: 7px auto;
	padding: 8px 30px 8px 40px;
	border-radius: 10px;
	border: 1px solid #EFF0F2;
	position: relative;
	outline: 0;
	text-align: left;
	font-size: 12px;
	background-image: url(https://cdn.criptext.com/MonkeyUI/images/icon_search.png);
	background-repeat: no-repeat;
	background-position: 5%;
}

#mky-button-search-reset{
	position: absolute;
	right: 23px;
	top: 14px;
	border-radius: 50%;
	border: 1px solid #999;
	color: #999;
	height: 18px;
	width: 18px;
	cursor: pointer;
	font-size: 8px;
}

  /* 3.2.- ASIDE: Search List
     ----------------------------- */

#mky-search-list{
	width: 100%;
	height: calc(100% - 116px);
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: auto;
}

.mky-search-by{
  list-style: none;
}

.mky-search-by h4{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin: 10px 18px;
  border-bottom: 1px solid #eee;
  height: 28px;
}

#mky-search-list ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

#mky-search-list .mky-conversation-item{
  background-color: #fff;
}

.mky-search-items li{
  width: 100%;
  height: 65px;
  position: relative;
  border-bottom: 1px solid #fff;
}

.mky-search-items .mky-conversation-null{
  height: 40px;
}

.mky-conversation-null div{
  margin: 5px 0 0 20px;
}

  /* 3.2.- ASIDE: Conversation List
     ----------------------------- */
.mky-content-conversation-list{
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.mky-conversation-list-header{
  padding: 15px 10px 10px 10px;
  border-bottom: solid #EAEAEA 1px;
  font-weight: bold;
  font-size: 17px;
}

.mky-not-pressed{
  background-position: 100%;
  background-size: 200%;
}

.mky-pressing{
  background: linear-gradient(270deg, #fff 50%, #D8D8D8 50%);
  transition: all 0.9s ease;
  background-size: 200%;
  background-position: 0%;
}

.mky-conversation-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
  background: #fff;
  position: relative;
  flex: 1;
  flex-direction: column;
  -webkit-box-flex: 1;
}

.mky-conversation-list::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px rgba(200,200,200,0.3);
  background-color: #F5F5F5;
}

.mky-conversation-list::-webkit-scrollbar{
  width: 6px;
  background-color: #F5F5F5;
}

.mky-conversation-list::-webkit-scrollbar-thumb{
  background-color: #C5C5C5;
}

.mky-conversation-item{
  width: 100%;
  height: 58px;
  position: relative;
  border-bottom: none;
  background-color: transparent;
}

.mky-conversation-item:hover{
  background-color: #f9fbfd;
  cursor: pointer;
}

.mky-conversation-item-content{
  width: 100%;
  height: 100%;
}

.mky-conversation-item .mky-message-status{
  margin-left: 0px;
  margin-right: 3px;
}

.mky-conversation-image{
  height: 38px;
  margin: 0px;
  width: 38px;
  padding: 10px 15px 10px 20px;
  margin-top: -1px;
}

.mky-conversation-image img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.mky-conversation-image, .mky-conversation-description{
  display: inline-block;
  vertical-align: top;
  float: left;
}

.mky-conversation-description{
  width: calc(100% - 90px);
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 10px;
  margin-right: 0px;
  margin-left: 0px;
  padding-right: 8px;
  padding-left: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #EFEFEF;
  box-sizing: content-box;
  height: 43px;
}

.mky-conversation-title{
	width: 99%;
	display: flex;
}

.mky-conversation-title span{
  color: black;
  font-family: 'helvetica-light';
}

.mky-conversation-name{
  width: calc(100% - 70px);
  float: left;
  text-align: left;
  white-space: nowrap;
  display: flex;
}

.mky-conversation-name span{
  font-family: helvetica;
  font-size: 14px;
  margin-top: 2px;
  line-height: 16px;
}

.mky-conversation-time{
  width: 65px;
  float: right;
  margin-left: 5px;
  text-align: right;
}

.mky-conversation-time span{
  color: #a5a5a5;
  font-size: 11px;
  position: relative;
}

.mky-conversation-state{
  color: #a5a5a5;
  display: flex;
  width:80%;
  font-family: 'helvetica-normal', helvetica;
}

.mky-conversation-state span{
  margin-top: 4px;
  line-height: 20px;
}

.mky-conversation-options{
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.mky-conversation-delete{
  opacity: 0;
}

.mky-conversation-delete i{
  background: none;
  border: none;
  font-size: 10px;
  margin-left: 10px;
  color: #FC464E;
  position: relative;
  top: 5px;
}

.mky-conversation-item:hover .mky-conversation-delete{
    min-width: 13px;
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1000;
    cursor: pointer;
    float: right;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
    display: inline-block;
    vertical-align: top;
}

.mky-conversation-notification{
  position: absolute;
  right: 0px;
  bottom: -3px;
  display: inline-block;
  vertical-align: top;
  z-index: 1;
  -webkit-font-smoothing: antialiased;
  font-family: 'helvetica-normal';
}

.mky-conversation-item:hover .mky-conversation-notification{
  right: 18px;
  -webkit-transition: right 0.3s;
  -moz-transition: right 0.3s;
  -ms-transition: right 0.3s;
  -o-transition: right 0.3s;
  transition: right 0.3s;
}

.mky-notification-amount{
  min-width: 10px;
  border: none;
  border-radius: 20px;
  background: #1982E8;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 6px 2px 5px;
  text-align: center;
}

.mky-notification-amount-1{
  padding: 5px 5px 2px 6px;
}

.mky-notification-amount-2{
  padding: 5px 6px 2px 6px;
}

.mky-conversation-item:hover .mky-message-read{
  right: 18px;
  -webkit-transition: right 0.3s;
  -moz-transition: right 0.3s;
  -ms-transition: right 0.3s;
  -o-transition: right 0.3s;
  transition: right 0.3s;
}

.mky-status-read .mky-message-read{
  font-size: 15px;
  margin-top: 5px;
/*  right: 0px;
  position: absolute;*/
}

/* Conversation item selected */

.mky-conversation-selected{
  background-color: #ededed;
  border-top: 1px solid #ededed;
  margin-top:-1px;
}

/* Conversation item unread */

.mky-conversation-unread .mky-conversation-state span{
  color: #000;
  font-family: 'helvetica-light';
}


/* 3.3.- SECTION
   ----------------------------- */

.mky-wrapper-out section{
  height: 100%;
  margin: 0;
  vertical-align: top;
  float: left;
  position: relative;
  background-color: #ffffff;
  padding: 0;
}

.mky-content-window-only{
  width: 100%;
  border:none;
}

.mky-content-window-with{
    width: 72%;
}

#mky-app-intro{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(https://cdn.criptext.com/MonkeyUI/images/logo-noChat.png);
    background-color: #c1c1c1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    top: 0;
    z-index: 3;
}

.mky-disabled{
    pointer-events: none;
    opacity: 0.2;
}

#mky-conversation-disabled{
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background: #CCC;
    position: absolute;
    z-index: 2;
}

.mky-content-conversation{
  height: 100%;
  float: left;
}

.mky-content-conversation-no-expand{
  width: 65%;
}

.mky-content-conversation-expand{
  width: 100%;
}

  /* 3.3.- SECTION: Header
     ----------------------------- */

.mky-session-name i{
  color: #535353;
  float: right;
  font-size: 20px;
  margin-right: 2px;
  cursor: pointer;
}

.mky-edit-input{
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: none;
  font-family: 'helvetica-light', Helvetica, sans-serif;
  font-size: 16px;
  float: left;
  color: black;
  margin: 0;
  text-overflow: ellipsis;
  width: calc(100% - 45px);
}

.mky-edit-input:focus{
  outline-width: 0;
  border: none !important;
  box-shadow: none;
  border-bottom: 1px solid #CECECE !important;
}

.mky-conversation-selected-header{
    background: #eee;
    position: relative;
    z-index: 1;
}

.mky-conversation-selected-header div{
  vertical-align: top;
}

.mky-conversation-back{
  float: left;
  margin: 21px -10px 0 12px;
  width: auto;
  cursor: pointer;
}

.mky-conversation-back i{
	color: #6e8191;
    font-size: 24px;
}

.mky-conversation-selected-image{
    width: 40px;
    height: 40px;
    margin: 13px;
    float: left;
    margin-left: 25px;
    cursor: pointer;
}

.mky-conversation-selected-image img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.mky-conversation-selected-description{
  height: calc(100% - 18px);
  float: left;
  padding-top: 18px;
  position: relative;
  width: calc(100% - 93px);
}

.mky-conversation-selected-description span{
  display: block;
  text-align: left;
  font-weigth: normal;
  line-height: 16px;
  cursor: pointer;
}

.mky-rightside .mky-conversation-selected-description{
  width: calc(100% - 140px);
}

.mky-conversation-selected-name{
  font-family: 'helvetica';
  font-size: 14px;
  color: #353535;
}

.mky-conversation-selected-status{
  color:#a2a2a2;
  font-size: 13px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80%;
}

.mky-conversation-selected-header .mky-button-standard{
  margin: 12px 20px;
  background-color: #e53935;
}

.mky-conversation-header-exit{
  color: #6e8191;
  cursor: pointer;
  display: inline-table;
  font-size: 15px;
  margin: 20px 0 0 8px;
}

#mky-conversation-selected-members{
    font-size: 13px;
}

.mky-not-connected{
    width: 100%;
    position: absolute;
    top: 66px;
    left: 0;
    line-height: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    background-color: red;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.mky-not-connected span{
    text-overflow: ellipsis;
    overflow: hidden;
    color : white;
    font-weight: bold;
}

.mky-status-connecting{
    color: black !important;
    animation:mky-connecting 5s linear infinite;
    -moz-animation:mky-connecting 5s linear infinite; /* Firefox */
    -webkit-animation:mky-connecting 5s linear infinite; /* Safari and Chrome */
    -o-animation:mky-connecting 5s linear infinite; /* Opera */

}

.mky-status-connecting span{
    color: black !important;
}

@keyframes mky-connecting{
    0% 100%  {background-color:yellow;}
    50%  {background:#FFC107;}
}

.mky-reconnect-link{
    color: white;
    font-weight: bold;
}

.mky-reconnect-link:hover{
    color: #83F4FF;
    cursor: pointer;
}

.mky-panel-show{
    position: absolute;
    top: 66px;
    left: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    width: calc(100% - 20px);
    font-weight: bold;
    padding: 0 10px;
    background-color: red;
    -webkit-transition: max-height 2s ease, background-color 0.5s ease;
    -moz-transition: max-height 2s ease, background-color 0.5s ease;
    -o-transition: max-height 2s ease, background-color 0.5s ease;
    transition: max-height 2s ease, background-color 0.5s ease;
}

.mky-panel-show p{
    margin: 0.7em 0.5em 0.5em 0.5em;
}

.mky-panel-height{
    max-height: 100%;
}

.mky-panel-height-hide{
    max-height: 0;
}

  /* 3.3.- SECTION: Chat timeline
     ----------------------------- */
.mky-chat-area{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 65px);
  position: relative;
  background: #eee;
}

.mky-chat-timeline-content{
  background-color: #FAF8F5;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 71px);
  position: relative;
}

#mky-chat-timeline {
  flex-direction: column;
  flex: 1px;
  width: 100%;
  position: relative;
  overflow: auto;
  overflow-x: hidden;
  padding-bottom: 12px;
}

#mky-chat-timeline::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px rgba(200,200,200,0.3);
  background-color: #F5F5F5;
}

#mky-chat-timeline::-webkit-scrollbar{
  width: 6px;
  background-color: #F5F5F5;
}

#mky-chat-timeline::-webkit-scrollbar-thumb{
  background-color: #C5C5C5;
}

.mky-chat-timeline-control{
  cursor: pointer;
  bottom: 10px;
  position: absolute;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: white;
  height: 40px;
  width: 40px;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.44);
  -moz-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.44);
  box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.44);
}

.mky-chat-timeline-control i{
  height: 12px;
  color: #000;	
}

.mky-chat-timeline-conversation{
    width: 100%;
    height: 100%;
    border-top: 1px solid transparent;
}

.mky-message-line{
    box-sizing: content-box;
    width: calc(100% - 70px);
    height: auto;
    margin: 0px auto;
    padding: 5px 0px 4px 0px;
    clear: both;
    display: table;
    max-width: 840px;
}

.mky-partialsize .mky-message-line{
    width: calc(100% - 30px);
    padding: 0 15px 0 15px;
    margin: 10px 0px;
}

/* Loading Messages Animation */
.mky-absolute-circle{
    position: absolute !important;
    bottom: 0;
    left: calc(50% - 23px);
    background: #F3F3F3;
    border-radius: 50%;
    border: solid 6px #F3F3F3;
}

.mky-loader-ring {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  z-index: 100000;
}

.mky-loader-ring .mky-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.mky-loader-ring .mky-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 10%;
  height: 10%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: mky-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: mky-circleFadeDelay 1.2s infinite ease-in-out both;
}
.mky-loader-ring .mky-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.mky-loader-ring .mky-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.mky-loader-ring .mky-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.mky-loader-ring .mky-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.mky-loader-ring .mky-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.mky-loader-ring .mky-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.mky-loader-ring .mky-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.mky-loader-ring .mky-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.mky-loader-ring .mky-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.mky-loader-ring .mky-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg);
}
.mky-loader-ring .mky-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg);
}
.mky-loader-ring .mky-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}
.mky-loader-ring .mky-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.mky-loader-ring .mky-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.mky-loader-ring .mky-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}
.mky-loader-ring .mky-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.mky-loader-ring .mky-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.mky-loader-ring .mky-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.mky-loader-ring .mky-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.mky-loader-ring .mky-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.mky-loader-ring .mky-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.mky-loader-ring .mky-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes mky-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes mky-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

/* System Bubble Panel */

.mky-system-panel{
  display: inline-table;
  height: 20px;
  margin: 10px auto;
  position: relative;
  width: calc(100% - 40px);
  text-align: center;
  background: none;
  padding: 8px 20px 5px 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: #6a8d9e;
  font-family: 'helvetica-light';
}
.mky-devider-dots{
  border-top: 1px dotted #ccc;
  position: relative;
  top: 8px;
  width: 85%;
  max-width: 840px;
  margin: 0 auto;
}
.mky-system-panel-date{
  position: relative;
  width: 130px;
  margin: 0 auto;
  background: #FAF8F5;
}

/* New Messages Panel */
.mky-messages-panel {
    display: inline-table;
    height: 20px;
    margin: 10px auto;
    position: relative;
    width: calc(100% - 40px);
    text-align: center;
    background: none;
    padding: 8px 20px 5px 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: #6a8d9e;
    font-family: 'helvetica-normal';
    border-top: grey;
    -webkit-box-shadow: 0px -8px 30px 0px rgba(125, 125, 125, 0.75);
    -moz-box-shadow: 0px -8px 30px 0px rgba(125, 125, 125, 0.75);
    box-shadow: 0 -15px 15px -15px rgba(125, 125, 125, 0.75);
}

/* base bubble */

.mky-bubble{
  	box-sizing: content-box;
  	max-width: 60%;
  	margin: 0 auto;
  	width: auto;
  	min-width: 42px;
  	min-height: 16px;
  	/*padding: 8px 10px 6px 14px;*/
    padding: 12px 12px 9px 12px;
  	-webkit-border-radius: 15px;
  	-moz-border-radius: 15px;
  	border-radius: 15px;
  	margin-top: 13px;
  	position: relative;
  	line-height: 19px;
    box-shadow: 1px 1px 4px -2px #ccc;
    -moz-box-shadow: 1px 1px 4px -2px #ccc;
    -webkit-box-shadow: 1px 1px 4px -2px #ccc;
}

.mky-bubble-out{
  	float: right;
  	background: #505;
}

.mky-bubble-in{
  	float: left;
  	background: #dde;
}

/* text bubble */

.mky-bubble-text{
  	text-align: left;
  	word-wrap: break-word;
  	vertical-align: top;
  	white-space: pre-wrap;
}

.mky-bubble-text-out {
    color: #fff;
    min-width: 43px;
    background: #096EFF;
    border-bottom-right-radius: 1px;
    margin-top: 11px;
}

.mky-bubble-text-out a:link, .mky-bubble-text-out a:visited {
  	color: inherit;
    text-decoration: underline;
}

.mky-bubble-text-in {
  	color: #000;
  	min-width: 112px;
  	background: #fff;
  	border-bottom-left-radius: 1px;
    border: 1px solid transparent;
    padding-bottom: 8px;
    margin-top: 13px;
    box-shadow: 1px 1px 1px #a7a7a7;
    -moz-box-shadow: 1px 1px 1px #a7a7a7;
    -webkit-box-shadow: 1px 1px 1px #a7a7a7;
    -o-box-shadow: 1px 1px 1px #a7a7a7;
}

.mky-bubble-text-in a:link, .mky-bubble-text-in a:visited {
  	color: #1e88e5;
    text-decoration: underline;
}

/* image bubble */

.mky-bubble-image{
  	width: auto;
  	height: auto;
  	max-width: 260px;
  	padding: 0;
  	background: #fff;
  	border: 1px solid #f2f2f2;
}

.mky-bubble-image-out{
}

.mky-bubble-image-in{
}

/* audio bubble */

.mky-bubble-audio{
  	min-width: 61px;
  	width: auto;
  	min-height: 16px;
  	color: #808080;
  	padding: 0px;
  	background: transparent;
    box-shadow: none;
}

.mky-bubble-audio-out {
}

.mky-bubble-audio-in {
}

.mky-bubble-audio-play-button{
  width: 60px;
  background-position: 50%;
  background-size: 100%;
}
.mky-bubble-audio-pause-button{
  width: 60px;
  background-position: 50%;
  background-size: 100%;
}
.mky-bubble-audio-play-button-green{
  background: url('https://cdn.criptext.com/MonkeyUI/images/green-play-button.png');
      background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
}
.mky-bubble-audio-pause-button-green{
  background: url('https://cdn.criptext.com/MonkeyUI/images/green-pause-button.png');
      background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
}

/* file bubble */

.mky-bubble-file{
  background: #fff;
  border: 1px solid #eee;
  color: #606060;
  max-width: 180px;
  padding: 10px;
  width: 200px;
}



.mky-bubble-file-out {
  text-align: right;
}

.mky-bubble-file-in {
  text-align: left;
}

/*contact buble*/
.mky-bubble-contact{
  background: #fff;
  border: 1px solid #eee;
  color: #606060;
  max-width: 180px;
  padding: 10px;
  width: 200px;
}

.mky-bubble-contact-out {
    text-align: right;
}

.mky-bubble-contact-in {
    text-align: left;
}

.mky-contact-name{
  margin-top: 8px;
}

.mky-contact-photo{
  background-repeat: no-repeat;
  background-size: 100%;
  vertical-align: top;
  float: left;
  width: 50px;
  height: 50px;
  position: relative;
  margin-left: 3px;
}

.mky-contact-photo img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

.mky-contact-detail{
  width: calc(100% - 68px);
  overflow: hidden;
  text-overflow: ellipsis;
  float: right;
  vertical-align: top;
  color: #606060;
}

.mky-contact-detail span{
    font-size: 13px;
    line-height: 15px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.mky-content-contact{
  text-align: left;
}
/* location bubble */

.mky-bubble-location{
    width: 85%;
    height: auto;
    max-width: 200px;
    background: #fff;
    border: 1px solid #bbb;
    padding: 6px 10px 6px 10px;
}

.mky-bubble-location-out{
  float: right;
  /* background: #AB3939; */
  background: #fff;
  color: #606060;
  border: 1px solid #bbb;
}

.mky-bubble-location-in{
}

/* general details bubble */

.mky-message-detail{
    width: 100%;
    height: 12px;
    position: absolute;
    top: -12px;
}

.mky-message-detail span{
    font-size: 11px;
    color: #8c8c8c;
    line-height: 12px;
    position: relative;
    top:-1px;
    margin-right: 2px;
}

.mky-message-hour{
    float: right;
    font-size: 11px !important;
    top: 1px !important;
}

.mky-message-user-name{
    float: left;
    width: calc(100% - 55px);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.mky-message-option{
  display: none;
  height: 40px;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
}

.mky-bubble:hover .mky-message-option{
  display: block;
}

.mky-bubble-out .mky-message-option{
  background: #096EFF; /* For browsers that do not support gradients */
  background: -moz-linear-gradient(45deg, rgba(9,110,255,0) 0%, rgb(9, 110, 255) 99%); 
  background: -webkit-linear-gradient(45deg, rgba(9,110,255,0) 0%,rgb(9, 110, 255) 99%); 
  background: linear-gradient(45deg, rgba(9,110,255,0) 0%,rgb(9, 110, 255) 99%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00096eff', endColorstr='#1e5799',GradientType=1 );
  border-top-right-radius: 15px;
}

.mky-bubble-in .mky-message-option, .mky-bubble-file .mky-message-option, .mky-bubble-contact .mky-message-option{
  background: #096EFF; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(right top, #fff 50%, transparent); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom left, #fff 50%, transparent); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom left, #fff 50%, transparent); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom left, #fff 50%, transparent); /* Standard syntax */
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

.mky-bubble-image .mky-message-option{
  background: none;
}

.mky-bubble-audio .mky-message-option{
  background: none;
}

.mky-message-option-plus{
  border-radius: 50%;
  height: 15px;
  position: absolute;
  right: 8px;
  top: 5px;	
  width: 15px;
}

.mky-bubble-out .mky-message-option-plus{
  background-color: #fff
}

.mky-bubble-in .mky-message-option-plus, .mky-bubble-file .mky-message-option-plus, .mky-bubble-audio .mky-message-option-plus, .mky-bubble-contact .mky-message-option-plus{
  background-color: #000
}

.mky-message-option-plus i{
  display: block;
  font-size: 8px;
  line-height: 5px;
  position: absolute;
  right: 3px;
  top: 4px;
}

.mky-bubble-out .mky-message-option-plus i{
  color: #096EFF
}

.mky-bubble-in .mky-message-option-plus i, .mky-bubble-file .mky-message-option-plus i, .mky-bubble-audio .mky-message-option-plus i, .mky-bubble-contact .mky-message-option-plus i{
  color: #fff
}

.mky-bubble-out .mky-message-detail{
  right: 0;
  text-align: right;
}

.mky-bubble-in .mky-message-detail{
  right: 0;
  text-align: right;
}

.mky-button-message-unsend{
  position: absolute;
  color: blue;
  font-size: 12px;
  top: 1px;
  font-weight: bold;
  right: 6px;
  z-index: 1;
  width: 15px;
  height: 15px;
  opacity: 0;
  cursor: pointer;
}

.mky-button-message-unsend:hover{
  opacity: 1;
}

.mky-message-status{
  font-size: 10px;
  display: block;
  width: 12px;
  float: right;
  margin: 1px;
  margin-left: 5px;
  margin-top: -1px;
  margin-right: -1px;
}

.mky-message-status i{
    float: right;
}

.mky-status-load {
    font-size: 10px;
    text-indent: -9999em;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #0178FF;
    background: -moz-linear-gradient(left, #0178FF 10%, rgba(255, 255, 255, 0) 42%);
    background: -webkit-linear-gradient(left, #0178FF 10%, rgba(255, 255, 255, 0) 42%);
    background: -o-linear-gradient(left, #0178FF 10%, rgba(255, 255, 255, 0) 42%);
    background: -ms-linear-gradient(left, #0178FF 10%, rgba(255, 255, 255, 0) 42%);
    background: linear-gradient(to right, #0178FF 10%, rgba(255, 255, 255, 0) 42%);
    -webkit-animation: load3 1.4s infinite linear;
    animation: load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.mky-status-load:before {
  width: 5px;
  height: 5px;
  background: #0178FF;
  border-radius: 10px 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}

.mky-status-load:after {
  background: #fff;
  width: 7px;
  height: 7px;
  border-radius: 5px;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.mky-check{
  font-size: 10px;
  font-weight: bold;
}

.mky-status-sent{
  color: #bbbbbb;
}

.mky-status-read{
  color: #096EFF;
}

.mky-message-line .mky-bubble-private{
  cursor: pointer;
  color: #0178FF;
}

.mky-message-content-timer{
  position: absolute;
  right: 0;
}

.mky-message-content-timer i, .mky-message-timer{
  font-size: 10px;
  color: #8c8c8c;
}

/* content text bubble */

.mky-content-text{
  font-size: 14px;
  word-break: break-word
}

/* content audio bubble */

.mky-content-audio{
	width: 100px;
	height: 112px;
}

.mky-content-audio-loading{
  width: 40px;
  height: 40px;
  margin: 5px auto;
  position: relative;
  top: 30px;
  float: none;
}

.mky-double-bounce1, .mky-double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #00BFA5;
  opacity: 0.7;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.mky-double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.mky-content-audio-to-download{
  height: 100%;
  align-items: center;
  display: flex;
  position: relative;
  border: 1px solid #bbb;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
}

/*
.mky-content-audio-to-download::before{
  content: '';
  opacity: 0.5;
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/green-play-button.png);
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center 25px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
*/

.mky-content-audio-to-download i{
  margin: 0 auto;
  color: #6e8191;
}

.mky-bubble-audio-out .mky-content-audio{
	float: right;
}

.mky-bubble-audio-in .mky-content-audio{
	float: left;
}

/*content image bubble */

.mky-content-image{
  height: 250px;
  align-items: center;
  display: flex;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
  overflow: hidden;
}

.mky-content-image-loading{
  width: 40px;
  height: 40px;
  margin: 0 80px;
  position: relative;
}

.mky-content-image-to-download{
  margin: 0 auto;
  text-align: center;
  width: 200px;
}

.mky-content-image-to-download i{
  color: #6e8191;
}

.mky-content-image-data {
  height: 100%;
  align-items: center;
  display: flex;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
  overflow: hidden;
  justify-content: center;
}

.mky-content-image-data img{
  height: 250px;
  width: auto;
  cursor: pointer;

  transform-origin: top left;
  /* IE 10+, Firefox, etc. */
  -webkit-transform-origin: top left;
  /* Chrome */
  -ms-transform-origin: top left;
  /* IE 9 */
}

.mky-content-image-data-staic img{
  height: auto;
}

/*Classes to rotate bubble */

.mky-content-image-data.rotate90,
.mky-content-image-data.rotate270 {
  height: auto;
  width: 250px;
}

.mky-content-image-data.rotate90 img {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
  -ms-transform: rotate(90deg) translateY(-100%);
}
.mky-content-image-data.rotate180 img {
  transform: rotate(180deg) translate(-100%, -100%);
  -webkit-transform: rotate(180deg) translate(-100%, -100%);
  -ms-transform: rotate(180deg) translateX(-100%, -100%);
}
.mky-content-image-data.rotate270 img {
  transform: rotate(270deg) translateX(-100%);
  -webkit-transform: rotate(270deg) translateX(-100%);
  -ms-transform: rotate(270deg) translateX(-100%);
}

/*content file bubble */

.mky-content-file{
  text-align: left;
}

.mky-content-file-loading{
  width: 40px;
  height: 40px;
  margin: 5px auto;
  position: relative;
}

.mky-content-file-to-download{
  align-items: center;
  display: flex;
  height: 45px;
  margin: 0 auto;
  text-align: center;
  height: 45px;
}

.mky-file-link{
  width: 100%;
  height: 100%;
  float: left;
}

.mky-file-icon{
  width: 38px;
  height: 43px;
  margin-top: 6px;
  background-repeat: no-repeat;
  background-size: 100%;
  vertical-align: top;
  float: left;
}

.mky-file-download{
    margin-top: 6px;
    background-repeat: no-repeat;
    background-size: 100%;
    vertical-align: top;
    float: left;
    width: 40px;
    height: 40px;
    position: relative;
    margin-bottom: 3px;
}

.mky-file-pdf-icon{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/pdf-icon.png);
}

.mky-file-doc-icon{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/doc-icon.png);
}

.mky-file-xls-icon{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/xls-icon.png);
}

.mky-file-ppt-icon{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/ppt-icon.png);
}

.mky-img-icon{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/img-icon.png);
}

.mky-file-ext-icon{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/ext-icon.png);
}

.mky-file-detail{
  width: calc(100% - 48px);
  overflow: hidden;
  text-overflow: ellipsis;
  float: right;
  vertical-align: top;
  color: #606060;
}

.mky-file-detail div{
  display: flex;
  width: 100%;
}

.mky-file-name{
  margin-top: 10px;
}

.mky-file-size{
  margin-top: 4px;
}

.mky-file-detail span{
  font-size: 13px;
  line-height: 15px;
}

.mky-file-name span{
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.mky-message-icon-define{
  width: 15px;
  height: 15px;
  margin-right: 10px;
  display: inline-table;
  background-repeat: no-repeat;
  background-size: 100%;
}

.mky-icon-image{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/img-icon.png);
}

.mky-icon-audio{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/audio-icon.png);
}

.mky-icon-file-define{
  width: 15px;
  height: 20px;
  margin-right: 10px;
  display: inline-table;
}

/*content location bubble */

.mky-content-location{
    text-align: left;
}

.mky-location-link{
    width: 100%;
    height: 100%;
    float: left;
}

.mky-location-link img{
    width: 100%;
    min-width: 82px;
}

.mky-location-detail{
  position: absolute;
  width: calc(100% - 20px);
  min-width: 82px;
  height: 50%;
  top: 25%;
  background-color: rgba(212, 212, 212, 0.76);
  overflow: hidden;
  text-overflow: ellipsis;
  color: #606060;
  text-align: center;
}

.mky-location-detail div{
  display: flex;
  width: 100%;
}

.mky-location-name{
  margin-top: 0px; */
  height: 100%;
}

.mky-location-detail span{
  font-size: 13px;
  padding-top: calc(19% - 7px);
}

.mky-location-name span{
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.mky-message-code{
  display: none;
}

.mky-bubble-audio-out .mky-status-load:after { /* to audio bubble */
  background: #ffffff;
}

@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.mky-bubble-image-private-in {
  text-align: left;
  margin: 0 auto;
  color: #606060;
  width: auto;
  min-width: 112px;
  min-height: 16px;
  padding: 12px;
  background: #f6f7f9;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  float: left;
}

.mky-bubble-audio-private-in {
  text-align: left;
  margin: 0 auto;
  color: #606060;
  width: auto;
  min-width: 112px;
  min-height: 16px;
  padding: 12px;
  background: #f6f7f9;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  float: left;
}

.mky-bubble-audio-button{
  position: absolute;
  margin: 25px 22px 0 22px;
  z-index: 0;
  height: 60px;
  display: none;
}

.mky-bubble-audio-button:hover{
  cursor: pointer;
}

.mky-bubble-audio-timer{
    text-align: center;
    font-size: 12px;
    top: -10px;
}

  /* 3.3.- SECTION: Preview
     ----------------------------- */

#mky-preview-image{
  /*display: none;*/
  width: 100%;
  height: calc(100% - 136px);
  background: #fff;
  z-index: 9;
  position: absolute;
}

.mky-preview-head{
  position: relative;
  color: #fff;
  height: 35px;
  background: #000;
  vertical-align: top;
}

.mky-preview-head div{
  margin: 10px 20px;
}

.mky-preview-title{
  float: left;
  top: 0;
}

.mky-preview-close{
  float: right;
  top: 0;
  cursor: pointer;
}

.mky-preview-container{
  position: relative;
  height: calc(100% - 35px);
  text-align: center;
}

#mky-preview-image-pic{
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-width: 80%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

  /* 3.4.- SECTION: Chat inputs
     ----------------------------- */

#mky-chat-input{
  width: 100%;
  box-sizing: content-box;
  border-top: 1px solid rgba(219,219,219,0.7);
  height: auto;
  margin: 0 auto;
  bottom: 0;
  text-align: center;
  line-height: 20px;
  position: relative;
  display: table;
  background: #eee;
  z-index: 0;
}

#mky-chat-inner-input{
  border: none;
  background: #fff;
  max-height: 70px;
  height: auto;
  border-radius: 8px;
  -moz-border-radius: 8px;
  width: calc(100% - 30px);
  margin: 10px auto;
  -webkit-border-radius: 8px;
}

.mky-partialsize #mky-chat-inner-input{
  width: calc(100% - 20px);
}

.mky-inner-chat-input{
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 100%;
  justify-content: center;
  margin: 0 auto;
}

.mky-fullsize #mky-chat-input{
}

.mky-partialsize #mky-chat-input{
  /*border: 1px solid #E0E0E0;*/
  width: 100%;
  border: none;
}

.mky-partialsize .mky-textarea-input{
  width: calc(100% - 110px);
  margin-left: 0;
  margin-right: 0;
}

#mky-divider-chat-input{
  border: none;
}

.mky-partialsize #mky-divider-chat-input{
  display: none;
}

.mky-chat-input-file #mky-divider-chat-input{
  position: absolute;
  bottom: 17px;
  border-bottom: 1px solid #2979ff;
  width: calc(100% - 60px);
  left: 30px;
}

.mky-button-input{
  width: 33px;
  height: auto;
  display: inline-table;
  vertical-align: top;
  position: relative;
}

.mky-partialsize .mky-button-input{
  top: 0px;
}

.mky-button-icon{
  background-size: contain;
  border: 0 none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
}

.mky-button-input .mky-icon-drawer-sober{
  background: none;
  color: #546E7B;
  font-size: 32px;
  width: auto;
  height: auto;
}

.mky-button-input .mky-icon-trashcan-regular{
  background: none;
  color: red;
  padding: 0px 0px;
  font-size: 20px;
}

.mky-button-input .mky-icon-mic-sober{
  background: none;
  color: #546E7B;
  font-size: 28px;
  width: 28px;
}

.mky-button-input .mky-icon-send-regular{
  background: none;
  color: #546E7B;
  padding: 0px 0px;
  font-size: 20px;
  cursor: pointer;
}

.tooltip{
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.mky-button-input .tooltip{
  font-size: 12px;
  left: -190px;
  line-height: 12px;
  top: -24px;
  width: 235px;
}

.mky-button-input:hover .mky-disabled .tooltip {
    visibility: visible;
}

#mky-button-send-audio{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/send-blue.png);
  height: 16px;
}

#mky-button-send-audio:hover{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/send-hover.png);
}

.mky-button-input .mky-icon-trashcan-regular:hover,
.mky-button-input .mky-icon-mic-sober:hover,
.mky-button-input .mky-icon-send-regular:hover{
  background: none;
}

#mky-button-send-ephemeral{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/timer-gray.png);
  height: 18px;
  margin-left: 10px;
}

#mky-button-send-ephemeral.enable_timer{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/timer-blue.png);
}

#mky-button-send-ephemeral.enable_timer:hover{
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/timer-hover.png);
}

.mky-textarea-input{
  background: #fff;
  border: none;
  box-sizing: content-box;
  color: #000;
  height: auto;
  line-height: 17px;
  margin: 8px 5px 8px 5px;
  padding: 8px 10px 6px 10px;
  resize: none;
  outline: 0;
  font-size: 14px;
  position: relative;
  font-family: Verdana, Arial, Helvetica, sans-serif !important;
  top: initial;
  max-height: 40px;
  border-radius: 0;
  border-left: 1px solid #ccc;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -webkit-border-radius: 0;
  letter-spacing: 0px;
  font-style: normal;
  width: calc(100% - 114px);
}

.mky-textarea-input:focus{
  border-left: 1px solid #ccc;
  box-shadow: none;
}

.mky-chat-input-file .mky-textarea-input{
  height: 20px;
  padding-top: 5px;
}

.mky-textarea-input::-webkit-input-placeholder{
  color:    #ccc;
  padding-top: 0px;
  font-size: 15px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-transform: initial;
}

.mky-textarea-input:-moz-placeholder {
  color:    #ccc;
  padding-top: 0px;
  font-size: 15px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-transform: initial;
}

.mky-textarea-input::-moz-placeholder {
  color:    #ccc;
  padding-top: 0px;
  font-size: 15px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-transform: initial;
}

.mky-textarea-input:-ms-input-placeholder {
  color:    #ccc;
  padding-top: 0px;
  font-size: 15px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-transform: initial;
}

.mky-record-area{
  box-sizing: content-box;
  width: calc(100% - 111px);
  height: 33px;
  padding: 5px;
  margin: 2px 9px;
  background: #ffffff;
}

.mky-appear{
  display: inline-table;
}

.mky-disappear{
  display: none;
}

.mky-record-preview-area{
  float: left;
  margin-top: 10px;
  text-align: center;
  width: 97%;
}

.mky-blink {
  animation-name: parpadeo;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}

@keyframes parpadeo {
  0% { opacity: 1.0; }
   50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

#mky-button-action-record{
  width: auto;
  height: auto;
  /*position: absolute;*/
  /*float: left;*/
  /*margin-left: 20px;*/
  margin: 0 auto;
  display: inline;
}

#mky-button-action-record button{
  width: 13px;
  height: 13px;
  display: inline-block;
  border: 0 none;
  cursor: pointer;
  background-size: 100%;
  margin: 0;
  padding: 0;
}

#mky-button-start-record{
  color: transparent;
  border: 1px solid;
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/rec.png);
  background-size: 10px 10px !important;
  background-repeat: no-repeat;
  background-position: 0% 50%;
  background-color: transparent;
  position: relative;
  top: -3px;
  padding: 5px;
}

#mky-time-recorder{
  display: inline-table;
  vertical-align: top;
  width: 80px;
  /*margin-top: 3px;*/
  /*margin-left: 25px;*/
  margin: 0 auto;
}

#mky-time-recorder span{
  font-size: 24px;
  color: #666;
}

.jFiler{
  position: absolute;
}

.jFiler-items.jFiler-row{
  display: none;
}

.mky-chat-drop-zone{
  margin-left: -19px;
  opacity: 0.1;
  position: absolute;
  bottom: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 10;
}

.jFiler-input-dragDrop{
  	position: absolute;
    width: 99%;
    height: calc(100% - 136px);
    margin: 0;
  	z-index: 2;
  	opacity: 0.8;
  	display: none;
    color: #97A1A8;
    background: #fff;
    border: 2px dashed #C8CBCE;
    text-align: center;
    padding: 0;
    transform: scale(0.98);
}

.mky-partialsize .jFiler-input-dragDrop{
	left: -2px;
    transform: scale(0.965);
}

.jFiler-input-inner{
	position: relative;
	top: 50%;
	transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
}

.mky-signature {
    width: calc(100% - 40px);
    text-align: right;
    color: #BCBCBC;
    font-size: 11px;
    position: absolute;
    margin: 0 20px;
    line-height: 12px;
    bottom: 5px;
    right: 0;
}

.mky-signature-logo{
    display: none;
    width: calc(100% - 40px);
    text-align: right;
    color: #BCBCBC;
    font-size: 11px;
    position: absolute;
    margin: 0 20px;
    line-height: 12px;
    bottom: 5px;
    right: 0;
    opacity: 0.4;
}

.mky-partialsize .mky-signature{
	bottom: 2px;
}

.mky-signature-link{
  color: #42A5F5;
  text-alignt-decoration-line: dotted;
}

.mky-signature-link img{
  height: 15px;
  margin-right: 5px;
  margin-bottom: -3px;
  opacity: 0.4;
}

#mky-menu-attach-icon,
#mky-menu-attach-file{
  font-size: 31px;
  width: 100%;
  text-align: center;
  padding: 11px 0px 11px 0px;
  margin: 0;
  margin-top: 12px;
  color: #096EFF;
  opacity: 0.8;
  display: inline;
}

#mky-menu-attach-icon:hover,
#mky-menu-attach-file:hover{
  opacity: 1;
}

#mky-menu-attach-icon span, #mky-menu-location-icon span{
  font-family: helvetica;
}

/* input location */

.testing-location{
  height: 50px;
  width: 50px;
  background-color: white;
  z-index: 3000;
  position: absolute;
  bottom: 50px;
  margin-left: 15px;
  cursor: pointer;
  border-radius: 25px;
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/target-icon-0.png);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

.testing-location:hover{
  height: 50px;
  width: 50px;
  background-color: white;
  z-index: 3000;
  position: absolute;
  bottom: 50px;
  margin-left: 15px;
  cursor: pointer;
  border-radius: 25px;
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/target-icon.png);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

.quit-location{
  height: 50px;
  width: 50px;
  background-color: white;
  z-index: 3000;
  position: absolute;
  top: 80px;
  margin-left: 15px;
  cursor: pointer;
  border-radius: 25px;
/*   background-image: url(../images/trash-icon.png); */
	background-image: none;
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: center;
   color: red;
}

.send-location{
  height: 50px;
  width: 50px;
  background-color: white;
  z-index: 3000;
  position: absolute;
  bottom: 50px;
  right: 15px;
  /* margin-left: 15px; */
  cursor: pointer;
  border-radius: 25px;
/*   background-image: url(../images/send-icon.png); */
	background-image: none;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  color: #005FFF;
}

.send-location i,.quit-location i{
  padding: 12px 10px;
}

.pin-location{
  height: 50px;
  width: 46px;
  background-image: url(https://cdn.criptext.com/MonkeyUI/images/mapPin.png);
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 3500;
  position: relative;
  margin-left: 15px;
  cursor: pointer;
  top: -50%;
  margin-top: -38px;
  left: 50%;
  margin-left: -11px;
  opacity: 0.5;
}

/* menu input */

.mky-menu-bubble{
  position: absolute;
  width: 350px;
  bottom: 69px;
  border: none;
  border-radius: 0;
  height: 85px;
  color: #8a8a8a;
  left: 0;
  top: initial;
  z-index: -1;
  max-width: 880px;
  margin-left: 10px;
  -webkit-transition: all 0.4s ease-in;
  -moz-transition: all 0.4s ease-in;
  -ms-transition: all 0.4s ease-in;
  -o-transition: all 0.4s ease-in;
}

.mky-menu-bubble-show{
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

.mky-menu-bubble-hide{
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  pointer-events: none;
}

.mky-menu-bubble.fadeInUp, .mky-menu-bubble.fadeOutDown{
  -webkit-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  animation-duration: 0.4s;
}

.mky-partialsize .mky-menu-bubble{
  z-index: 0;
}

.mky-menu-bubble:before{
  content: none;
  position: absolute;
  width: 0;
  height: 0;
  left: 40px;
  top: 45px;
  border: 10px solid;
  border-color: #292929 transparent transparent #292929;
}

.mky-menu-bubble:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 38px;
  top: 100px;
  border-color: #292929 transparent transparent #292929;
}

.mky-menu-bubble-item{
  display: inline-block;
  height: 100%;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  width: 175px;
  float: left;
  opacity: 1;
}

.mky-menu-bubble-item i{
  /*display: inline-block;*/
}

.mky-menu-bubble-item:first-child{
  /*border-right: 1px solid #ccc;*/
}

.mky-menu-bubble-item:hover{
  /*background: #F0f4fc;*/
  /*color: #8a8a8a;*/
  opacity: 0.9;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.mky-menu-bubble-item p{
	margin: 12px auto;
	width: 70%;
	float: left;
}

.mky-menu-bubble-item img{
  height: 60%;
  float: left;
  top: 20%;
  position: relative;
}

.mky-bubble-circle-icon{
  background: #FFFFFF;
  /* width: 60px; */
  /* height: 60px; */
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  padding: 19px 19px 12px 19px;
  box-shadow: 0px 0px 9px -1px #B7B7B7;
  -moz-box-shadow: 0px 0px 9px -1px #B7B7B7;
  -webkit-box-shadow: 0px 0px 9px -1px #B7B7B7;
  -o-box-shadow: 0px 0px 9px -1px #B7B7B7;
  margin: 7px;
}
.mky-bubble-title{
  display: inline-block;
  position: relative;
  bottom: 10px;
  padding: 11px 19px 8px 19px;
  margin-left: -15px;
  background: #1496E7;
  color: #fff;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 19px;
  z-index: -1;
  font-size: 14px;
}

#mky-layer-menu{
  position: fixed;
  height: 100%;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: -1;
}

#map-id{
  overflow: visible !important;
}

.hidden-div{
  display: none !important;
}

.mky-spinner-input-audio {
  margin: 0 auto;
  width: 16px;
  height: 25px;
  text-align: center;
  font-size: 10px;
  padding-top: 6px;
}

.mky-spinner-input-audio > div {
  background-color: #2979ff;
  height: 100%;
  width: 3px;
  display: inline-block;
  margin: 0 1px 0 0;

  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.mky-spinner-input-audio .mky-rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.mky-spinner-input-audio .mky-rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.mky-spinner-input-audio .mky-rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

  /* 3.4.- BANNER
     ----------------------------- */

.mky-banner-section{
  width: 400px;
  /*border: 1px solid #ccc;*/
  height: 100%;
  display: inline-block;
  vertical-align: top;
}
.mky-banner-section img{
  width: 100%;
  /*height: 100%;*/
}
.mnk-converstion-divided{
  width: calc(100% - 401px);
  position: relative;
  display: inline-block;
}

aside.aside-divided{
  width: calc(22% - 1px);
}
.mky-app-intro-divided{
  display: inline-block;
  position: relative !important;
  width: calc(100% - 401px) !important;
}

.mky-content-window-with.content-window-with-divided{
  width: 78%;
}

@media only screen and (max-width: 1330px){

  .mky-menu-bubble{
    margin-left: calc(50% - 435px);
  }
}

@media only screen and (max-width: 1135px){

  .mky-banner-section{
    width: 250px;
  }
  .mnk-converstion-divided{
    width: calc(100% - 251px);
  }
  .mky-content-window-with.content-window-with-divided{
    width: calc(100% - 241px);
  }
  .mky-menu-bubble{
    margin-left: calc(50% - 375px);
  }
}
@media only screen and (max-width: 740px){
  .mky-banner-section{
    display: none;
  }
  .mnk-converstion-divided{
    width: 100%;
  }
}

  /* 3.5.- ASIDE INFO
     ----------------------------- */

.mky-content-info{
  height: 100%;
}

.mky-content-info-expand{
  width: 100%;
}

.mky-content-info-no-expand{
  border-left: 1px solid #E8E8E8;
  float: left;
  width: calc(35% - 1px);
}

.mky-info-header{
  background: #eee;
  position: relative;
  z-index: 1;
}

.mky-info-header div{
  vertical-align: top;
}

.mky-info-close{
  float: left;
  margin: 26px 12px 0 15px;
  width: auto;
  cursor: pointer;
}

.mky-info-close i{
  color: #535353;
  font-size: 12px;
}

.mky-info-header-description{
    width: calc(100% - 125px);
    height: calc(100% - 18px);
    float: left;
    padding-top: 18px;
}

.mky-info-header-title{
  font-family: 'helvetica';
  font-size: 16px;
  color: #353535;
  display: block;
  text-align: left;
  line-height: 16px;  
  margin-top: 8px;
}

.mky-info-header-subtitle{
  display: block;
  text-align: left;
  color: #a2a2a2;
  line-height: 16px;  
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80%;
}

.mky-info-container{
    width: 100%;
    height: calc(100% - 65px);
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: white;
    overflow: auto;
}

.mky-info-container::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px rgba(200,200,200,0.3);
  background-color: #F5F5F5;
}

.mky-info-container::-webkit-scrollbar{
  width: 6px;
  background-color: #F5F5F5;
}

.mky-info-container::-webkit-scrollbar-thumb{
  background-color: #C5C5C5;
}

  /* 3.5.1.- INFO: conversation
     ----------------------------- */
     
.mky-info-conversation{
  width: 100%;
  height: 100%;
  position: relative;	
}

.mky-info-conversation-image{
  flex: none;
  width: 150px;
  height: 150px;
  margin: 25px auto 10px auto;
}

.mky-info-conversation-image img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  margin: 0 auto;
}

.mky-info-conversation-description{
  flex: none;
  margin: 8px auto;
  border: 1px solid #EFEFEF;
  border-radius: 10px;
  width: 88%;
}

.mky-info-conversation-header{
  border-bottom: 1px solid #EFEFEF;
  flex: none;
}

.mky-info-conversation-data .mky-info-conversation-header{
  border: none;
}

.mky-info-conversation-title{
  color: #a5a5a5;
  float: left;
  font-family: 'helvetica-normal', helvetica;
  font-size: 14px;
  font-weight: 100;
  line-height: 1;
  margin: 0;
  padding: 10px;
  text-align: left;
  width: calc(100% - 95px);
}

.mky-info-conversation-action{
  display: flex;
  width: 100%;
}

input.mky-info-input{
  background: none;
  border: none;
  box-shadow: none;
  font-family: 'helvetica-light', Helvetica, sans-serif;
  font-size: 16px;
  float: left;
  color: black;
  margin: 0 0 5px 10px;
  padding: 1px;
  text-overflow: ellipsis;
  width: calc(100% - 45px);
}

.mky-info-input:focus{
  outline-width: 0;
  border: none !important;
  box-shadow: none;
  border-bottom: 1px solid #CECECE !important;
}

.mky-info-conversation-action i{
  cursor: pointer;
  float: right;
  font-size: 16px;
  margin-right: 8px;
}

.mky-info-conversation-action i:hover{
  color : #0077C1;
}

.mky-info-conversation-container{
  overflow: auto;
}

.mky-info-conversation-container::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px rgba(200,200,200,0.3);
  background-color: #F5F5F5;
}

.mky-info-conversation-container::-webkit-scrollbar{
  width: 6px;
  background-color: #F5F5F5;
}

.mky-info-conversation-container::-webkit-scrollbar-thumb{
  background-color: #C5C5C5;
}

.mky-info-conversation-members{
  display: flex;
  position: relative;
  flex: 0 1 auto;
  flex-direction: column;
  min-height: 154px;
}

.mky-info-conversation-amount{
  color: #8297a2;
  float: right;
  font-family: 'helvetica-light', helvetica;
  font-size: 14px;
  line-height: 17px;
  margin: 10px;
}

.mky-info-conversation-list{
  list-style: none;
  margin: 0;
  padding: 0px;
}

ul.mky-info-conversation-list li.mky-info-conversation-member{
  border: none;
  box-sizing: content-box;
  height: 48px;
  width: 100%;
  clear: both;
  position: relative;
  padding: 5px 0;
  -webkit-box-sizing: content-box;
}

.mky-info-conversation-member:after {
    content: '';
    width: calc(100% - 60px);
    height: 1px;
    background: #EFEFEF;
    position: absolute;
    bottom: 0;
    left: 60px;
}

.mky-info-conversation-member img{
  box-sizing: content-box;
  height: 36px;
  width: 36px;
  float: left;
  border-radius: 50%;
  padding: 5px;
  margin-left: 10px;
  -webkit-box-sizing: content-box;
}

.mky-info-member-description{
  float: left;
  overflow: hidden;
  height: 35px;
  padding: 8px 5px 0px 5px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 70px);
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.mky-info-member-detail{
  display: -webkit-box;
  display: -webkit-flex; 
  display: -ms-flexbox;
  display: flex;
  font-family: helvetica;
  font-size: 14px;
  font-weight: 400;
  -ms-flex-direction: row;
  flex-direction: row; 
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
}

.mky-info-member-name{
  color: #000;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mky-info-member-rol{
  color: #8ac34a;
  flex: none;
  line-height: 18px;
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
}

.mky-info-member-status{
  color: #a5a5a5;
  font-family: 'helvetica';
  font-size: 14px;
  margin-top: 2px;
}

.mky-info-member-online{
  color: #8ac34a;
}

.mky-info-member-actions{
  position: absolute;
  right: 12px;
  top: 35px;
  cursor: pointer;
}

.mky-info-member-actions i{
  color: #b1b1b1;
}

.mky-info-button{
  cursor: pointer;
  display: flex;
  margin: 8px auto;
  height: 50px;
  background: #ee5350;
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  flex: none;
  justify-content: center;
  position: relative;
  width: 88%;
}

.mky-info-button-text{
  display: block;
  font-family: 'helvetica-light';
  font-size: 15px;
  padding: 4px 4px 0 0;
  text-shadow: 2px 2px #bd5353;
  text-transform: uppercase;
  text-align: center;
  width: 100%
}

.mky-info-button i{
  font-size: 28px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 28px;
}

.mky-info-actions{
  animation-name: actionMenu;
  animation-duration: 0.5s;
  position: fixed;
  max-height: 150px;
  width: 200px;
  z-index: 1000;
  background-color: white;
  -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
  border-radius: 3px;
  max-width: 85%;
  overflow: auto;
}

.mky-info-actions::-webkit-scrollbar { width: 0 !important }
.mky-info-actions{ -ms-overflow-style: none; }
.mky-info-actions{ overflow: -moz-scrollbars-none; }

@keyframes actionMenu{
    0%   {max-height: 0;}
    100% {max-height: 150px;}
}

.mky-info-action{
  color: #000;
  cursor: pointer;
  padding: 10px 20px;
}

.mky-info-action:hover{
    background-color: #EEEEEE;
}

.mky-info-actions-back{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.mky-content-info .mky-space{
  padding-top: 10px;
}

/* 3.5.2.- INFO: messages
     ----------------------------- */

.mky-info-header-message{
  width: calc(100% - 55px);
  height: calc(100% - 18px);
  float: left;
  padding-top: 18px;
}

.mky-info-message-container{
  flex: none;
  margin: 25px 0;
}

.mky-message-option-item{
  padding: 15px 20px;
  cursor: pointer;
  white-space: nowrap;
}

.mky-message-option-item:hover{
  background-color: #ededed;
}

.mky-message-info-desc{
    float: left;
    overflow: hidden;
    height: 35px;
    padding: 8px 5px 0px 5px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 120px);
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    max-width: 150px;
}

.mky-message-read-check{
  font-size: 20px;
  display: block;
  width: 20px;
  float: right;
  margin: 1px;
  padding: 12px 20px 0px 5px;
}

.mky-info-message-title{
  font-family: 'helvetica';
  font-size: 16px;
  color: #353535;
  display: block;
  text-align: left;
  line-height: 16px;  
}

.mky-info-message-subtitle{
  display: block;
  text-align: left;
  color: #a2a2a2;
  line-height: 16px;  
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80%;
  margin-top: 4px;
}

/* 4.- MODAL
   ----------------------------- */

#mky-button-exit {
    width: 30px;
    height: 30px;
    border-radius: 100px;
    background: none;
    margin: 3px 7px 3px 3px;
    color: #fff;
    border: none;
    font-size: 16px;
    right: 0px;
    float: right;
    position: absolute;
    z-index: 6000;
    background-color: black;
    cursor: pointer;
}

.mky-viewer-image-container{
  height: 100%;
}

.mky-viewer-content{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: rgba(0,0,0,0.8);
  z-index: 1;
}

.mky-viewer-toolbar{
  width: 100%;
  height: 36px;
  background-color: rgba(0,0,0,0.3);
}

.mky-viewer-toolbar button, .mky-button-modal{
  display: inline-table;
  float: right;
  cursor: pointer;
  border: 0 none;
  color: #fff;
  font-size: 13px;
  margin-top: 5px;
}

.mky-viewer-back-close {
  position: absolute;
  top: 36px;
  width: 100%;
  height: calc(100% - 36px);
}

.mky-button-download{
  width: 100px;
  padding: 5px 0px 6px 5px;
  background-color: #0b6dd4;
  border-radius: 4px;
  font-size: 15px;
  text-align: center;
  outline: none;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin: 3px 5px;
}

.mky-button-download[title="Download"]{
  margin-right: 50px;
}

.mky-viewer-image{
  text-align: center;
  height: calc(100% - 40px);

}

.mky-viewer-timer .mky-message-timer{
  font-size: 15px;
  color: #fff;
}

.mky-brand-app{
/*
  background-image: url(../images/criptext_signature_white.png);
  width: 140px;
  height: 42px;
  bottom: 15px;
  right: 15px;
  position: absolute;
  background-size: 100%;
*/
}

.mky-viewer-image img{
  max-height: 680px;
  max-width: 80%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.mky-viewer-image.rotate90 img {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  top:0;
}
.mky-viewer-image.rotate180 img {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg) ;
  top:0;
}
.mky-viewer-image.rotate270 img {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  top:0;
}

/* 5.- POP UP
   ----------------------------- */

.mky-inner-modal{
  max-width: 400px;
  height: 200px;
  background: white;
  margin: auto;
  top: 38%;
  position: relative;
  z-index: 200;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 90%;
}

.mky-popup-message{
  color: black;
  height: 20%;
  text-align: center;
  padding-top: 45px;
  margin: 0 5%;
  position: relative;
  width: 90%;
}

.mky-popup-buttons{
  margin-top: 30px;
  text-align: center;
}

.mky-popup-button{
  cursor: pointer;
  height: 25px;
  width: auto;
  margin: 0 10px;
  background: white;
  border-style: none;
  color: #2196f3;
  font-size: 12px;
  font-weight: bold;
}

  /* 5.1.- OUTSIDE DIVS
    -------------------------------*/

  .mky-out-message-options{
    animation-name: actionMenu2;
    animation-duration: 0.5s;
    font-size: 14px;
    font-family: helvetica-light, Helvetica, sans-serif;
    position: fixed;
    max-height: 200px;
    max-width: 200px;
    background-color: white;
    -webkit-box-shadow: 0px 0px 11px 0px rgba(178, 178, 178, 0.39);
    -moz-box-shadow: 0px 0px 11px 0px rgba(178, 178, 178, 0.39);
    box-shadow: 0px 0px 11px 0px rgba(178, 178, 178, 0.39);
    z-index: 2;
    padding: 5px 0px;
    border-radius: 3px;
    overflow: auto;
  }

  .mky-out-options-back{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
  }

  @keyframes actionMenu2{
      0%   {max-height: 0; max-width: 0;}
      100% {max-height: 200px; max-width: 200px;}
  }

  .mky-out-message-options::-webkit-scrollbar { width: 0 !important }
  .mky-out-message-options{ -ms-overflow-style: none; }



/* 6.- GLOBAL SETTINGS
   ----------------------------- */

.mky-wrapper-out button:focus {
  outline:0;
}

input[type=text] {
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  outline: none;
}

input:focus{
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  border: 1px solid rgba(81, 203, 238, 1) !important;
}

.mky-wrapper-out audio{
  width: 250px;
}

.mky-button-standard {
  border: 0px;
  border-radius: 2px;
  color: white;
  cursor: pointer;
  height: 25px;
  padding: 2px 10px 3px 10px;
}

.mky-button-standard:focus {
  border: none !important;
  box-shadow: none;
  outline:0;
}

.preview-input{
  position: relative;
  height: auto;
}

.preview-actions{
  border-bottom: 1px solid #035cf4;
  width: 80%;
  margin: 0 auto;
  line-height: 0px;
}

#message-image-input{
  height: 25px;
  padding: 5px;
  width: 88%;
  margin: 0px;
  margin-top: 10px;
  border-radius: 10px;
  resize: none;
  border: 1px solid #fff;
  outline: 0;
  font-size: 15px;
}

/*OVERWRITING ANIMATION TIMES*/
.animated.zoomIn,
.animated.slideInLeft {
  animation-duration: 0.3s;
  animation-delay: 0s;
}
.animated.pulse{
  animation-duration: 0.5s;
}
.mky-wrapper-out.animated.pulse{
  animation-duration: 0.5s;
  animation-iteration-count: initial;
  -webkit-animation-iteration-count: initial;
  -moz-animation-iteration-count: initial;
}
/*END ANIMATION TIMES*/

.mky-generic-modal{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 100;
}

.mky-back-modal{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

.mky-dflex-dcolumn{
  display: flex;
  flex-direction : column
}

/* 7.- MEDIA QUERIES
   ----------------------------- */

  /* ----- Minimun Size On Web ----- */

/*
@media only screen and (max-width: 900px){
  .mky-wrapper-out section{
    width: calc(100% - 242px);
  }
  .mky-fullsize .mky-wrapper-in{
    min-width: 400px;
  }
}
*/

@media only screen and (max-width: 900px){

  /* Disappear content conversation */
  .mky-content-window-with .mky-content-conversation-no-expand{
	display: none;
  }
  
  /* Expand content info */
  .mky-content-window-with .mky-content-info-no-expand{
	width: 100%;
  }
  .mky-menu-bubble{
    margin-left: 20px;
  }
}

@media only screen and (max-width: 600px){

  /* Disappear description user session */
  .mky-no-expand .mky-session-name{
	  display: none;
  }
}

@media only screen and (max-width: 500px){
  /* Expand width */
  .mky-wrapper-in{
    width: 100%;
/*     min-width: 400px; */
  }

  /* strech search */
  .mky-search-input{
  	padding: 10px 5px;
  }

  /* Center image conversation*/
  .mky-conversation-image{
    display: inherit;
    float: none;
    margin: 8px auto;
  }

  /* Disappear description conversation */
  .mky-conversation-description{
    display: none;
  }
}

@media only screen and (max-width: 300px) {
  /* Disappear list conversation*/
  .mky-content-window-with{
    width: 100%;
  }

  .mky-content-aside{
    display: none;
  }
}

@media only screen and (max-height: 500px){
  /* Expand height */
  .mky-wrapper-in{
    height: 100%;
    margin: 0 auto;
  }
}

  /* ----- Mobiles ----- */

@media screen and (min-device-width: 320px) and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 1) {
	/* Expand screen */
	.mky-fullsize .mky-wrapper-in{
    	width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	/* Disappear list conversation */
	.mky-content-window-with{
    	width: 100%;
	}

	.mky-content-aside{
    	display: none;
	}
	
	/* Input */
	.mky-textarea-input{
	  width: calc(100% - 109px);
	}
	
	.mky-record-area{
	  width: calc(100% - 106px);
	}

	/* Messages */
	.mky-bubble-text-out{
	    min-width: 47px;
	}

	/* Signature */
	.mky-signature{
		top: 50px;
		z-index: 1;
	}
}

@media screen and (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 640px) and (min-device-width: 320px){
  .mky-content-aside{
    display: block !important;
    width: 100%;
  }
  .mky-conversation-description{
    display: inline-block;
  }
  .mky-conversation-image{
    margin: 0;
    float: left;
  }
  .mky-message-line{
      max-width: 100%;
      word-break: break-all;
  }
  .mky-conversation-selected-description{
    width: calc(100% - 165px);
  }
  .mky-signature{
    margin-right: 9px;
  }
  .mky-conversation-selected-header div{
    font-size: 10px;
  }
}

/* ----------- Non-Retina Screens ----------- */
/*@media screen
  and (min-device-width: 1200px)
  and (max-device-width: 1600px)
  and (-webkit-min-device-pixel-ratio: 1) {
}*/

/* ----------- Retina Screens ----------- */
@media screen
  and (min-device-width: 1200px)
  and (max-device-width: 1600px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) {
}

/*------------------------------
  NEW DESIGN FOR "HABLA"
------------------------------*/

/*
.mky-chat-inner-timeline, .mky-chat-inner-input{
  max-width: 890px;
  margin: 0 auto;
}
*/