/* START: Resources category cloud */
:root{
    scrollbar-width: thin;
    scrollbar-color: var(--accent) #0a0a0a;
}
.tb-resource-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 5px;
    min-height: 34px;
}

.tb-resource-categories a {
    color: var(--e-global-color-primary) !important;
    border-color: var(--e-global-color-primary) !important;
    padding: 4px 8px;
    border: 1px solid;
    border-radius: 40px;
    transition: .2s;
}

.tb-resource-categories a:hover {
    color: #fff !important;
    background-color: var(--e-global-color-primary);
}

/* END: Resources category cloud */


/* START: Resources search form */
#resources-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#resources-filter-form .resource-filter-categories {
    display: flex;
    width: 70%;
    flex-wrap: wrap;
    gap: 5px 5px;
}

#resources-filter-form .resource-filter-categories h5 {
    margin-top: 3px;
}

.resource-filter-categories .resource-filter-button input {
    position: absolute;
    opacity: 0;
}

.resource-filter-categories .resource-filter-button span {
    /* color: var( --e-global-color-accent ); */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 40px;
    cursor: pointer;
    transition: .2s;
}

.resource-filter-categories .resource-filter-button span:hover,
.resource-filter-categories .resource-filter-button input:checked+span {
    color: #fff !important;
    background-color: var(--e-global-color-primary);
}

/* Keyboard accessibility */
.resource-filter-categories label:has(input:focus-visible) {
    outline: 3px solid rgba(0, 115, 170, .3);
    outline-offset: 2px;
}

#resources-filter-form .resource-filter-search {
    width: 28%;
    float: right;
}

#resources-filter-form .resource-filter-search .search-container {
    max-width: 300px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    float: right;

    border: 1px solid;
    border-radius: 40px;
    padding: 0px 12px;
}

#resources-filter-form .search-container input {
    width: 80%;
    border: unset;
    padding: 5px 5px;
}

#resources-filter-form .search-container input:focus,
#resources-filter-form .search-container input:active {
    outline: none;
}

#resources-filter-form .search-container button {
    width: 20%;
    padding: unset;
    background-color: unset;
    border: unset;
}

#resources-filter-form .search-container button svg {
    max-width: 20px;
    margin-top: 7px;
}

/* END: Resources search form */

@media only screen and (max-width: 600px) {
    /* START: Resources search form */
    #resources-filter-form .resource-filter-categories,
    #resources-filter-form .resource-filter-search {
        width: 100%;
    }

    #resources-filter-form .resource-filter-search .search-container {
        max-width: unset;
        width: 100%;
    }

    /* END: Resources search form */
}