// The Boat Shops
@white: #ffffff;
@muted: #f8f8f8;
@secondary: #ffd700;
@primary: #030303;

@crest: #003b5c;
@centurion: #9e161a;
@supreme: #048c96;
@viaggio: #E7C985;
@blackfin: #f5ba45;
@monterey: #163068;

.black_overlay {
  &-xlight {
      background: rgba(0, 0, 0, .3);
  }

  &-light {
      background: rgba(0, 0, 0, .5);
  }

  &-medium {
      background: rgba(0, 0, 0, .65);
  }

  &-dark {
      background: rgba(0, 0, 0, .8);
  }
}

.white_overlay {
  &-xlight {
      background: rgba(255, 255, 255, .3);
  }

  &-light {
      background: rgba(255, 255, 255, .5);
  }

  &-medium {
      background: rgba(255, 255, 255, .65);
  }

  &-dark {
      background: rgba(255, 255, 255, .8);
  }
}


:root {
  --mm-cta-view-boat-bg: @primary;
  --mm-cta-view-boat-bg-hover: @primary;
  --mm-cta-view-boat-text: @white;
  --mm-cta-check-availability-bg: var(--mm-cta-view-boat-bg);
  --mm-cta-check-availability-bg-hover: var(--mm-cta-view-boat-bg-hover);
  --mm-cta-check-availability-text: var(--mm-cta-view-boat-text);
  --mm-usage-badge-bg: @primary;
  --mm-usage-badge-shadow: transparent;
  --mm-usage-badge-text: @white;
  --mm-title-link-hover: @secondary;
  --mm-monthly-payment-link: darken(@primary, 20%);
  --mm-cta-request-pricing-bg: @primary;
  --mm-cta-request-pricing-shadow: @primary;
  --mm-cta-request-pricing-bg-hover:darken(@primary, 20%);
  --mm-cta-request-pricing-text: #fff;
  --mm-featured-bg:  @secondary;
  --mm-featured-text: @white;
  --mm-featured-card-gradient-to-100: @secondary;
  --mm-featured-card-gradient-via-50: @muted;
  --mm-filter-accent: darken(@primary, 20%);
  --mm-cta-show-more-bg: @primary;
  --mm-cta-show-more-bg-hover: darken(@primary, 20%);
  --mm-cta-show-more-text: @white;
}

#root {
  .ais-InfiniteHits-item {
    button.justify-center.text-center.flex.items-center.gap-2.w-full:hover {
      color: @secondary !important;
    }

    .text-sm {
      a:hover {
        color: @secondary !important;
      }
    }

    a.text-xs:hover {
      color: @secondary !important;
    }
  }

  button {
    font-size: 1rem !important;
  }
}

// Empty State Fix
.hits-empty-state {
  text-align: center;

  svg {
    display: inline-block;
    margin: 0 auto;
  }

  .hits-empty-state-title {
    color: white;
  }

  .hits-empty-state-description {
    color: white;
  }
}

// MM Inventory Archive Fixes
#inventory-archive {
  #root {

    main>div>div>div>div>div>div.hidden {
      display: flex;
      align-items: center;
    }

    main>div>div.hidden {
      h3 {
        letter-spacing: .75px;
      }

      button.ais-RangeInput-submit {
        padding: 5px 20px;
      }

      .overflow-y-scroll {
        overflow: auto !important;
      }
    }
  }

  h2 {
    margin: 0 0 20px 0;
    font-family: Oswald;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.5rem;
    line-height: 1.3;
  }

  @media(max-width:960px) {
    font-size: 1.7rem;
  }

  p {
    font-family: Amiko;
    font-size: 16px;
    font-weight: 500;
  }

    .uk-text-center {
        text-align: center !important;
    }

    .uk-button {
        margin: 0;
        border: none;
        overflow: visible;
        font: inherit;
        color: inherit;
        text-transform: none;
        -webkit-appearance: none;
        border-radius: 0;
        box-sizing: border-box;
        padding: 0 35px;
        vertical-align: middle;
        font-size: 16px;
        line-height: 36px;
        text-align: center;
        text-decoration: none;
        transition: .1s ease-in-out;
        transition-property: color, background-color, background-position, background-size, border-color, box-shadow;
        font-weight: 600;
        background-origin: border-box;

        display: flex;
        align-items: center;
    }

    .uk-button-secondary {
        background-color: gold;
        color: #030303;
        border: 2px solid gold;
    }
}

