#chat:focus { outline: none; }
      .btnChatSend { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
      
      #formUsername { 
          background:#323739; 
          padding: 0.25rem; 
          backdrop-filter: blur(10px); 
          border-radius: 5px;
        }
      .userstart { 
          background: #333; border: none; 
          padding: 0 1rem; margin: 0.25rem; 
          border-radius: 3px; outline: none; color: #fff; 
        }
      #nickname-input { 
          border: none; padding: 0 1rem;
          border-radius: 2rem; margin: 0.25rem; 
          background-color: #323739;
          color:#c9c9c9;
        }
      #nickname-input:focus { outline: none; }

      #usernamediv {
          padding: 0px;
          margin: 0px;
          margin-right: -15px;
          margin-left: -15px;
      }
      #usernamediv div {
          margin: 0px;
          padding: 0px;
      }

      #messages { 
          list-style-type: none; margin: 0; padding: 5px; 
        }
      #messages > li { padding: 10px; }
      #messages > li:nth-child(odd) { background: #efefef; }

      .hidden {
          display: none;
      }

      .bgred {
          background-color: red;
      }

      #feedback {
          min-height: 20px;
          font-size: 15px;
          color: rgb(173, 94, 94);
          padding: 3px;
          padding-left: 10px;
          border: 1px solid green;
          flex-wrap: wrap;
          display: none;
      }

        .hideMe {
		    animation: blink 1s linear infinite;
        }

        @keyframes blink{
            0%{opacity: 0;}
            25%{opacity: 0.25;}
            50%{opacity: 0.50;}
            75%{opacity: 0.75;}
            100%{opacity: 1;}
        }

        .chatline {
            margin: 10px;
            margin-top: 5px;
        }

        .leftnav {
            color: #939393;
            padding: 0px;
        }

        .iconleftnav {
            background-color: #2a2f32;
            padding: 20px;
            padding-left: 0px;
            padding-right: 0px;
            vertical-align: middle;
        }

        .iconrightnav {
            background-color: #2a2f32;
            padding: 20px;
            padding-left: 0px;
            padding-right: 0px;
            height: 70px;
            border-radius: 5px 5px 0px 0px;
        }

        .usericon {
            font-size: 20px;
            border-radius: 100px;
            background-color: #6e7377;
            padding: 10px;
            padding-left: 12px;
            padding-right: 12px;
            margin-top: 20px;
        }

        .usersicon {
            font-size: 20px;
            border-radius: 100px;
            background-color: #6e7377;
            padding: 8px;
            padding-left: 9px;
            padding-right: 9px;
            margin-top: 20px;
            margin-left: 10px;
        }

        .pm_every1icon {
            margin-top: 10px;
        }

        .align-right {
            text-align: right;
        }

        .margl5 i{
            margin-left: 20px;
            font-size: 20px;
        }

        .iconleftnav i:hover {
            cursor: pointer;
        }

        .iconrightnav i:hover {
            cursor: pointer;
        }

        .searchcontact {
            background-color: #131c21;
            padding: 7px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .contacts .col-12{
            padding: 0px;
        }
        
        .searchcontact .input-group-text {
            border-radius: 50px 0px 0px 50px !important;
            background-color: #323739;
            color: #c9c9c9;
            border-right: 0px;
            border: 0px;
        }
        .searchcontact input {
            background-color: #323739;
            border-left: 0px;
            color: #c9c9c9;
            border-radius: 0px 50px 50px 0px !important;
            outline: none;
            border: 0px;
        }
        .searchcontact input:focus {
            background-color: #323739;
            border-left: 0px;
            color: #c9c9c9;
            border-radius: 0px 50px 50px 0px !important;
            outline:none !important;
            outline-width: 0 !important;
            box-shadow: none;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
        }

        .msgbox {
            height: 100%;
            color: #939393;
            padding: 0px;
        }
        
        .iconrightnav .container{
            padding: 0px;
        }

        .contactlist {
            background-color: #131c21;
        }

        .listrow {
            height: 300px;
            background-color: #131c21;
            overflow-y: auto;
        }

        .chatboxmessage {
            height: 300px;
            background-image: url('/assets/chat/chatbg2.png');
            background-size: cover;
            overflow-y: auto;
        }

        .chatmessage {
            text-align: center;
            vertical-align: middle;
            background-color: #2a2f32;
            padding-top: 7px;
            padding-bottom: 7px;
            padding-left: 0px;
            padding-right: 0px;
            max-height: 200px;
            border-radius: 0px 0px 5px 5px;
        }

        .chatbody {
            padding: 0px;
            border-radius: 0px 0px 5px 5px;
        }

        .chatbody .col-12 {
            padding: 0px;
        }

        .chatbox {
            max-width: 350px;
            min-width: 350px;
            float: right;
            position: fixed;
            bottom: 100px;
            right: 0;
            margin-right: 25px;
            margin-bottom: 5px;
            z-index: 899;
        }

        .mobile_chatbox {
            max-width: 350px;
            min-width: 350px;
            float: right;
            position: fixed;
            bottom: 0px;
            right: 0;
            margin-right: 10px;
            margin-bottom: 5px;
            z-index: 899;
        }

        .text-center {
            text-align: center;
        }

        .centerinputchat {
            /* width: 70%; */
            width: 85%;
            padding-left:10px;
        }

        .mic_chat {
            width: 15%;
            text-align: center;
        }
        
        .mic_chat i {
            text-align: right;
            vertical-align: middle;
            font-size: 20px;
            padding-top: 7px;
            padding-left: 5px;
            margin-left: -10px;
        }

        /* .chatmessage div {
            padding: 0px;
        } */

        .chatmessage .col {
            padding: 0px;
        }

        .chatmessage .col-xs-auto {
            padding: 0px;
        }

        .chatmessage textarea {
            background-color: #323739;
            border-left: 0px;
            color: #c9c9c9;
            border-radius: 10px !important;
            outline: none;
            border: 0px;
            font-size: 16px;
            padding: 5px;
            padding-left: 15px;
            padding-right: 15px;
            width: 100%;
            resize: none;
            overflow: auto;
        }

        .leftchaticons {
            text-align: left;
            font-size: 20px;
            padding-top: 2px !important;
            width: 20%;
        }

        .leftchaticons i:nth-of-type(1) {
            padding-left: 10px;
            padding-right: 5px;
        }

        .chatmessage i:hover {
            cursor: pointer;
        }

        .chatinput {
            /* margin-left: -10px; */
        }

        .contactimage {
            background-color: #056162;
            color: whitesmoke;
            padding: 5px;
            font-size: 25px;
        }

        .listrow .contactimage {
            width: 50px;
            border-radius: 50px;
        }

        .iconrightnav .contactimage {
            position: absolute;
            width: 50px;
            border-radius: 50px;
            top: -5px;
        }

        .titlechatbox {
            margin-left: 10px;
        }

        .listrow ul {
            list-style-type: none;
            padding: 0px;
            width: auto;
            padding-right: 10px;
            margin-bottom: 10px;
        }

        .listrow .listmsg {
            border-bottom: 1px solid gray;
            padding-bottom: 10px;
        }
        .listrow li {
            list-style: none;
            padding: 0px;
            padding-top: 10px;
            padding-right: 10px;
        }

        .listrow .lastmessagelist {
            font-size: 14px;
            color: gray;
        }
        
        .listseen i {
            font-size: 12px;
            color: #108db3;
            margin-right: 3px;
        }

        .listmsg .container, .listmsg .container div {
            padding: 0px !important;
        }

        .listmsgdate {
            text-align: right;
            font-size: 12px;
            color: gray;
            vertical-align: bottom;
        }

        .msgrecent {
            overflow: hidden; 
            white-space: nowrap; 
            text-overflow: ellipsis;    
        }

        .active_chat {
            background-color: #323739;
            color: #acacac;
        }

        .circlename {
            width: 50px;
            height: 50px;
            border-radius: 50px;
            background: #333;
        }

        .circlename2 {
            position: fixed;
            top: 10px;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            background: #333;
        }
        .profileletter {
            width: 100%;
            text-align: center;
            font-size: 36px;
            line-height: 50px;
        }

        .accountname {
            position: absolute;
            left: 70px;
        }

        .exitchat {
            background-color: #323739;
            padding: 10px;
            vertical-align: middle;
            font-size: 20px;
            border-radius: 50px;
            width: 50px;
            margin-top: 5px;
            float: right;
            text-align: center;
        }

        .openchat img{
            background-color: #323739;
            padding: 2px;
            vertical-align: middle;
            font-size: 20px;
            border-radius: 50px;
            width: 50px;
            margin-top: 5px;
            float: right;
            text-align: center;
        }

        .openchat .contactimage{
            background-color: #056162;
            color: whitesmoke;
            padding: 5px;
            vertical-align: middle;
            font-size: 25px;
            border-radius: 50px;
            width: 50px;
            margin-top: 5px;
            float: right;
            text-align: center;
        }

        .chatheaderevery1 div{
            padding: 0px;
        }

        .bubble {
            position: absolute;
            font-family: sans-serif;
            font-size: 14px;
            line-height: 12px;
            width: 210px;
            background: #fff;
            border-radius: 40px;
            padding: 15px;
            text-align: center;
            color: #000;
            right: 0px;
            bottom: 70px;
            border: 1px solid #056162;
        }

        .bubblechatleft {
            background: #2a2f32;
            border-radius: 0px 7.5px 7.5px 7.5px;
            padding: 8px;
            padding-left: 8px;
            padding-right: 8px;
            width: auto;
            float: left;
            line-height: 15px;
        }

        .bubblechatleft p {
            margin-bottom: 5px;
        }

        .bubblechatright {
            background: #056162;
            border-radius: 7.5px 0px 7.5px 7.5px;
            padding: 8px;
            padding-left: 8px;
            padding-right: 8px;
            width: auto;
            float: right;
        }

        .bubble_pmleft {
            position: relative;
            font-family: sans-serif;
            font-size: 14px;
            line-height: 12px;
            color: whitesmoke;
            margin-left: 10px;
            margin-right: 40px;
        }

        .bubble_pmright {
            position: relative;
            font-family: sans-serif;
            font-size: 14px;
            line-height: 12px;
            color: whitesmoke;
            margin-right: 10px;
            margin-left: 40px;
        }
        
        .bubble_pmleft:before {
            content: "";
            width: 0px;
            height: 0px;
            position: absolute;
            border-right: 10px solid #2a2f32;
            border-left: 5px solid transparent;
            border-top: 5px solid #2a2f32;
            border-bottom: 8px solid transparent;
            left: -7px;
            bottom: 16px;
        }

        .bubble_pmright:before {
            content: "";
            width: 0px;
            height: 0px;
            position: absolute;
            border-left: 10px solid #056162;
            border-right: 5px solid transparent;
            border-top: 5px solid #056162;
            border-bottom: 8px solid transparent;
            right: -7px;
            bottom: 16px;
        }

        .closebubbles {
            padding: 2px;
            border-radius: 25px;
            background-color: #323739;
            font-size: 12px;
            position: absolute;
            color: whitesmoke;
            width: 30px;
            top: 12px;
            right: 5px;
        }

        .bubble-bottom-right:before {
            content: "";
            width: 0px;
            height: 0px;
            position: absolute;
            border-right: 14px solid #056162;
            border-left: 7px solid transparent;
            border-top: 7px solid #056162;
            border-bottom: 12px solid transparent;
            right: 32px;
            bottom: -18px;
        }

        div.clearboth {
            clear: both;
            height: 1px;
            overflow: hidden;
            font-size: 0pt;
            margin-top: -1px;
        }

        .msgboxcontainer {
            border-radius: 5px;
        }

        #messages a {
            color: rgb(68, 172, 241);
        }

        .hcresponse {
            margin: 5px;
            line-height: 15px;
        }

        .qandaresponse p{
            margin: 5px;
            line-height: 15px;
        }

        .rheart {
            float: right;
            margin-bottom: -20px;
            background: white;
            border-radius: 25px;
            color: red;
            padding: 5px;
        }

        .rheart:hover {
            cursor: pointer;
        }

        .scrollbar-pink::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-pink::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-pink::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #ec407a; }

        .scrollbar-pink {
        scrollbar-color: #ec407a #F5F5F5;
        }

        .scrollbar-indigo::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-indigo::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-indigo::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #3f51b5; }

        .scrollbar-indigo {
        scrollbar-color: #3f51b5 #F5F5F5;
        }

        .scrollbar-black::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #131c21;
        border-radius: 10px; }

        .scrollbar-black::-webkit-scrollbar {
        width: 12px;
        background-color: #131c21; }

        .scrollbar-black::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #2a2f32; }

        .scrollbar-black {
        scrollbar-color: #2a2f32 #131c21;
        }

        .scrollbar-lady-lips::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-lady-lips::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-lady-lips::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-gradient(linear, left bottom, left top, from(#ff9a9e), color-stop(99%, #fecfef),
        to(#fecfef));
        background-image: -webkit-linear-gradient(bottom, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
        background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); }

        .scrollbar-near-moon::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-near-moon::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-near-moon::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-gradient(linear, left bottom, left top, from(#5ee7df), to(#b490ca));
        background-image: -webkit-linear-gradient(bottom, #5ee7df 0%, #b490ca 100%);
        background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%); }

        .bordered-pink::-webkit-scrollbar-track {
        -webkit-box-shadow: none;
        border: 1px solid #ec407a; }

        .bordered-pink::-webkit-scrollbar-thumb {
        -webkit-box-shadow: none; }

        .bordered-indigo::-webkit-scrollbar-track {
        -webkit-box-shadow: none;
        border: 1px solid #3f51b5; }

        .bordered-indigo::-webkit-scrollbar-thumb {
        -webkit-box-shadow: none; }

        .bordered-black::-webkit-scrollbar-track {
        -webkit-box-shadow: none;
        /* border: 1px solid #000;  */
        }

        .bordered-black::-webkit-scrollbar-thumb {
        -webkit-box-shadow: none; }

        .square::-webkit-scrollbar-track {
        border-radius: 0 !important; }

        .square::-webkit-scrollbar-thumb {
        border-radius: 0 !important; }

        .thin::-webkit-scrollbar {
        width: 6px; }


        .chatheader img {
            width: 80%;
        }