/* 
============================
 MOBILE RELATED SPECIFIC STYLES
=============================
*/

/* MOBILE-CARD HEADER STYLES */

.mcontainer
{
	padding:0px;
	font-size:16px;
	display:block;
}
.mcard
{
	border-top: 15px solid transparent;
    padding: 10px;
    border-image: linear-gradient(to right, #445e79, #75b8c9) 1;
    border-radius: 10px 10px 10px 10px; /* This rounds the top-left and top-right corners */
}

.mcard-inner:before,
.mcard-inner:after {
  content: " ";
  display: table;
}
.mcard-innerk:after {
  clear: both;
}
.mcard-inner img {
  width: 30px;
  height: 30px;
  float: left;
  background-color: #445e79 ;
}
.mcard-inner .username,
.mcard-inner .description,
.mcard-inner .comment {
  display: block;
  margin-left: 50px;
}

.mcard-inner .username {
  font-size: 14px;
  font-weight: 600;
}


.mcard .mcard-inner .rec-no,
.mcard .mcard-inner .comment {
  margin-left: 20px;
}

.mcard .mcard-inner .rec-date,
.mcard .mcard-inner .comment {
  margin-left: 8px;
}

.mcard .rec-controls .link {
  margin-left: 10px;
  margin-right: 10px;
}

/* LINE ITEM - MOBILE-CARD LINE ITEM STYLES */

.mobln-container
{
	padding:0px;
	font-size:16px;
	display:block;
}
.mobln
{
	border-top:6px solid #dbdbdb ;
	padding:5px;
}

.mobln-inner:before,
.mobln-inner:after {
  content: " ";
  display: table;
}
.mobln-innerk:after {
  clear: both;
}
.mobln-inner img {
  width: 30px;
  height: 30px;
  float: left;
  background-color: #1a8e69 ;
}
.mobln-inner .username,
.mobln-inner .description,
.mobln-inner .comment {
  display: block;
  margin-left: 50px;
}

.mobln .mobln-inner .rec-no,
.mobln .mobln-inner .comment {
  margin-left: 20px;
}

.mobln .mobln-inner .rec-date,
.mobln .mobln-inner .comment {
  margin-left: 8px;
}

.mobln .rec-controls .link {
  margin-left: 10px;
  margin-right: 10px;
}

/* INDIVIDUAL PARTS STYLES */


 .rec-no {
  font-size: 16px;
  font-weight: 600;
  display:inline;
}
 .rec-date {
  color: #999;
  font-size: 12px;
  display:inline;
  font-weight: 600;
}

 .rec-title {
  font-size: 14px;
  font-weight: 600;
  margin-top:4px;
}

 .description {
  color: #999;
  font-size: 14px;
  margin-top:4px;
}

.rec-supplier {
  font-size: 16px;
  font-weight: 800;
  color:#791d67;
   margin-top:1px;
}

 .rec-location {
  font-size: 14px;
  font-weight: 600;
  color:blue;
   margin-top:1px;
}

 .rec-class {
  font-size: 12px;
  font-weight: 600;
  color:green;
  margin-top:1px;
}

 .rec-status {
  font-size: 14px;
  font-weight: 600;
  color:brown;
  margin-top:1px;
}

 .rec-references {
  font-size: 12px;
  font-weight: 300;
  color:darkgray;
  margin-top:1px;
}

 .rec-orders {
  font-size: 12px;
  font-weight: 300;
  color:#008dd2;
  margin-top:1px;
}


 .rec-grns {
  font-size: 12px;
  font-weight: 300;
  color:#ca6206;
  margin-top:1px;
}

 .rec-invoices {
  font-size: 12px;
  font-weight: 300;
  color:#c117af;
  margin-top:1px;
}


.rec-final-total {
  font-size: 22px;
  font-weight: 600;
  margin-top:4px;
  color: #b3b3b3;
}

.rec-required {
  font-size: 12px;
  font-weight: 300;
  color:orange;
  margin-top:1px;
}



 .rec-item-name {
  font-size: 16px;
  font-weight: 600;
  margin-top:4px;
  margin-left:8px;
  display:inline;
}

 .rec-item-code {
  font-size: 14px;
  font-weight: 600;
  color:#999;;
}

 .rec-quantity {
  font-size: 16px;
  font-weight: 300;
  color:green;
  margin-top:4px;
}

 .rec-unit {
  font-size: 12px;
  font-weight: 300;
  color:#828282  ;
  margin-top:4px;
}

 .rec-rate {
  font-size: 16px;
  font-weight: 300;
  color:brown;
  margin-top:4px;
}

 .rec-subtotal {
  font-size: 16px;
  font-weight: 300;
  color:blue;
  margin-top:4px;
}

 .rec-taxes {
  font-size: 12px;
  font-weight: 300;
  color:gray;
  margin-top:4px;
}

 .description {
  color: #999;
  font-size: 12px;
  margin-top:4px;
}

.rec-references {
  font-size: 12px;
  font-weight: 300;
  color:darkgray;
  margin-top:1px;
}


 .rec-controls {
  margin-top: 8px;
  color:lightgray;
  
}

/* END MOBILE RELATED SPECIFIC STYLES */


/* GENERALIZED COLORS ETC */

.margin-sm
{
	margin:5px;
}
.margin-md
{
	margin:10px;
}
.margin-lg
{
	margin:20px;
}

.margin-xs-l
{
	margin-left:2px;
}
.margin-xs-r
{
	margin-right:2px;
}
.margin-sm-l
{
	margin-left:5px;
}
.margin-sm-r
{
	margin-right:5px;
}
.margin-md-l
{
	margin-left:10px;
}
.margin-md-r
{
	margin-right:10px;
}
.margin-lg-l
{
	margin-left:20px;
}
.margin-lg-r
{
	margin-right:20px;
}


.bg-main-dark
{
   background-color: #445e79 !important;
}

.bg-main-light
{
   background-color: #75b8c9 !important;
}



/* 
============================
Main Menu Styles
=============================
*/

#wajmenu a {
    text-decoration: none;
}