#boat_single {
    .uk-slidenav {
      padding: 5px 20px;
      margin: 0px;
      border-radius: 3px;
      transform: translateY(44px);
      background-color: transparent;
      border: 2px solid white;
      color: white;
    
      &:hover {
        background-color: white;
        color: black;
      }
    
      &.uk-position-bottom-right {
        right: 7px;
      }
    }
    
    .uk-dotnav {
      display: flex !important;
      height: 10px;
      li {
        padding-left: 5px;
    
        &.uk-active>a {
          background-color: white;
        }
    
        &>a {
          width: 18px;
          height: 10px;
          border-radius: 3px;
          border: 2px solid white;
          background-color: transparent;
          display: block;
          padding: 0px;
    
          &:hover {
            background-color: white;
          }
        }
      }
    }
}


@media (max-width: 960px) {

	#gform_3 .gform_body {
		display: block !important;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
	}

    #gform_3 .gform_footer {
        width: 100% !important;
    }

    #gform_submit_button_3 {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

	#gform_3 .gfield {
		padding: 10px;
		display: block;
		width: 100%;
	}
}

// Toolbar Styles

.tm-toolbar {
	background-color: @primary;
    padding: 0px;

	.uk-container {
		max-width: 1400px;
	}

    p {
        font-size: 16px;
    }

    .uk-grid-medium {
	    padding-bottom: 6px;
	    padding-top: 9px;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            border-bottom: 2px solid @secondary;
        }
    }

    .uk-grid-collapse {
        gap: 30px;
    }

    .uk-icon {
        position: relative;
        top: -2px;
    }

    a:hover {
        text-decoration: none;
        color: @secondary;
    }
}

// Navbar Styles
.uk-navbar-left {
    
    img {
        position: absolute;
        top: -25px;
        left: 0;
        width: 200px;
    }
}

.uk-navbar-dropdown {
  width: 100% !important;
  max-width: 1000px !important;
  left: unset !important;
  right: 0 !important;
  padding: 0px;

  p {
    color: white !important;
    font-size: 16px;
    font-weight: 500;
    padding: 4px 0px;
  }

  h2 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: 'Oswald';
    margin-bottom: 10px;
  }

  .nav-divider {
    border-top: 2px solid @secondary;
    margin-bottom: 10px !important;
  }
}

.gr-Hnav-dropdown-container.remove-padding {
  padding: 0px !important;
}

.gr-Hnav-dropdown-container {
  padding: 15px;
  background-color: @primary;
  min-height: 200px;

  h2 {
    border-bottom: @secondary  2px solid;
    color: white;
  }

  .uk-list {
    margin-top: 10px;
    padding-left: 10px;

    li {
      margin-top: 2px;
    }
  }
  
  .gr-Hnav-heading-top {
    margin-top: 0px;
    margin-bottom: 10px;
  }
  
  .gr-Hnav-heading {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
  }

  a:not(.uk-icon) {
    color: white;
    padding: 4px 0px;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    display: inline-block;

    &:hover {
      color: @secondary;
      text-decoration: none;
    }
  }


  .min-width-278 {
    min-width: 278px;
  }
}

.gr-nav-brand-switcher-control-container {
  
  p {
    margin: 0px;
    font-family: 'Oswald';
  }

  li {
    width:  ~"calc(100% + 20px)";

    a {
      padding-left: 7px !important;
      transition: all .1s ease-in-out;
      border: none !important;
      padding-top: 10px !important;
      padding-bottom: 10px !important;
      background-color: @primary !important;
    }

    &.uk-active {
      
      a {
        background-color: @secondary !important;
      }

      p {
        color: @primary !important;
      }
    }

    a:hover {
        background-color: @secondary !important;
      p {
        color: @primary !important;
      }
    }

    p {
      font-weight: 500 !important;
      font-size: 22px !important;
      color: #333;
      transition: all .1s ease-in-out;
    }
  }

  .logo-div {
    width: 30px;
    height: 30px;

    padding: 4px;
    border-radius: 5px;
    background-color: @white;

    svg {
      width: 100%;
      height: auto;
    }

    &.logo-div-supreme {
      &>div {
        height: 100%;
      }
      svg {
        height: 100%;
        width: auto;
      }
    }
  }
}

