@-ms-viewport {
    width: auto;
}
[ng-cloak]
{
  display: none !important;
}
html {
  margin: 0;
  height: 100%;
  width: 100%;
  display: block;
  overflow: hidden;

  /* FF Mobile hack */
  position: fixed; top: 0; left: 0;
}
body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;

  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
  color: #262626;

  background-color: #142B39;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Prevent background changes on very small devices */
@media (max-width: 640px) and (max-height: 640px) {
  body {
    -webkit-background-size: auto;
    -moz-background-size: auto;
    -o-background-size: auto;
    background-size: auto;
  }
}

p {
  line-height: 1.5;
}

h1 {
  font-size: 31px;
  text-align: left;
  margin: 20px 0 30px 0;
  border-bottom: 4px solid #BBB;
  font-weight: normal;
}
h2 {
  font-size: 25px;
  text-align: left;
  margin: 20px 0 20px 0;
  border-bottom: 2px solid #BBB;
  font-weight: normal;
}
h3 {
  font-size: 17px;
  margin-bottom: 10px 0;
  color: #444;
  font-weight: normal;
  line-height: 20px;
}
h4 {
  font-size: 15px;
  margin-bottom: 10px 0;
  color: #444;
  font-weight: normal;
  line-height: 20px;
}
table thead td {
  font-weight: bold;
}

select {
  appearance: none;
  line-height: 18px;
}

/* On FF mobile, some themes cause wrong rendering */
* > input:not([type="image"]) {
  background-image: none;
}

.btn.disabled,
.btn[disabled] {
    opacity: 0.90;
}
a, .pointer {
  cursor: pointer;
}
.no-border {
  border: none !important;
}
.center {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
}
.hidden {
    visibility: hidden;
}
.btn-large {
    overflow: hidden;
}
.collapse {
  width: 100%;
}
.not-selectable, [ng-click], a, button {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent; /* Nexus5/Chrome and Kindle Fire HD 7 */
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.selectable,
.selectable * {
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.fakemodal {
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,0.3);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    outline: 0;
    overflow: hidden;
    -webkit-box-shadow: 0 3px 7px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 3px 7px rgba(0,0,0,0.3);
    box-shadow: 0 3px 7px rgba(0,0,0,0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    margin-bottom: 15px;
}
.fakemodal-header {
    padding: 9px 15px;
    border-bottom: 1px solid #eee;
}
.fakemodal-body {
    position: relative;
    padding: 15px;
}
.fakemodal-body p:last-child {
  margin-bottom: 0;
}
@media (max-width: 480px) {
  .fakemodal-body {
    padding: 10px;
  }
}
.fakemodal-footer {
  padding: 14px 15px 15px;
  margin-bottom: 0;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 #ffffff;
     -moz-box-shadow: inset 0 1px 0 #ffffff;
          box-shadow: inset 0 1px 0 #ffffff;
}
.fakemodal-footer:before,
.fakemodal-footer:after {
  display: table;
  line-height: 0;
  content: "";
}
.fakemodal-footer:after {
  clear: both;
}

.btn-kankel,
.btn-kankel:hover,
.btn-kankel:active {
    border: none;
    background-image: none;
    background: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    filter: none;
}

.alert-first-time {
    color: #3a87ad;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

#bottom-bar .navbar-inner,
#top-bar .navbar-inner {
    color: #333;
    font-family: Arial, sans-serif;
    padding: 0;
    filter: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    height: 48px;
}
@media (max-width: 1023px) {
    .navbar-fixed-top {
        position: fixed;
        margin-left: 0px;
        margin-right: 0px;
    }
    .navbar-fixed-bottom {
        position: fixed;
        margin-left: 0px;
        margin-right: 0px;
    }
}
#bottom-bar .nav li a,
#top-bar .nav li a {
  color: inherit;
  text-shadow: none;
  line-height: 32px;
  height: 32px;
  cursor: pointer;
  display: block;
  overflow: hidden;
}
#top-bar #menu-logo a {
  position: relative;
  background-position: left 3em center;
  background-repeat: no-repeat;
  min-width: 32px !important;
}
#top-bar #menu-logo a i {
  position: absolute;
  top: 50%;
  margin-top: -.6em;
  font-size: 1.9em;
}
#top-bar #menu-logo .active {
  color: #f4f4f4;
}
#top-bar #menu-logo a:hover {
  color: gray;
}
#top-bar #menu-logo span.badge {
  position: absolute;
  display: block;
  top: 50%;
  padding: 0 0.4em;
  margin-left: 3em;
  margin-top: -.6em;
}
#top-bar #menu-logo span.notification {
  top: 2px;
  right: 3px;
  background: red;
}
#top-bar #page-title a {
  font-size: 16px;
  font-weight: bold;
  padding-left: 0;
  margin-top: -.1em;
}
#bottom-bar #nav-buttons,
#top-bar #nav-buttons {
  margin-right: 10px;
}
#bottom-bar #nav-buttons i ,
#top-bar #nav-buttons i {
  font-size: 20px;
  line-height: 32px;
  vertical-align: middle;
}

