/* -- COLOUR VARIABLES AND HELPER CLASSES -- */
    :root {
      --ingramblue: #0076CE;
      --secondaryblue: #0E93FF;
      --mutedblue: #9FD1FF;
      --white: #ffffff;
      --black: #000000;
      --bggrey: #f8f8f8;
      --lightgrey: #e5e6e8;
      --mediumgrey: #555555;
      --darkgrey:#3E4247;
      --integrityblue2:#4FBCF0;
      --integrityblue3:#11A2ED;
      --greyblue1: #A4B0BC;
      --greyblue2:#b1bcc8;
      --lightblue: #E1E9EF;
      --lightblue2: #EBF3FA;
      --rowblue: #F8FBFF;
    }
    .text-ingramblue {
      color: var(--ingramblue)!important;
    }
    .text-integrityblue3 {
      color: var(--integrityblue3) !important;
    }
    .text-mutedblue {
      color: var(--mutedblue)!important;
    }
    .text-greyblue2 {
      color: var(--greyblue2)!important;
    }    
    .reverse {
      color: var(--white)!important;
    }
    .bg-lightgrey {
      background-color: var(--lightgrey)!important;
    }
    .bg-ingramblue {
      background-color: var(--ingramblue)!important;  
    } 
    .bg-secondaryblue {
      background-color: var(--secondaryblue)!important;
    }
    .bg-lightblue {
      background-color: var(--lightblue)!important;
    }
    .bg-bggrey {
      background-color: var(--bggrey)!important;
    }    
    .wrapper {
      width: auto;
    }
    body {
      font-size:16px;
      font-family:'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif;
      font-weight:normal;
      line-height:1.5em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      height:100%;
      color: var(--mediumgrey);
      background-color: var(--lightblue);
    }
    body#page_login {
      background-color: var(--ingramblue);      
      min-height: 100vh;      
      color: #ffffff;       
    }
    body#page_home {}    

    h1,h2,h3,h4,h5,h6,p, i {
      text-align: center;
    }
    h1 {
      color:var(--mutedblue);
      font-size: 64px;
    }
    h2 {
      font-size: 24px;
      color: var(--black);
      font-weight: bold;  
      margin: 2em 0em 1em 0em;    
    }
    h3 {
      color: var(--ingramblue);
      font-size: 18px;
      font-weight: bold;
      margin: 2em 0em 1em 0em;
    }
    h4 {
      font-size: 1em;
    }
    h5  {
      font-size: 0.85em;
      font-weight: bold;
    }
    p {
      font-size: 0.85em;
    }

    a {
      text-decoration: none;
    }
    a:hover {
      color: var(--integrityblue3);
    }
    a.big-button {
      padding: 30px;
      display: inline-block;
      position: relative;
      border-radius: 10px;
      width: 100%;
      border: 5px solid var(--white);
      color: var(--mediumgrey);
    }
    a.big-button.secondary {
      border: 5px solid var(--secondaryblue);
      color: var(--white); 
    }     
    a.big-button:hover {
      border: 5px solid var(--secondaryblue);
    }
    a.big-button.secondary:hover {
      border: 5px solid var(--white);
      color: var(--white);
    }
    a.big-button.primary i.fas {
      color:var(--lightblue);
    }
    a.big-button.primary:hover i.fas {
      color:var(--secondaryblue);
    }  
    a.big-button.secondary i.fas {
      color: var(--ingramblue);
    }
    a.big-button.secondary:hover i.fas {
      color: var(--white);
    } 
    .btn-outline-primary, .btn-primary {
      color: var(--ingramblue);
      border-color: var(--ingramblue);     
    }
    .btn-outline-primary:hover, .btn-primary:hover {
      border-color: var(--secondaryblue);   
      background-color: var(--secondaryblue);           
      color: var(--white);
    }

    .btn {
      font-size: 0.85em;
    } 
    footer p {
      color: var(--mutedblue);
      font-size: 0.85em;
      line-height: 1.5em;
    }
    p.copyright {
      text-align: center;
    }
    footer img {
      margin-left: auto;
      margin-right: auto;      
    }
    .flex-container {
      display: flex !important;
      align-items: center;
    }
    ul.inline-list {
      list-style: none;
      margin-bottom: 0;      
    }    
    ul.inline-list li {
      display: inline;
      float: left;
      position: relative;
      margin-right: 1.5em;
    }
    hr {
      color: var(--lightgrey);
      opacity: 1;
    }
/* -- LOGIN PAGE -- */
    #page_login h5, 
    #page_login h6 {
      color: var(--mutedblue);
    }
    #page_login h5:after {
      content: '';
      height: 1px;
      width: 30px;
      display: block;
      position: relative;
      margin-top: 0.75em;
      margin-bottom: 0.75em;
      margin-left: -15px;
      left: 50%;
      background-color: var(--mutedblue);
    }  