.gr-nav-brand-switcher-container {

  a:hover {
    p {
      color: @secondary !important;
    }
  }

  padding-bottom: 15px;
  padding-left: 10px;
  padding-right: 15px;
  padding-top: 10px;

  .brand-logo-container>svg {
    padding: 4px;
    border-radius: 5px;
    background-color: white;
    width: 100%;
    height: auto;
  }

  .models-grid {
    .image-container {
      background-color: @white;
      padding: 4px;
      border-radius: 5px;
    }
  }

  .bottom {
    p {
      margin: 0px;
    }
  }

  .uk-slidenav {
    padding: 5px 20px;
    margin: 0px;
    border-radius: 3px;
    transform: translateY(44px);
    background-color: transparent;
    border: 2px solid white;
    color: white;

    &:hover {
      background-color: white;
      color: black;
    }

    &.uk-position-bottom-right {
      right: 7px;
    }
  }

  .uk-dotnav {
    display: flex !important;
    height: 10px;
    li {
      padding-left: 5px;

      &.uk-active>a {
        background-color: white;
      }

      &>a {
        width: 18px;
        height: 10px;
        border-radius: 3px;
        border: 2px solid white;
        background-color: transparent;
        display: block;
        padding: 0px;

        &:hover {
          background-color: white;
        }
      }
    }
  }

  .uk-subnav.uk-subnav-pill {
    margin-bottom: 10px;
    li {
        a {
            padding: 7px 20px 4px 20px;
            display: flex !important;
            width: auto;

            background-color: @primary;
            color: white;
        }

        a:hover {
            background-color: @secondary;
            color: @primary;
        }
    }

    li.uk-active {
        a {
            background-color: @secondary;
            color: @primary;
        }
    }
  }
}

.uk-navbar-toggle {
  color: @secondary;
}

.tm-header-mobile {
  .uk-navbar-left {
    img {
        position: relative;
        top: unset;
      height: 44px;
      padding: 3px 0px;
      width: auto;
    }
  }
}

#tm-dialog-mobile {
  background-color: @primary !important;
  z-index: 999 !important;
}

#custom_html-2 {
  margin-top: 10px;
  
  .toggle_sub {
    display: none !important;
  }

  .uk-nav-sub ul {
      padding-left: 0px;
  }

  ul.uk-nav-sub {
      padding-left: 0px !important;
  }

  .uk-nav-accordion>li>a {
      font-size: 20px;
      line-height: 22px;
      font-weight: 600;
      color: white;

      &:hover {
          color: @secondary;
      }
  }

  .uk-accordion>li {
      &>a {
          font-size: 18px;
          line-height: 20px;
          padding: 5px 0px;
          color: white;
  
          &:hover {
              color: @secondary;
          }
      }
      
      ul {
          font-size: 16px;
          font-weight: 500;

          p {
              font-weight: 500;
              color: white;
          }

          a:hover {
              color: @secondary;
          }
      }
  }

  .logo-square-container {
      width: 35px;
      padding: 4px;
      border-radius: 5px;
      background-color: white;

      &.supreme>* {
          max-height: 35px;
      }

      &>* {
          width: 100%;
          height: auto;
      }
  }

  .socials {
      .uk-icon {
          padding: 8px;
      }
  }

  .uk-offcanvas-bar:not(.no-image-back) {
      .image-container {
          background-color: white;
          border-radius: 5px;
      }
  }

  .uk-offcanvas {
      z-index: 9999 !important;
  }

  .uk-offcanvas-bar {
      background-color: @primary;

      h5 {
          width: 100%;
          border-bottom: 2px solid @secondary;
          font-size: 1.75rem;
      }

      .nav-divider {
          border-bottom: 2px solid @secondary;
          margin-bottom: 20px;
      }

      .brand-logo-container>* {
          max-width: 250px;
          width: 100%;
      }

      .image-container {
          padding: 5px;
      }

      .models-grid {
          p {
              font-size: 18px;
          }
      }
  }

  p {
      margin: 0px;
      color: white;
  }

  a {
    color: white;

    &:hover {
      color: @secondary !important;
    }
  }

  .uk-icon {
    color: white;
  }

  .brand-nav-container {
    h2 {
        border-bottom: 2px solid @secondary;
    }

    .uk-slidenav {
        padding: 5px 20px;
        margin: 0px;
        border-radius: 3px;
        transform: translateY(44px);
        background-color: transparent;
        border: 2px solid white;
        color: white;

        &:hover {
          background-color: white;
          color: black;
        }

        &.uk-position-bottom-right {
          right: 7px;
        }
    }

    .uk-dotnav {
        display: flex !important;
        height: 10px;
        li {
          padding-left: 5px;

          &.uk-active>a {
            background-color: white;
          }

          &>a {
            width: 18px;
            height: 10px;
            border-radius: 3px;
            border: 2px solid white;
            background-color: transparent;

            &:hover {
              background-color: white;
            }
          }
        }
    }
  }
}

