/* Remove margin above the button */
.kb2b-navigation-tiles {
    margin: 0px !important;
}
.kb2b-navigation-tiles .lwc-rfo3qhj7u4.comm-tile-menu__item-title.slds-text-align_center {
    padding: 0px !important;
    border-radius: 0px !important;
}
/* Navigation Tiles grey background */
.component-wrapper-spacer:has(.kb2b-navigation-tiles) {
    margin: 0px !important;
}
/* Border radius for tiles */
.kb2b-navigation-tiles .lwc-17q3q6pjb2r.comm-tile-menu__item-tile.comm-tile-menu__image-preview {
    border-radius: 12px !important;
    background-image: none !important;
}
/* Tiles shadow effect on hover */
.kb2b-navigation-tiles .lwc-17q3q6pjb2r.comm-tile-menu__item-tile.comm-tile-menu__image-preview:hover {
    box-shadow: 0px 0px 27.4px 0px rgba(0, 0, 0, 0.06) !important;
}
/* Select each tile to place a category tile by its order */
.kb2b-navigation-tiles .comm-tile-menu__item:nth-child(1) .lwc-17q3q6pjb2r.comm-tile-menu__item-tile.comm-tile-menu__image-preview {
    background-color: #D3E2F3 !important;
}

.kb2b-navigation-tiles .comm-tile-menu__item:nth-child(2) .lwc-17q3q6pjb2r.comm-tile-menu__item-tile.comm-tile-menu__image-preview {
    background-color: #E0E6C6 !important;
}

.kb2b-navigation-tiles .comm-tile-menu__item:nth-child(3) .lwc-17q3q6pjb2r.comm-tile-menu__item-tile.comm-tile-menu__image-preview {
    background-color: #D1DDE1 !important;
}

.kb2b-navigation-tiles .comm-tile-menu__item:nth-child(4) .lwc-17q3q6pjb2r.comm-tile-menu__item-tile.comm-tile-menu__image-preview {
    background-color: #ECCCC1 !important;
}

.kb2b-navigation-tiles .comm-tile-menu__item:nth-child(5) .lwc-17q3q6pjb2r.comm-tile-menu__item-tile.comm-tile-menu__image-preview {
    background-color: #F8E8CF !important;
}

.kb2b-navigation-tiles .comm-tile-menu__item:nth-child(6) .lwc-17q3q6pjb2r.comm-tile-menu__item-tile.comm-tile-menu__image-preview {
    background-color: #F5CEDE !important;
}
/* Making the Image as big as possible inside the tiles */
.kb2b-navigation-tiles .comm-tile-menu__icon.lwc-3bb8jpk2f1o {
    max-width: 100% !important;
    max-height: 100% !important;
}
 /* Tiles Text Styles */
 .kb2b-navigation-tiles .lwc-rfo3qhj7u4.comm-tile-menu__item-title.slds-text-align_center {
    font-weight: 700 !important;
    color: #002B4E !important;
    text-align: center !important;
    font-style: normal !important;
    font-family: "PTSans-Bold" !important;
}
/* Remove underline text title tile */
.kb2b-navigation-tiles .lwc-rfo3qhj7u4.comm-tile-menu__item-title.slds-text-align_center {
    text-decoration: none !important;
}
/* Button background */
.kb2b-navtiles-button {
    padding-top: 8px;
    padding-bottom: 40px;
    background-color:#F4F4F4;
}
/* Button and Text Styles */
.kb2b-navtiles-button .lwc-68jnud16dda.slds-button.slds-button_brand {
    gap: 4px !important;
    height: 42px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 27px !important;
    font-style: normal !important;
    padding: 12px 16px !important;
    border-radius: 999px !important;
    background: #11528F !important;
    font-family: "PTSans-Bold" !important;
}
/* Button hover style */
.kb2b-navtiles-button .lwc-68jnud16dda.slds-button.slds-button_brand:hover {
    background-color: #004881 !important;
}

