/* --------------- Main Background Colour and All Fonts Colour --------------- */
/*
body,
.footer-controls, .content-bar,
#content div,
.modal-content,
body #content input[type="text"] , body #content input[type="password"] {
    color: #4c4c4c;
    background-color: #F4F5F7;
}
*/
																			 
/* -------------  Top Introducer Logo Section  ------------- */
body header section.heading {
              color: white;
        border-top: 1px white;
              border-bottom: 1px yellow;
              font-family: Arial, Tahoma, Geneva;                                    /* font for text (first choice and fallback) */
              background-color: #ffffff;
              }
body header section.heading h1.nav-menu-panel {
              color: #eb0a1e;                                                                          /* Comany Name text */
              font-size: 26px;
              font-family: Arial, Tahoma, Geneva;     
              }
body header section.heading ul.trq-menu-bar > li.trq-menuItem > a {
              color: #eb0a1e;                                                                       /* User Name */
            /* font-family: Arial, Tahoma, Geneva;     */
              }
.keyword-panel a i:before {
         color: #eb0a1e;
}

/* --------------- Table row hover colour --------------- */
.react-bs-container-body > table > tbody > tr:hover,
.react-bootstrap-table > table > tbody > tr:hover,
.react-bootstrap-table > table.table-striped > tbody > tr:hover {
    background-color: #cccccc;
}
							  
/*					 
.rc-collapse > .rc-collapse-item {
    background: black;
    font-size: 1em;
    border: 0;
}
*/

/* --------------- Headers Text Colour --------------- */
#content .rc-collapse > .rc-collapse-item > .rc-collapse-header, #content .non-collapsible-panel > .panel-heading {
    /*background-color: #0291DB;	*/	   
    /*color: white;*/
}				   
.react-autosuggest__input {
              background-color: #eb0a1e;                           /* Search field */
              font-family: Arial, Tahoma, Geneva;     
              }
.keyword-panel .react-autosuggest__input {
              background-color: #fafafa;
              font-family: Arial, Tahoma, Geneva;     
              }


/* -------------  Menu bar background  ------------- */
.sidenav-nav.expanded {
              background-color: #cccccc;
              border-color: #BDC3C6;
              }
.simplebar-scroll-content {
              background-color: #cccccc;
              border-color: #BDC3C6;
              color: white;
              }
.sidenav-nav .sidenav-navitem:hover > .navitem,
.sidenav-nav .sidenav-navitem:hover > .navitem .fa,
.sidenav-nav .sidenav-navitem:hover > .navitem .navIcon > *,
.sidenav-nav .sidenav-navitem:hover > .navitem .navtext > *,
.sidenav-nav .sidenav-navitem.highlighted > .navitem .navicon > *,
.sidenav-nav .sidenav-navitem.highlighted > .navitem .navtext > * {
              color: #eb0a1e;
              background-color: white;
                         }
.sidenav-toggle .icon-bar {
              background-color: #eb0a1e;                                                /* expand and collapse menu */
              }


/* -------------  Menu bar text------------- */
.sidenav-nav .sidenav-navitem > .navitem .navicon, .sidenav-nav .sidenav-navitem > .navitem .navtext, .sidenav-nav .sidenav-navitem > .navitem .navicon > *, .sidenav-nav .sidenav-navitem > .navitem .navtext > * {
              color: #000000;
              }
.sidenav.expanded .sidenav-subnav .sidenav-subnavitem > .navitem {
              color: #000000;
              }
.sidenav-nav .sidenav-navitem:hover > .navitem .navicon, .sidenav-nav .sidenav-navitem:hover > .navitem .navtext, .sidenav-nav .sidenav-navitem.highlighted > .navitem .navicon, .sidenav-nav .sidenav-navitem.highlighted > .navitem .navtext {
              color:  #000000;
              }
.sidenav-subnav .sidenav-subnavitem .navtext {
              color: #000000;
              }
.sidenav-nav .sidenav-navitem.highlighted {
              color: #eb0a1e;
              background-color: white;
}

.sidenav-subnav .sidenav-subnavitem:hover > *,
.sidenav-subnav .sidenav-subnavitem:hover .fa,
.sidenav-subnav .sidenav-subnavitem:hover .navtext {
              color: #eb0a1e;
}

/* -------------  Menu bar line to the tight  ------------- */
.sidenav-nav {
              border-right: dotted 1px;
              border-right-color: #eb0a1e;
              }

/* -------------  content page title  ------------- */
.trq-page-title {
             color: black;
             font-family: Arial, Tahoma, Geneva;   
              }


/* -------------  Collaps Headers color  ------------- */
#content .rc-collapse > .rc-collapse-item > .rc-collapse-header, #content .non-collapsible-panel > .panel-heading {
              background-color: #efefef;
              /* color: white; */
              color: #000000;
             border-color:  #eb0a1e;
             font-family: Arial, Tahoma, Geneva;                      /* font for text */
              font-weight: lighter;
              }

/* -------------  data sections in quotation form  ------------- */
.panel {
             color: black;
             background-color: white;
             border-color: #BDC3C6;
             font-family: Arial, Tahoma, Geneva;                /* font for text */
              } 


/* -------------  Buttons  ------------- */
body #content button.trq-dropdownButton {
              border-radius: 0;
              padding: .25em .5em .35em;
              color: black;
              background: #CCCCCC;
             border-color: #D4D4D4;
             font-family: Arial, Tahoma, Geneva;               /* font for text */
              }


