/******** OUR GENERAL BOOTSTRAP AND ETC OVERRIDES FOR BOTH PUBLIC AND ADMIN SIDES ********/
    
    @font-face {
      font-family: "Avenir-Medium";
      src: url("fonts/Avenir-Medium.eot.eot");
      /* IE9*/
      src: url("fonts/Avenir-Medium.eot#iefix") format("embedded-opentype"), /* IE6-IE8 */
      url("fonts/Avenir-Medium.woff2") format("woff2"), /* chrome、firefox */
      url("fonts/Avenir-Medium.woff.woff") format("woff"), /* chrome、firefox */
      url("fonts/Avenir-Medium.ttf.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url("fonts/fa-brands-400.svg#Avenir-Medium") format("svg");
      /* iOS 4.1- */
    }
    
    @font-face {
      font-family: "Avenir-Heavy";
      src: url("fonts/Avenir-Heavy.eot");
      /* IE9*/
      src: url("fonts/Avenir-Heavy.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
      url("fonts/Avenir-Heavy.woff2") format("woff2"), /* chrome、firefox */
      url("fonts/Avenir-Heavy.woff") format("woff"), /* chrome、firefox */
      url("fonts/Avenir-Heavy.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url("fonts/Avenir-Heavy.svg#Avenir Heavy") format("svg");
      /* iOS 4.1- */
    }
    
    @font-face {
      font-family: "Helvetica";
      src: url("fonts/Helvetica.eot");
      /* IE9*/
      src: url("fonts/Helvetica.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
      url("fonts/Helvetica.woff2") format("woff2"), /* chrome、firefox */
      url("fonts/Helvetica.woff") format("woff"), /* chrome、firefox */
      url("fonts/Helvetica.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url("fonts/Helvetica.svg#Helvetica Regular") format("svg");
      /* iOS 4.1- */
    }
    
    @font-face {
      font-family: "Myriad Pro";
      src: url("fonts/Myriad-Pro.eot");
      /* IE9*/
      src: url("fonts/Myriad-Pro.eot#iefix") format("embedded-opentype"), /* IE6-IE8 */
      url("fonts/Myriad-Pro.woff2") format("woff2"), /* chrome、firefox */
      url("fonts/Myriad-Pro.woff") format("woff"), /* chrome、firefox */
      url("fonts/Myriad-Pro.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url("fonts/Myriad-Pro.svg#Myriad Pro") format("svg");
      /* iOS 4.1- */
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    a,
    a:hover {
      text-decoration: none;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
      font-size: 14.4px;
      line-height: 22px;
      color: #333333;
      background-color: #fff;
      max-width: 1600px;
      margin: auto;
      --bs-primary-rgb: 0, 60, 105;
      /* --bs-primary-rgb: 0, 44, 86; */
    }
    
    .form-row,
    .form-group {
      margin-bottom: .7rem;
      /*1rem by default, seemed excessive.*/
    }
    
    .header-section {
      padding: 10px 50px;
    }
    
    .navbar-brand img {
      width: 220px;
    }
    
    .navbar-light .navbar-nav .nav-link {
      color: #002c56;
      /*font-size: 13px;*/
      text-transform: uppercase;
      font-weight: 700;
      padding: 15px;
    }
    
    .navbar-light .navbar-nav .nav-link:focus,
    .navbar-light .navbar-nav .nav-link:hover {
      color: #002c56;
    }
    /* hero-section */
    
    .hero-section {
      background-image: url('images/hero-img.png');
      background-size: cover;
      background-position: center;
      height: 580px;
    }
    
    .hero__inner {
      max-width: 440px;
      padding-top: 180px;
    }
    
    .call-to-action.hero__inner {
      /* similar to hero_inner but can use more width, and no top padding*/
      padding: 0px 0px 10px;
      max-width: unset;
    }
    
    .hero__inner h3,
    .call-to-action h3 {
      font-size: 52px;
      line-height: 52px;
      color: #002c56;
      text-transform: uppercase;
      font-family: "Avenir-Heavy";
      margin-bottom: 10px;
    }
    
    .call-to-action h3 {
      font-size: 40px;
      line-height: 40px;
    }
    
    .hero__inner h5,
    .call-to-action h5 {
      font-size: 32px;
      color: #f07318;
      text-transform: uppercase;
      font-family: "Avenir-Medium";
    }
    
    .call-to-action h5 {
      font-size: 25px;
      line-height: 25px;
    }
    /* description-section */
    
    .description-section {
      border-top: 100px solid #002c56;
    }
    /* description__inner */
    
    .description__inner {
      padding: 60px 60px 60px 100px;
    }
    
    .description__inner h3 {
      font-size: 48px;
      color: #002c56;
      margin-bottom: 30px;
      font-family: "Myriad Pro";
    }
    
    .description__inner p {
      margin-bottom: 30px;
    }
    /* form-section */
    
    .form-section {
      padding: 60px 160px 60px 80px;
    }
    
    .form-section {
      text-align: center;
    }
    
    .form-section h3 {
      font-size: 32px;
      color: #002c56;
      font-weight: 600;
    }
    
    .radio-toolbar {
      margin: 40px 0 10px 0;
      display: flex;
      justify-content: space-between;
    }
    
    .radio-toolbar input[type="radio"] {
      opacity: 0;
      position: fixed;
      width: 0;
    }
    
    .radio-toolbar label {
      display: inline-block;
      background-color: #f07318;
      padding: 10px 20px;
      font-size: 14px;
      color: #fff;
      width: 150px;
      cursor: pointer;
    }
    
    .radio-toolbar label:hover {
      background-color: #002c56;
    }
    
    .radio-toolbar input[type="radio"]:focus+label {
      background-color: #002c56;
    }
    
    .radio-toolbar input[type="radio"]:checked+label {
      background-color: #002c56;
    }
    
    .form__filed input {
      width: 100%;
      border: 1px solid #cbcbcb;
      font-size: 16px;
      color: #999999;
      padding: 8px 15px;
      margin-bottom: 15px;
    }
    
    .form__filed input:focus {
      outline: none;
    }
    
    #form-submit {
      color: #fff;
      border: none;
      box-shadow: 0 4px 0 #0a58ca;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 3px;
      padding: 14px 0;
      transition: all 300ms;
      font-family: "Helvetica";
    }
    
    #form-submit:hover {
      box-shadow: 0 0 0 #0a58ca;
    }
    
    .form__filed ::-webkit-input-placeholder {
      color: #999999;
      font-family: "Helvetica";
    }
    
    .form__filed :-ms-input-placeholder {
      color: #999999;
      font-family: "Helvetica";
    }
    
    .form__filed ::placeholder {
      color: #999999;
      font-family: "Helvetica";
    }
    
    .footer-section {
      background-color: #04529d;
      padding: 40px 0 30px 0;
    }
    
    .copyright p {
      color: #fff;
      font-size: 13px;
      letter-spacing: 2px;
      font-weight: 300;
      margin: 0;
      font-family: "Helvetica";
    }
    
    .copyright p a {
      color: #fff;
    }
    
    .footer-nav ul {
      text-align: right;
      margin: 0;
      padding: 0;
    }
    
    .footer-nav ul li {
      display: inline-block;
    }
    
    .footer-nav ul li a {
      display: block;
      text-transform: uppercase;
      font-size: 13px;
      color: #fff;
      padding: 0 7px;
      line-height: 0px;
      font-family: "Helvetica";
    }
    
    div.has-error {
      background: pink;
    }
    
    @media all and (max-width:991px) {
      .form-row {
        margin-bottom: .4rem;
      }
      .header-section {
        padding: 10px 0;
      }
      .call-to-action.hero__inner {
        padding-bottom: 5px;
      }
      .hero__inner {
        max-width: 65%;
      }
      .hero__inner h3 {
        font-size: 28px;
        line-height: 30px;
      }
      .hero__inner h5 {
        font-size: 17px;
      }
      .description__inner {
        padding: 50px 30px;
      }
      .description__inner h3 {
        font-size: 24px;
        margin-bottom: 20px;
      }
      .form-section {
        padding: 50px 30px;
      }
      .copyright p {
        margin: 0 0 30px 0;
        text-align: center;
      }
      .footer-nav ul {
        text-align: center;
      }
    }
    
    @media all and (max-width:576px) {
      .form-row,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .h1,
      .h2,
      .h3,
      .h4,
      .h5,
      .h6 {
        margin-bottom: .2rem;
      }
      .call-to-action.hero__inner {
        max-width: 95%;
        padding-bottom: 2px;
      }
      .navbar-brand img {
        width: 190px;
      }
      .header-section {
        padding: 0px 0px 5px 0px;
      }
      .navbar {
        padding: 0.2rem 0.5rem;
      }
      .call-to-action.hero__inner h3 {
        font-size: 24px;
        line-height: 25px;
      }
      .call-to-action.hero__inner h5 {
        font-size: 14px;
      }
    }
    
    .cursor-pointer {
      cursor: pointer;
    }
    
    .dataTables_length {
      display: inline-block;
      float: right !important;
    }
    
    .dataTables_length label {
      display: inline;
    }
    
    .dataTables_length select {
      display: inline;
      width: 5rem;
    }
    /* @TODO: UGH! BAH! Using !important like his is lazy! Use CSS specificity  for overrides, !important is 'brute force' and makes future overrides a pain*/
    
    .project-open {
      color: #084408 !important;
    }
    
    .project-completed {
      color: #881818 !important;
      background: rgb(245, 234, 234);
    }
    
    .project-archived {
      color: #5d5a5a !important;
      background: rgba(222, 222, 222);
    }
    
    .project-closed {
      color: rgb(70, 70, 45);
      background: rgb(240, 240, 192);
    }
    /*********************/
    
    .nav-link {
      display: block;
      padding: .15rem;
    }
    
    .supName {
      min-width: 105px;
      max-width: 120px;
      white-space: nowrap;
      text-overflow: ellipsis;
      /*height: 17px;*/
    }
    
    .supName:hover {
      color: navy;
      background-color: #e2f0fb;
    }
    /* Navbar decoration of text, minor chgs, move to css later */
    
    .navbar-dark .navbar-nav .nav-link {
      color: rgba(255, 255, 255, 0.7);
    }
    
    .navbar-dark .navbar-nav .nav-link:hover,
    .navbar-dark .navbar-nav .nav-link:focus {
      color: rgba(255, 255, 255, 0.95);
      text-decoration: underline;
    }
    
    .navbar-dark .navbar-nav .nav-link.disabled {
      color: rgba(255, 255, 255, 0.23);
    }
    
    nav.second-nav,
    .second-nav,
    form.second-nav,
    div.second-nav {
      top: 42px;
    }
    
    thead.log-nav {
      top: 59px;
    }
    
    input.currency {
      text-align: right;
      color: forestgreen;
    }
    /* Project Settings textboxes */
    
    input.out {
      background: #e5fad9c7;
    }
    
    input.in {
      background: #ffedf775
    }
    
    input.both {
      background: #f3f3e3b8;
    }
    /* For the projects drop-down, when too many it goes off page */
    
    #selProjects.dropdown-menu {
      overflow: auto;
      height: 400px;
    }
    
    .modal-dialog.modal-dialog-centered {
      max-width: max-content;
    }
    /*tooltip styling*/
    
    .tooltip-inner {
      font-size: 1.15em;
      border-radius: 5px;
      border-right: 5px solid #BFBFBF;
      border-left: 5px solid #BFBFBF;
      box-shadow: 5px 5px 5px #aaaaaa6b;
      /*width: 60%;*/
    }
    /* Entrant Lookup, aka admin/users info column container */
    
    .userInfoNav {
      width: 195px;
    }

    .notes-col {
      display: none;
    }
    
    .hidden-col {
      display: none;
    }
    /* For responded/answered in admin project view */
    
    .responded {
      font-weight: bold;
      color: #003366;
      margin: 0px -3px;
      /* dirty admin side hack to get past margins */
      /* I gen prefer to stick w/ bootstrap classes/colors, but wanted to match old nadmin */
    }
    
    span.outstanding {
      border-top: 1px #99666E dotted;
      border-bottom: 1px #99666E dotted;
      font-weight: bold;
      color: #99666E;
      /* I gen prefer to stick w/ bootstrap classes/colors, but wanted to match old nadmin */
    }
    /**** ALERTS ***/
    
    .alert {
      position: relative;
      padding: 0.55rem .75rem;
      margin-bottom: .125rem;
      border: 1px solid transparent;
      border-radius: 0.25rem;
    }
    
    .alert-dismissible .close {
      position: absolute;
      top: 0;
      right: 0;
      padding: 0.55rem 1.25rem;
      color: inherit;
    }
    
    .alert * {
      margin-bottom: 0rem;
      font-size: .9em;
    }
    
    .alert label {
      width: 250px;
    }
    /**** DataTables ***/
    
    table.dataTable {
      border-collapse: collapse !important;
    }
    /* column count, for counts -- i.e. in Emailer manageQueue, the 3 columns for email counts (pre, pulled & sent) use this class*/
    
    table .col_count {
      background: rgba(235, 233, 233, 0.466);
      width: 53px;
      border-right: dotted 1px #AAD;
      border-left: dotted 1px #AAD;
      border-collapse: collapse;
      text-align: center;
    }
    
    body table.dataTable.compact tbody th,
    body table.dataTable.compact tbody td {
      padding: 1px;
    }
    
    table.dataTable tbody th,
    table.dataTable tbody td {
      vertical-align: middle;
    }
    
    .btn,
    form select,
    form textarea {
      padding: .375em .475em;
    }
    /* font-awesome - smaller */
    
    button.fa-2x {
      font-size: 1.65em;
    }
    
    button.btn-link.fa-2x,
    a.btn-link.fa-2x {
      text-decoration: none;
      font-size: 1.5em;
    }
    /* apply class "blink" to span or div and text within will flash/blink
   2021-04-02 used in project->alter trackings submit button and should prob be used on any button
   that needs to show an action, item that seeks attention and/or prevent double clicking etc
   simpler ex: https://whatabouthtml.com/demo/demo-create-flashingblinking-text-css3-animations
   */
    
    .blink {
      -webkit-animation: blink 5s ease-in infinite;
      animation: blink 4s ease-in infinite;
    }
    
    @-webkit-keyframes blink {
      50% {
        color: #ffed4a;
        background: #377d13;
        box-shadow: #7fd2c6 0px 0px 15px 1px;
      }
    }
    
    @keyframes blink {
      50% {
        color: #ffed4a;
        background: #377d13;
        box-shadow: #7fd2c6 0px 0px 15px 1px;
      }
    }
    
    h5,
    .h5 {
      font-weight: bold;
    }
    /* subtle transition for nav bar of slion users by ben, 20220307*/
    
    .max-width-500 {
      max-width: 500px;
    }
    
    .rounded-xl {
      border-radius: 1rem !important;
    }
    
    .user-navbar .nav-item a.nav-link {
      transition: .5s all ease-out;
    }
    /* @todo for self (ben) get rid of this !important laziness! */
    
    .user-navbar .nav-item a.nav-link:hover {
      color: #865e07 !important;
      font-size: 1.05em;
      padding-top: 15px !important;
    }
    
    .cursor-pointer {
      cursor: pointer;
    }
    /* Since we use blue buttons on datatables, fade the blue background of selected rows */
    
    div>table.dataTable>tbody>tr.selected>* {
      box-shadow: inset 0 0 0 9999px rgb(13 110 253 / 50%)
    }
    
    .bigCheck {
      width: 40px;
      height: 40px;
    }
    
    .checkboxBorder {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

/* Ben moved this from /views/admin/users/index.blade.php to here, as it's a global style*/

    #referrals {
      width: 100% !important;
    }
    
    #fullJoinSection {
      padding:16px;
      border-bottom:1px solid #dee2e6;
      text-align:center;
    }

    #lstreetLU {
      background-color: #deecfa;
    } 
    #acknowledgement-section {
      display: none;
    }
    #inputAddress:focus, #inputCity:focus, #province:focus, #inputPostal:focus {
      outline: 0;
      border:1px solid #ccc;
      box-shadow:none;
    }
    #secondary_banner {
      color:#eb6e13;
    }