#wajmenu nav {
    font-family: arial;
    font-size: 12px;
    font-weight: bold;
    margin-left: 10px;

}

#wajmenu ul {
    background: darkorange;
    list-style: none;
    margin: 0;
    padding-left: 0;
    display:block;
}


#wajmenu li {
    color: #fff;
    background: #445e79;
    display: block;
    float: left;
    padding: 1rem;
    position: relative;
    text-decoration: none;
    transition: all 0.5s ease;
    transition-duration: 0.5s;
    white-space: nowrap;

}

.ref-li {
    color: #ff8080 ! important;
}

.txn-li {
    color: #fff;
}

.rep-li {
    color: lightgreen ! important;
}

.sep-li {
    height:1px;
    font-size: 1px;
    padding: 0 ! important;
    border-bottom: 2px solid #94a9bf;
    padding-top: 5px;
    padding-bottom: 5px;
}



#wajmenu li a {
    color: #fff;
}

#wajmenu li:hover,
#wajmenu li:focus-within {
    background: orange;
    cursor: pointer;
}

#wajmenu li:focus-within a {
    outline: none;
}

#wajmenu ul li ul {
    background: orange;
    visibility: hidden;
    opacity: 0;
    min-width: 5rem;
    position: absolute;
    transition: all 0.5s ease;
    margin-top: 1rem;
    left: 0;
    display: none;
}

#wajmenu ul li:hover > ul,
#wajmenu ul li:focus-within > ul,
#wajmenu ul li ul:hover,
#wajmenu ul li ul:focus {
    visibility: visible;
    opacity: 1;
    display: block;
}

#wajmenu ul li ul li {
    clear: both;
    width: 100%;
    padding:5px 20px 5px 30px ;
}

/* 
============================
Login page styles
=============================
*/


.wbsRow
{
    border-bottom: 1px solid lightgray;
}

