html,body{
    height: 100%
}

.mx-30px {
  margin-left: 30px!important;
  margin-right: 30px!important;
}

li #noti-menu {
  width: 220px;
}

li #noti-menu #notifications-scroll>li>img {
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
}

.chat-content_input-message-container div.new-chat-dialog-button {
  width: 250px;
  display: none;
}

.custom-client-container {
  margin-left: 15px;
  margin-right: 15px;
}

.custom-client-container .navbar-brand {
  padding: 9px 15px;
}

/* -- ticket comments -- */
#ticket_comments_wrapper {
  margin-bottom: 25px;
}
#ticket_comments_wrapper .chat_users ul {
  margin: 0;
  padding: 0;
  list-style: none;
  padding: 0 0 10px;
}
#ticket_comments_wrapper .chat_users ul li {
  padding: 2px 0;
  overflow: hidden;
}
#ticket_comments_wrapper .chat_users ul li a {
  display: block;
  color: #222222;
  overflow: hidden;
  padding: 4px;
}
#ticket_comments_wrapper .chat_users ul li a > img {
  display: inline-block;
  border-radius: 50%;
  margin-right: 10px;
  float: left;
}
#ticket_comments_wrapper .chat_users ul li + li {
  border-top: 1px solid #eee;
}
#ticket_comments_wrapper .chat_users ul li.online,
#ticket_comments_wrapper .chat_users ul li.offline {
  position: relative;
}
#ticket_comments_wrapper .chat_users ul li.online:before,
#ticket_comments_wrapper .chat_users ul li.offline:before,
#ticket_comments_wrapper .chat_users ul li.online:after,
#ticket_comments_wrapper .chat_users ul li.offline:after {
  position: absolute;
  content: '';
}
#ticket_comments_wrapper .chat_users ul li.online:after,
#ticket_comments_wrapper .chat_users ul li.offline:after {
  left: 3px;
  top: 8px;
  height: 8px;
  width: 8px;
  border-radius: 4px;
}
#ticket_comments_wrapper .chat_users ul li.online:before,
#ticket_comments_wrapper .chat_users ul li.offline:before {
  left: 1px;
  top: 6px;
  height: 12px;
  width: 12px;
  border-radius: 6px;
}
#ticket_comments_wrapper .chat_users ul li.online:after {
  background: #8cc152;
}
#ticket_comments_wrapper .chat_users ul li.online:before {
  background: #fff;
}
#ticket_comments_wrapper .chat_users ul li.offline:after {
  background: #da4453;
}
#ticket_comments_wrapper .chat_users ul li.offline:before {
  background: #fff;
}
#ticket_comments_wrapper .chat_messages {
  overflow-x: hidden;
  overflow-y: auto;
}
#ticket_comments_wrapper .chat_messages .message_date {
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-bottom: 10px;
}
#ticket_comments_wrapper .chat_messages ul {
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}
#ticket_comments_wrapper .chat_messages ul li {
  list-style: none;
  clear: both;
}
#ticket_comments_wrapper .chat_messages ul li + li {
  margin-top: 8px;
}
#ticket_comments_wrapper .chat_messages ul .msg_user {
  font-size: 10px;
  font-weight: 700;
  margin: 0 0 4px;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}
#ticket_comments_wrapper .chat_messages ul .msg_left,
#ticket_comments_wrapper .chat_messages ul .msg_right {
  max-width: 80%;
  padding: 10px;
  border-radius: 4px;
}
#ticket_comments_wrapper .chat_messages ul .msg_left {
  background: #edf3db;
  float: left;
}
#ticket_comments_wrapper .chat_messages ul .msg_right {
  background: #deecf5;
  float: right;
}
#ticket_comments_wrapper .chat_messages ul + .message_date {
  margin-top: 30px;
}
#ticket_comments_wrapper .chat_message_send {
  margin-top: 40px;
  position: relative;
}
#ticket_comments_wrapper .chat_message_send textarea {
  resize: none;
  height: 74px;
  margin-bottom: 10px;
  overflow-y: scroll;
  padding-right: 90px;
}
#ticket_comments_wrapper .chat_message_send .btn {
  position: absolute;
  top: 10px;
  right: 26px;
}


.custom-client-container {
  margin-left: 15px;
  margin-right: 15px;
}

.custom-client-container .navbar-brand {
  padding: 9px 15px;
}

#content { min-height: 83vh;}
.media-title { margin-top: 0px; }