// Global Styles

.square-1-2-4 {
  height: 23vw;
  
  @media(max-width: 959px) {
    height: 45vw;
  }

  @media(max-width: 639px) {
    height: 90vw;
  }
}

.square-1-2-3 {
  height: 28vw;
  
  @media(max-width: 959px) {
    height: 45vw;
  }

  @media(max-width: 639px) {
    height: 90vw;
  }
}

.square-1-2 {
  aspect-ratio: 1/.9;
}

.padding-top-remove {
  padding-top: 0px;
}

.padding-bottom-remove {
  padding-bottom: 0px;
}

.ctas-inline {

  .check-circle {
    position: relative;
    top: -1px;
  }
}

.uk-button {
  padding-top: 3px;
}

.uk-subnav.uk-subnav-pill {
  li>a {
    padding-top: 10px;
  }
}

.uk-card-black {
  background-color: @primary;
}

.uk-section-primary.uk-background-repeat.uk-background-fixed.uk-background-center-center {
    @media(max-width:960px) {
        background-size: 700px 700px;
    }
}

.uk-card-primary {
  background-color: @primary !important;
}

.uk-background-primary {
  background-color: @primary !important;
}

.background-fixed {
    background-color: #0f0f0f !important;
}

.uk-position-center {
    top: 50%;
    left: 50%;
    --uk-position-translate-x: -50%;
    --uk-position-translate-y: -50%;
    transform: translate(-50%, -50%);
    width: max-content;
}

@media (min-width: 960px) {
    .uk-section-special {
        padding-top: 90px;
    }
}

.uk-modal-body {
    overflow: hidden;
}


//Headers
.home-header {
    .black_overlay-medium {
        @media(min-width:960px) {
            border-top-left-radius: 5px;
        }
    }

  .h1-target {
    position: relative;
    width: fit-content;
    font-weight: 600;

    span {
      display: block;
      font-size: 3.5rem;
    }

    span:nth-child(1) {
      padding-bottom: 10px;
      margin-bottom: 4px;
      border-bottom: @secondary 2px solid;
      text-transform: uppercase;
    }

    span:nth-child(2n) {
      font-size: 1.75rem;
      position: relative;
      letter-spacing: 1.5px;
    }
  }
}

.company-header {
  .h1-target {
    position: relative;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2.5rem;

    span {
      display: block;
      font-size: 2.5rem;
      font-weight: 600;
    }

    span:nth-child(2n) {
      font-size: 1.25rem;
      position: relative;
      text-transform: capitalize !important;
      letter-spacing: 1.5px;
    }
  }
}

.inventory-archive-header {
  .h1-target {
    position: relative;
    width: fit-content;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2.5rem;

    span {
      display: block;
      font-size: 2.5rem;
      font-weight: 600;
    }

    span:nth-child(2n) {
      font-size: 1.25rem;
      position: relative;
      letter-spacing: 1.5px;
      text-transform: capitalize !important;
    }
  }
}

.sub-header {
  .h1-target {
    position: relative;
    width: fit-content;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2.25rem;

    span {
      display: block;
      font-size: 2.25rem;
      font-weight: 600;
    }

    span:nth-child(2n) {
      font-size: 1.25rem;
      position: relative;
      letter-spacing: 1.5px;
      text-transform: capitalize !important;
    }
  }
}

.brand_archive_header {
    .brand-logo{
        max-width: 400px;
        background-color: white;
        padding: 10px;
        border-radius: 5px;
    }

  .h1-target {
    position: relative;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2.5rem;

    span {
      display: block;
      font-size: 2.5rem;
      font-weight: 600;
    }

    span:nth-child(2n) {
      font-size: 1.25rem;
      position: relative;
      text-transform: capitalize !important;
      letter-spacing: 1.5px;
    }
  }
}

