/*
 * These are the variables used throughout the application. This is where
 * overwrites that are not specific to components should be maintained.
 */
/*
 * Colors
 */
/**
 * Base UI colors
 */
/**
 * Disabled UI element colors.
 */
/*
 * Typography
 */
/*
 * Buttons
 */
/*
 * Shadows
 * Numbers represent the "floating height" of element.
 */
/*
 * Transitions
 */
/*
 * Grid
 */
/*
 * Lists
 * These are for lists that are used as selection elements, such as in typeaheads.
 */
/*
 * Borders
 */
/*
 * Container max-widths (Bootstrap 5)
 */
/*
 * Paddings
 */
/*
 * Margins
 */
/*
 * Other
 */
/**
 * Form element colors for MDL
 */
/*
 * Color variables for MDL
 */
.non-compatible-notification {
  border-radius: 10px;
  margin-top: 8px;
  margin-bottom: 8px;
  background-color: #f4f7f6;
  padding: 16px 16px 2px; }
  .non-compatible-notification p {
    font-size: 14px;
    line-height: 20px; }
/*
 * These are the variables used throughout the application. This is where
 * overwrites that are not specific to components should be maintained.
 */
/*
 * Colors
 */
/**
 * Base UI colors
 */
/**
 * Disabled UI element colors.
 */
/*
 * Typography
 */
/*
 * Buttons
 */
/*
 * Shadows
 * Numbers represent the "floating height" of element.
 */
/*
 * Transitions
 */
/*
 * Grid
 */
/*
 * Lists
 * These are for lists that are used as selection elements, such as in typeaheads.
 */
/*
 * Borders
 */
/*
 * Container max-widths (Bootstrap 5)
 */
/*
 * Paddings
 */
/*
 * Margins
 */
/*
 * Other
 */
/**
 * Form element colors for MDL
 */
/*
 * Color variables for MDL
 */
/*
 * These are the variables used throughout the application. This is where
 * overwrites that are not specific to components should be maintained.
 */
/*
 * Colors
 */
/**
 * Base UI colors
 */
/**
 * Disabled UI element colors.
 */
/*
 * Typography
 */
/*
 * Buttons
 */
/*
 * Shadows
 * Numbers represent the "floating height" of element.
 */
/*
 * Transitions
 */
/*
 * Grid
 */
/*
 * Lists
 * These are for lists that are used as selection elements, such as in typeaheads.
 */
/*
 * Borders
 */
/*
 * Container max-widths (Bootstrap 5)
 */
/*
 * Paddings
 */
/*
 * Margins
 */
/*
 * Other
 */
/**
 * Form element colors for MDL
 */
/*
 * Color variables for MDL
 */
/**
 * Set text color for disabled UI elements.
 */
/**
 * Set border color for disabled UI elements.
 */
/**
 * Create a grid with a custom gutter width.
 */
/**
 * Transitions & Positioning
 */
/*
Use collapsed margins to get rid of the top margin of the top item and the
bottom margin of the bottom item inside a container. This is good for when the
margins of the top and bottom items are unknown.

This defaults to setting "overflow: hidden" to prevent margins from also
collapsing *around* this element. If you can't have "overflow: hidden", then you
should pass false and prevent them from collapsing some other way.
*/
services h4 {
  margin: 1.6625rem 0; }

services #service-price-link {
  margin-right: 20px; }

services .service-filters {
  margin-bottom: 25px; }
  services .service-filters h5 {
    color: #999999;
    margin-bottom: 10px; }

services .all-services {
  padding-bottom: 40px; }

services .service-links-container {
  display: flex; }
  @media (min-width: 768px) {
    services .service-links-container {
      justify-content: flex-end; } }

services .services-no-results-list {
  color: #2E3B41;
  font-size: 20px;
  font-family: "relative-medium", sans-serif;
  font-weight: bold;
  letter-spacing: 0;
  font-size: 16px;
  text-align: center; }
  @media (min-width: 768px) {
    services .services-no-results-list {
      font-size: 20px;
      font-family: "relative-medium", sans-serif;
      font-weight: bold;
      letter-spacing: 0; } }

services .oral-featured-service-price {
  color: #999999;
  font-family: "relative-medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-weight: normal;
  letter-spacing: 0;
  margin-top: -5px; }

services .oral-featured-service-name {
  color: #2E3B41;
  font-size: 20px;
  font-family: "relative-medium", sans-serif;
  font-weight: bold;
  letter-spacing: 0;
  font-size: 16px;
  color: #2E3B41;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden; }
  @media (min-width: 768px) {
    services .oral-featured-service-name {
      font-size: 20px;
      font-family: "relative-medium", sans-serif;
      font-weight: bold;
      letter-spacing: 0; } }

services .oral-featured-service-description {
  color: #666666;
  margin-top: 9px;
  max-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; }

services .service-repeater + .service-repeater h5 {
  margin-top: 30px; }

services #show-filters-button-container {
  padding-top: 20px; }

services .oral-services-overlap-hero {
  width: 100%; }
  services .oral-services-overlap-hero.overlap-hero-small {
    padding: 40px; }
  services .oral-services-overlap-hero div.row:not(.grid-card__row) {
    margin: 0; }
  services .oral-services-overlap-hero .grid-cards {
    padding: 0; }
    @media (min-width: 992px) {
      services .oral-services-overlap-hero .grid-cards {
        width: 100%; } }
    services .oral-services-overlap-hero .grid-cards__col {
      display: flex; }
      @media (min-width: 768px) {
        services .oral-services-overlap-hero .grid-cards__col {
          margin-bottom: 30px; } }
  services .oral-services-overlap-hero .container {
    padding: 0; }
  @media (max-width: 991px) {
    services .oral-services-overlap-hero.overlap-hero-small {
      padding: 20px 15px 14px 15px; }
      services .oral-services-overlap-hero.overlap-hero-small .grid-cards {
        margin-left: -15px;
        margin-right: -15px; }
    services .oral-services-overlap-hero .grid-cards > h4 {
      padding: 0 14px; } }

services hr.after-service-group {
  margin: 10px 0 0 0; }
  @media (max-width: 991px) {
    services hr.after-service-group {
      margin-top: 19px; } }

services .oral-services-overlap-hero > div > div > div:last-of-type > hr.after-service-group {
  display: none; }

.template-services #show-filters-button-container {
  margin-top: -30px; }

/*# sourceMappingURL=services.css.map*/