/* font declaration, need to refer to a URL that doesn't prevent CORS!
@font-face {
    font-family: 'Toyota Type Light';
    src: url(https://www.toyota.com/etc.clientlibs/vis/settings/wcm/designs/vis_fonts/resources/fonts/ToyotaType-Light.ttf) format('truetype')
}
*/
/* --------------- Main Background Colour and All Fonts Colour 09022023 #4c4c4c--------------- */
/*
body,
.footer-controls, .content-bar,
#content div,
.modal-content,
body #content input[type="text"] , body #content input[type="password"] {
    color: #white;
    background-color: #F4F5F7;
}

/* --------------- collapse header capitals --------------- */ 
.rc-collapse.trq-collapsible-panel > .rc-collapse-item > .rc-collapse-header .flex-header .panel-title h3 {
     text-transform: uppercase;
}
#content .rc-collapse > .rc-collapse-item > .rc-collapse-header, #content .non-collapsible-panel > .panel-heading {
         text-transform: uppercase;
}



/* -------------  Top Introducer Logo Section  ------------- */
body header section.heading {
              color: White;
        border-top: 1px white;
              border-bottom: 1px yellow;
              font-family: Toyota Type Semibold, Arial, Tahoma, Geneva;                                  /* font for text (first choice and fallback) */
              background-color: #ffffff;
              }
body header section.heading h1.nav-menu-panel {
              color: black;
              font-size: 26px;
               font-family: Arial, Tahoma, Geneva;     
              }
body header section.heading ul.trq-menu-bar > li.trq-menuItem > a {
              color: #FF0022;                                                                       /* User Name */
          /*  font-family: Arial, Tahoma, Geneva;     */
              }
.keyword-panel a i:before {
         color: #FF0022;
}

/* --------------- 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: #FF0022;                           /* Search field */
              font-family: Toyota Type Light, Arial, Tahoma, Geneva;    
text-transform: uppercase;
              }
.keyword-panel .react-autosuggest__input {
              background-color: #fafafa;
              font-family: Toyota Type Light, Arial, Tahoma, Geneva;     
text-transform: uppercase;
              }


/* -------------  Menu bar background  ------------- */
.sidenav-nav.expanded {
              background-color: #282830;
              border-color: #BDC3C6;
              }
.simplebar-scroll-content {
              background-color: #282830;
              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: #FF0022;
              background-color: white;
                         }
.sidenav-toggle .icon-bar {
              background-color: #FF0022;                                                /* 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 > *,
.sidenav-subnav .sidenav-subnavitem > .navitem,
.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,
.sidenav-subnav .sidenav-subnavitem .navtext,
.sidenav-nav .sidenav-navitem .navitem > i.navtext-expandable, /* collapsed menu arrows */
.document-header-buttons .btn i:before {
    /* color: white;             -- commented out, because it made the collapsed menu items invisible */
}
.sidenav-nav .sidenav-navitem.highlighted {
              color: #FF0022;
              background-color: white;
}

.sidenav-subnav .sidenav-subnavitem:hover > *,
.sidenav-subnav .sidenav-subnavitem:hover .fa,
.sidenav-subnav .sidenav-subnavitem:hover .navtext,
.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,
.document-header-buttons .btn:hover i:before {
    color: #FF0022;
}

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

.list .list-item {
    background-color: white !important;
}


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

/* -------------  content page title  ------------- */
.trq-page-title {
             color: black;
             font-family:Toyota Type Semibold, Arial, Tahoma, Geneva;   
             text-transform: uppercase;      
              }

/* -------------  Collaps Headers color  ------------- */
/* -------------  Arron changed background-color: #efefef;  ------------- */
/* -------------  Arron changed Font added ------------- */
#content .rc-collapse > .rc-collapse-item > .rc-collapse-header, #content .non-collapsible-panel > .panel-heading {
              background-color: #282830;
              /* color: white; */
              color: #FFFFFF;
 /* -------------   border-color:  #FF0022; ------------- */
             font-family: Toyota Type Light, Arial, Tahoma, Geneva;                      /* font for text */
              font-weight: lighter;
text-transform: uppercase;
              }