.wbsData 
{
    font-weight:Bold; 
    font-size:16px;
    border-right:1px solid white;
    background-color: #fffffff ;
}

.wbsWBS
{
    font-weight:bold; 
    font-size:14px;
    border-right:1px solid white;
    background-color: #fffffff ;
    text-align: left;
}

.wbsActivity
{
    font-weight:normal; 
    font-size:14px;
    border-right:1px solid white;
    background-color: #fffffff ;
    color: lightseagreen !important ;
    text-align: left;
}
.wbsActivity a
{
   color: lightseagreen !important ;
}

.defRow
{
    border-bottom:1px;
}

.defData
{
    font-weight:Normal; 
    font-size:14px;
    border-right:1px solid white;
    background-color: #fffffff ;
    text-align: left;
}


.btn-copy, .btn-copy:focus, .btn-copy:active
{
  background-color: #277352; 
  border-color: #266c26;
}

.btn-copy:hover
{
  background-color: #3da477;  
  border-color: #266c26;  
}


.btn-commit, .btn-commit:focus, .btn-commit:active
{
  background-color: #bc3e3e; 
  border-color: #ad1717;
}

.btn-commit:hover
{
  background-color: #9c2525;  
  border-color: #ad1717;  
}

/* WORKFLOW ACTION BUTTONS AND COMMIT, POST BUTTONS */
.wf-action 
{
  background-color: #bc3e3e; 
  border-color: #ad1717;
}
.wf-action:hover
{
  font-weight: bold;
}
.act-submit,.act-submit:hover, .act-submit:focus, .act-submit:active
{
  background-color: #47f292; 
  color: black;
  border-color: #0fc65f;
}
.act-review,.act-review:hover, .act-review:focus, .act-review:active
{
  background-color: #47f292; 
  color: black;
  border-color: #0fc65f;
}
.act-approve,.act-approve:hover, .act-approve:focus, .act-approve:active
{
  background-color: #47f292; 
  color: black;
  border-color: #0fc65f;
}
.act-reject, .act-reject:hover, .act-reject:focus, .act-reject:active
{
  background-color: #ffa5a5; 
  color: black;
  border-color: #ff6161;
}
.act-reset, .act-reset:hover, .act-reset:focus, .act-reset:active
{
  background-color: lightgray;
  color: black;
  border-color: darkgray;
}
.act-cancel,.act-cancel:hover, .act-cancel:focus, .act-cancel:active
{
  background-color: #eee073; 
  color: black;
  border-color: #eccd22;
}
.act-process,.act-process:hover, .act-process:focus, .act-process:active
{
  background-color: #d7bbff; 
  color: black;
  border-color: #ca95ff;
}

.btn-dropper, .btn-dropper:focus, .btn-dropper:active
{
  background-color: chocolate; 
  border-color: chocolate;
}

.btn-dropper:hover
{
  background-color: #9b460a;  
  border-color: #9b460a;  
}

.btn-gray, .btn-gray:focus, .btn-gray:active
{
  background-color: gray; 
  border-color: gray;
}

.btn-gray:hover
{
  background-color: lightgray;  
  border-color: lightgray;  
}

.mandatory::after
{
    color:red;
    content : " *";
}

.c-price 
{
   font-weight: bold;
   font-size: 14px;
   color:brown !important;
}

.c-quantity
{
    font-weight: bold;
   font-size: 14px;
   color:green !important;
}

.c-quantity2
{
    font-weight: bold;
   font-size: 14px;
   color:#014701 !important;
}

.c-subtot
{
    font-weight: bold;
    font-size: 14px;
    color:blue !important;
}

.c-grandtot
{
    font-weight: bold;
    font-size: 16px;
    color:blue !important;
}


.color-combo
{
    width:100px;
    display:inline-block;
    height:28px;
    padding:0px 12px;
}

.prop-subtitle
{
    color:#ffffff;
    background-color: #777777;
    font-size: 18px;
    font-weight: bold;
    padding: 4px;
    padding-left: 10px;
    line-height: 32px;
    
}