.core-services {

  .uk-cover-container::before {
    content: '';
    height: 0px;
    width: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transition: none;
  }

  .uk-cover-container::after {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .6);
    transition: none;
    border: 0px solid rgba(255, 215, 0, .75);
  }

  a:hover {
    .uk-cover-container::before {
      content: '';
      height: ~"calc(100% - 50px)";
      width: ~"calc(100% - 50px)";
      position: absolute;
      transform: translate(0%, 0%);
      top: 25px;
      left: 25px;
      border: 2px solid rgba(255, 255, 255, .75);
      z-index: 1;
      transition: all .3s ease-in-out;
    }
  
    .uk-cover-container::after {
      content: '';
      height: ~"calc(100% - 100px)";
      width: ~"calc(100% - 100px)";
      position: absolute;
      top: -5px;
      left: -5px;
      background-color: rgba(0, 0, 0, .5);;
      border: 55px solid rgba(0, 0, 0, .75);
      transition: all .3s ease-in-out;
    }
  }

  h2 {
    position: relative;
    z-index: 1;

    span {
      display: block;
    }
  }
}

.boat-shops-about {
  .image-container {
    img {
      max-width: 350px;
    }
  }
}

.top-brands {

    .square-1-2 {
        background-color: @primary;
        transition: all .2s ease-in-out;

        svg {
            fill: white;
            transition: all .2s ease-in-out;
        }
    }

  .centurion:hover {
    background-color: @centurion;

    svg {
        fill: white;
    }
  }

  .supreme:hover {
    background-color: @supreme;

    svg {
        fill: black;
    }
  }

  .crest:hover {
    background-color: @crest;

    svg {
        fill: white;
    }
  }

  .monterey:hover {
    background-color: @monterey;

    svg {
        fill: white;
    }
  }

  .viaggio:hover {
    background-color: @viaggio;

    svg {
        fill: black;
    }
  }

  .blackfin:hover {
    background-color: @blackfin;

    svg {
        fill: black;
    }
  }

  svg {
    width: 100%;
    height: auto;
  }

  img {
    width: 100%;
    height: auto;
  }

  .uk-flex>* {
    width: 80%;
  }
}

.content-section-1 {
  .uk-cover-container {
    overflow: visible;

    &.left::before {
      content: '';
      position: absolute;
      width: ~"calc(100%)";
      height: ~"calc(100%)";
      background-color: @secondary;
      top: 10px;
      left: -10px;
    }

    &.right::before {
      content: '';
      position: absolute;
      width: ~"calc(100%)";
      height: ~"calc(100%)";
      background-color: @secondary;
      top: 10px;
      left: 10px;
    }
  }
}

.our-services {
  .uk-slidenav {
    padding: 5px 20px;
    margin: 0px;
    border-radius: 3px;
    transform: translateY(44px);
    background-color: transparent;
    border: 2px solid white;
    color: white;

    &:hover {
      background-color: white;
      color: black;
    }

    &.uk-position-bottom-right {
      right: 7px;
    }
  }

  .uk-dotnav {
    display: flex !important;
    height: 10px;
    li {
      padding-left: 5px;

      &.uk-active>a {
        background-color: white;
      }

      &>a {
        width: 18px;
        height: 10px;
        border-radius: 3px;
        border: 2px solid white;
        background-color: transparent;

        &:hover {
          background-color: white;
        }
      }
    }
  }

  .uk-switcher {
    .uk-grid {
      .uk-cover-container {
        overflow: visible;
      }
      .uk-cover-container:before {
        content: '';
        position: absolute;
        top: 0;
        left: 1px;
        width: ~"calc(100% - 2px)";
        height: 100%;
        background-color: @secondary;
        transition: all .3s ease-in-out;
      }
    
      a:hover {
        .uk-cover-container:before {
          transform: translate(10px, 10px);
        }
      }
    }

    .uk-slider-items {
      padding-bottom: 15px;
      margin-right: 10px;
    }
  }
}

.pro-shop {
  .uk-cover-container {
    overflow: visible;
  }
  .uk-cover-container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: @secondary;
    transition: all .3s ease-in-out;
  }

  a:hover {
    .uk-cover-container:before {
      transform: translate(10px, 10px);
    }
  }
}

#inventory-archive {
  #root {
    &>.ais-ScrollTo>.bg-white {
      background-color: transparent;
    }

    .clear-filters {
      color: white;

      button:hover {
        color: white !important;
      }
    }
  }
  
  #infinite_list {
    &>.ais-Stats {
      color: white !important;
    }
  }
}

#subpage {
  .widget-menu {
    background-color: white;

    h3 {
      background-color: @secondary;
      padding: 10px;
      margin: 0px !important;
    }

    .uk-list {
      margin: 0px;
      li {
        margin: 0px;

        &:hover {
          background-color: @primary;
          
          a {
            color: white;
          }
        }

        &.uk-active {
          background-color: @primary;
          
          a {
            color: white;
          }
        }

        a {
          display: block;
          padding: 8px 10px 5px 10px;

          &:hover {
            text-decoration: none;
          }
        }
      }
    }
  }

  .content-loop {
    p {
      margin-bottom: 0px;
    }
  }
}

