@media (min-width: 768px) {
  .navigation-clean {
    background:#fff;
    padding-top:.75rem;
    padding-bottom:.75rem;
    color:#333;
    border-radius:0;
    box-shadow:1px 2px #dedede;
    border:none;
    margin-bottom:0;
    font-size:13px;
  }
}

@media (min-width:768px) {
  .navigation-clean {
    padding-top:1rem;
    padding-bottom:1rem;
  }
}

.navigation-clean .navbar-brand {
  font-weight:bold;
  color:inherit;
}

.navigation-clean .navbar-brand:hover {
  color:#222;
}

.navigation-clean .navbar-toggler {
  border-color:#ddd;
}

.navigation-clean .navbar-toggler:hover, .navigation-clean .navbar-toggler:focus {
  background:none;
}

.navigation-clean .navbar-toggler {
  color:#888;
}

@media (min-width: 768px) {
  .navigation-clean .navbar-collapse, .navigation-clean .form-inline {
    border-top-color:#ddd;
    padding-right:100px;
  }
}

@media (min-width: 992px) {
  .navigation-clean .navbar-collapse, .navigation-clean .form-inline {
    border-top-color:#ddd;
    padding-right:100px;
  }
}

@media (min-width: 1200px) {
  .navigation-clean .navbar-collapse, .navigation-clean .form-inline {
    border-top-color:#ddd;
    padding-right:100px;
  }
}

.navigation-clean.navbar-light .navbar-nav .nav-link.active, .navigation-clean.navbar-light .navbar-nav .nav-link.active:focus, .navigation-clean.navbar-light .navbar-nav .nav-link.active:hover {
  color:#8f8f8f;
  box-shadow:none;
  background:none;
  pointer-events:none;
}

.navigation-clean.navbar .navbar-nav .nav-link {
  padding-left:18px;
  padding-right:18px;
}

.navigation-clean.navbar-light .navbar-nav .nav-link {
  color:#465765;
}

.navigation-clean.navbar-light .navbar-nav .nav-link:focus, .navigation-clean.navbar-light .navbar-nav .nav-link:hover {
  color:#ffae00 !important;
  background-color:transparent;
}

.navigation-clean .navbar-nav > li > .dropdown-menu {
  margin-top:-5px;
  box-shadow:none;
  background-color:#fff;
  border-radius:2px;
}

.navigation-clean .dropdown-menu .dropdown-item:focus, .navigation-clean .dropdown-menu .dropdown-item {
  line-height:2;
  color:#37434d;
}

.navigation-clean .dropdown-menu .dropdown-item:focus, .navigation-clean .dropdown-menu .dropdown-item:hover {
  background-color:#ffae00;
  color:#ffffffff;
}

.container {
  height:100%;
  width:100%;
  padding-right:0px;
  padding-left:0px;
  margin:0;
  position:relative;
}

.sidebar {
  padding-top:20px;
  padding-bottom:20px;
  color:#ffffff;
}

@media (min-width: 1200px) {
  .side-menu {
    height:100%;
    padding-top:20px;
    padding-bottom:20px;
  }
}

.row {
  height:100%;
  width:100%;
  margin-left:0px;
  margin-right:0px;
}

@media (max-width: 1299px) and (min-width: 1200px) {
  .main-wrapper {
    position: relative;
    z-index:9;
    height:auto;
    width:95%;
  }
}

@media (max-width: 1920px) and (min-width: 1600px){
  .main-wrapper {
    position:relative;
    z-index:9;
    height:auto;
    width:95%;
  }
}

@media (max-width: 1500px) and (min-width: 1400px) {
  .main-wrapper {
    position:relative;
    z-index:9;
    height:auto;
    width:95%;
  }
}

@media (max-width: 1399px) and (min-width: 1300px) {
  .main-wrapper {
    position:relative;
    z-index:9;
    height:auto;
    width:95%;
  }
}

@media (max-width: 1199px) and (min-width: 1000px) {
  .main-wrapper {
    position:relative;
    z-index:9;
    height:auto;
    width:95%;
  }
}