#slide-wrap {
  position: absolute;
  top: 48px;
  bottom: 0;
  left: -270px;
  right: 0;
  overflow: hidden;

  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;

  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);

  /* Initialize hardware acceleration on iOS devices */
  -webkit-transform: translate3d(0, 0, 0);
}
#slide-wrap.open {
  -webkit-transform: translate(270px, 0);
  -moz-transform: translate(270px, 0);
  -ms-transform: translate(270px, 0);
  -o-transform: translate(270px, 0);
  transform: translate(270px, 0);

  /* Use hardware acceleration on iOS devices */
  -webkit-transform: translate3d(270px, 0, 0);
}
#page-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 270px;
    right: 0;

    overflow-x: hidden;
    overflow-y: auto;

    /* Prevent padding as this causes visual glitches */
    margin: 0 !important;
    padding: 0 !important;
}
body.ios #page-wrap {
    /* momentum scroll on iOS devices */
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
body.desktop #page-wrap {
    /* Allow to see the background through all pages */
    /* This causes visual glitches on FF mobile */
    opacity: 0.97;
}
#content-wrap {
    /* hide the overflow to ensure that #content-wrap indeed wraps its content */
    overflow: hidden;

    /* Prevent padding as this causes visual glitches */
    margin: 0 !important;
    padding: 0 !important;
}

.loading-indicator p {
  background: #333;
  background: rgba(0,0,0,0.55);
  text-align: center;
  color: white;
  padding: 10px;
  margin: 0;
}
.loading-indicator p a {
  text-decoration: underline;
  color: inherit;
}
.loading-indicator p a[disabled] {
  opacity: 0.55;
}

/* background application nav */
#menu-wrap {
  position: absolute;
  width: 270px;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;

  margin: 0;
  padding: 0;

  background: #333;
  background: rgba(0,0,0,0.55);

  overflow-y: auto;
  overflow-x: hidden;
}
#main-menu {
  position: relative;
  height: auto !important;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

#main-menu ul#conversations {
  margin-bottom: 80px; /* logout button + its padding */
}
#main-menu h2 {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  border: none;
  color: white;
  margin: 12px;
  padding: 0;
}
#main-menu a,
#main-menu a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  display: block;
  line-height: 1em;
}
#main-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#main-menu ul ~ ul {
  margin-top: 0;
  margin-bottom: 0;
}
#main-menu ul li {
  color: white;
  font-size: 15px;
}
#main-menu ul li a {
  padding: 12px;
}
#main-menu ul#conversations li a:first-child {
  max-width: 95%;
}
#main-menu ul#conversations li a.new-messages {
  color: red;
}
#main-menu .btn {
  border: none;
  width: 230px;
  margin: 20px;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
  border-radius: 5px;
  color: white;
  text-shadow: none;
}
#main-menu #signout-btn {
  background: #b33434;
  position: absolute;
  bottom: 0;
}

@media (min-width: 768px) {
  #login-page {
    padding-top: 30px;
  }
}

#pp ul {
  padding: 0;
  margin: 0 0 20px 0;
}
#pp ul li {
  list-style: none;
  margin-top: 15px;
}
#pp .category {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  border: 1px solid #ccc;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  border-bottom-color: #b3b3b3;
  overflow: hidden;
}
#pp .category-title {
  /* same as .btn.btn-next-view */

  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
  background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
  background-image: -o-linear-gradient(top,#fff,#e6e6e6);
  background-image: linear-gradient(to bottom,#fff,#e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  text-shadow: 0 1px 1px rgba(255,255,255,0.75);
  margin-bottom: 0;
  font-size: 14px;
  color: #333;
  font-weight: bold;
  text-align: left;
  padding: 10px;
  line-height: 24px;
  vertical-align: middle;
}
#pp .category-title:active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
}
#pp .category-title:hover {
  color: #333;
  text-decoration: none;
  background-position: 0 -50px;
}

#pp .category-title span {
  max-width: 95%;
}
#pp .category-content div:first-child h4 {
  margin-top: 0;
}
#pp .category.level-2 > .category-title {
    font-size: 1em;
}
#pp .category.level-3 > .category-title {
    font-size: .95em;
}
#pp .category.level-4 > .category-title {
    font-size: .9em;
}