.pad-min
{
    padding: 4px;
}

.pad-mid
{
    padding: 10px;
}

.mymodel-title
{
    display:inline;
    margin-left: 5px;
}

.mymodel-image
{
    height:26px;
    margin-top:-7px;
}

.listbox-header {
    color: #444;
    display: block;
    padding: 4px;
    position: relative;
}

.listbox-controls {
    padding: 0px;
}

.prop-content{
    margin-top:-25px;
    min-height: 150px;
    padding: 15px;
        padding-right: 15px;
        padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}


.HeadText
{
    color:#fff;
}

.thead-dark > tr 
{
    background-color: #181818 ;
    color:#fff;
}

.thead-dark
{
    background-color: blue;
    color:white;
}

.second-header
{
    border: 0px solid gold;
    background-color: #445e79; 
}

.login-carousel-box
{
    width:100%; 
    height:400px;
    padding: 30px; 
    float:top;
    vertical-align: top;
    border: 0px solid red;
    
    
}
.login-carousel-inner
{
    width:100%; 
    height:100%;
    padding: 5px; 
    float:top;
    vertical-align: top;
    border: 0px solid lime;
    background-color: white;
    border-radius: 5px;
    
}

.login-carousel-img
{
    width:100%;
    height:100%;
    border-radius: 5px;
}

.carousel-inner-header
{
    position:absolute;
    top:30px;
    left:60px;
    color:#fff;
    font-family: Thahoma;
    font-size: 48px;
    font-weight: bold;
    
}

.carousel-inner-overlay
{
    position:absolute;
    bottom:0px;
    margin-bottom:35px;
    height:70px;
    width:100%;
    color:#fff;
    background-color: black;
    opacity: 0.5;
    font-family: Thahoma;
    font-size: 14px;
    font-weight: normal;
    padding: 10px;
    
}



.title-box-outer
{
    width:100%; 
    height:400px;
    padding: 30px; 
    border-right: 1px dotted #365a88;
    float:top;
    vertical-align: top;
}



.title-box-row1
{
   color:white;
   width:100%;
   font-size: 16px;
   font-weight: bold;
   height: 30px;
   line-height: 35px;
   border: 0px solid green;
   display: inline;
   float:left;
   
    
}
.title-box-row2
{
   color:white;
   width:100%;
   font-family:  Impact, Charcoal, sans-serif;
   font-size: 52px;
   font-weight: normal;
   height: 100px; 
   border: 0px solid lightcoral;
   display: inline;
   float:right;
   padding:5px;
    
}
.title-box-row3
{

   width:100%;
   height: auto; 
   display: inline;
   float:right;
   padding:10px;
    
   background-color: #fff;
   border-radius: 10px;
   border: 0px solid aqua;
   color:gray;
   font-size: 14px;
   font-weight: bold;
}

.title-box-row4
{
   color:white;
   width:100%;
   font-size: 12px;
   line-height: 25px;
   font-weight: bold;
   height: 25px; 
   border: 0px solid green;
   display: inline;
   float:left;
   
    
}

.strip-line-1
{
   width:100%;
   height: 20px; 
   line-height:20px; 
   display: none;
   float:left;
   
   border: 0px solid green;
   color:gray;
   background-color: #fff;
      
   font-size: 18px;
   font-weight: normal;
   text-align: center;
}


.strip-line-2
{
   width:100%;
   height: auto; 
   line-height:60px; 
   display: inline;
   float:left;
   
   border: 0px solid green;
   color:darkgray;
   background-color: #fff;
   
   font-family: Verdana;
   font-size: 26px;
   font-weight: normal;
   text-align: center;
}

.strip-line-2-inner
{
    color:#445e79;
    border:0px solid blue;
    
   font-family: Verdana;
   font-size: 12px;
   line-height: 14px;
   font-weight: bold;
   text-align: center;
   
}

.mid-box
{
   width:100%;
   
   line-height:40px; 
   display: inline;
   float:left;
   
   border: 1px solid green;
   color:darkgray;
   background-color: #fff;
   
   font-family: Verdana;
   font-size: 26px;
   font-weight: normal;
   text-align: center;
}