@media (max-width: 999px) and (min-width: 600px) {
  .main-wrapper {
    position:relative;
    z-index:9;
    height:auto;
    width:100%;
  }
}

@media (max-width: 599px) and (min-width: 100px) {
  .main-wrapper {
    position:relative;
    z-index:9;
    height:auto;
    width:100%;
  }
}


.message-filter {
  width:100%;
}

.col-md-3.col-xl-3 {
  border:1px solid #d6d6d6ff;
  padding-right:0px;
  padding-left:0px;
}

@media (max-width: 1260px) and (min-width: 800px) {
  .message-list {
    height:100%;
    width:100%;
  }
}

@media (min-width: 768px) {
  .message-list {
    height:100%;
    width:100%;
  }
}

@media (max-width: 576px) and (min-width: 300px) {
  .filter-box {
    height:10%;
    width:100%;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
    padding:20px 20px;
  }
}

@media (max-width: 999px) and (min-width: 577px) {
  .filter-box {
    height:10%;
    width:100%;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
    padding:20px 20px;
  }
}

@media (max-width: 1152px) and (min-width: 1000px) {
  .filter-box {
    height:10%;
    width:100%;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
    padding:20px 30px;
  }
}

@media (max-width: 1300px) and (min-width: 1200px) {
  .filter-box {
    height:10%;
    width:100%;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
    padding:25px 30px;
  }
}

@media (max-width: 1399px) and (min-width: 1301px) {
  .filter-box {
    height:13%;
    width:100%;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
    padding:25px 30px;
  }
}

@media (max-width: 1500px) and (min-width: 1400px) {
  .filter-box {
    height:10%;
    width:100%;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
    padding:30px 30px;
  }
}

@media (min-width: 576px) {
  .search-box {
    background-color:#f1f1f1;
    border:0px;
    width:80%;
    text-align:center;
    padding-bottom:5px;
    padding-top:5px;
    border-radius:50px 50px;
  }
}

@media (max-width: 800px) and (min-width: 600px) {
  .search-box {
    background-color:#f1f1f1;
    border:0px;
    width:70%;
    text-align:center;
    padding-bottom:5px;
    padding-top:5px;
    border-radius:50px 50px;
  }
}

@media (min-width: 992px) {
  .search-box {
    background-color:#f1f1f1;
    border:0px;
    width:80%;
    text-align:center;
    padding-bottom:5px;
    padding-top:5px;
    border-radius:50px 50px;
  }
}

@media (min-width: 1200px) {
  .search-box {
    background-color:#f1f1f1;
    border:0px;
    width:80%;
    text-align:center;
    padding-bottom:5px;
    padding-top:5px;
    border-radius:50px 50px;
  }
}

input:focus {
  outline-width:0;
}

.chatbox {
  flex-grow:1;
  position:relative;
  width:100%;
  height:100%;
  border:1px solid #d6d6d6ff;
  background-color:#f2f3f7;
}

@media (min-width: 768px) {
  .container {
    max-width:100%;
  }
}

@media (max-width: 766px) and (min-width: 540px) {
  .details-header {
    height:10%;
    line-height:56px;
    width:100%;
    padding:20px 10px;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
  }
}

@media (max-width: 992px) and (min-width: 768px) {
  .details-header {
    height:10%;
    line-height:56px;
    width:100%;
    padding:15px 10px;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
  }
}

@media (max-width: 1152px) and (min-width: 1000px) {
  .details-header {
    height:7%;
    line-height:56px;
    width:100%;
    padding:15px 20px;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
  }
}

@media (max-width: 1300px) and (min-width: 1153px) {
  .details-header {
    height:10%;
    line-height:56px;
    width:100%;
    padding:20px 10px;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
  }
}

@media (max-width: 1399px) and (min-width: 1301px) {
  .details-header {
    height:13%;
    line-height:56px;
    width:100%;
    padding:20px 10px;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
  }
}

@media (max-width: 1500px) and (min-width: 1400px) {
  .details-header {
    height:10%;
    line-height:56px;
    width:100%;
    padding:20px 10px;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
  }
}

@media (max-width: 766px) and (min-width: 540px) {
  .chatbox-header {
    height:10%;
    width:100%;
    padding:20px 20px;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
  }
}