.btn-next-view {
  text-align: left;
  padding: 10px;
  line-height: 24px;
  vertical-align: middle;
}
.btn-next-view i {
  margin: 5px;
  display: inline-block;
}
.btn-next-view .btn-title {
  width: 60%;
}
.btn-next-view .btn-status {
  width: 25%;
}


/*Needed to correct bootstrap bug*/
.input-append.input-block-level,
.input-prepend.input-block-level {
  display: table;
}

.input-append.input-block-level .add-on,
.input-prepend.input-block-level .add-on {
  display: table-cell;
  width: 1%; /* remove this if you want default bootstrap button width */
}

.input-append.input-block-level > input,
.input-prepend.input-block-level > input {
  box-sizing: border-box; /* use bootstrap mixin or include vendor variants */
  min-height: inherit;
  width: 100%;
}

.input-append.input-block-level > input {
  border-right: 0;
}

.input-prepend.input-block-level > input {
  border-left: 0;
}
/*end needed for bootstrap bug*/

.pp .input-append input,
.pp .input-prepend input,
.pp .input-append select,
.pp .input-prepend select,
.pp .input-append .uneditable-input,
.pp .input-prepend .uneditable-input {
    border-radius: 5px 5px 5px 5px;
}
.pp .input-prepend .add-on {
  background: white;
  border: none;
  border-radius: 5px 5px 5px 5px;
  color: #666666;
  padding-top: 7px;
  width: 20px;
}

.input-prepend .add-on {
  background: white;
  border-color: white;
  color: #666666;
  padding-top: 13px;
  width: 20px;
}
.input-prepend {
  width: 100%;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}
.hide-forgot-password {
  display:none;
}
#change-password i {
  padding-right:8px;
}
.credentials input[type="password"],
.credentials input[type="text"],
.credentials .checkbox {
  border: none;
  -moz-box-shadow: none;
  box-shadow: none;
  width: 100%;
  font-size: 15px;
  font-family: 'Asap', sans-serif;
  height: 41px;
}
.credentials .checkbox {
  padding-top: 10px;
  height: 41px;
  background: white;
  border-radius: 5px;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}
.credentials .checkbox input[type="checkbox"] {
  margin-left: -12px;
  margin-right: 12px;
}
.fa-signin {
  font-size: 15px;
  margin-right: 6px;
}
.custom-primary .btn-primary,
.custom-primary .btn-primary:hover {
  padding-left: 10px;
  font-size: 15px;
  width: 100%;
  text-align: left;
  font-family: 'Asap', sans-serif;
  text-shadow: none;
  background: #6ccb6a;
  border: none;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}
.btn-tab{
  font-family: 'Asap', sans-serif;
  width: 100%;
  background: #269333;
  color: #FFFFFF;
  border-color: #269333;
  border-style: solid;
  border-width: 1px;
  text-shadow: none;
}
.btn-tab:hover {
  background: #E6E6E6;
}
.btn-tab-group {
     text-align:left;
     margin-top:20px;
}
.btn-link {
  color: #777;
  text-shadow: none;
  padding-right: 0;
}
.multiple-control-group .control-group:not(:last-child) {
  margin-bottom: 0;
  border-bottom: 1px solid #ccc;
}
.multiple-control-group .control-group:not(:last-child) .input-prepend {
  -webkit-border-radius: 0px 5px 0px 0px;
  border-radius: 0px 5px 0px 0px;
}
.multiple-control-group .control-group:not(:last-child) .add-on {
  -webkit-border-radius: 5px 0px 0px 0px;
  border-radius: 5px 0px 0px 0px;
}
.multiple-control-group .control-group:last-child .input-prepend {
  -webkit-border-radius: 0px 0px 5px 0px;
  border-radius: 0px 0px 5px 0px;
}
.multiple-control-group .control-group:last-child .add-on {
  -webkit-border-radius: 0px 0px 0px 5px;
  border-radius: 0px 0px 0px 5px;
}
/* app css stylesheet */
/* variables */



.row-fluid {
  margin-bottom: 20px;
}
.row-fluid:after {
  /* remove the white strip at the bottom on iOS Safari mobile */
  display: block;
}

.control-group {
  position: relative;
}

.grouped-radios {
  border-radius: 3px;
  overflow: hidden;
}
.grouped-radios input[type="radio"] {
  display: none;
}
.grouped-radios label {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #cccccc;
  color: #333;
  font-size: 15px;
  font-weight: bold;
  line-height: 39px;
  margin: 0;
  padding: 0 20px;
  position: relative;
}
.grouped-radios label:first-of-type {
  border-radius: 3px 3px 0 0;
}
.grouped-radios label:last-of-type {
  border-radius: 0 0 3px 3px;
  border-bottom: none;
}
.grouped-radios input[type="radio"]:checked + label:after {
  content: "\f00c";
  float: right;
  margin-right: 40px;
}

