
.ts-container .ts-row .ts-main:has(.zip-arena) {
    width: 100%;
}
.zip-arena + #sidebar,
.ts-main:has(.zip-arena) + .ts-sidebar {
    display: none;
}

.ts-container .zipa-container {
    padding-left: 0;
    padding-right: 0;
}
#ts-wrapper:has(.zip-arena) {
    overflow: clip;
}

/*  //////////////////////////////////////////////////////////////////////
/// Defaults 
////////////////////////////////////////////////////////////////////// */
.zip-arena {
    font-family: Arial;
}
* {
    box-sizing: border-box;
}
img {
    max-width: 100%;
    max-height: 100%;
}
.zip-arena svg {
    width: 1em;
}
    .zip-arena svg path {
        fill: currentColor
    }

.zipa-table {
    width: 100%;
}
    .zipa-table tr:nth-of-type(odd) {
        background: #eee;
    }
        .zipa-table tr td {
            padding: 0.5rem;
            vertical-align: top;
        }
        .zipa-table tr td.zipa-category-name {
            opacity: 0.8;
        }

/* Skeleton */
.zipa-container {
    width: 1120px;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 3rem;
    padding-right: 3rem;
}
@media (max-width:991px) {
    .zipa-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.zipa-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    margin-top: -1rem;
}
.zipa-row.zipa-has-sidebar {
    flex-wrap: nowrap;
    transition: 0.2s ease all;
}

    .zipa-row > * {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-top: 1rem;
    }
    .zipa-row > .zipa-partner-col { 
        margin-top: 1rem;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 33.33%;
        min-width: 220px;
    
    }
    .zipa-row > .zipa-sidebar {
        flex: 0 0 330px;
        max-width: 330px;
        position: sticky;
        top: 0;
        margin-bottom: auto;
        transition: 0.2s ease all;
        padding-top: 1rem;
        max-height: 100vh;
        overflow: auto;
    }
    .zipa-row > .zipa-main {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: calc(100% - 330px);
        min-width: 440px;
        padding-top: 1rem;
    }

    .zipa-row > .zipa-contactinfo {
        flex: 0 0 330px;
        max-width: 330px;
        position: sticky;
        top: 0;
        margin-bottom: auto;
        transition: 0.2s ease all;
        padding-top: 1rem;
    }
    .zipa-row > .zipa-searchfilters {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: calc(100% - 330px);
        min-width: 440px;
        padding-top: 1rem;
    }
    @media (max-width: 991px) {
        .zipa-row.zipa-has-sidebar  > .zipa-main  {
            flex-basis: 100%;
            min-width: 100%;
        }
        .zipa-row.zipa-has-sidebar  > .zipa-sidebar { 
            margin-left: -330px;
        }
        .zipa-row.zipa-has-sidebar.active  > .zipa-sidebar { 
            margin-left: 0;
        }
    }
    @media (max-width: 576px) {
        .zipa-row > .zipa-main {
            min-width: 0;
            flex-basis: 100%;
        }
        .zipa-row > .zipa-contactinfo,
        .zipa-row > .zipa-searchfilters {
            flex-basis: 100%;
            min-width: 0;
        }
    }
    @media (max-width: 360px) {
        .zipa-row.zipa-has-sidebar  > .zipa-sidebar { 
            margin-left: -300px;
        }
        .zipa-row > .zipa-sidebar {
            flex: 0 0 300px;
            max-width: 300px;
        }

    }

/*  //////////////////////////////////////////////////////////////////////
/// Components 
////////////////////////////////////////////////////////////////////// */

/* Button */
.zipa-btn {
    display: inline-flex;
    min-width: 4.25rem;
    width: auto;
    min-height: 2rem;
    height: auto;
    padding: 0 0.5rem;
    background-image: none;
    background-color: transparent;
    border: 1px solid #eeeeee;
    line-height: 2rem;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    transition: all ease-in-out 0.3s;
    border-radius: 4px;
}
.zipa-btn svg {
    align-self: center;
}
.zipa-btn svg path {
    fill: currentColor;
}
.zipa-btn-primary {
    background-color: #326496;
    border-color: #326496;
    color: #fff;
}
.zipa-btn-alt {
    background-color: #EEE;
    border-color: #EEE;
    color: #000;
}

.zipa-btn.disabled {
    opacity: 0.5;
    pointer-events:none;
    cursor: not-allowed;
}
.zipa-btn-round {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}


/*  //////////////////////////////////////////////////////////////////////
/// Pagina: Overzicht
////////////////////////////////////////////////////////////////////// */

/* Options */
.zipa-options {
    margin-bottom: 1rem;
}

/* Filters */
.zipa-has-sidebar.active .zipa-filter-btn svg {
    transform: rotate(180deg)
}

.zipa-filter-btn {
    display: none!important;
}
.zipa-filter-btn-close {
    float: right;
    position: relative;
    z-index: 1;
}
.zipa-filters {
}
.zipa-filters h3 {
    margin-top: 0;
    margin-bottom: .5rem;
}
.zipa-filters ul {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
    margin-top: 0.5rem;
}
.zipa-filters ul li {
    margin-bottom: .375rem;
    display: flex;
    align-items: baseline;
}
.zipa-filters ul li input[type="checkbox"] {
    margin-right: 0.375rem;
}
.zipa-filters ul li label {
    margin: 0;
}

@media(max-width: 991px) {
    .zipa-filter-btn {
        display: inline-block!important;
    }
}

/* Parnters */
.zipa-partner {
    border: 1px solid #999;
    height: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.zipa-partner.isPartner {
    border: 4px solid #daa520
}

        .zipa-partner .zipa-image-holder {
            height: 64px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
            .zipa-partner .zipa-image-holder img {
                margin: auto
            }
            .zipa-partner a:hover img {
                transform: scale(1.05);
            }

/*  //////////////////////////////////////////////////////////////////////
/// Pagina: Detail
////////////////////////////////////////////////////////////////////// */

/* Main content */
.zipa-partner-content {
    margin-top: 1rem;
}
.zipa-partner-content:after {
    content:"";
    display: table;
    clear: both;
}
.zipa-partner-content .zipa-partner-image {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
    width: 300px;
}
@media(max-width:767px) {
    .zipa-partner-content .zipa-partner-image {
        margin: 0 0 1rem 0;
        float: none;
    }
}

.zipa-partner-links {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}
    .zipa-partner-links a {
        margin-left: 0.5rem;
    }
    .zipa-partner-links a:not(.zipa-btn-round) svg {
        margin-left: 0.375em;
    }
    @media(max-width:991px) {
        .zipa-partner-links {
            display: flex;
            justify-content: flex-start;
        }
    }
    .zipa-partner-links .zipa-socials {
        display: inline-flex;
        flex-wrap: wrap;
    }
        .zipa-partner-links .zipa-socials a:first-child {
            margin-left: 0;
        }

/* Contactgegevens */
.zipa-contactinfo-col .zipa-contactinfo-image {
    width: 150px;
    height: auto;
}

/* Zoekfilters */