.search_shop_form_select_input.limit_height{
    height:338px;
    overflow-y: scroll;
}
.search_shop_form_select_input ul{
    padding-left:0;
    margin-top:var(--wp--preset--spacing--10);
}

.search_shop_form_select_input .taxonomy-children{
    display:none;
}
.search_shop_form_select_input .has-children .checkbox-open-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:96%;
}

.search_shop_form_select_input .has-children .expand-shop-filter-children{
    background-color: currentColor;
    mask-image: url(../../gutenberg-blocks/assets/images/icons/chevron.svg);
    width:20px;
    height: 20px;
    mask-position: center;
    mask-size:contain;
    mask-repeat: no-repeat;
    transform: rotate(90deg);
    transition:ease-in-out 300ms;
}
.search_shop_form_select_input .has-children.open .expand-shop-filter-children{
    transform: rotate(-90deg);
}

.search_shop_form_select_input:first-child{
    border-top:1px solid var(--wp--preset--color--gray-200);
}
.search_shop_form_select_input > ul > li{
    border-bottom:1px solid var(--wp--preset--color--gray-200);
    padding-bottom:var(--wp--preset--spacing--10);
}
.search_shop_form_select_input ul li ul{
    padding-left:var(--wp--preset--spacing--20);
}
.search_shop_form_select_input ul li{
    font-weight: bold;
    list-style: none;
    margin-bottom:var(--wp--preset--spacing--10);
}
.search_shop_form_select_input ul li > ul > li{
    font-weight: normal;
}

.search_shop_form_select_input ul li:last-child{
    margin-bottom:0;
}

/** custom checkbox styling **/
/* The container */
.search_shop_form_select_input .checkbox-container{
    display:flex;
    align-items: center;
    position:relative;
    cursor:pointer;
    font-size:var(--wp--preset--font-size--large);
    padding-left:var(--wp--preset--spacing--35);
}
.search_shop_form_select_input  ul li > ul > li .checkbox-container{
    min-height:30px;
    font-size:var(--wp--preset--font-size--small);
}

/** text input */
.search_shop_form_select_input.form_text_input{
    display:flex;
}
.search_shop_form_select_input.form_text_input input[type=text]{
    width:100%;
    border-radius:5px!important;
    border-width:2px;
}
/* Hide the browser's default checkbox */
.search_shop_form_select_input .checkbox-container input {
    position:absolute;
    opacity:0;
    cursor:pointer;
    height:0;
    width:0;
}


/* Create a custom checkbox */
.search_shop_form_select_input .checkmark {
    position:absolute;
    top:2px;
    left:0px;
    height:1.5rem;
    width:1.5rem;
    background-color: var(--wp--preset--color--primary-100);
    border:2px solid var(--wp--preset--color--gray-200);
    border-radius:50%;
}
/** icon styling **/
.search_shop_form_select_input .checkmark.icon{
    border:none;
    height:1.7rem;
    width:1.7rem;
    background-color: var(--wp--preset--color--gray-400);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    border-radius:0;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {

}

.panels .count,
/*.has_selected > label.checkbox-container input:checked ~ .checkbox-title > span,*/
.has-children.has_selected .checkbox-container input ~ .checkbox-title > span,
.checkbox-container input:checked ~ .checkbox-title > span {
    color:var(--wp--preset--color--primary-500);
}

.panels .has_selected .checkbox-title .count{
    margin-left:var(--wp--preset--spacing--10);
    width:20px;
    height:20px;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wp--preset--font-size--xsmall);
    background-color: var(--wp--preset--color--primary-200);
    border-radius:50%;
}
.panels .has_selected .checkbox-title .count:empty {
    width:auto;
    height:auto;
}
/* When the checkbox is checked, add a blue background */
.has-children.has_selected > .checkbox-open-container > label.checkbox-container > input ~ .checkmark,
.checkbox-container input:checked ~ .checkmark {
    background-color: var(--wp--preset--color--secondary-200);
}
.search_shop_form_select_input .has-children.has_selected > .checkbox-open-container > .checkbox-container >  input ~ .checkmark.icon,
.search_shop_form_select_input input:checked ~ .checkmark.icon{
    background-color: var(--wp--preset--color--primary-400);
}

.checkbox-container .checkmark:after {
    content: "";
    position:absolute;
    top:-2px;
    right:0.25rem;
    height:16px;
    width:8px;
    border-radius:2px;
    border-bottom-width:0px;
    border-right-width:0px;
    border-bottom-style: solid;
    border-right-style: solid;
    border-color:var(--wp--preset--color--contrast);
    animation: shrinkEffect 0.5s ease-out forwards;
    transition: ease-in-out 300ms;
}

.checkbox-container .checkmark.icon:after {
    border-color:var(--wp--preset--color--contrast);
    animation: none;
    transition: ease-in-out 300ms;
}
/* Create the checkmark/indicator (hidden when not checked) */
.has-children.has_selected > .checkbox-open-container > .checkbox-container > input ~ .checkmark:after,
.checkbox-container input:checked ~ .checkmark:after {
    border-bottom-width:4px;
    border-right-width:4px;
    border-color:var(--wp--preset--color--contrast);
    animation: growEffect 0.5s ease-out forwards;
}
.has-children.has_selected > .checkbox-open-container > .checkbox-container > input ~ .checkmark.icon:after,
.checkbox-container input:checked ~ .checkmark.icon:after {
    border-bottom-width:0px;
    border-right-width:0px;
    border-color:var(--wp--preset--color--contrast);
    animation: none;
}

@keyframes growEffect {
    0% {
        transform: scale(0) rotate(45deg);
    }
    70% {
        transform: scale(1.1) rotate(45deg);
    }
    100% {
        transform: scale(1) rotate(45deg);
    }
}

@keyframes shrinkEffect {
    0% {
        transform: scale(1) rotate(45deg);
    }
    30% {
        transform: scale(1.1) rotate(45deg);
    }
    100% {
        transform: scale(0) rotate(45deg);
    }
}


.has_selected > div > div > label.checkbox-container.secondary input ~ .checkbox-title,
label.checkbox-container.secondary input:checked ~ .checkbox-title {
    @apply text-secondary;
}

.has_selected > div > div > label.checkbox-container.secondary input ~ .checkmark,
.checkbox-container.secondary input:checked ~ .checkmark,
.checkbox-container.secondary .checkmark:after{
    @apply border-secondary;
}

.has_selected > div > div > label.checkbox-container.gray-700 input ~ .checkmark,
.checkbox-container.gray-700 input:checked ~ .checkmark,
.checkbox-container.gray-700 .checkmark:after{
    @apply border-gray-700;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/** select 2 styling **/
.search_shop_form_select_input .select2.select2-container{
    width:100%!important;
    min-height:50px;
}
.search_shop_form_select_input .select2-container .select2-selection{
    border-radius:5px!important;
}
.search_shop_form_select_input .select2-container .select2-selection--multiple{
    min-height:56px;
    width:100%;
    display:flex;
    align-items: center;
    padding: 0 var(--wp--preset--spacing--20);
}
.search_shop_form_select_input .select2-container .select2-selection--multiple .select2-selection__rendered{
    display:inline-flex;
    flex-wrap: wrap;
    /*width:100%;*/
    
}

@media screen and (max-width:1200px){
    .search_shop_form_select_input.limit_height{
        height:200px!important;
    }
}