/* -------------  8 Icon/Glyphicon color Not At The footer eg. 'edit asset'  ------------- */
.trq-btn i:before, .trq-btn span:first-child:before, .trq-icon-btn i:before, .trq-icon-btn span:first-child:before {
              color: black;
              font-size: 14px;
              position: relative;
              top: .15em;
              padding: 0;
              }


/* -------------  The Header For Tables On The Page E.G Payment Structure  ------------- */
#content div table th {
             color: white;
             background-color:  #666666;
             font-family:Arial, Tahoma, Geneva;               /* font for text */
              }

.react-bs-table .sort-column .icon-group .glyphicon {
             color: white;
}

/*Growls*/	
.ui-growl .ui-growl-message-success {
    background-color: #ffffff;
    color: #000000;
    border-color: #EB0A1E;
}
								
								   
		

.ui-growl .ui-growl-message-info {
    background-color: #ffffff;
    color: #000000;
    border-color: #EB0A1E;
}

.ui-growl .ui-growl-message-error {
    background-color: #ffffff;
    color: #EB0A1E;
    border-color: #EB0A1E;
}
.ui-growl .ui-growl-title {
    font-size: 12px;
    font-weight: bold;
				 
}

.ui-growl-title {
    font-size: 14px;
    padding: 0 0 .5em 0;
    display: block;
}
/* -------------  Total Payment color  ------------- */
footer .controls .glyphicons > span {
              color: white;
}
.content-bar .prominent-footer-label li > div > span {
              display: flex;
              align-items: center;
              font-size: 24px;
              background-color: #666666;
             font-family: Arial, Tahoma, Geneva;                            /* font for text */
                           }



/* --------------- color for Glyphicons Footer (and writing) --------------- */
.glyphicons {
    color: #000000;
              }


/* --------------- Background and Text Glyphicon Buttons --------------- */
#content section.toolbar div.container-fluid nav.tools nav > ul>li>button.trq-btn,
#content section.toolbar div.container-fluid nav.tools nav > ul>li>a {
              color: white;
              background-color: #666666;
              display: flex;
              }
#content nav.tools ul > li > a i:before,
#content .ui-panel nav.tools ul > li > a i:before,
#content nav.tools ul > li > span i:before,
#content .ui-panel nav.tools  ul > li > span i:before,
#content nav.tools ul > li button i:before,
#content .ui-panel nav.tools ul > li button i:before {
              color: white;
}

/* ------ hover background color or Glyphicons at the bottom ------- */
#content nav.tools ul > li > a:hover,
#content .ui-panel nav.tools ul > li > a:hover,
#content nav.tools ul > li > span:hover,
#content .ui-panel nav.tools ul > li > span:hover,
#content nav.tools ul > li button:hover,
#content .ui-panel nav.tools ul > li button:hover {
              color: black;
              background-color: white;
              }

#content nav.tools ul > li:hover > a,
#content .ui-panel nav.tools ul > li:hover > a,
#content nav.tools ul > li:hover button,
#content .ui-panel nav.tools ul > li:hover button {
              color: black;
}


/* -------- text color Glyphicons at the bottom ----- */
#content nav.tools > ul > li > a,
#content .ui-panel nav.tools > ul > li > a,
#content nav.tools > ul > li > span,
#content .ui-panel nav.tools > ul > li > span,
#content nav.tools > ul > li button,
#content .ui-panel nav.tools > ul > li button,
#content section.toolbar div.container-fluid nav.tools > ul > li > button.trq-btn {
              color: white;
              }

/* --------------- Hover color Glyphicons --------------- */
.toolbar ul li .trq-btn.btn.btn-default:hover .glyphicons
 {
              background: none;
              color: #eb0a1e;
              }
#content nav.tools ul > li > a:hover i:before,
#content .ui-panel nav.tools ul > li > a:hover i:before,
#content nav.tools ul > li > span:hover i:before,
#content .ui-panel nav.tools ul > li > span:hover i:before,
#content nav.tools ul > li button:hover span i:before,
#content .ui-panel nav.tools ul > li button:hover span i:before
 {
              color: #eb0a1e;
              }


/* --------------- The Most 2 Bottom Footers color --------------- */
.footer-controls, .content-bar {
              background-color: #666666;
              border-color: #BDC3C6;
font-family:Arial, Tahoma, Geneva;   
              }


/* --------------- Nothing Now --------------- */
.footer-controls:hover {
              background-color: #666666;
              }


/* --------------- Most 2 Bottome Footer background color --------------- */
#content .footer-controls div,
#content .content-bar div {
              background-color:  #666666;
              font-family: Arial, Tahoma, Geneva;   
              }
#content section.toolbar div.container-fluid nav.tools ul>li>button.trq-btn:hover {
    color: black;
    background-color: white;
}

/* --------------- The Most Bottom Footer Colour --------------- */
footer.fixed section.footer{
              background-color: #313136;
              font-family:Arial, Tahoma, Geneva;   
              }

/* --------------- Background Colour --------------- */
body {
              background-color: #D4d4d4;
              }

/* --------------- Address field background --------------- */
#content .react-autosuggest__container > textarea, #content .react-autosuggest__container > input {
    background-color: white;
}	
	
/* --------------- Hide unwanted fields --------------- */

/* hide the "Accounts Date" in the "Income & Expenses" tab for private individuals */
#tabs-pane-incomeExpensesTab .panel .panel > .panel-body > .form-horizontal {
    display: none;
}

/* --------------- Fix alignment --------------- */

.trq-lg-pct13 {
    width: 12.5%;
}