.users-entry {
    border-top: 1px solid #BBB;
    margin-bottom: 0px !important;
    margin-top: 4px !important;
    padding-top: 8px;
    display:table;
}

.users-entry:first-child {
    border-top: none;
    margin-bottom: 0px !important;
    margin-top: 4px !important;
    padding-top: 8px;
    display:table;
}

.edit,
.edit:hover{
    border: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    text-shadow: 0 1px 0 #A0A0A0;
    background: none repeat scroll 0 0 #269333 !important;
    color: #FFFFFF;
    margin-bottom:8px;
}

.datelist-entry {
    margin-bottom:8px !important;
    margin-right:14px !important;
}

.btn-date {
    margin-bottom:9px !important;
}

.btn-loading {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 15px;
}


@keyframes keyboardActivity {
  to {
    visibility: hidden ;
  }
}
@-moz-keyframes keyboardActivity {
  to {
    visibility: hidden ;
  }
}
@-webkit-keyframes keyboardActivity {
  to {
    visibility: hidden ;
  }
}
@-ms-keyframes keyboardActivity {
  to {
    visibility: hidden ;
  }
}
.keyboard-activity {
    font-size:14px;
    -webkit-animation: keyboardActivity 1s steps(5, start) infinite; /* Safari 4+ */
    -moz-animation:    keyboardActivity 1s steps(5, start) infinite; /* Fx 5+ */
    -o-animation:      keyboardActivity 1s steps(5, start) infinite; /* Opera 12+ */
    animation:         keyboardActivity 1s steps(5, start) infinite; /* IE 10+ */
    padding-left: 5px;
}

.MiniDirectory {
    overflow:auto;
    height: 100px;
    list-style-type: none;
    padding-left:10px;
    padding-bottom:10px;
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
    margin: 0px;
}