/* -------------  data sections in quotation form  ------------- */
/* -------------  Most of the Text in Quote Screen  ------------- */
.panel {
             color: black;
             background-color: white;
             border-color: #BDC3C6;
             font-family: Toyota Type Regular, 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'  09022023------------- */
/* ------------- Edit button that looks like clipboard ------------- */
.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  ------------- */
/* -------------  Arron Change  font add ------------- */
#content div table th {
             color: white;
             background-color:  #282830;
             border-color:  #FF0022;
			 /* -------------  Border Colour is line between table heading and items ------------- */
             font-family: Toyota Type Semibold, 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: #FF0022;
}

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

.ui-growl .ui-growl-message-error {
    background-color: #ffffff;
    color: #FF0022;
    border-color: #FF0022;
}
.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: #282830;
              font-family: Arial, Tahoma, Geneva;                            /* font for text */
                           }
						   
						   /* -------------  Dashboard  ------------- */

.list .list-item .item-title {
    font-family: Toyota Type Regular, Arial, Tahoma, Geneva;                  /* Recent Quotation List */
} 

.list.quotation-list .list-item .item-body-bottom-row .item-subtitle,  /* customer and product in recent quotation list */
.status-badge-v2.plain-text.status-badge-v2-success, /* Status in recent list */
.list.quotation-template-list .list-item .item-subtitle, /* template name */
.trq-quotation-template-bottomLine-term /* template term */ {
    font-family: Toyota Type Book, Arial, Tahoma, Geneva;
}

.list .list-item {
    background-color: #EFF0F0 !important;
    border-radius: 6px;
    border: 2px solid #F9F9F9;
    padding: 10px;
}

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


/* --------------- Background and Text Glyphicon Buttons --------------- */
/* --------------- Arron Changed Colour--------------- */
#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: #282830;
              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: #FF0022;
              }
#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: #FF0022;
              }


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


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


/* --------------- Most 2 Bottome Footer background color --------------- */
/* --------------- Arron Added in fonts --------------- */
#content .footer-controls div,
#content .content-bar div {
              background-color:  #282830;
              font-family: Toyota Type Regular, 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: #282830;
               font-family: Toyota Type Regular, 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;
}
/* --------------- Enlarge Quotation Checklist Dialog --------------- */
#quotationChecklistDialog .panel.panel-default {
  height: 325px;
}
/* --------------- Change Color Magnifying Glass in Header --------------- */
.keyword-panel i::before,
.keyword-panel .trq-icon-btn .glyphicons i::before,
.keyword-panel .trq-icon-btn .glyphicons span:first-child::before {
    color: black;
}
/* --------------- Fixed Passwort Input Strength --------------- */
#content .ReactPasswordStrength,
#content .ReactPasswordStrength-input {
    width: 100%;
}

/* collapse header capitals */ 
.rc-collapse.trq-collapsible-panel > .rc-collapse-item > .rc-collapse-header .flex-header .panel-title h3 {
     text-transform: uppercase;
}

#content .rc-collapse > .rc-collapse-item > .rc-collapse-header, #content .non-collapsible-panel > .panel-heading {
         text-transform: uppercase;
}

.quotation-template-container .quotation-template-title {
    color: #FFFFFF !important;
    font-size: 16px;
    font-weight: 600;
}

.quotation-template-container .quotation-template-button {
    background-color:  #FF0022 !important;
    font-weight: bold;
    padding: 8px 10px;
    border-radius: 6px;
    color: #FFFFFF !important;
    font-size: 14px;
}

.fa-caret-down:before {
    content: "\F0D7";
    color: #FFFFFF !important;
}
.fa-caret-up:before {
    content: "\F0D8";
  color: #FFFFFF !important;
}
#tabs-pane-paymentDetailsTab .panel.trq-column-with-button .trq-icon-panel-field {
    width: calc(100% - 39px);
}
#tabs-pane-paymentDetailsTab #verifyIcon {
    padding: 6px 10px;
    margin: 0;
}
#tabs-pane-paymentDetailsTab #verifyIcon i:before {
    font-size: 19px;
}