div, span { box-sizing: border-box; }
body, html {
  width: 100%; height: 100%;
  font-family: "Lucida Console", Monaco, monospace;
  background-color: #000;
  line-height: 1;
  color: #414141;
  font-size: 90%;
  color: #006080;
}
form button {
  height:50px;
}
div {
  display:block;
}
input:not([type])[disabled] {
  color: #8a9293 !important;
}
.header {
  display:none;
  position:fixed;
  top: 4px;
  left:80px;
}
#sticky {
  width: 250px;
  position: absolute;
  /*bottom: 100px;*/
  bottom: 10px;
  background-color: rgba(230, 230, 200, 1);

}
.notify {
  color:white;
  position:absolute;
  left:40px;
  font-weight:900;
  font-family:"Arial Bold";
  font-size: 18px;
  width:22px;
  height:22px;
  background-color: red;
  border-radius: 50%;

}
#sticky div {
  vertical-align: middle;
  text-align:center;
}

/* interesting experiment:
.callico {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewbox=\"0 0 24 24\"><path d=\"M17.6 14.4c-1 2-1.6 3.2-3.2 3.2s-3.2-1.6-4.8-3.2C8 12.8 6.4 11.2 6.4 9.6c0-1.6 1.11-2.334 3.2-3.2C11 5.7 6.4 0 4.8 0 3.2 0 .61 4.8.61 4.8c0 3.2 2.6 10 5.79 12.8s10 6 12.7 5.9c0 0 5-3 4.9-4.3s-5.5-7-6.4-4.8z M14 2l8-.2c1 0 1 1 1 1l0 7c-0 .5-1 1-1.5 1-.4-0-1.4-.5-1.4-1l.5-3.8-6 6c-.3.3-1-0-1.5-.4-.3-.3-.8-1.1-.5-1.7l5.7-5.7c-1.2 0-2.5 .7-4 .6-.1-.2-.6-1-.55-1.3 0-.4 .3-1.4 .7-1.5z\" /></svg>");

}*/
#content, #content-old {
  /*border: 1px solid black;*/
  position:fixed;
  left:80px;
  /*top: 0px;*/
  width:400px;
  max-width:400px;
  height: calc(100% - 25px);
  background-color: white;
  margin-top:25px;
  /*padding:0px 20px;*/
}

#content span, #content-old span {
  /*
  width:100%;
  max-width:100%;
  border-bottom: 1px dotted #ccc;
  */
  vertical-align: middle;
  line-height: normal;
  /*max-width:370px;*/
  /*text-align:center;*/
}
#contact-container {
  position:absolute;
  width: 100%;
  height: calc(100% - 60px);
  flex-direction: column;
  display: flex;
  /*justify-content: flex-end;*/
}

#contact-list {
  overflow-y: auto;
  overflow-x: hidden;
}
#contact-list span {
  padding: 10px;
  display:inline-block;
  /*width:160px;*/
}
#contact-list li {
 /* border-bottom: 1px solid black*/
}
.dragging {
  fill:white;
  background-color:black;
}
.title {
  font-family: "Courrier new";
  font-size: 200%;
}

.button-secondary {
  color: white;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-del { background: rgb(188, 24, 65); }
.button-nav { background: rgb(28, 184, 65); }

#search, #dial {
  border:0px solid;
  border-bottom: 1px solid;
  /* */
  box-shadow: none;
  height:57px;
  width: calc(100% - 72px);
  padding-left: 70px;
}
#search-icon {
  position:absolute;
  left: 10px;
  top: 5px;
  z-index:20;
  pointer-events:none;
}

#search-clear {
  display:none;
  position:absolute;
  right: 30px;
  top: 15px;
}
.highlight {
  display: inline;
  text-decoration: underline;
  font-weight: 900;
  color:black;
}
#menu {
  position:absolute;
  left:10px;
  /*top: 50%;
  transform: translateY(-50%);
  */
}
.menu-button {
  margin-top: 20px;
  border-radius: 50%;
  width:60px;
  height:60px;
  background-color: rgba(0, 0, 0, 0);
  opacity:0.7;
  fill:white;
}
.active {
  /*background-color: rgba(0, 0, 0, 1);
  fill: white;*/
  opacity:1;
}
.menu-button:Hover {
  background-color: rgba(200, 200, 200, 0.2);
  opacity:1;
}
.errormsg {
  display: block;
  color: #dd5040 !important;
  line-height: 17px
}
.form-error {
  border: 1px solid #dd5040 !important;
}

/* Svg stuff */
#menu svg, #modal .close, .contact svg, .conversation svg {
  height: 32px;
  width: 32px;
  padding-top: 8px;
  /*border: 1px solid grey;*/
}
.send svg, .back svg, .call svg, #search-clear svg {
  height: 28px;
  width: 28px;
  /* border: 1px solid black; */
}
.phone button {
  width:100%;
}
.hangup {
  background-color: red;
}
.hangup svg {
  transform: rotate(135deg);
}
#search-icon svg, .phone svg, .hangup svg {
  height: 40px;
  width: 40px;
  padding:6px;
  /* border: 1px solid black; */
}
.nt, path, svg {
  pointer-events:none;
}
.drag svg {
  height:80px;
  width: 93px;
  border: 1px dashed black;
  padding: 10px;
  border-radius:10%;
}
.trash {
  margin-left:20px;
}
.edit {
  /*position:absolute;
  right: 20px;*/
}
#menu2 {
  /*position: absolute;*/
  width:100%;
  /*top: 50%;
  transform: translateY(-50%);*/
  margin-top:10px;
  bottom: 0px;
}
/* popup */
#modal {
  position:absolute;
  margin: 70px auto;
  top:68px;
  bottom:172px;
  right:0;
  left:0;
  display:none;
}
.modal-overlay {
  position: fixed;
  top:0; right:0; left:0; bottom:0;
  background:black;
  opacity:0.7;
  z-index:1000;
}
.modal {
  position: relative;
  width: 40%;
  z-index:1050;
  background-color: white;
  border: 1px solid black;
  margin: auto;
  padding: 0px;
  border-radius: 5px;
}
.modal-content {
  padding:20px 10px;
  padding-top: 0px;
}
.modal .close {
  z-index: 1200;
  position: absolute; top:-20px; right:-10px;
  font-size: 30px;
}
.simple-button {
  font-size: 40px;
  color: gray;
  text-decoration: none;
}
.simple-button:hover{
  color: black;
}