.fa-2x {
    font-size: 18px;
}
.refresh-desktop {
    font-size:22px;
    margin-top:-8px;
    margin-right:-9px;
}
.refresh-desktop i {
    padding-right:0px !important;
}
.refresh-mobile {
    font-size:22px;
    margin-right:-9px;
    margin-top:-10px;
}
.refresh-mobile i {
    padding-right:0px !important;
}
#tabs-container {
    float: right;
    overflow: hidden;
}
#tabs-container .tab {
    width: 50px;
    float: left;
    margin-left: 5px;
    margin-bottom: 10px;
}
#tabs-container .tab a {
    background: #bbb;
    border-radius: 5px;
    display: block;
    text-align: center;
    border: 1px solid #aaa;
    color: #333;
    text-decoration:none;
}
#tabs-container .tab a:hover {
    text-decoration: none;
    background: #aaa;
}
#tabs-container .tab.active a {
    background: #fff;
}
#tabs-container .tab.active a:hover {
    background: #F1F1F1;
}
#tabs-container .tab a i {
    font-size: 24px;
    padding: 3px !important;
}
.refresh-directory {
    font-size:20px !important;
    position:absolute;
    margin-left:8px;
    margin-top:2px;
}
.selected-context {
    font-size:11px !important;
    margin-left:25px;
    margin-top:14px;
}
.directory-table {
    background:#fff;
    margin-top:10px;
    padding:0;
    border-radius:5px;
}
.directory-header {
    background:#f1f1f1;
    border-bottom:2px solid #ddd;
    border-radius:5px 5px 0 0;
}
.directory-table .directory-row {
    border-bottom: 1px solid #ddd;
    margin: 0;
    padding: 10px 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.directory-table .directory-row:nth-child(even) {
    background:#f7f7f7;
}
.directory-table .directory-row:last-child {
    border-bottom:0;
}
.directory-table .directory-row {
    cursor: pointer;
}
@media (max-width: 767px) {
  .directory-table .directory-row {
    padding: 10px;
  }
}
.directory-table .small-screen .btn {
/*
    width: 55px;
    height: 45px;
    margin-right: 5px;
    margin-top: 10px;
    padding: 8px 14px;
    /**/
    margin-bottom: 2px;
}
.directory-table .small-screen h3 span ~ i {
  float: right;
  color: #888;
}
.directory-table .small-screen .fa.available {
    color: green;
}
.directory-table .small-screen .fa.busy {
    color: red;
}
.user-entry .modal-header h3 {
  margin: 10px 0;
  line-height: 1;
}
.user-entry .properties {
    list-style: none;
    padding: 0;
    margin: 0;
}
.user-entry .large-screen .user-data {
    max-width: 400px;
    font-size: 16px;
    padding: 0;
    margin: 4px 0 0;
}
.user-entry .large-screen .user-data a {
    text-decoration: none;
    color: inherit;
}
.user-entry .large-screen * + .user-data {
    margin-left: 10px;
}
.user-entry .large-screen .user-data > * {
    font-size: inherit;
    margin-left: 0;
    padding-left: 0;
    line-height: 1;
}
.user-entry .large-screen .user-data > *:first-child {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 3px;
}
.user-entry .large-screen .btn {
    font-size: 16px;
    overflow: hidden;
    text-align: center;
}
.user-entry .large-screen .btn ~ .btn {
  margin-left: 5px;
}
.user-entry .small-screen .properties {
    margin-bottom: 10px;
}

.callhistory-table {
  width: 100%;
}
.callhistory-table td {
  padding: 10px;
}

.myspan4 {
    float:left !important;
    width:33% !important;
    margin-left:0px !important;
}
.myspan8 {
    float:left !important;
    width:66% !important;
    margin-left:0px !important;
}
.myspan9 {
    float:left !important;
    width:74% !important;
    margin-left:0px !important;
}
.myspan12 {
    float:left !important;
    width:99% !important;
    margin-left:0px !important;
}
.myspan5 {
    float:left !important;
    width:41% !important;
    margin-left:0px !important;
}
.myspan6 {
    float:left !important;
    width:49% !important;
    margin-left:0px !important;
}
.myspan3 {
    float:left !important;
    width:25% !important;
    margin-left:0px !important;
}
.myspan2 {
    float:left !important;
    width:16% !important;
    margin-left:0px !important;
}
.dialer-cell {
    text-align:right;
}
.dialer-row {
    margin-bottom:3px !important;
}
.dialer-button {
    width:100%;
    max-width:162px;
    font-weight:bold;
    height:50px;
}
.dialer-container {
    width:100%;
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
}
.search-bar{
    margin-bottom:10px;
    vertical-align:top;
    position: relative;
}
.search-bar input{
    width:100%;
    height:40px;
    box-sizing:border-box;
    -moz-box-sizing: border-box;
    padding:10px;
    box-shadow:none;
    border:1px solid #bbb;
    margin-bottom:5px;
}
@media (max-width: 767px) {
  .search-bar input {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}
.search-bar .entries-total{
    text-align:right;
    font-size:13px;
    color: white;
}
.overflow-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.break-word {
    word-wrap:break-word;
}
.bold {
    font-weight: bold;
}
.clear-search {
  width: 30px;
  margin-bottom: 5px;
  font-size: 20px;
  position: absolute;
  top: 5px;
  right: 5px;
  text-align: center;
  color: #999;
  cursor: pointer;
  padding: 5px 0;
  z-index: 10;
}
.clear-search:hover{
  color: #333;
}
.call-number{
  font-size: 14px;
  position: absolute;
  top: 5px;
  right: 35px;
  text-align: center;
  color: black;
  cursor: pointer;
  padding: 5px 0;
  z-index: 10;
  left:10px;
}
.call-number i {
  font-size: 15px;
  padding-left: 8px;
}
.call-container {
    width:100%;
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
}
.visualizer-cell .fa-microphone {
    padding-right:8px;
}
.visualizer-cell .fa-volume-up {
    padding-right:4px;
}
.context-search {
    width:70px !important;
    height: 33px !important;
    padding: 6px 0 !important;
    margin-bottom:0px !important;
}

.fa-status {
    position: relative;
    display: inline-block;
    border-radius: .3em;
    font-weight: bold;
    font-size: 0.8em;
    text-transform: uppercase;
    font-style: normal;

    width: 1.25em;
    height: 1.25em;
    line-height: 1.25em;
    vertical-align: middle;
    text-align: center;
}
.fa-status-directory {
    padding: 0px 4px !important;
}
.fa-status-directory-small {
    padding: 0px 4px !important;
    font-size:17px !important;
}
.fa-status-green {
    background: green;
    color: white;
}
.fa-status-red {
    background: red;
    color: white;
}
.fa-status-purple {
    background: purple;
    color: white;
}
.fa-status-orange {
    background: orange;
    color: white;
}
.btn i.fa {
    width: 1em;
}
.btn.available {
    border-bottom: 3px solid green;
    padding-bottom: 2px;
}
.btn.busy {
    border-bottom: 3px solid red;
    padding-bottom: 2px;
}
.btn.btn-large.busy,
.btn.btn-large.available {
    padding-bottom: 9px;
}

.modal-body ul {
    list-style: none;
    margin: 0px !important;
}
.modal-body ul li {
    line-height: 40px !important;
}
.modal-body ul li i {
    font-size:20px;
    padding-left:10px;
}
.modal-body ul li .btn-primary i {
    padding-left:14px !important;
}
.modal-body .nav-pills li{
    margin-bottom:8px;
}
.modal-body .nav-pills li a {
    font-size:20px;
}
.modal-body .btn-success {
    font-size:20px;
    margin-top:5px;
    margin-bottom:5px;
}
.user-entry-title h1 i {
    font-size:14px;
    display: inline !important;
    padding: 1px 5px !important;
    margin: 0px !important;
}
.modal-body .nav-pills li{
    margin-bottom:8px;
}
.modal-body .nav-pills li a {
    font-size:20px;
}
.modal-body .btn-success {
    font-size:20px;
    margin-top:5px;
    margin-bottom:5px;
}

.user-entry {

}
.user-entry .user-data {
  max-width: 300px;
}

.btn-hangup {
    margin-right:6px;
}
.select-number {
    margin-right:6px;
}
.softkeys .fa-check{
    color:#28903a;
    font-size:22px;
}
.softkeys .fa-times{
    color: red;
    font-size:22px;
}
.missedCalls{
    color:#BA4100;
}
.receivedCalls{
    color:#79BA00;
}
.callhistory-refresh-btn {
    margin: 5px 0;
}
.callhistory-refresh-btn i {
    padding-right:3px;
}
.callhistory-row-name{
    cursor:pointer;
}

.phone-idle {
    transform: rotate(134deg);
    -moz-transform:rotate(134deg);
    -webkit-transform:rotate(134deg);
    -ms-transform:rotate(134deg);
}
.phone-ringing {
    -webkit-animation: ring 1s infinite;
    -moz-animation: ring 1s infinite;
    -o-animation: ring 1s infinite;
    animation: ring 1s infinite;
}

.phone-established {
    position:absolute;
    font-size:16px;
    margin-left:-30px;
    margin-top:-1px;
    transform:rotate(-28deg);
    -moz-transform:rotate(-28deg);
    -webkit-transform:rotate(-28deg);
    -ms-transform:rotate(-28deg);
}
.call-status {
    padding-left:15px;
}
.display-name {
    font-size:18px;
    font-weight:bold;
}

/* Chat window */

#chat-wrap {
}
#chat-window {
}
#chat-messages {
  height: 400px;
  overflow-y: auto;
  padding: 0;
  z-index: 9;
}
#chat-messages > div {
  background-color: white; /* make sure bg is not transparent */
}
#chat-messages .origin-local {
  border-style: solid;
  border-color: #eee;
  border-width: 0 0 1px;
  background-color: #f8f8f8;
}
#chat-messages :not(.origin-local) + .origin-local {
  border-top-width: 1px;
}
#chat-messages .origin-local:last-of-type {
  margin-bottom: -1px; /* hide bottom border top of #chat-input */
}
#chat-messages .origin-local + .origin-local {
  margin-top: -1px; /* hide border bottom of previous */
}
#chat-messages .chat-message {
  padding: 10px;
}
#chat-messages .origin-local + .origin-local .chat-message,
#chat-messages :not(.origin-local) + :not(.origin-local) .chat-message {
  padding-top: 0;
}
#chat-messages .chat-message-header .name {
  font-weight: bold;
}
#chat-messages .chat-message-header .fa-check {
  color: #28903a;
}
#chat-messages .chat-message-header .fa-check.seen:after {
  content: "\f00c";
  position: relative;
  top: 0;
  left: -7px;
  margin-right: -10px;
}
#chat-messages .chat-message-header .fa-times {
  color: red;
}
#chat-messages .chat-message-header .fa-eye {
  color: rgb(83, 190, 220);
}
#chat-messages .chat-message .time {
  font-size: 0.8em;
  color: #999;
}
#chat-messages .chat-message-body {
  position: relative;
  font-size: 16px;
}
#chat-messages .chat-message-body .content {
  word-wrap: break-word;
}
#chat-messages .chat-message-body .seen {
  font-size: 0.8em;
  color: #999;
  display: inline-block;
}
#chat-messages .chat-widget-popup {
  padding: 10px;
}
#chat-messages .chat-widget-popup p {
  margin: 0 0 .5em;
}
#chat-messages .chat-widget-popup ul {
  margin: 0;
}
#chat-messages .chat-widget-popup ul li + li {
  margin-left: 10px;
}
#chat-input {
  padding: 0 50px 0 0;
  position: relative;
  z-index: 10;
  height: 48px;
}
#chat-input textarea {
  width: 100%;
  height: 100%;

  margin: 0;
  border-radius: 0;
  overflow-y: auto;
  background: transparent;
  border: none;
  resize: none;
  outline: none;
  box-shadow: none;
}
#chat-input button {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 40px;
  padding: 0;
  margin: 0;
  font-size: 20px;
}
#chat-input button[disabled] {
  color: #666;
}
@media (max-width: 767px) {
    #chat-window {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border: none;
    }
    #chat-header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }
    #chat-messages {
      position: absolute;
      /* #chat-header.height */
      top: 44px;
      left: 0;
      right: 0;
      /* #chat-input.height */
      bottom: 48px;
      height: auto;
      overflow-x: hidden;
      overflow-y: auto;
    }
    #chat-input {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
}
@media (max-width: 767px) and (max-height: 640px) {
  #chat-messages {
    top: 0;
  }
  #chat-header {
    display: none;
  }
}