#mraa-commitment {
  .target-div {
    margin-left: 30px;
  }
}

#apply {
    .uk-modal-dialog {
        max-width: 1000px !important;
        width: 100% !important;
    }
}

.other-locations {
    a:hover {
        color: @secondary;
        text-decoration: none;
    }
}

#footer {

    .uk-accordion-content {
        margin-bottom: 10px;
        margin-top: 10px;
    }

    h3 {
        margin: 0 0 20px;
        font-family: Oswald;
        font-weight: 500;
        font-size: 1.4rem !important;
        line-height: 1.4;
        text-transform: uppercase;
        border-bottom: 2px solid @secondary;
    }

    h4 {
        font-weight: 500;
        font-size: 1.25rem;
        line-height: 1.4;
    }

    a {
        font-size: 16px;

        &:hover {
            text-decoration: none;
            color: @secondary;
        }
    }
}

.promotions-slider {

    img {
        width: 100%;
        height: auto;
    }
    
    .uk-slidenav {
      padding: 5px 20px;
      margin: 0px;
      border-radius: 3px;
      transform: translateY(44px);
      background-color: transparent;
      border: 2px solid black;
      color: black;

      &:hover {
        background-color: white;
        color: black;
      }

      &.uk-position-bottom-right {
        right: 7px;
      }
    }

  .uk-dotnav {
    display: flex !important;
    height: 10px;
    li {
      padding-left: 5px;

      &.uk-active>a {
        background-color: black;
      }

      &>a {
        width: 18px;
        height: 10px;
        border-radius: 3px;
        border: 2px solid black;
        background-color: transparent;

        &:hover {
          background-color: black;
        }
      }
    }
  }
}

// MM Styles
.boat-inventory {
.uk-slidenav {
    padding: 5px 20px;
    margin: 0px;
    border-radius: 3px;
    transform: translateY(-32px);
    background-color: transparent;
    border: 2px solid black;
    color: black;

    &:hover {
      background-color: black;
      color: white;
    }

    &.uk-position-bottom-right {
      right: 7px;
    }
  }

  .uk-dotnav {
    display: flex !important;
    height: 10px;
    li {
      padding-left: 5px;

      &.uk-active>a {
        background-color: black;
      }

      &>a {
        width: 18px;
        height: 10px;
        border-radius: 3px;
        border: 2px solid black;
        background-color: transparent;

        &:hover {
          background-color: black;
        }
      }
    }
  }
}


.mm-inventory-item {
  height: 250px;

  p {
    transition: all .3s ease-in-out;
    margin: 0px;
  }

  &:hover {
    p:not(.price-text) p:not(.title-text) {
      color: @primary !important;
    }

    .price {
      background-color: @primary;

      p {
        color: white !important;
      }
    }
  }

  .location {
    position: absolute;
    top: 0;
    left: 0;
    height: fit-content;

    p {
      padding: 5px 6px 2px 6px;
      margin: 0px;
      color: white;
    }
  }

  .price {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-99%);
    background-color: @secondary;
    padding: 5px 6px 2px 6px;
    color: @primary !important;
    transition: all .3s ease-in-out;

    p {
      width: fit-content;
    }
  }

  .title {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 18px 15px 15px 15px;
    width: 100%;
  }

  .title-text {
    color: white;
  }
}

.by-make-section {
    .brand-logo {
        max-width: 400px;
    }
}

.gform_button {
    background-color: @primary !important;
    color: white !important;
}

.gform_footer {
    justify-content: center !important;
}

#manufacturer-single {
    .uk-slidenav {
      padding: 5px 20px;
      margin: 0px;
      border-radius: 3px;
      transform: translateY(44px);
      background-color: transparent;
      border: 2px solid white;
      color: white;
    
      &:hover {
        background-color: white;
        color: black;
      }
    
      &.uk-position-bottom-right {
        right: 7px;
      }
    }
    
    .uk-dotnav {
      display: flex !important;
      height: 10px;
      li {
        padding-left: 5px;
    
        &.uk-active>a {
          background-color: white;
        }
    
        &>a {
          width: 18px;
          height: 10px;
          border-radius: 3px;
          border: 2px solid white;
          background-color: transparent;
          display: block;
          padding: 0px;
    
          &:hover {
            background-color: white;
          }
        }
      }
    }
}

