/* Set Datatable pages to 100vh */
.min-vh-100 {
    min-height: 100vh;
}

/* Bootstrap 5 tweak: change color of drop down nav arrow */
.navbar .dropdown-toggle::after {
    color: #6c757d;
}

/* Bootstrap 5 tweak: do not underline links unless hovered over */
a:not([class*="btn"]) {
    text-decoration: none;
}

    /* Bootstrap 5 tweak: do not underline links unless hovered over */
    a:not([class*="btn"]):hover {
        text-decoration: underline;
    }

/* Bootstrap 5 tweak: change the default background-color of the accordion-button when closed/collapsed and change the text to White */
.accordion-button {
    background-color: #f8f9fa;
    color: #000;
}

    /* Bootstrap 5 tweak: change the default color of the accordion-button arrow when closed/collapsed to White */
    .accordion-button:after {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
    }

    /* Bootstrap 5 tweak: removes the accordion drop shadow that outlines the accordion-item */
    .accordion-button:focus {
        box-shadow: inherit;
    }

/* Bootstrap 5 tweak: adds hover effect to a list-group */
.list-group-hover .list-group-item:hover {
    background-color: #E7F1FF;
}

/* Bootstrap 5 tweak: set icon color to primary */
.icon-primary {
    color: #0d6efd;
}

/* Bootstrap 5 tweak: sets tab panel height */
.tab-content {
    display: flex;
}

/* Sets width to 50% on medium screens and above. */
@media (min-width: 768px) {
    .w-md-50 {
        width: 50% !important;
    }
}

    /* Bootstrap 5 tweak: sets tab panel height */
    .tab-content > .tab-pane {
        display: block; /* undo "display: none;" */
        visibility: hidden;
        margin-right: -100%;
        width: 100%;
    }

    /* Bootstrap 5 tweak: sets tab panel height */
    .tab-content > .active {
        visibility: visible;
    }

/* Sets height for autocomplete text box. */
.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    /* prevents horizontal scrollbar from appearing */
    overflow-x: hidden;
    position: absolute;
    cursor: default;
    z-index: 1031 !important;
}
/* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
* html .ui-autocomplete {
    height: 100px;
}

/* Applies to widths less than 992px */
@media only screen and (max-width: 991px) {
    /* Sets YMM search bar drop down list widths */
    #ddlYear, #ddlMake, #ddlCarline {
        width: 100% !important;
    }
}

/* Applies to widths greater than 992px */
@media only screen and (min-width: 992px) {
    /* Sets YMM search bar drop down list widths */
    #ddlYear, #ddlMake {
        width: 11em !important;
    }

    #ddlCarline {
        width: 20em !important;
    }
}

/* Adds semi-transparent overlay to featured products on default page */
.column-overlay {
    position: relative;
}

    /* Adds semi-transparent overlay to featured products on default page */
    .column-overlay .overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.5);
        /* Adjust the opacity value (0 to 1) to control the transparency of the overlay */
        color: #fff;
        padding: 0px;
        width: 100%;
        height: 100%;
        /* Add this to ensure the overlay covers the entire image */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        /* Align the text to the bottom of the overlay */
    }

/* Adds semi-transparent overlay to featured products on default page */
.overlay-content {
    flex: 1;
    /* Allow the text to expand to fill the height of the overlay */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Align the text to the bottom of the column */
}

/* Helps avoid hidden fields from momentarily dislaying in Datatables. */
#noflash {
    display: none;
}

/* Adds loading Spinner to mm-search-results-table.aspx */
#containerexample {
    display: none
}

/* Adds loading Spinner to mm-search-results-table.aspx */
#loadercontainer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

:root {
    --bs-body-font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    font-weight: 700;
}