#chat-input.with-emoticons {
  padding-right: 80px;
}
#chat-input .emoticon-selector {
  position: absolute;
  right: 40px;
  top: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
}
#chat-input .emoticon-selector .dropdown-toggle {
  font-size: 25px;
  width: 1em;
  height: 1em;
  display: block;
  text-align: center;
  padding: .5em .25em;
  position: relative;
}
#chat-input .emoticon-selector .dropdown-toggle .caret {
  position: absolute;
  right: 1px;
  top: 10px;
}
#chat-input .emoticon-selector .dropdown-menu {
  left: auto;
  right: 0;
  font-size: 25px;
  padding: 0;
}
#chat-input .emoticon-selector .dropdown-menu a,
#chat-input .emoticon-selector .dropdown-menu a:hover {
  text-decoration: none;
}
#chat-input .emoticon-selector .dropdown-menu .nav-tabs {
  padding: 5px 0 0;
  margin-bottom: 0;
  background-color: #f5f5f5;
}
#chat-input .emoticon-selector .dropdown-menu .nav-tabs a {
  padding-left: 7px;
  padding-right: 7px;
}
#chat-input .emoticon-selector .dropdown-menu .nav-tabs li:first-child {
  margin-left: 5px;
}
#chat-input .emoticon-selector .dropdown-menu .tab-content {
  overflow-x: hidden;
  overflow-y: auto;
  width: 350px;
  max-height: 250px;
  padding: 5px 0 0;
}
@media (max-height: 400px) {
  #chat-input .emoticon-selector .dropdown-menu .tab-content {
    max-height: 150px;
  }
}
@media (max-width: 500px) {
  #chat-input .emoticon-selector .dropdown-menu .tab-content {
    width: 250px;
  }
}
#chat-input .emoticon-selector .dropdown-menu .tab-content a {
  float: left;
  display: block;
  margin: .2em;
}

