@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /*src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');*/
  src: url("/fonts/roboto.ttf");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

body {/*font-family: Arial, Helvetica, sans-serif;*/font-family: 'Raleway', sans-serif; background-image: url('../image/overlay.png');}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 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;*/
    font-family: 'Raleway', sans-serif;
}
.chatpage .sidebar
{
   width: 99%;
   background: #0d4559;
   float: left;
   /*height: 100%;*/
   height: auto;
   color: #f1f1f1;
   border-radius: 20px;
   position: absolute;

}
.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 .parentprojectlist .projectlist .onlineuser
{
    width: 100%;
    display: inline-block;
   background: #1164a35e;
}
.sidebaractive
{
    background: #35b7cc6e !important;   
}
/*.chatpage .sidebar .chatgroup .projectlist .onlineuser:active
{
    background: #35b7cc6e;
}*/
/*.chatpage .sidebar .chatgroup .projectlist .onlineuser:nth-child(even)
{
    background: #35b7cc6e;
}*/
.chatpage .sidebar .chatgroup .parentprojectlist .projectlist .onlineuser p.user
{
    width: 50%;
    display: inline-block;
    float: left;
}
.chatpage .sidebar .chatgroup .parentprojectlist .projectlist .onlineuser p.members
{
    width: 50%;
    display: inline-block;
    float: left;
}
.chatpage .messagearea .showmessage table tbody tr:first-child
{
   background: grey;
}
.chatpage .messagearea .showmessage table td input[type='text']
{
   width: 100px;
}
/*---------------- chatpage css--------------------- */

/* ------- customtable css ------ */
.customtableresult .dynamictabletd,.fetchcustomtable .dynamictabletd
{
  width: 100px;
  border: 0px;
}
.invalid_err
{
  display: none;
  color: red;
}
.success
{
  color: green;
}
.chatpage .sidebar .section .row .col .chatgroup .links
{
  width: 100%;
}
.chatpage .sidebar .section .row .col .chatgroup .links a.showlink
{
  overflow: auto;
  background: #0000006e;
  border-end-end-radius: 5px;
  border-end-start-radius: 5px;
  border-start-end-radius: 5px;
  border-start-start-radius: 5px;
}
.parentprojectlist li
{
  list-style-type: none;
}
.parentprojectlist li:before 
{
    content: "->";
    margin-right: 4px;
}
.chatpage .sidebar .section .row .col .chatgroup .band
{
  height: 25px;
  color: black;
  background: #f1f1f1;
}
.chatpage .sidebar .menu_sidebar
{
  width: 30%;
  /*background: red;*/
  height: 100%;
  position: relative;
  float: left;
}
.chatpage .sidebar .contentarea
{
  width: 70%;
  background: blue;
  position: relative;
  display: inline-block;
}
.modal-header
{
  display: inline !important;
}
label.error
{
  color: red;
}
header
{
   font-family: 'Raleway', sans-serif;
}
header nav .menubar
{
  float: left;
}
header nav .menubar ul.nav li
{
    padding: 0px 5px;
}
header nav .navbar-header
{
    background-image: url('../image/background.jpg');
    border-radius: 5px 5px 5px 5px;
}
header nav ul.nav
{
    background: #751717;
    border-radius: 10px 10px 0px 0;
    padding: 5px 5px 5px 5px;
    opacity: 0.9;
}
.next .page-link
{
    border-radius: 5px 0px 15px 0px;
    background: #007bff;
    border: 0px;
    color: #f1f1f1;
}
.next .page-link:hover {
    background: #007bff;
    color: #ffffff;
}
.sidebarlevel1 {
  height: auto;
  width: 0;
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #f1f1f1;
  overflow-x: visible;
  transition: 0.5s;
  padding-top: 0px;
  display: inline-block;
  border-radius: 5px;
  color: #e24a68;
}
.typehead .tag [data-role="remove"]:after {
    content: " x";
    padding: 0px 2px;
}