body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

/* Button used to open the chat form - fixed at the bottom of the page */
.open-button 
{
  /*background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;*/
  background-color: #555;
  color: white;
  padding: 20px 20px 20px 20px;
  border-radius: 50px 50px 50px 50px;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 75px;
}

/* The popup chat - hidden by default */
.chat-popup 
{
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}


/* Add styles to the form container */
.form-container 
{
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width textarea */
.form-container textarea 
{
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 20px;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus 
{
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn 
{
 /* background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;*/
  background-color: transparent;
  color: #000;
  padding: 0px;
  border: none;
  cursor: pointer;
  width: 10px;
  margin-bottom:10px;
  opacity: 0.8;
  float: right;
}

/* Add a red background color to the cancel button */
.form-container .cancel 
{
 /* background-color: red;*/
 background-color: transparent;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover 
{
  opacity: 1;
}


/*-------vignesh css---------------*/
.chat-popup .form-container .head,.userchatroom .form-container .head
{
   position: relative;
   width: 100%;
   display: inline-block;
   border-bottom: 1px solid #ff000040;
}
.chat-popup .form-container .chattitle,.userchatroom .form-container .chattitle
{
   position: relative;
   width: 50%;
   float: left;
}
.chat-popup .form-container .chattitle h1,.userchatroom .form-container .chattitle h1
{
    margin: 0px;
    padding: 0px;
}
.chat-popup .form-container .closebtn,.userchatroom .form-container .closebtn
{
   position: relative;
   width: 50%;
   float: left;
}
.chat-popup .form-container .chatbody
{
   position: relative;
   width: 100%;
   display: inline-block;
}
.chat-popup .form-container .chatcontent,.userchatroom .form-container .chatsend
{
    position: relative;
    width: 50%;
    float: left;
}
.chat-popup .form-container .chatsend .btn
{
    float: left;
    margin: 60px 0 0 10px;
    background: #dcdcdc;
    border-radius: 20px;
    width: 50%;
}
.chat-popup .chathistory
{
    width: 200px;
}
.chat-popup .chathistory .onlineuser
{
  position: relative;
  width: 100%;
  display: inline-block;
}
.chat-popup .chathistory .user .onlineuser:nth-child(odd) 
{
    background: #f1f1f1;  
}
.chat-popup .chathistory .user .onlineuser:nth-child(even) 
{
    background: #80808059;  
}
.chat-popup .chathistory .user
{
    width: 100%;
    position: relative;
    float: left;
}
.chat-popup .chathistory .user p.user
{
    width: 50%;
    position: relative;
}

.chat-popup .chathistory .status
{
  text-align:  right;
  width: 100%;
  position: relative;
}
.chat-popup .chathistory .online
{
    color: green;
    cursor: pointer;
}
.chat-popup .chathistory .offline
{
    color: red;
    cursor: auto;
}
.userchatroom
{
  /*background: red;*/
  display: block;
  position: fixed;
  bottom: 0;
  right: 250px;
  border: 3px solid #f1f1f1;
  z-index: 9; 
}
.userchatroom .form-container .oldmsg
{
    width: 100%;
    height: 165px;
    overflow-y: auto;
}
.userchatroom .form-container .oldmsg p.msgleft
{
    text-align: left;
    display: block;
    position: relative;
    border-bottom: 1px solid #514d4d24;
    margin: 10px 0px 10px 0px;
    padding: 10px 0px 10px 0px;
}
.userchatroom .form-container .oldmsg p.msgright
{
    /*text-align: right;*/
    display: block;
    position: relative;
    border-bottom: 1px solid #514d4d24;
    margin: 10px 0px 10px 0px;
    padding: 10px 0px 10px 0px;
}
.userchatroom .form-container textarea
{
  width: 100%;
  padding: 2px;
  margin: 5px 0 0px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 10px;
}
.userchatroom .form-container .chatsend .btn
{
  background-color: #4CAF50;
  color: white;
  padding: 5px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/*---------------------chatpage css-----------------------*/
.chatpage 
{
    width: 100%;
    min-height: 100%;
    background-color: #3f0e40;
    font-family: roboto;
}
.chatpage .sidebar
{
   width: 20%;
   background: #06252b;
   float: left;
   height: auto;
   color: #f1f1f1;
}
.chatpage .messagearea
{
    width: 30%;
    float: left;
}
.chatpage .tabledesign
{
  width: 50%;
  float: left;
  background-color: #ccc;
  height: 100%;
}
.chatpage .tabledesign .customtableresult,.chatpage .tabledesign .fetchcustomtable 
{
  width: 100%;
  overflow: auto;
}
.chatpage .tabledesign .customfetch
{
  overflow: scroll;
}
.chatpage .tabledesign .customtableresult table
{
    overflow: auto;
}
.chatpage .messagearea .userchatroom
{
    display: block;
    position: relative;
    bottom: 0;
    border: 3px solid #f1f1f1;
    width: 100%;
    left: 0px;
    height: 650px;
}
.chatpage .messagearea .userchatroom .form-container
{
    max-width:  100%;
}
.chatpage .messagearea .userchatroom .form-container .oldmsg
{
    height: 500px;
}
.chatpage .messagearea .userchatroom .form-container .chatcontent, .userchatroom .form-container .chatsend
{
    width: 100%;
}
.chatpage .sidebar .chatgroup .chatlist .onlineuser
{
    width: 100%;
    display: inline-block;
    background: #1164a35e;
}
.sidebaractive
{
    background: #35b7cc6e !important;   
}
/*.chatpage .sidebar .chatgroup .chatlist .onlineuser:active
{
    background: #35b7cc6e;
}*/
/*.chatpage .sidebar .chatgroup .chatlist .onlineuser:nth-child(even)
{
    background: #35b7cc6e;
}*/
.chatpage .sidebar .chatgroup .chatlist .onlineuser p.user
{
    width: 50%;
    display: inline-block;
    float: left;
}
.chatpage .sidebar .chatgroup .chatlist .onlineuser p.members
{
    width: 50%;
    display: inline-block;
    float: left;
}
/*---------------- chatpage css--------------------- */

/* ------- customtable css ------ */
.customtableresult .dynamictabletd,.fetchcustomtable .dynamictabletd
{
  width: 100px;
  border: 0px;
}
.invalid_err
{
    display: none;
    color: red;
}
.success
{
  color: green;
}
table.userlog tr th
{
   writing-mode: tb-rl;
   transform: rotate(-180deg);
}
table.userlog tr td
{

}
table.userlog tr td .nooflog,table.userlog tr td .logtime
{
    width: 100px;
    box-sizing:border-box;
    background: transparent;
}
table.userlog tbody tr:nth-child(1) th
{
    background-color: #ff3000;
    position: sticky;
    top: 0;
}
table.userlog tbody tr td:nth-child(1)
{
    background-color: red;
    position: sticky;
    left: 0;
}
.backgroundred
{
  background: red;
}
.backgroundyellow
{
  background-color: yellow !important;
}