/* input(124,35): run-time error CSS1046: Expect comma, found '0'
input(124,39): run-time error CSS1046: Expect comma, found '/'
input(393,40): run-time error CSS1046: Expect comma, found '0'
input(393,44): run-time error CSS1046: Expect comma, found '/'
input(419,37): run-time error CSS1046: Expect comma, found '0'
input(419,41): run-time error CSS1046: Expect comma, found '/'
input(459,41): run-time error CSS1046: Expect comma, found '0'
input(459,45): run-time error CSS1046: Expect comma, found '/' */
:root {
    --Blue: #F1F5F9;
    --CategoryNameColor: #034C8E;
    --DropDownBasicLighter: #105594c9;
    --TspDrk: #0459a9;
    --TspLight: #0f6dc7;
}

.CategoryHeaderWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    /* border-bottom: solid 1px var(--LightGray);*/
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .CategoryHeaderWrapper > p {
        margin: 0;
        font-size: xx-large;
    }

    .CategoryHeaderWrapper > svg {
        margin: 5px;
        fill: var(--Blue);
    }
.categoryTag {
    color: #484848;
    font-weight: inherit;
    padding: 0 7px;
    font-size: 18px !important;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ListItem {
    /*margin: 0;*/
    /*background: transparent;*/
    font-size: 14px;
    background-color: #034C8E;
    border-radius: 6px;
    margin-top: 5%;
}

.ProfileNavOne .NavItem.ListItem:not(:last-child) {
    /*border-bottom: solid 1px rgb(0,0,0,25%);*/
}



.ProfileNavTwo .ListItem {
    margin: 5% !important;
    border-radius: 6px !important;
}

/*.ListItem > a{*/
/*color:inherit !important;*/
/*}*/

/*.ListItem:hover {
    background: #24a5dc;
}*/


.CategoryRightShowcases {
    width: 85%;
    flex: 85;
    height: 100%;
    /* border-radius: inherit;*/
    /*background: white;*/
    padding: 1%;
    padding-top: 10px;
}


ul.Breadcrumb {
    padding: 0 16px;
    list-style: none;
    user-select: none;
    margin-bottom: 1rem;
}

    /* Display list items side by side */
    ul.Breadcrumb li {
        display: inline;
        font-size: 18px;
    }

        /* Add a slash symbol (/) before/behind each list item */
        ul.Breadcrumb li + li:before {
            padding: 0px 12px;
            text-align: center;
            /* display: flex; */
            flex-direction: row;
            content: "";
            background: url(/image/arrow.svg?v=zMdDxWoCVcy4oplqnkVVojMJ6_Y) no-repeat center;
        }

        /* Add a color to all links inside the list */
        ul.Breadcrumb li a {
            color: var(--TspDrk);
            text-decoration: none;
        }

            /* Add a color on mouse-over */
            ul.Breadcrumb li a:hover {
                color: #01447e;
                text-decoration: underline;
            }

.SearchProductInput {
    border: none;
    border-radius: 6px;
    box-shadow: 0 0 1px 1px rgb(0 0 0 / 25%);
    padding: .85%;
    padding-left: 10px;
    width: 190px;
    height: auto;
    transition: all .3s;
    font-family: inherit !important;
}

    .SearchProductInput:focus {
        outline: none;
        box-shadow: 0 0 1px 1px var(--LightBlueHighlight);
        width: calc(380px + 1rem);
    }

.ListWrapper {
    /*    padding: 20px;*/
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.ListSearchAndSort {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 4%;
    /*padding: 0 1.5%;*/
}



.GridListStyleOne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: fit-content;
    height: -moz-fit-content;
    padding: 1% 0;
    gap: .7rem;
    min-height: 50vh;
}

    .GridListStyleOne > .NotFoundWrapper > .SVGNotFound {
        fill: var(--TspDrk) !important;
    }

    .GridListStyleOne > .NotFoundWrapper > p {
        color: var(--TspDrk) !important;
    }

.prod
.productModeSelectionWrapper .SVGDelete {
    display: none;
}

.GridListStyleOne .NotFoundWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: xx-large;
    gap: 0.5rem;
    color: var(--Blue);
    /*box-shadow: 0 0px 4px 1px rgb(0 0 0 / 15%);*/
    border-radius: 8px;
    padding: 3rem;
    /*border: solid 1px rgb(0,0,0,25%);*/
}

    .GridListStyleOne .NotFoundWrapper p {
        margin: 0;
    }

.GridListStyleOne .SVGNotFound {
    height: 96px;
    width: 96px;
    fill: var(--Blue)
}

.GridListStyleOne .CardPrice {
    font-size: 21px;
    font-weight: bolder;
}

.FlatWrapper .NotFoundWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: xx-large;
    gap: 0.5rem;
    color: var(--Blue);
    border-radius: 8px;
    padding: 3rem;
}

    .FlatWrapper .NotFoundWrapper p {
        margin: 0;
    }

.FlatWrapper .SVGNotFound {
    height: 96px;
    width: 96px;
    fill: var(--Blue)
}



.FlatListStyleOne {
    display: flex;
    flex-wrap: wrap;
    /*  align-items: center;
    justify-content: center;*/
    height: fit-content;
    height: -moz-fit-content;
    padding: 1% 0;
    gap: .5rem;
    width: 100%;
}