.logo-area { float: left; font-size: 22px; color: #FFF; letter-spacing: 3px; text-transform: uppercase;}
.logo-area a { color: #FFF; }
.header-navigation { float: right; }
.header { margin-top: 20px; }
.header-bg { background: #3c9adc; }
.header-area { line-height: 80px; }
.header-navigation ul { list-style: none; }
.header-navigation a { color: #FFF; }
.header-navigation ul li { float: left; margin-left: 20px; margin-right: 20px; color: #FFF; text-transform: uppercase;  }
.user-bar-segment { position: relative; float: right; padding: 10px; color: #FFF; font-size: 12px; }
.icon-size { margin-top: 2px }
.top-bar { border-bottom: 1px dashed #3588c2; color: #FFF; }
.top-bar a { color: #FFF; }
.user-icon { border-radius: 8px; width: 15px; height: 15px; font-size: 11px;}
.user-icon-margin { margin-right: 10px; margin-bottom: 4px;}
.content-margin { margin-top: 20px; }
.align-center{ text-align: center; }
.cat-links { font-size: 12px; }
.small-text { font-size: 11px; }
.alert a { color: inherit !important; }
.yellow-bg { background: #fdffe2 !important; }

/*user box*/
.user-box-avatar { position: relative; font-size: 11px; display: inline-block;}
.user-box-avatar img { display: inline-block; width: 30px; height: 30px; border-radius: 20px; margin-right: 5px; }
.online-dot-user { background: #26E612; width: 8px; height: 8px; border-radius: 4px; border: 1px solid #FFF; position: absolute; bottom: 0px; left: 0px;}
.offline-dot-user { background: #f40d0d; width: 8px; height: 8px; border-radius: 4px; border: 1px solid #FFF; position: absolute; bottom: 0px; left: 0px;}
.user-box-username {  float: left; margin-left: 6px; font-size: 11px;}

.ticket-border-left { border-left: 1px solid #DDD; }
.ticket-reply-options { float: right; }

.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

.container .text-muted {
  margin: 20px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

.home-label { border-bottom: 1px solid #f1f1f1; text-align: left; padding: 5px; color: #343a3d; margin: 0px; background: #f8f8f8; margin-bottom: 10px; border-radius: 4px; font-weight: 550; }

.notification-badge { font-size: 8px !important; position: absolute; top: 6px; right: 4px;}
.badge { background: #FC2232 !important; padding: 1px 4px; }

#noti-menu { right: 0px; left: auto; color: #000; }
#notifications-scroll { overflow: scroll; height: 150px; padding-left: 5px; }
#noti-menu #notifications-scroll { overflow: auto; }

.panel-admin { border-color: #38b029; }
.notification-box-title { border-bottom: 1px solid #EEE; font-size: 14px; margin-bottom: 10px; font-weight: 600; padding: 10px; }
.notification-box-footer { border-top: 1px solid #EEE; font-size: 14px; font-weight: 500; padding: 10px; text-align: center; color: #000 !important; }
.notification-box-footer a { color: #2d89f0 !important; }
#notifications-box { position: absolute; width: 270px; top: 45px; right: 50px; background: #FFF; border: 1px solid #DDD; border-radius: 4px; min-height: 100px; z-index: 2000; display: none; }
#notifications-box a:hover { background-color: #FFF !important; }
.notification-box-bit { position: relative; width: 268px; padding: 10px;  }
.notification-box-bit:hover { background: #E1ECF3; }
.notification-icon-bit { float: left; margin-right: 5px; width: 33px;}
.notification-text-bit { float: left; width: 208px; vertical-align: top;}
.notification-text-bit a { color: #0B82F9 !important; }
.notification-text-bit a:hover { color: #0B82F9 !important; }
.notification-datestamp { padding: 0px; margin: 0px; color: #B0B0B0; }
.active-noti { border-right: 2px solid #F32838; }

.category-page { display: inline-block; width: 31%; border: 1px solid #DDD; border-radius: 4px; text-align: center; min-height: 260px; padding: 10px; margin: 10px; vertical-align: top; }
.category-page:hover {background: #f1f1f1;}
.category-title { margin-top: 10px; }
.circle-buttons { border: 1px solid #5d99e9; width: 30px; height: 30px; border-radius: 15px; padding: 5px; display: inline-block; color: #5d99e9;}
.article-padding {  }

.ticket-rating {  }
.click { cursor: pointer; }

.planarea { border-radius: 4px; padding: 10px; font-size: 13px; background: #68aa9b; color: #FFFFFF; min-height: 280px;}
.plan-title { margin: 0px; margin-bottom: 10px; padding: 0px; font-size: 24px; text-transform: uppercase; text-align: center;}
.plan-days { font-size: 18px; text-align: center; }
.plan-cost { font-size: 18px; text-align: center; }
.plan-title { font-size: 24px; }

@media (max-width: 420px) {
  .logo-area { position: relative; float: none; text-align: center; }
  .header-navigation { position: relative; float: none; text-align: center; margin: 0px !important; padding: 0px !important;}
  .header-navigation ul { position: relative; float: none; text-align: center; margin: 0px !important; padding: 0px !important;}
  .header-area { padding: 0px; }
  #noti-menu { right: -100px; left: auto; color: #000; }
}