/********************************
 * MESSAGES
 */
.datestamp {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 8px;
  color: #8b91a0;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
}

.bubble p {
  font-size: 1.4em;
}

.message {
  margin-top: 10px;
}

#message-footer textarea {
  width:76%;
  margin-left: 2%;
  height:60px;
  resize: none;
}
#message-footer button, #message-header button {
  height: 100%;
  width: 18%;
  height:60px;
}
#message-header {
  border-bottom: 1px solid black;
  height: 60px;
  width:100%;
}
#message-list {
  position:absolute;
  width: 100%;
  height: calc(100% - 150px);
  flex-direction: column;
  display: flex;
  justify-content: flex-end;
  overflow-y: auto;
  overflow-x: hidden;
}

#message-footer {
  position:absolute;
  padding-top:10px;
  height: 80px;
  width:100%;
  bottom:0;
  border-top: 1px solid black;
}
#message-container {
  display: flex;
  flex-direction: column;
  min-height: 1em;
  padding:10px
}

.message {
  position: relative;
  width:100%;
  font-size: 75%;
}
.message-content {
  box-sizing: border-box;
  position: relative;
  width:97%;
  padding-right:8px;
  float:right;
  line-height:15px;
  /*
  display: inline-block;
  max-width: 100%;
  max-width: 400px;*/
}
.message-details {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  position: relative;
  margin-bottom:10px;
}

.bubble {
  box-sizing: border-box;
  position: relative;
  max-width: 80%;
  padding: 6px 20px;
  margin-bottom: 3px;
  display: block;

  display: inline-block;
  max-width: 90%;
  position: relative;

  clear: both;

  background: #95c2fd;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.15, #bee2ff), color-stop(1, #95c2fd));
  background-image: -webkit-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: -moz-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: -ms-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: -o-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#95c2fd', endColorstr='#bee2ff');
  border: solid 1px rgba(0,0,0,0.5);
  border-radius: 20px;
  box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  color: #000;
  text-shadow: 0 1px 1px rgba(255,255,255,0.8);
  word-wrap: break-word;
}

.bubble:before, .bubble:after {
  border-radius: 20px / 5px;
  content: '';
  display: block;
  position: absolute;
}
.bubble:before {
  border: 10px solid transparent;
  border-bottom-color: rgba(0,0,0,0.6);
  bottom: 0px;
  left: -7px;
  z-index: -2;
}
.bubble:after {
  border: 8px solid transparent;
  /*border-bottom-color: #bee2ff; /* arrow color */
  border-bottom-color: #bee2ff; /* arrow color */
  bottom: 1px;
  left: -5px;
}

.bubble-left {
  float: left;
}
.bubble-right {
  float: right;
}
.bubble-right:before {
  left: auto;
  right: -7px;
}
.bubble-right:after {
  left: auto;
  right: -5px;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #ccc;
    zcursor: help;
    color: #006080;
    color: white;
}
.tooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.tooltip .tooltiptext2 {
    visibility: hidden;
    position: absolute;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 1;
}
.tooltip:hover .tooltiptext2 {
    visibility: visible;
}
.tooltip-right {
  top: -5px;
  left: 125%;
}
.tooltip-right2 {
  top: -5px;
  left: 105%;
}

.tooltip-right::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent transparent;
}

.tooltip-bottom {
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip-bottom2 {
  top: 125%;
  left: 50%;
  margin-left: -60px;
}

.tooltip-bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

.tooltip-top {
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
}
.tooltip-top2 {
  bottom: 115%;
  left: 50%;
  margin-left: -60px;
}

.tooltip-top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip-left {
  top: -5px;
  bottom:auto;
  right: 128%;
}

.tooltip-left2 {
  top: -5px;
  bottom:auto;
  right: 105%;
}

.tooltip-left::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #555;
}

.tooltip .tooltiptext-bottomarrow {
    visibility: hidden;
    width: 120px;
    background-color: #111;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 130%;
    left: 50%;
    margin-left: -60px;
}
.tooltip .tooltiptext-bottomarrow::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext-bottomarrow {
    visibility: visible;
}

.tooltip .tooltiptext-toparrow {
    visibility: hidden;
    width: 120px;
    background-color: #111;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}
.tooltip .tooltiptext-toparrow::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext-toparrow {
    visibility: visible;
}

.tooltip .tooltiptext-leftarrow {
    visibility: hidden;
    width: 120px;
    background-color: #111;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 110%;
}
.tooltip .tooltiptext-leftarrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext-leftarrow {
    visibility: visible;
}
.tooltip .tooltiptext-rightarrow {
    visibility: hidden;
    width: 120px;
    background-color: #111;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 110%;
}
.tooltip .tooltiptext-rightarrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext-rightarrow {
    visibility: visible;
}