@media (max-width: 1023px) {
  #chat.with-webview #chat-webview {
    display: none;
  }
}
@media (min-width: 1024px) {
  #chat.with-webview {
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
  }
  #chat.with-webview #chat-window {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 400px;
    margin: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  #chat.with-webview #chat-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  #chat.with-webview #chat-messages {
    position: absolute;
    /* #chat-header.height */
    top: 44px;
    left: 0;
    right: 0;
    /* #chat-input.height */
    bottom: 48px;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
  #chat.with-webview #chat-input {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }

  #chat.with-webview #chat-webview {
    position: absolute;
    top: 0;
    left: 401px;
    bottom: 0;
    right: 0;

    outline: 0;
    overflow: hidden;
    background: white;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,0.3);

    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
  }
  #chat.with-webview #chat-webview .close {
    position: absolute;
    top: 0;
    right: 0;
    color: black;
  }
  #chat.with-webview #chat-webview iframe {
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
}
@media (min-width: 1600px) {
  #chat.with-webview #chat-window {
    width: 600px;
  }
  #chat.with-webview #chat-webview {
    left: 601px;
  }
}

/* Fleet manager custom overrides */
body.fm {
    min-height: 0px;
}
body.fm #content-wrap.footer-logo {
    min-height: 0px;
}
body.fm #top-bar .nav li a {
    color: #269333;
}

/* Page positioning overrides (keep at bottom of this file) */
.page {
    margin: 20px auto 0;
    width: 768px;
}
@media (min-width: 1024px) {
    .page {
        width: 960px;
    }
}
@media (max-width: 767px) {
    .page {
        width: auto;
        margin: 20px 20px 0;
    }
    .notpadded {
        margin: 0;
    }
    .notbordered {
        -webkit-appearance: none;
        border-radius: 0 !important;
        border-top: none;
        border-left: none;
        border-right: none;
    }
    .notbordered.notpadded {
        width: 100%;
    }
}