@media (max-width: 992px) and (min-width: 768px) {
  .chatbox-header {
    height:10%;
    width:100%;
    padding:20px 5px;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
  }
}

@media (max-width: 1152px) and (min-width: 1000px) {
  .chatbox-header {
    height:7%;
    width:100%;
    padding:10px 10px;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
  }
}

@media (max-width: 1300px) and (min-width: 1200px) {
  .chatbox-header {
    height:10%;
    width:100%;
    padding:20px 20px;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
  }
}

@media (max-width: 1399px) and (min-width: 1301px) {
  .chatbox-header {
    height:13%;
    width:100%;
    padding:20px 20px;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
  }
}

@media (max-width: 1500px) and (min-width: 1400px) {
  .chatbox-header {
    height:10%;
    width:100%;
    padding:20px 20px;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:#dcdcdcff;
  }
}

.contact-wrapper {
  width:100%;
  flex-grow:1;
  box-sizing:border-box;
}

@media (max-width: 1280px) and (min-width: 1024px) {
  .contact-wrapper {
    height: 90%;
    overflow-y: scroll;
    width:100%;
    flex-grow:1;
    box-sizing:border-box;
  }
}


@media (max-width: 900px) and (min-width: 768px) {
  .contact-wrapper {
    height: 90%;
    overflow-y: scroll;
    width:100%;
    flex-grow:1;
    box-sizing:border-box;
  }
}

.contact-container {
  height:100%;
}

.loading-box {
  height:100%;
}

ul {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  display:block;
  font:inherit;
}

.recent-list {
  padding-top:0;
}

.recent-list-item {
  height:92px;
  display:flex;
  flex-flow:row nowrap;
  justify-content:flex-start;
  align-items:center;
  position:relative;
  cursor:pointer;
  box-sizing:border-box;
  border-bottom:.5px solid #ebebeb;
}

.mark-color-line {
  flex-shrink:0;
  width:5px;
  height:100%;
  background-color:transparent;
}

.portrait-container {
  height:48px;
  width:48px;
  margin-top:-5px;
  text-align:center;
  position:relative;
  margin:0 12px;
  flex-shrink:0;
}

.letter {
  line-height:48px;
}

