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

@font-face{
  font-family: "FontAwesome";
  src: url("/fontawesome/webfonts/fa-regular-400.woff2");
}
label.error
{
    color: red;
}
/* Button used to open the chat form - fixed at the bottom of the page */
.open-button 
{
  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;
}

/* Add styles to the form container */
.form-container 
{
  max-width: 300px;
  padding: 10px;
  background-color: white;
}
.sidebaractive
{
    background: #fff !important;   
}
.sidebar ul li.sidebaractive a
{
    color: #000;
}
/*---------------- chatpage css--------------------- */
.invalid_err
{
    display: none;
    color: red;
}
.success
{
  color: green;
}
.backgroundred
{
  background: red;
}
.backgroundyellow
{
  background-color: yellow !important;
}
.sidebar 
{
    width: 100%;
    background: rgb(5,68,104);
    position: relative;
    left: 0;
    min-height: calc(100vh - 50px);
    padding: 20px 0;
    transition: all 0.5s ease;
}
.sidebar ul
{
    list-style-type: none;
    padding: 0px 10px 0px 0px;
}
.sidebar ul li a
{
    color: #cfd6dd;
}
.contentarea
{
    background: grey;
    height: 100%;
    position: relative;
    display: inline-block;
    width: 100%;
}
.dashboard
{
    background: red;
    position: relative;
    width: 100%;
    height: 100%;
}
 .dashboard .box
{
  width: 150px;
  height: 150px;
  background: green;
  display: inline-block;
  margin:  20px 50px;
  border-radius: 20px;
}
.dashboard .box h2
{
    text-align: center;
}
.dashboard .box .count
{
    color: #f1f1f1;
    font-size: 20px;
    text-align: center;
}
header
{
  background: #d5a7a73d;
  position: sticky;
  top: 0;
}
header .links
{
    float: right;
}
#container
{
    height: auto;
}
#container .contentarea .result 
{
    overflow: auto;
    max-height: 750px;
}
#container .contentarea .result table.cumulativetable thead
{
   position: sticky;
   top: 0;
   background: red;
}
#container .contentarea .result table.cumulativetable tr td:nth-child(1)
{
  background: black;
  color: white;
  position: sticky;
  left: 0;
}
#container .contentarea .result table.cumulativetable tr th.setheadwidth
{
    writing-mode: tb-rl;
    transform: rotate(-180deg);
}
#container .contentarea .result table.cumulativetable tr th.setheadwidth,#container .contentarea .result table.cumulativetable tr td.setheadwidth
{
    width: 50px; 
}
#container .contentarea .result table.cumulativetable tr td.setheadwidth .text
{
    width: 100px;
}
footer 
{
    position: relative;
    bottom: 0;
    width: 100%;
    background-color: purple;
    text-align: center;
    color: #fff;
}