/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 .loader {
    border: 6px solid #f3f3f3; /* spin bg colour */
    border-top: 6px solid #6f6f6f; /* spin part colour */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    margin: auto 10px;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .hubspot-contact-table-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }

  #hubspot-contact-table-search-form {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }

  /* CSS to deal with colour coding contacts available for prospecting */
  #hubspot-contact-table .contact-row {
    /* light #0A1F44overlay */
    background: linear-gradient(rgba(0, 255, 0, 0.2), rgba(0, 255, 0, 0.2));
  }

  #hubspot-contact-table .contact-row.hubspot-contact-table-row-na {
    /* dark red overlay */
    background: linear-gradient(rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.1));
  }

  #hubspot-contact-table .table-header.contact-row {
    /* no background */
    background: none;
  }

  .hubspot-contact-table-container {
    width: 90%;
  }


  /* CSS to deal with colour coding contacts available for prospecting */
  #hubspot-contact-table {
    width: 100%;
  }

  #hubspot-contact-table-search {
    width: 80%;
  }

/* CSS for div flex table */
#hubspot-contact-table {
    display: flex;
    justify-content: space-between; /* Distribute columns evenly */
    flex-direction: column;
}

#hubspot-contact-table #table-body {
  display: contents;
}

.contact-row {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ccc;
    margin-bottom: 0;
}

.contact-cell {
    flex: 1 1 0px;
    padding: 5px;
    border-right: 1px solid #ccc;
    /* make so columns are equal width by wrapping text */
    width: calc(100% / 7);
}

/* css to fix the section sizing */
.et_pb_section, .et_pb_row, .et_pb_column {
  width: 100% !important;
  max-width: 100% !important;
}

.mobile_menu_bar.mobile_menu_bar_toggle {
  display: none !important;
}

/* alter nav bar to be hidden and fix logo */
#et-top-navigation {
  display: none !important;
}

#logo {
  margin-top: 0 !important;
}

html .et_header_style_left .logo_container {
  margin-top: 20px;
  position: relative;
}

html #main-header {
  background: #000;
  height: 70px;
}