.contact-name {
  line-height:20px;
  margin-bottom:4px;
  padding-right:70px;
  position:relative;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.name {
  font-size:16px;
  color:#333;
  font-weight:700;
}

.contact-time {
  color:#999;
  font-size:12px;
  position:absolute;
  right:0;
  top:0;
  margin:0;
  padding:0;
  border:0;
}

.company-name {
  font-size:11px !important;
  color:#333;
  margin-bottom:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  height:15px;
  font-weight:400;
}

@media (min-width: 1200px) {
  .company-name {
    font-size:11px !important;
    color:#333;
    margin-bottom:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    height:15px;
    font-weight:400;
  }
}

@media (min-width: 1200px) {
  .contact-info {
    position:relative;
    flex-grow:1;
    min-width:0;
  }
}

@media (min-width: 1200px) {
  .contact-info-wrapper {
    height:100%;
    display:flex;
    align-items:center;
    flex:1;
    overflow:hidden;
    box-sizing:border-box;
    padding-right:12px;
  }
}

.col-6.actions {
  display:flex;
  align-items:center;
  color:#a2a2a2ff;
}

@media (min-width: 768px) {
  .icon-wrapper {
    position:relative;
    cursor:pointer;
    width:40px;
    height:20px;
    justify-content:center;
    margin-left:2px;
    border-radius:4px;
    font-size:20px;
    color:#9a9a9aff;
  }
}

@media (min-width: 1000px) {
  .icon-wrapper {
    position:relative;
    cursor:pointer;
    width:40px;
    height:20px;
    justify-content:center;
    margin-left:12px;
    border-radius:4px;
    font-size:30px;
    color:#9a9a9aff;
  }
}

@media (max-width: 1460px) and (min-width: 1300px) {
  .chatbox-body {
    height:95%;
    width:100%;
    padding:20px 40px;
    border-bottom:1px solid #dcdcdcff;
  }
}

@media (min-width: 1200px) {
  .chatbox-body {
    height:70%;
    width:100%;
    padding:20px 20px;
    border-bottom:1px solid #dcdcdcff;
  }
}

@media (min-width: 992px) {
  .chatbox-body {
    height:70%;
    width:100%;
    padding:20px 20px;
    border-bottom:1px solid #dcdcdcff;
  }
}

@media (min-width: 768px) {
  .chatbox-body {
    height:70%;
    width:100%;
    padding:20px 20px;
    border-bottom:1px solid #dcdcdcff;
  }
}

.chatbox-box {
  position:relative;
  background-color:#f9f9f9;
  flex-shrink:0;
}

.text-area-message {
  position:relative;
  width:100%;
  min-width:372px;
  min-height:100px;
  max-height:502px;
  overflow:hidden;
  padding:10px;
}

.chatbox-textarea {
  position:absolute;
  top:10px;
  left:0;
  height:calc(100% - 10px);
  width:100%;
  resize:none;
  outline:none;
  border:none;
  padding:0 10px;
  box-sizing:border-box;
  background-color:#f9f9f9;
  caret-color:#ffae00;
  font:500 13.33px Arial;
}

@media (min-width: 992px) {
  .chatbox-textarea {
    position:absolute;
    top:10px;
    left:0;
    height:calc(100% - 10px);
    width:100%;
    resize:none;
    outline:none;
    border:none;
    padding:0 10px;
    box-sizing:border-box;
    background-color:#f9f9f9;
    caret-color:#ffae00;
    font:500 13.33px Arial;
  }
}

@media (min-width: 1200px) {
  .chatbox-textarea {
    position:absolute;
    top:10px;
    left:0;
    height:calc(100% - 10px);
    width:100%;
    resize:none;
    outline:none;
    border:none;
    padding:0 10px;
    box-sizing:border-box;
    background-color:#f9f9f9;
    caret-color:#ffae00;
    font:500 13.33px Arial;
  }
}

.send-toolbar {
  position:absolute;
  bottom:0;
  width:100%;
  height:40%;
  background-color:#f9f9f9;
}

.send-tool-icon {
  position:relative;
  display:inline-block;
  width:30px;
  height:30px;
  line-height:31px;
  text-align:center;
  color:#999;
  cursor:pointer;
  border-radius:5px;
  margin-left:10px;
  vertical-align:middle;
  font-size:30px;
}

.btn-send {
  color:#fff;
  background-color:#0134ff;
  float:right;
  min-width:76px;
  height:28px;
  margin:0 20px 0 0;
  padding:0 80px;
  font-size:14px;
  line-height:26px;
  border-width:1px;
  border-style:solid;
  border-color:transparent;
}

.btn-send:disabled{
  background-color:#ffffff;
  color:rgb(146, 146, 146);
}

.dropdown-item.active, .dropdown-item:active {
  background-color:#ffae00 !important;
}

a:hover {
  background-color:rgba(255,174,0,0);
}

.button-container {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background-color:linear-gradient(180deg,hsla(0,0%,100%,0),#f9f9f9);
  padding:9px 12px;
  box-sizing:border-box;
}


@media (min-width: 768px) {
  .actions {
    display:flex;
  }
}

ul.nav li.dropdown:hover > ul.dropdown-men {
  display:block;
}

.navbar-expand-md .navbar-nav .dropdown-menu {
  padding-bottom:10px;
}

@media (max-width: 1920px) and (min-width: 1600px){
  .col-xl-4 {
    padding-left:0px;
    padding-right:0px;
    max-width:45% !important;
  }
}

@media (max-width: 1500px) and (min-width: 1201px) {
  .col-xl-4 {
    padding-left:0;
    padding-right:0;
    max-width:48% !important;
  }
}

@media (max-width: 1200px) and (min-width: 1025px) {
  .col-xl-4 {
    padding-left:0px;
    padding-right:0px;
    max-width:49% !important;
  }
}

@media (max-width: 1024px) and (min-width: 992px) {
  .col-xl-4 {
    padding-left:0px;
    padding-right:0px;
    max-width:50.3% !important;
  }
}

@media (max-width: 991px) and (min-width: 769px) {
  .col-xl-4 {
    padding-left:0px;
    padding-right:0px;
    max-width:40.5% !important;
  }
}

@media (max-width: 768px) and (min-width: 568px) {
  .col-xl-4 {
    padding-left:0px;
    padding-right:0px;
    max-width:40.5% !important;
  }
}

.close {
  margin:0 24px;
  cursor:pointer;
  position:relative;
  display:inline-block;
  font-style:normal;
  font-weight:100;
  font-size:30px;
  font-variant:normal;
  line-height:56px;
}

@media (min-width: 768px) {
  .close {
    margin:0 28px;
    cursor:pointer;
    position:relative;
    display:inline-block;
    font-style:normal;
    font-weight:100;
    font-size:18px;
    font-variant:normal;
    line-height:28px;
  }
}

@media (max-width: 1280px) and (min-width: 1024px) {
  .close {
    margin:0 28px;
    cursor:pointer;
    position:relative;
    display:inline-block;
    font-style:normal;
    font-weight:100;
    font-size:35px;
    font-variant:normal;
    line-height:55px;
  }
}

@media (max-width: 1500px) and (min-width: 1280px) {
  .close {
    margin:0 28px;
    cursor:pointer;
    position:relative;
    display:inline-block;
    font-style:normal;
    font-weight:100;
    font-size:35px;
    font-variant:normal;
    line-height:55px;
  }
}

.details-body {
  position:absolute;
  top:90px;
  bottom:0;
  left:0;
  right:0;
  overflow-y:auto;
}

.conversation-info {
  height:100%;
}

.customer-wrapper {
  background-color:#fff;
  padding:12px;
  position:relative;
  border-bottom:15px solid #ebebeb;
}

.customer-info {
  padding-left:48px;
}

.contact-avatar {
  width:48px;
  height:48px;
  background-color:#ccc;
  border-radius:50%;
  color:#fff;
  float:left;
  font-size:18px;
  font-style:normal;
  line-height:40px;
  margin-left:-48px;
  text-align:center;
  overflow:hidden;
}

@media (min-width: 992px) {
  .contact-avatar {
    width:40px;
    height:48px;
    background-color:#ccc;
    border-radius:50%;
    color:#fff;
    float:left;
    font-size:18px;
    font-style:normal;
    line-height:40px;
    margin-left:-48px;
    text-align:center;
    overflow:hidden;
  }
}

@media (max-width: 1280px) and (min-width: 1024px) {
  .contact-avatar {
    width:45px;
    height:48px;
    background-color:#ccc;
    border-radius:50%;
    color:#fff;
    float:left;
    font-size:18px;
    font-style:normal;
    line-height:40px;
    margin-left:-48px;
    text-align:center;
    overflow:hidden;
  }
}

.customer-name {
  font-size:16px;
  padding-left:8px;
  color:#333;
}

@media (max-width: 1280px) and (min-width: 1024px) {
  .customer-name {
    font-size:20px;
    padding-left:3px;
    color:#333;
  }
}

@media (min-width: 992px) {
  .customer-name {
    font-size:12px;
    padding-left:1px;
    color:#333;
  }
}

.link-name {
  font-size:16px;
  margin:0;
  height:24px;
  padding:0;
  line-height:24px;
  border-width:0;
  box-shadow:none;
  color:#333;
}

@media (min-width: 768px) {
  .customer-name .link-name {
    font-size:11px;
    margin:0;
    height:24px;
    padding:0;
    line-height:24px;
    border-width:0;
    box-shadow:none;
    color:#333;
  }
}

@media (max-width: 1280px) and (min-width: 1024px) {
  .customer-name .link-name {
    font-size:20px;
    margin:0;
    height:24px;
    padding:0;
    line-height:24px;
    border-width:0;
    box-shadow:none;
    color:#333;
  }
}

@media (min-width: 992px) {
  .link-name {
    font-size:13px;
    margin:0;
    height:24px;
    padding:0;
    line-height:24px;
    border-width:0;
    box-shadow:none;
    color:#333;
  }
}

.customer-wrapper .company-info .company-name-secondary {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  word-break:break-all;
  max-height:50px;
  width:210px;
}

.link-name.secondary {
  line-height:75px;
  color:#2192d9;
}

a.link-name, a.link-name:focus {
  color:#333;
  font-weight:600;
}

.company-capacity {
  margin-top:4px;
}

.company-capacity-item {
  margin:0 4px 0 0;
}

.icon-link {
  font-size:12px;
  border-radius:16px;
}

a.icon-link, a.icon-link:hover, a.icon-link:focus {
  color:#333;
  text-decoration:none;
}

.icon-info {
  display:inline-block;
  font-weight:700;
  margin-left:2px;
  vertical-align:top;
  line-height:1;
}

.fa.fa-star.icon-svg {
  vertical-align:top;
  color:#ffae00;
}

.icon-value {
  display:inline-block;
}

.icon-unit {
  display:inline-block;
  position:relative;
  transform:scale(.7);
  transform-origin:left top;
}

.icon-country {
  width:16px;
  height:16px;
  display:inline-block;
  vertical-align:top;
  text-align:left;
  overflow:hidden;
  font-size:12px;
  line-height:1;
}

.country-code {
  font-size:12px;
  vertical-align:top;
  line-height:1;
}

.icon-trade {
  display:inline-block;
  vertical-align:top;
  font-size:12px;
  color:#ffae00;
}

.customer-action {
  position:absolute;
  right:14px;
  top:14px;
  bottom:0;
}

@media (min-width: 992px) {
  .customer-action {
    position:absolute;
    right:16px;
    top:14px;
    bottom:0;
  }
}

@media (min-width: 992px) {
  .customer-action {
    position:absolute;
    right:16px;
    top:14px;
    bottom:0;
  }
}

@media (min-width: 768px) {
  .customer-action {
    position:absolute;
    right:5px;
    top:14px;
    bottom:0;
  }
}

.btn.btn-primary:not(:disabled):not(.disabled) {
  color:#fff;
  background-color:#1047f5;
  border-color:transparent;
  border-style:double;
}

@media (min-width: 768px) {
  .btn-medium {
    margin:0;
    height:28px;
    padding:0 4px;
    font-size:10px;
    line-height:26px;
    border-width:1px;
  }
}

@media (min-width: 1024px) {
  .btn-medium {
    margin:0;
    height:28px;
    padding:0 30px;
    font-size:14px;
    line-height:26px;
    border-width:1px;
  }
}

@media (min-width: 1281px) and (min-width: 1025px) {
  .btn-medium {
    margin:0;
    height:28px;
    padding:0 20px;
    font-size:12px;
    line-height:26px;
    border-width:1px;
  }
}

@media (max-width: 1280px) and (min-width: 1025px) {
  .btn-medium {
    margin:0;
    height:28px;
    padding:0 20px;
    font-size:12px;
    line-height:26px;
    border-width:1px;
  }
}

.btn-primary {
  position:relative;
  display:inline-block;
  font-style:normal;
  transition:all .3s ease-out;
  box-shadow:none;
  border-radius:100px;
  text-align:center;
}

.action {
  text-align:center;
  font-weight:700;
}

a.view-more, a.view-more:hover, a.view-more:focus {
  color:#1686cc;
  text-decoration:none;
}

.chat-options {
  background-color:#fff;
  height:calc(100% - 138px);
}

.nav.nav-tabs {
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
}

.chat-options > .nav.nav-tabs {
  border-bottom:1px solid #d8d8d8;
}

.nav-tabs {
  outline:none;
  position:relative;
  z-index:1;
}

.conversation-tabs {
  background-color:#fff;
  height:70%;
}

.conversation-tabs > .conversation-tabs-bar {
  border-bottom:1px solid #d8d8d8;
}

.conversation-tabs-bar {
  outline:none;
  position:relative;
  z-index:1;
}

.conversation-tabs-bar, .conversation-tabs-bar *, .conversation-tabs-bar:after, .conversation-tabs-bar:before {
  box-sizing:border-box;
}

.conversation-tabs > .conversation-tabs-bar .conversation-tabs-bar-container {
  margin-bottom:-1px;
}

.conversation-tabs-bar-container {
  font-size:14px;
  overflow:hidden;
  position:relative;
  white-space:nowrap;
  line-height:1.5;
}

.conversation-tabs-wrap {
  overflow:hidden;
}

.conversation-tabs-scroll {
  text-align:center;
  overflow:hidden;
  white-space:nowrap;
}

.conversation-tabs-nav {
  transform:translate3d(0px, 0px, 0px);
  width:100%;
  position:relative;
  display:flex;
  white-space:nowrap;
  transition:all .4s cubic-bezier(.23,1,.32,1);
}

.conversion-tabs-tab {
  color:#666;
  background-color:transparent;
  width:33.33%;
}

.conversion-tabs-tab.active {
  z-index:1;
  border-bottom:2px solid #1047f5;
  color:#1047f5;
}

.conversation-tabs-medium.conversation-tabs-inner {
  height:48px;
  line-height:48px;
  padding:0 16px;
}

.conversation-tabs-inner {
  position:relative;
  cursor:pointer;
  text-decoration:none;
}

.col-md-1.col-xl-1 {
  background-color:#222222;
  max-width:5%;
  padding-left:0;
  padding-right:0;
}

.navigation-side {
  position:relative;
  max-width:100%;
  color:#b3b3b3;
  font-family:NavigateMenuRoboto,Helvetica,Tahoma,Arial,"Microsoft YaHei";
  font-weight:400;
  font-size:14px;
  width:220px;
  line-height:1.28571;
  z-index:99;
  -webkit-font-smoothing:antialiased;
}

.navigation-side.fold {
  position:absolute;
  z-index:99;
  left:0;
  width:auto;
  height:100%;
  overflow-y:hidden;
}

@media (max-width: 1920px) and (min-width: 1600px) {
  .navigation-side.fold {
    position:absolute;
    z-index:99;
    left:0;
    width:auto;
    height:100%;
    overflow-y:hidden;
  }
}

@media (max-width: 559px) and (min-width: 100px) {
  .navigation-side.fold {
    display: none;
  }
}

@media (max-width: 992px) and (min-width: 600px) {
  .navigation-side.fold {
    position:absolute;
    z-index:99;
    left:0;
    width:auto;
    height:100%;
    overflow-y:hidden;
  }
}

@media (max-width: 1080px) and (min-width: 1000px) {
  .navigation-side.fold {
    position:absolute;
    z-index:99;
    left:0;
    width:auto;
    height:100%;
    overflow-y:hidden;
  }
}

@media (max-width: 1280px) and (min-width: 1090px) {
  .navigation-side.fold {
    position:absolute;
    z-index:99;
    left:0;
    width:auto;
    height:100%;
    overflow-y:hidden;
  }
}

@media (max-width: 1500px) and (min-width: 1300px) {
  .navigation-side.fold {
    position:absolute;
    z-index:99;
    left:0;
    width:auto;
    height:100%;
    overflow-y:hidden;
  }
}

.navigation-side.fold .menu-box {
  min-height:0;
  width:60px;
  overflow:hidden;
}

.navigation-side .menu-box {
  height:100%;
  padding:20px 0;
  background:#1E262D;
}

.navigation-side, .navigation-side * {
  box-sizing:border-box;
}

.navigation-side.fold .menu-list-box {
  overflow:hidden;
}

.navigation-side .navigate-tree.level-0.no-child {
  position:relative;
}

.navigation-side .navigation-node.with-icon {
  position:relative;
  padding:12px 12px 12px 8px;
  border-left:solid 4px transparent;
}

.navigation-side.biz .navigate-tree.level-0 > .navigation-node {
  display:table;
  width:60px;
  padding:0;
  margin-bottom:1px;
  text-align:center;
}

.navigation-side.biz .navigate-tree.level-0 > .navigation-node .navigation-node-wrapper {
  display:table-cell;
  width:52px;
  padding:8px 0;
  margin-right:4px;
  text-align:center;
  vertical-align:middle;
}

.navigation-side.biz .navigate-tree.level-0 > .navigation-node .nav-icon {
  float:none;
}

.navigation-side.biz .nav-icon {
  font-size:25px;
}

.navigation-side .nav-icon {
  display:inline-block;
  font-size:15px;
  line-height:1;
}

.navigation-side.biz .navigate-tree.level-0 > .navigation-node .navigate-text {
  display:block;
  max-width:59px;
  max-height:26px;
  margin:2px 0 0;
  font-size:13px;
  line-height:13px;
  transform-origin:center center;
  text-align:center;
  transform:scale(.8);
  overflow:hidden;
}

.navigation-side.biz .level-0 > .navigation-node .navigate-text {
  font-weight:700;
}

div {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
}

a.navigation-node:hover {
  background-color:#858585;
}

.navigation-side .level-0.selected > .navigation-node {
  border-left-color:#FF6A00;
  background-color:#858585;
}

.menu-title {
  width:56px;
  height:16px;
  line-height:18px;
  margin:0 2px 10px;
}

.menu-title-text {
  color:#ffffffff;
  text-align:center;
  transform-origin:center center;
  margin:2px 11px 0;
}

.dropdown:hover .dropdown-menu {
  display:block;
}

.navigation-side.fold .list-panel {
  right:auto;
  width:170px;
}

.navigation-side.biz .list-panel {
  margin-left:60px;
}

.navigation-side .list-panel {
  display:none;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin-left:39px;
  margin-top:70px;
  background-color:#3B4248;
  width:100%;
  z-index:1;
  overflow:hidden;
}

.navigation-side .list-panel .navigation-node {
  padding:7px 13px;
  font-size:13px;
  line-height:14px;
}

.navigation-side .level-1 .navigation-node.with-child {
  color:#999;
  font-weight:700;
  padding:7px 0;
  margin:13px 13px 0;
  border-bottom:1px solid #666;
}

.navigation-node.with-child:hover .list-panel {
  display:block;
}

.navigation-side .list-panel > .navigation-node {
  position:relative;
  z-index:1;
  padding:23px;
  color:#fff;
  font-size:14px;
  font-weight:700;
  background:inherit;
}

a.with-child .list-panel {
  display:block;
}

.action a.view-more:hover {
  text-decoration:underline;
}

.btn-primary:hover {
  background-color:#002bb0 !important;
  color:#fff;
}

a.link-name:hover {
  color:#2400ff;
}

a.navigation-node a.with-child:hover .list-panel {
  display:block;
}

.navigation-side .navigate-tree.hover .list-panel {
  z-index:2;
  display:block;
}

div.navigate-tree:hover .list-panel {
  display:block;
  z-index:2;
}

.navigation-side .list-panel > .navigate-node {
  position:relative;
  z-index:2;
  padding:13px;
  color:#fff;
  font-size:14px;
  font-weight:700;
  background-color:inherit;
}

.navigation-side .level-1 .navigate-node.with-child {
  color:#999;
  font-weight:700;
  padding:7px 0;
  margin:13px 13px 0;
  border-bottom:1px solid #666;
  width:80%;
}

a.navigation-node-2:hover {
  background-color:transparent;
  color:#ffae00;
}

a.navigation-node-2 {
  padding:7px 13px;
  font-size:14px;
  line-height:14px;
  color:#c7c7c7;
}

.navigate-tree.level-2 {
  padding:10px 0 10px 0;
}

@media (min-width: 1200px) {
  .h4, h4 {
    font-size:1.7rem !important;
  }
}

@media (min-width: 768px) {
  .h4, h4 {
    font-size:14px;
  }
}

@media (min-width: 768px) {
  .local-time {
    font-size:9px;
    color:rgb(164,164,164);
  }
}

@media (min-width: 1052px) {
  .local-time {
    font-size:14px;
    color:rgb(164,164,164);
  }
}

.h1, h1 {
  font-size:1.5rem;
}

@media (min-width: 992px) {
  .h1, h1 {
    font-size:2rem;
  }
}

@media (max-width: 1280px) and (min-width: 1024px) {
  .h1, h1 {
    font-size:3rem;
  }
}

@media (max-width: 1500px) and (min-width: 1400px) {
  .h1, h1 {
    font-size:3rem;
  }
}