.icon-line
{
   width:100%;
   
   line-height:40px; 
   display: inline;
   float:left;
   
   border: 0px solid green;
   color:darkgray;
   background-color: #fff;
   
   font-family: Verdana;
   font-size: 26px;
   font-weight: normal;
   text-align: center;
}

.login-title
{
    font-family: sans-serif;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
}

.login-input
{
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:1px solid darkgray;
    width:70%;
    margin-left:10px;
    
    
}

.login-fieldset
{
    display:inline-block;
    padding:2px;
    width:100%;
    border:0px solid green;
}

.dash-block
{
    margin-left:40px; 
    margin-top:30px;
    border-bottom: 2px solid #75b8c9;
}

/* 
============================
end of login page styles
=============================
*/


/* Override the default systems side bar */

.colorful
{
    border-top:2px solid red;
    border-right:2px solid green;
    border-bottom:2px solid blue;
    border-left:2px solid #FF9233;
}

.main-sidebar
{
    overflow-x:hidden ; 
    overflow-y: auto;
    height:100%;
}

/* change color when hover over the line items row highlighting */
.table-hover > tbody > tr:hover {
    background-color: #ede6ee;
}

/* This is for selected row highlighting */
.selectedRow 
{
    border-left:4px solid darkgray;
    background-color:#bec3d7 !important ;
}
.highlightRow 
{
    border-left:4px solid darkgray;
    background-color:#ede6ee !important ;
}



/*Below col-head class created this to check to have a different header for table column headings. not used for the moment.*/
.col-head
{
   font-size: 12px;
   font-weight: bold;
   background-color: gray;
   color:white;
   border-right:1px solid lightgray;
}

.question_head {
  width: 30%;
  font-weight:bold;
  
}

.question_answer {
  width: 30%;
}

.question_text {
  font-weight:bold;
  
}

/* Tabs and Vertical Tabs Implementation*/
/*
.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
}

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}

*/

.tabs-left, .tabs-right {
  border-bottom: none;
  padding-top: 2px;
}
.tabs-left {
  border-right: 1px solid #ddd;
}
.tabs-right {
  border-left: 1px solid #ddd;
}
.tabs-left>li, .tabs-right>li {
  float: none;
  margin-bottom: 2px;
}
.tabs-left>li {
  margin-right: -1px;
}
.tabs-right>li {
  margin-left: -1px;
}
.tabs-left>li.active>a,
.tabs-left>li.active>a:hover,
.tabs-left>li.active>a:focus {
  border-bottom-color: #ddd;
  border-right-color: transparent;
}

.tabs-right>li.active>a,
.tabs-right>li.active>a:hover,
.tabs-right>li.active>a:focus {
  border-bottom: 1px solid #ddd;
  border-left-color: transparent;
}
.tabs-left>li>a {
  border-radius: 4px 0 0 4px;
  margin-right: 0;
  display:block;
}
.tabs-right>li>a {
  border-radius: 0 4px 4px 0;
  margin-right: 0;
}



/* This is for BOQ Line Item editing functions */
.boq_edit_col_header
{
    font-weight:bold; 
    font-size:18px;
    border:2px solid darkgray;
    background-color: darkgray;
    color:#ffffff;
}

.boq_edit_h1  
{
    font-weight:bold; 
    font-size:18px;
    border-right:1px solid lightgray;
    background-color: #fffffff ;
    
}

.boq_edit_sec_row  
{
    font-weight:bold; 
    font-size:18px;
    border-right:1px solid lightgray;
    background-color: #E4E4E4  ;
    
}

.boq_edit_heading 
{
    font-weight:bold; 
    font-size:14px;
    border-right:1px solid lightgray;
    background-color: #fffffff ;
}

.boq_edit_note 
{
    font-weight:bold; 
    font-size:12px;
    border-right:1px solid lightgray;
    background-color: #fffffff ;
}