@media(max-width: 960px) {
  .mobile-cta {
    position: fixed;
    top: 50px;
    left: 0;
    border-radius: 0;
    width: 102%;
    z-index: 900;
  }

  .mobile-cta a {
    padding: 0;
    border-radius: 0;

  }

  .mobile-cta a:nth-child(1) {
    padding: 0;
    border-radius: 0;
    border-right: 1px solid @primary;
  }

  .tm-main {
    margin-top: 40px;
  }

}

// Sprites

// Centurion
.centurionfe22, .centurionfi23, .centurionfi25, .centurionri230, .centurionri245, 
.centurionri265
{ max-width: 100%; background-size: 100%; background-image: url('/wp-content/uploads/2024/03/centurion-sprites.png'); }
 
.centurionfe22 { background-position: 0 0%; background-size: 100%; }
.centurionfi23 { background-position: 0 18.934911%; background-size: 100%; }
.centurionfi25 { background-position: 0 39.64497%; background-size: 100%; }
.centurionri230 { background-position: 0 60.35503%; background-size: 100%; }
.centurionri245 { background-position: 0 81.065089%; background-size: 100%; }
.centurionri265 { background-position: 0 100%; background-size: 100%; }

// Monterey

// Super Sport
.monterey_215ss, .monterey_218ss, .monterey_235ss, .monterey_238ss, .monterey_255ss, 
.monterey_258ss, .monterey_275ss, .monterey_278ss, .monterey_298ss, .monterey_305ss, 
.monterey_378ss, .monterey_385ss
{ max-width: 100%; background-size: 100%; background-image: url('/wp-content/uploads/2024/03/Monterey_SuperSports_Sprite_2023.png'); }
 
.monterey_215ss { background-position: 0 0%; background-size: 100%; }
.monterey_218ss { background-position: 0 9.090909%; background-size: 100%; }
.monterey_235ss { background-position: 0 18.181818%; background-size: 100%; }
.monterey_238ss { background-position: 0 27.272727%; background-size: 100%; }
.monterey_255ss { background-position: 0 36.363636%; background-size: 100%; }
.monterey_258ss { background-position: 0 45.454545%; background-size: 100%; }
.monterey_275ss { background-position: 0 54.545455%; background-size: 100%; }
.monterey_278ss { background-position: 0 63.636364%; background-size: 100%; }
.monterey_298ss { background-position: 0 72.727273%; background-size: 100%; }
.monterey_305ss { background-position: 0 81.818182%; background-size: 100%; }
.monterey_378ss { background-position: 0 90.909091%; background-size: 100%; }
.monterey_385ss { background-position: 0 100%; background-size: 100%; }

// M-Series 
.monterey_m-20, .monterey_m-205, .monterey_m-22, .monterey_m-225, .monterey_m-45, 
.monterey_m-65, .monterey_m4, .monterey_m6
{ max-width: 100%; background-size: 100%; background-image: url('/wp-content/uploads/2024/03/Monterey_MSeries_Sprite_2023.png'); }
 
.monterey_m-20 { background-position: 0 0%; background-size: 100%; }
.monterey_m-205 { background-position: 0 14.285714%; background-size: 100%; }
.monterey_m-22 { background-position: 0 28.571429%; background-size: 100%; }
.monterey_m-225 { background-position: 0 42.857143%; background-size: 100%; }
.monterey_m-45 { background-position: 0 57.142857%; background-size: 100%; }
.monterey_m-65 { background-position: 0 71.428571%; background-size: 100%; }
.monterey_m4 { background-position: 0 85.714286%; background-size: 100%; }
.monterey_m6 { background-position: 0 100%; background-size: 100%; }

// Supreme
.supreme-s220, .supreme-s240, .supreme-zs232, .supreme-zs252
{ max-width: 100%; background-size: 100%; background-image: url('/wp-content/uploads/2024/03/supreme-sprites.png'); }
 
.supreme-s220 { background-position: 0 0%; background-size: 100%; }
.supreme-s240 { background-position: 0 33.333333%; background-size: 100%; }
.supreme-zs232 { background-position: 0 66.666667%; background-size: 100%; }
.supreme-zs252 { background-position: 0 100%; background-size: 100%; }

// Viaggio
.viaggio-diamante-2024-black, .viaggio-lagov-white, .viaggio-lagox-green, .viaggio-lagoz-2024-red
{ max-width: 100%; background-size: 100%; background-image: url('/wp-content/uploads/2024/03/viaggio-sprites.png'); }
 