@-webkit-keyframes ring {
    0%  {-webkit-transform: rotate(100deg);}
    5% {-webkit-transform: rotate(105deg);}
    10% {-webkit-transform: rotate(110deg);}
    15% {-webkit-transform: rotate(115deg);}
    20% {-webkit-transform: rotate(120deg);}
    25% {-webkit-transform: rotate(125deg);}
    30% {-webkit-transform: rotate(130deg);}
    35% {-webkit-transform: rotate(135deg);}
    40% {-webkit-transform: rotate(140deg);}
    45% {-webkit-transform: rotate(145deg);}
    50% {-webkit-transform: rotate(150deg);}
    55% {-webkit-transform: rotate(145deg);}
    60% {-webkit-transform: rotate(140deg);}
    65% {-webkit-transform: rotate(135deg);}
    70% {-webkit-transform: rotate(130deg);}
    75% {-webkit-transform: rotate(125deg);}
    80% {-webkit-transform: rotate(120deg);}
    85% {-webkit-transform: rotate(115deg);}
    90% {-webkit-transform: rotate(110deg);}
    95% {-webkit-transform: rotate(105deg);}
    100% {-webkit-transform: rotate(100deg);}
}
@-moz-keyframes ring {
    0%  {transform: rotate(100deg);}
    5% {transform: rotate(105deg);}
    10% {transform: rotate(110deg);}
    15% {transform: rotate(115deg);}
    20% {transform: rotate(120deg);}
    25% {transform: rotate(125deg);}
    30% {transform: rotate(130deg);}
    35% {transform: rotate(135deg);}
    40% {transform: rotate(140deg);}
    45% {transform: rotate(145deg);}
    50% {transform: rotate(150deg);}
    55% {transform: rotate(145deg);}
    60% {transform: rotate(140deg);}
    65% {transform: rotate(135deg);}
    70% {transform: rotate(130deg);}
    75% {transform: rotate(125deg);}
    80% {transform: rotate(120deg);}
    85% {transform: rotate(115deg);}
    90% {transform: rotate(110deg);}
    95% {transform: rotate(105deg);}
    100% {transform: rotate(100deg);}
}
@-o-keyframes ring {
    0%  {transform: rotate(100deg);}
    5% {transform: rotate(105deg);}
    10% {transform: rotate(110deg);}
    15% {transform: rotate(115deg);}
    20% {transform: rotate(120deg);}
    25% {transform: rotate(125deg);}
    30% {transform: rotate(130deg);}
    35% {transform: rotate(135deg);}
    40% {transform: rotate(140deg);}
    45% {transform: rotate(145deg);}
    50% {transform: rotate(150deg);}
    55% {transform: rotate(145deg);}
    60% {transform: rotate(140deg);}
    65% {transform: rotate(135deg);}
    70% {transform: rotate(130deg);}
    75% {transform: rotate(125deg);}
    80% {transform: rotate(120deg);}
    85% {transform: rotate(115deg);}
    90% {transform: rotate(110deg);}
    95% {transform: rotate(105deg);}
    100% {transform: rotate(100deg);}
}
@keyframes ring {
    0%  {transform: rotate(100deg);}
    5% {transform: rotate(105deg);}
    10% {transform: rotate(110deg);}
    15% {transform: rotate(115deg);}
    20% {transform: rotate(120deg);}
    25% {transform: rotate(125deg);}
    30% {transform: rotate(130deg);}
    35% {transform: rotate(135deg);}
    40% {transform: rotate(140deg);}
    45% {transform: rotate(145deg);}
    50% {transform: rotate(150deg);}
    55% {transform: rotate(145deg);}
    60% {transform: rotate(140deg);}
    65% {transform: rotate(135deg);}
    70% {transform: rotate(130deg);}
    75% {transform: rotate(125deg);}
    80% {transform: rotate(120deg);}
    85% {transform: rotate(115deg);}
    90% {transform: rotate(110deg);}
    95% {transform: rotate(105deg);}
    100% {transform: rotate(100deg);}
}
.context-button {
    left:270px;
    bottom:0px;
    position:absolute;
    z-index:10;
}
.context-button-chat-mobile {
    bottom:80px;
}
.context-button i[class*=fa-square]{
    opacity:0.7;
}

#about h2.logo .version {
}
#about h2.logo .version::before {
  font-size: 0.8em;
  content: ' v';
}
.bloc-item.btn.btn-large.statusDisabled {
	cursor: not-allowed;
    opacity: 0.5;
}
.bloc-item.btn.btn-large.statusDisabled:hover,
.bloc-item.btn.btn-large.statusDisabled:focus,
.bloc-item.btn.btn-large.statusDisabled:active {
    color: initial !important;
    border-color: initial !important;
	background-color: initial !important;
}
.enumstring > .btn.btn-small {
  z-index: 2;
  position: absolute;
  top: 2px;
  right: 4px;
  height: 25px;
  padding: 2px 5px;
}
.enumstring > .btn.btn-small .fa {
  color: #000;
  font-size: 13px;
}
.enumstring > .dropdown-menu {
  width: 100%;
  width: calc(100% - 2px);
}