.DropdownWrapper {
    display: -webkit-flex;
    flex-direction: row;
    border-radius: 6px;
    user-select: none;
    text-align: center;
    width: 25%;
    min-width: 100px;
    margin-left: auto;
    -webkit-justify-content: flex-end;
    margin-right: 3%;
    /* height: 20%;*/
}

    .DropdownWrapper:hover > .DropdownSelectedValueWrapper {
        border-color: var(--BlueHighlight);
    }

    .DropdownWrapper:hover > .dropdown {
        background-color: var(--BlueHighlight);
    }

.DropdownSelectedValueWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-bottom-right-radius: inherit;
    border-top-right-radius: inherit;
    border: solid 2px var(--Blue);
    transition: border-color .3s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 40%;
    font-size: smaller;
    max-height: 35px;
}

.ViewButtons {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*margin-left: auto;*/
    gap: .5rem;
    margin-left: 3%;
}

.ViewSelection {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
    cursor: pointer;
    max-height: 30px;
    border-radius: 4px;
    background: var(--DropDownBasicLighter);
    transition: border-color .3s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    font-size: smaller;
    padding: .5rem;
}

    .ViewSelection:hover {
        background: var(--BlueHighlight)
    }

    .ViewSelection[selected=true] {
        background: var(--BlueHighlight)
    }

    .ViewSelection svg {
        fill: white;
        height: 70%;
        width: 70%;
        max-height: 22px;
        max-width: 22px;
        min-width: 12px;
        min-height: 12px;
    }

.dropdown {
    position: relative;
    display: inline-block;
    /*padding: 10px;*/
    padding: 0.5rem;
    max-height: 35px;
    /*   border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;*/
    border-radius: inherit;
    color: white;
    background-color: #085fae;
    transition: background-color .3s;
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

    .dropdown:hover {
        overflow: unset;
    }

.DropdownSelectedValueWrapper > .SelectedValue {
    margin: 0;
    /*margin-top: 2px;*/
    font-size: small;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.dropdown > .DropdownText {
    margin: 0;
    margin-top: 2px;
    font-size: smaller;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .dropdown > .DropdownText .DownTriangle {
        margin-left: 2px;
    }

.dropdown:hover .dropdown-content {
    opacity: 1;
}

.dropdown-content {
    opacity: 0;
    transition: opacity ease-out .3s;
    top: 100%;
    /*left: %;*/
    color: black;
    border-radius: 6px;
    position: absolute;
    background-color: var(--CategoryNameColor);
    /* min-width: 160px; */
    box-shadow: 0px 3px 12px 0px rgb(0 0 0 / 20%);
    padding: 12px 16px;
    z-index: 1000;
    /*gap: 2rem;*/
    width: 100%;
    min-width: fit-content;
    min-width: -moz-fit-content;
}

    .dropdown-content > .DropdownItem {
        text-align: center;
        border-radius: 2px;
        transition: background-color .15s;
        cursor: pointer;
        /* margin: 4%; */
        display: block;
        margin: .4rem 0;
        padding: 4px;
        color: var(--Blue) !important;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 200px;
    }

        .dropdown-content > .DropdownItem:hover {
            background-color: rgb(0 0 0 / 25%);
        }

.ListPaginationWrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    /*   margin-bottom: 35px;*/
}

    .ListPaginationWrapper > ul.Pagination {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        list-style: none;
        color: var(--LBlack);
        padding: 0;
        user-select: none;
        gap: 0.3rem;
    }

        .ListPaginationWrapper > ul.Pagination > .Ellipsis {
            align-self: center;
            justify-self: center;
            margin: .5rem;
        }

        .ListPaginationWrapper > ul.Pagination > .PageBtn:hover {
            /*background-color: var(--Blue);*/
            background-color: #105594c9;
            color: white;
            box-shadow: none;
        }

        .ListPaginationWrapper > ul.Pagination > .PageBtn {
            border-radius: 6px;
            text-align: center;
            margin: 5% 0;
            box-shadow: 0 0 0 1px rgb(0 0 0 / 25%);
            cursor: pointer;
            transition: all .2s;
        }


            .ListPaginationWrapper > ul.Pagination > .PageBtn[selected-page=true] {
                background-color: var(--BlueHighlight);
                color: white;
                box-shadow: none;
            }


    .ListPaginationWrapper > .Pagination > .PageBtn > a {
        color: inherit;
        padding: 1rem;
    }


    .ListPaginationWrapper > .Pagination > .PageBtn:hover {
        color: var(--LBlackHover);
        border-color: var(--LightBlueHighlight);
    }



@media only screen and (max-width: 900px) { /* Screen which has a maximum width of 900px */

    /* .FilterBox{
        display: none;
    }*/
    /*.MainProductCategoriesShowcase{
        padding:20px 0 !important;
    }*/

    .CategoryRightShowcases {
        width: 100%;
    }

    .ListItem {
        margin-top: 0;
    }
}

@media only screen and (max-width: 768px) { /* Screen which has a maximum width of 900px */

    .DropdownWrapper {
        width: 70%;
        margin-left: auto;
    }

    .DropdownWrapper {
        justify-content: end;
    }

    .dropdown {
        width: 35%;
    }

    .DropdownSelectedValueWrapper {
        width: 35%;
    }
}

@media(max-width:568px) {
    .DropdownWrapper {
        margin-right: 0;
    }
} 

@media(max-width:500px) {
    .FilterDrawerButton {
        font-size: 12px;
    }
}

@media(max-width:360px) {
    .ListPaginationWrapper > .Pagination > .PageBtn > a {
        padding: 0.6rem;
    }
}