.boq_edit_line 
{
    font-weight:normal; 
    font-size:12px;
    border-right:1px solid lightgray;
    background-color: #fffffff ;
}

.boq_edit_line_qty
{
    text-align: right;
}

.boq_edit_line_currency
{
    text-align: right;
}

.bor-grp-header
{
    background-color:#f5ecc4;
    color:#445e79;
    font-weight: bold;
}
/*.sched-tree-item
{
   color: #505050;
   background-color:#e4e4e4;
}
*/
.sched-tree-item
{
   color: #445e79;
   background-color:#c2e2ee;
}

.role-header
{
   color: #fff;
   background-color:#445e79;
}

.role-subheader
{
   color: #fff;
   background-color:#75b8c9;
}
.role-tip
{
   color: #ea6d12;
}

/*
SCROLL STOP FOR COLUMN HEADERS*/
/*.gen-table > thead
{
    position: -webkit-sticky;
    position:sticky;
    top:-1px;
}
*/

.gen-table > thead > tr > td
{
    background-color: black;
    position: -webkit-sticky;
    position:sticky;
    top:0px;
}

.pTextMiddle
{
    vertical-align:middle !important;
}

/* END SCROLL STOP FOR COLUMN HEADERS*/



/*
========================================================
CHAT SYSTEM RELATED STYLES
========================================================
*/

#chat-fab {
	position: fixed;
	bottom: 25px;
	right: 170px;
	background: #ffcc00;
	border-radius: 50%;
	padding: 4px;
	cursor: pointer;
	font-size: 12px;
}

#chat-fab .dot {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 8px;
	height: 8px;
	background: red;
	border-radius: 50%;
	display: none; /* hidden by default */
}

#chat-panel {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 350px;
	height: 400px;
	border: 1px solid #ccc;
	border-radius: 10px;
	background: white;
	display: none;   /*     hidden initially */
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	overflow: hidden;

}

#chat-header {
	background: #eee;
	padding: 10px;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	cursor: default; /*move*/
}

#chat-close
{
	cursor: pointer;
}

#chat-body { display: flex; height: calc(100% - 40px);}

#chat-user-list {
	width: 120px;
	border-right: 1px solid #ddd;
	overflow-y: auto;
	padding:3px;
}

.chat-user.selected {
	background-color: #ffdfa5;      /* Light blue */
	border-left: 4px solid #a97a24; /* Blue highlight */
	padding-left: 6px;
	font-weight: bold;
}

.chat-user-has 
{
	background-color: #f9b4b4;      
}


#chat-window {
	flex: 1;
	display: flex;
	flex-direction: column;
}

#chat-messages {
	flex: 1;
	padding: 3px;
	overflow-y: auto;
	overflow-x: hidden;
}


.chat-msg {
	padding: 5px;
	border:1px solid gray;
	border-radius: 8px;
	margin:3px;
}

.chat-msg-unread 
{
   border:3px solid gray;   
}


#chat-input {
	border: none;
	padding: 10px;
	border-top: 1px solid #ccc;
	float:left;
	display:inline;
	height:40px;
	width:80%;
}

.chat-btn-send
{
	border:none;
	background: #867f63;
	color:white;
	border-radius: 4px;
	font-weight: bold;
	float:right;
	display:inline;
	height:40px;
	width:20%;
	padding:4px;
}

.chat-date {
	bottom: 1px;
	right:2px;
	width: 200px;
	color:blue;
	border:none;
	font-size: 9px;
	font-weight: bold;
	display:flex;
}




/* Chrome, Edge, Safari */
.chat-thin-bar::-webkit-scrollbar {
	width: 6px;
}
.chat-thin-bar::-webkit-scrollbar-thumb {
	background: #d9d9d9;
	border-radius: 3px;
}
.chat-thin-bar::-webkit-scrollbar-thumb:hover {
	background: #555;
}

/* Firefox */
.chat-thin-bar {
	scrollbar-width: thin;
	scrollbar-color: #d9d9d9 transparent;
}