.list-menu li, .list-menu li a {
    display: inline-block;
    /*color: white;*/
    font-size: 18px;
    text-align: center;
}

.list-menu li {
    padding: 3px;
}

.list-menu li a img {
    max-width: 50px;
    display: inline-block;
}
span.menu-name {
    display: block;
}

.logo img {
    max-width: 180px;
    margin-top: 18px;
    display: inline-block;
}
.list-menu i {
    font-size: 45px;
    color: #1b98d5;
    border: 2px solid #1b98d5;
    height: 45px;
    width: 45px;
    line-height: 30px;
    border-radius: 50%;
    padding: 7px;
    display: inline-block;
}
.list-menu ul {
    display: inline-block;
    position: relative;
}
.list-menu ul ul {
    position: absolute;
    right: 0;
    width: auto;
    background: #1b98d5;
    border-radius: 3px;
    max-height: 0;
    overflow: hidden;
    transition: 0.3s;    
    top: 100%;
    color: white;

}
.list-menu ul ul.active {
    max-height: 500px;
}
.list-menu ul ul li {
    white-space: nowrap;
    border-bottom: 1px solid #ccc;
    display: block;
}

.list-menu > ul > li {
    position: relative;
}
a.bi-option-menu {
    vertical-align: 0;
}



/*=========style for chatbox============*/
.list-chat-items {
    position: fixed;
    bottom: 0;
    right: 10px;
    left: auto;
    z-index: 999;
}   
    
.chat-box{
    bottom: 0;
    background: #fcfcfc;
    border: 2px solid #99999969;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    z-index: 9999;
    width: 328px;
    display: inline-block;
    border-bottom: 0 none;
    margin-left: 10px;
    box-shadow: -1px 1px 4px rgb(0 0 0 / 19%);
    border-bottom: 0 none;
    max-width: 100vw;
}
.chat-body{
    max-width: 100%;
}
.chat-box.active{
    border-color: #e84f5e;
}
.mini-size .chat-body {
    display: none;
}
.mini-size .chat-footer {
    display: none;
}
.mini-size  i.fa-minus {
    display: none;
}
.bi-mini-chat i.fa-plus {
    display: none;
}
.mini-size i.fa-plus {
    display: inline-block;
}
.chat-box-container {
    padding: 10px;
    min-width: 300px;
    max-width: 100%;
}
.chat-head {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    position: relative;
}
.chat-head .chat-box-container {
    padding-bottom: 0;
}
.chat-head .name {
    font-weight: bold;
    margin-right: 15px;
    display: inline-block;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 55px);
}
.chat-head .name img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}
.chat-head button {
    background: transparent;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    border: 0 none;
    outline: none;
}
.chat-head .group-botton {
    position: absolute;
    right: 10px;
    background: white;
}
.chat-head button:hover {
    background: #3f94ef;
}
.chat-head button:hover i {
    color: #fff;
}
.chat-head .name span.title-chat {
    display: inline-block;
    font-weight: 700;
    font-size: 14px;
}
.chat-head span.avatar {
    margin-top: 0;
}
.chat-body .chat-box-container {
    padding-top: 0;
    padding-bottom: 0;
}
.chat-body ul {
    overflow-y: auto;
    margin: 0;
    padding: 0;
    height: 250px;
    max-height: calc( 100vh - 150px);
}
.chat-body ul li{
    display: block;
}
.chat-body ul li:last-child {
  /*scroll-snap-align: end;*/
}

.chat-body .content-chat {
    border-radius: 15px;
    display: inline-block;
    background: #dee2e6;
    padding: 5px 8px;
    margin: 2px 0;
    white-space: pre-wrap;
    text-align: left;
    max-width: calc( 100% - 40px);
}
.chat-body .content-chat a {
    color: #e84f5e;
    font-weight: 700;
}
.chat-body .from-me .content-chat {
    background: #3f94ef;
    color: #fff;
}
.chat-body .avatar {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}
li.from-me {
    text-align: right;
}

li.from-me .avatar {
    display: none;
}
textarea.content-chat-input {
    padding: 5px;
    height: 60px;
    background: #ece6e6;
    border-radius: 10px;
}

.chat-footer button {
    margin: 0;
    padding: 3px 10px;
    border-radius: 20px;
}
.zalo-chat-widget {
    z-index: 1000!important;
}
@media screen and (max-width: 767px){
.list-chat-items {
    right: 0;
}

}

@media screen and (max-width: 600px){
.list-menu ul ul {
    /*left: 0;
    right: auto;*/
}

}

/*=========style for chatbox1============*/