/* -- QUOTE DETAILS -- */
  .tab {
    background-color: var(--white);
    display: block;
    position: relative;
  }
  #tab-customer-details, #tab-quote-items {
    display: none;
  }
  a.show.tab-selector {
    background-color: var(--lightblue2);
    display: block;
    position: relative;
    padding: 20px;
  }
  a.show.tab-selector:hover {
    cursor: pointer;
  }  
  a.show.tab-selector.current {
    background-color: var(--white);
  }  
  .padded-content {
    padding: 30px;
    position: relative;
  }

/* -- HEADER -- */
    header {
      background-color: var(--ingramblue);
      padding: 1em 0;    
    }
    header h1.branding {
      font-size: 24px;
      font-weight: bold;
    }
    header .list-group-item {
      background-color: transparent;
      border: none;
      border-radius: 0px;
    }
    header .list-group-item p {
      color: var(--mutedblue);
    }
    header .list-group-item a,
    header .list-group-item span {
      color: var(--white);
      font-weight: bold;
    }
    header .list-group-item a:hover {
      color: var(--secondaryblue);
    }
/* -- NAVIGATION -- */    
    .navbar {
      background-color: var(--white);
      padding: 1.5em 0em;
    }
    .nav-item {
      margin-right: 1.5em;
      font-weight: bold;
      padding: 1em 0;
      border-bottom: 1px solid var(--lightblue);
    }
    ul li.nav-item:last-child {
      border-bottom: none;
    }
    .dropdown-menu {
      border-radius: 0px;
      border: none;
      padding: 0;
    }
    .dropdown-item {
      padding: 0.75em 0;
      background-color: transparent;      
    }
    .dropdown-item:hover {
      background-color: transparent;
      color: var(--ingramblue);
    }
    /*Vertical Navigation Bar*/

    ul.vertical-navigation-bar {
      list-style: none;
      margin-top: 100px;
      width: 200px;
      margin-left: 0;
      padding-left: 0;
      position: fixed;
    }
    ul.vertical-navigation-bar li {
      width: 100%;
    }    
    ul.vertical-navigation-bar li a {
      display: block;
      border-top: 1px solid var(--white);
      padding: 1em 0em 1em 0em;
      width: 100%;
    color: rgba(0,0,0,.55);
      font-weight: bold;
    }
    ul.vertical-navigation-bar li a:hover {
      border-top: 1px solid var(--secondaryblue);
      color: var(--secondaryblue);
    }

/* -- TABLES -- */
    table {
      border-collapse: collapse;
      border-radius: 10px;
      overflow: hidden;
    }
    table.flush {
      border-radius: 0px;
    }
    .table>:not(caption)>*>*  {
      padding: 10px 15px;
      font-size: 0.85em;
      background-color: var(--white);
      line-height: 1.5em;
    }
    .table>:not(:last-child)>:last-child>* {
      border-bottom-color:var(--lightblue) ;
    }
    .table-striped>tbody>tr:nth-of-type(odd) {
      --bs-table-accent-bg: var(--rowblue);
    }
    .table-hover>tbody>tr:hover {
      --bs-table-accent-bg: var(--secondaryblue);
      color: var(--white);
    }
    .table>:not(caption)>*>th {
      background-color: #EBF3FA;
    }
    th a.sort {
      color: var(--black);
    }
/* -- BREADCRUMBS -- */    
    .breadcrumbs ul.list-group li.list-group-item {
      background-color: transparent;
      border: none;
      color: var(--mediumgrey);
      font-size: 0.85em;
    }
    .breadcrumbs ul.list-group li.list-group-item:after {
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      font-family: "Font Awesome 6 Pro"; font-weight: 900; content: "\f105";
      padding-left: 1em;
      color: var(--greyblue2);
    }   
    .breadcrumbs ul.list-group li.list-group-item:first-child{
      padding-left: 0px;
    }
    .breadcrumbs ul.list-group li.list-group-item:last-child{
      color: var(--greyblue2);
    }    
    .breadcrumbs ul.list-group li.list-group-item:last-child:after {
      display: none;
    }    
      
/* -- RESPONSIVE -- */

  /*If device is greater than or equal to 768px, then do*/
    @media only screen and (min-width: 768px) {
      h1,h2,h3,h4,h5,h6,p, i {
        text-align: left;
      }
      p.copyright {
        text-align: right;
      }
      footer img {
        margin-left: 0;
        margin-right: 0;      
      }
      #page_login h5:after {
        margin-left: 0;
        left: 0;
      }                                
    }
    /*If device is greater than or equal to 976px, then do*/
    @media only screen and (min-width: 976px) {
      .nav-item {
        margin-right: 1.5em;
        font-weight: bold;
        padding: 0;
        border-bottom: none;
      }      
      .dropdown-menu[data-bs-popper] {
        margin-top: 1.5em;
      }
      .dropdown-item {
        padding: 0.75em;
      }             
      .dropdown-item:hover {
        background-color: var(--secondaryblue);
        color: var(--white);
      }                      
    }