/* Mobile Styles */
@media only screen and (max-width: 750px) {
    /* Flex layout with even space */
    .kb2b-navigation-tiles .slds-wrap {
        display: flex !important;
        margin: 0 auto !important;
        flex-wrap: wrap !important;
        padding: 32px 0 !important;
        justify-content: space-between;
    }
    /* Tiles Padding */
    .kb2b-navigation-tiles .slds-p-around--small, .slds-p-around_small {
        padding: 8px 8px !important;
    }
    .kb2b-navigation-tiles .lwc-17q3q6pjb2r.comm-tile-menu__item-tile.comm-tile-menu__image-preview {
        height: 100px !important;
    }
    /* Image padding */
    .kb2b-navigation-tiles .lwc-3bb8jpk2f1o.comm-tile-menu__icon-section {
        top: 0 !important;
        height: 72% !important;
        width: 100% !important;
        padding: 8px 8px 4px !important;
    }

    /* Paddings and size of Product Title */
    .kb2b-navigation-tiles .comm-tile-menu__item-banner.lwc-17q3q6pjb2r {
        bottom: 0 !important;
        height: 33% !important;
        width: 100% !important;
        padding: 4px 8px 8px !important;
    }
    /* 3 items per row with spacing */
    .kb2b-navigation-tiles .slds-wrap > * {
        box-sizing: border-box !important;
        width: calc(33.33%) !important;
    }
    .kb2b-navigation-tiles {
        community_navigation-tile-menu-item {
            --dxp-g-spacing-small: 18px;
        }
        /* Title Text Styles */
        .kb2b-navigation-tiles .lwc-rfo3qhj7u4.comm-tile-menu__item-title.slds-text-align_center {
            font-size: 18px !important;
            line-height: 25.2px !important;
        }
    }
}

/* Tablet Styles */
@media only screen and (min-width: 751px) and (max-width: 1024px) {
    .kb2b-navigation-tiles {
        display: block;
        justify-content: center;
        margin: 40px 0 !important;
    }
    /* Product Title Styles */
     .kb2b-navigation-tiles .lwc-4oo5jh2pn2m.comm-tile-menu__item-link {
        font-size: 20px !important;
        line-height: 28px !important;
    }
    /* Tiles Padding */
    .kb2b-navigation-tiles .slds-p-around--small, .slds-p-around_small {
        padding: 0px 9px !important;
    }
    .kb2b-navigation-tiles .lwc-17q3q6pjb2r.comm-tile-menu__item-tile.comm-tile-menu__image-preview {
        height: 110px !important;
    }
     /* Image padding */
     .kb2b-navigation-tiles .lwc-3bb8jpk2f1o.comm-tile-menu__icon-section {
        top: 0 !important;
        height: 73% !important;
        width: 100% !important;
        padding: 8px 8px 4px !important;
    }
    /* Paddings and size of Product Title */
    .kb2b-navigation-tiles .comm-tile-menu__item-banner.lwc-17q3q6pjb2r {
        bottom: 0 !important;
        height: 35% !important;
        width: 100% !important;
        padding: 4px 8px 8px 8px !important;
    }
    .kb2b-navigation-tiles .slds-wrap {
        display: flex !important;
        margin: 0 auto !important;
        max-width: 1000px !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
    }
    /* Make elements grow to fill the available space, avoid overflow */
    .kb2b-navigation-tiles .slds-wrap > * {
        flex-grow: 1;
        flex-basis: 0;
        flex-shrink: 1;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Desktop Styles */
@media only screen and (min-width: 1025px) {
    .kb2b-navigation-tiles {
        display: block;
        justify-content: center;
        margin: 40px 0 !important;
    }
    /* Title Text Styles */
    .kb2b-navigation-tiles .lwc-rfo3qhj7u4.comm-tile-menu__item-title.slds-text-align_center {
        font-size: 22px !important;
        line-height: 30.8px !important;
    }
    .kb2b-navigation-tiles .slds-wrap {
        display: flex !important;
        margin: 0 auto !important;
        flex-wrap: nowrap !important;
        max-width: 1400px !important;
        justify-content: space-between !important;
    }
     /* Tiles Padding */
    .kb2b-navigation-tiles .slds-p-around--small, .slds-p-around_small {
        padding: 0px 9px !important;
    }
    .kb2b-navigation-tiles .lwc-17q3q6pjb2r.comm-tile-menu__item-tile.comm-tile-menu__image-preview {
        height: 170px !important;
    }
     /* Image padding */
     .kb2b-navigation-tiles .lwc-3bb8jpk2f1o.comm-tile-menu__icon-section {
        top: 0 !important;
        height: 77% !important;
        width: 100% !important;
        padding: 8px 8px 4px !important;
    }
    /* Paddings and size of Product Title */
    .kb2b-navigation-tiles .comm-tile-menu__item-banner.lwc-17q3q6pjb2r {
        height: 24% !important;
        width: 100% !important;
        bottom: 0 !important;
        padding: 4px 8px 8px 8px !important;
    }
    /* Make elements grow to fill the available space, avoid overflow */
    .kb2b-navigation-tiles .slds-wrap > * {
        flex-grow: 1;
        flex-basis: 0;
        flex-shrink: 1;
        max-width: 100%;
        box-sizing: border-box;
    }
}