.crt8y2ji {
    fill: #bec2c9;
}
.s9lmpwuu {
    stroke: #bec2c9;
}

.active .s9lmpwuu {
    stroke: #007bff;
}
.active .crt8y2ji {
    fill: #007bff;
}
.chat-box:not(.active) .btn-send-chat-message {
    background: #bec2c9;
}

.image-upload-input-button {
    vertical-align: -5px;
    margin-right: 10px;
    cursor: pointer;
}
.image-upload-input-button:hover {
    opacity: 0.9;
}

input.image-upload-input {
    max-width: 50%;
    float: left;
    display: none;
}
.chat-list-right-box {
    border-radius: 9px;
    position: fixed;
    right: 15px;
    top: 60px;
    z-index: 9999999999;
    background: white;
    max-height: calc(100% - 80px);
    max-width: calc(100% - 30px);
    width: 355px;
    padding: 15px;
    box-shadow: 0 12px 28px 0 rgb(146 124 124 / 66%), 0 2px 4px 0 rgb(0 0 0 / 47%), inset 0 0 0 1px rgb(0 0 0 / 26%);
    display: none;
}

.chat-list-right-box.active {
    display: block;
}

.message-member-item .body-list span {
    display: block;
}

span.body-list {
    margin-top: -8px;
    display: inline-block;
}

.body-list span.time-logs {
    font-size: 10px;
}
li.message-member-item {
    padding: 12px 5px;
    cursor: pointer;
}
.chat-list-right-box {
    overflow-y: auto;
}

li.message-member-item:hover {
    background: #eee;
    border-radius: 5px;
}
.box-chat-list-actions {
    display: flex;
}

button.bi-mini-chat {
    display: none;
}

button.bi-close-chat {
    display: none;
}

.box-chat-list-actions svg {
    cursor: pointer;
    border-radius: 50%;
}

.box-chat-list-actions svg:hover {
    background: #eee;
}
.btn-tra-loi-video,
button#call2HangupBtn {
    background: red;
}
.body-comming-call img.avatar {
    max-width: 50px;
    float: left;
    margin-bottom: 10px;
    margin-top: -12px;
}
div#modal-comming-call {
    z-index: 9999999999999;
}
span.incomingCallFrom {
    font-weight: 900;
    cursor: pointer;
}
.active .chat-head path {
    fill: #3f94ef;
    stroke: #3f94ef;
}

.active svg line {
    stroke: #377bfd;
}
svg.image-upload-input-button {
    transform: scale(1.2);
}
video#remoteVideo {
    height: 0;
}
.calling video#remoteVideo {
    height: auto;
}
div#videos {
    min-height: 125px;
}
.btn-menu-notify {
    position: relative!important;
}
span.menu-notify {
    position: absolute;
    top: 0;
    background: #e84f5e;
    padding: 0px 5px;
    border-radius: 3px;
    display: inline-block;
    color: #fff;
    font-size: 10px;
}
a.btn-chat-vs-bs.btn-rounded.btn-ok.click-to-start-chat {
    max-width: 100%;
    display: inline-block;
    white-space: normal;
    padding: 8px 5px;
    border-radius: 5px;
    line-height: inherit;
    text-transform: inherit;
}


@keyframes  ldio-rpinwye8j0b {
  0% { transform: rotate(0deg) }
  50% { transform: rotate(180deg) }
  100% { transform: rotate(360deg) }
}
.ldio-rpinwye8j0b div {
  position: absolute;
  animation: ldio-rpinwye8j0b 1s linear infinite;
  width: 60px;
  height: 60px;
  top: 20px;
  left: 20px;
  border-radius: 50%;
  box-shadow: 0 4px 0 0 #e15b64;
}
.loadingio-eclipse {
  width: 100px;
  height: 100px;
  display: inline-block;
  overflow: hidden;
}
.ldio-rpinwye8j0b {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-rpinwye8j0b div { box-sizing: content-box; }
span.content-chat.loaded .loadingio-eclipse {
    display: none;
}

div.container {
    /*min-height: 40vw;*/
}
.chat-body ul li.to-me>div {
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
}



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

.list-call-action button {
    font-size: 10px;
    margin: 3px;
}
.list-menu > ul > li{
    position: static;
    width: 25%;
    padding: 0;
}
span.menu-name {
    font-size: 12px;
}
.hbsv-cnt {
    min-height: 308px;
}
div.container {
    /*min-height: 478px;*/
}
.list-menu ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: baseline;
}

.list-menu li a img {
    max-width: 35px;
}

.list-menu i {
    font-size: 35px;
    width: 35px;
    height: 35px;
    padding: 0;
}

}