.viaggio-diamante-2024-black { background-position: 0 0%; background-size: 100%; }
.viaggio-lagov-white { background-position: 0 33.333333%; background-size: 100%; }
.viaggio-lagox-green { background-position: 0 66.666667%; background-size: 100%; }
.viaggio-lagoz-2024-red { background-position: 0 100%; background-size: 100%; }

// Blackfin
.blackfin-222cc, .blackfin-232dc, .blackfin-242dc, .blackfin-252cc, .blackfin-272cc, 
.blackfin-302cc, .blackfin-302dc, .blackfin-272dc, .blackfin-400cc, .blackfin-332cc
{ max-width: 100%; background-size: 100%; background-image: url('/wp-content/uploads/2024/03/blackfin-sprites-2024.png'); }
 
.blackfin-222cc { background-position: 0 0%; background-size: 100%; }
.blackfin-232dc { background-position: 0 11.111111%; background-size: 100%; }
.blackfin-242dc { background-position: 0 22.222222%; background-size: 100%; }
.blackfin-252cc { background-position: 0 33.333333%; background-size: 100%; }
.blackfin-272cc { background-position: 0 44.444444%; background-size: 100%; }
.blackfin-302cc { background-position: 0 55.555556%; background-size: 100%; }
.blackfin-302dc { background-position: 0 66.666667%; background-size: 100%; }
.blackfin-272dc { background-position: 0 77.777778%; background-size: 105.610561%; }
.blackfin-400cc { background-position: 0 88.888889%; background-size: 111.498258%; }
.blackfin-332cc { background-position: 0 100%; background-size: 112.676056%; }

// Crest
.crest-classic-dlx, .crest-classic-lx, .crest-classic-platinum
{ max-width: 100%; background-size: 100%; background-image: url('/wp-content/uploads/2024/03/crest-classic-sprites.png'); }
 
.crest-classic-dlx { background-position: 0 0%; background-size: 100%; }
.crest-classic-lx { background-position: 0 50%; background-size: 100%; }
.crest-classic-platinum { background-position: 0 100%; background-size: 100%; }

.crest-caribbean-lx, .crest-caribbean-platinum, .crest-caribbean-rs
{ max-width: 100%; background-size: 100%; background-image: url('/wp-content/uploads/2024/03/crest-premium.png'); }
 
.crest-caribbean-lx { background-position: 0 0%; background-size: 100%; }
.crest-caribbean-platinum { background-position: 0 50%; background-size: 100%; }
.crest-caribbean-rs { background-position: 0 100%; background-size: 100%; }

.crest-continental-nx, .crest-continental, .crest-savannah
{ max-width: 100%; background-size: 100%; background-image: url('/wp-content/uploads/2024/03/crest-ultimate-luxury.png'); }
 
.crest-continental-nx { background-position: 0 0%; background-size: 100%; }
.crest-continental { background-position: 0 50%; background-size: 100%; }
.crest-savannah { background-position: 0 100%; background-size: 100%; }

.crest-current, .crest-current
{ max-width: 100%; background-size: 100%; background-image: url('/wp-content/uploads/2024/03/electric-sprites.png'); }
 
.crest-current { background-position: 0 0%; background-size: 100%; }

// Finance Calculator
.financing-calculator {

  .number-input {
    position: relative;
    width: ~"calc(100% - 40px)";
    padding: 6px 16px 4px 16px;
    border: 4px solid transparent;
    font-size: 16px;
    -moz-appearance: textfield;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */

    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
    }

    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }

    &:focus {
      border: @secondary 4px solid;
      outline: 0 !important;
    }
  }

  .input-container {
    position: relative;
    margin-bottom: 10px;

    .up-down-container {
      position: absolute;
      right: 0;
      top: 22px;
      -webkit-user-select: none; /* Safari */
      -ms-user-select: none; /* IE 10 and IE 11 */
      user-select: none; /* Standard syntax */

      a {
        display: block;
        height: 18px;
        width: 24px;
        position: relative;

        &.up {
          .uk-icon {
            position: relative;
            top: -5px;
            left: 4px;
            color: black;
          }
        }

        &.down {
          .uk-icon {
            position: relative;
            top: -5px;
            left: 4px;
            color: black;
          }
        }
      }
    }

    .form-label {
      font-size: 14px;
    }

    .form-sub-label {
      font-size: 14px;
      margin-top: 3px;
      margin-bottom: 0px;
    }
  }

  .summary-list {
    p {
      font-size: 16px;
      margin: 0px;
    }
  }
}