﻿#download-wrapper {
    display: flex;
    width: 100%;
}

    #download-wrapper div {
        /*border: dotted 1px red;*/
    }

    #download-wrapper .item {
        width: calc(25% - 10px);
        max-width: 100%;
        margin: 5px;
    }

    #download-wrapper .inner {
        padding: 8px 16px !important;
        margin: 5px !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #download-wrapper .item .inner {
        width: initial !important;
        margin: 0 !important;
    }

    #download-wrapper .inner h5 {
        font-size: 1rem;
    }

    #download-wrapper .item .inner div {
        min-height: 0px;
    }

    #download-wrapper .item .inner .search-small {
        font-size: 0px;
    }

        #download-wrapper .item .inner .search-small p {
            padding: 0 !important;
            margin: 0 !important;
            display: inline;
        }

    #download-wrapper a.download-link {
        white-space: normal;
        width: 100%;
    }

    #download-wrapper .download-link {
        font-size: 18px !important;
    }

    #download-wrapper .tooltip-trigger {
        top: 5px;
        right: 5px;
        position: absolute;
        display: inline-block;
    }

    #download-wrapper .tooltip-trigger {
        border-bottom: dotted 1px black;
        margin-right: 5px;
    }

    #download-wrapper .tooltips {
        display: none;
        position: absolute;
        top: 120%;
        left: 0;
        background: black;
        color: white;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
        padding: 10px;
        border-radius: 5px;
        white-space: nowrap;
        z-index: 100;
        font-size: 18px;
        min-width: 15vw;
    }

    /* Alleen tonen bij hover op het icoon/blok */
    #download-wrapper .tooltip-trigger:hover .tooltips {
        display: block;
    }

@media (max-width: 1080px) {
    #download-wrapper .item {
        width: calc(33.33% - 10px) !important;
    }
}

@media (max-width: 900px) {
    #download-wrapper .inner h5 {
        font-size: 1rem;
    }
}

@media (max-width: 750px) {
    #download-wrapper .element-item {
        width: calc(50% - 10px) !important;
        font-size: 1.2rem;
    }
}

@media (max-width: 500px) {
    #download-wrapper .element-item {
        width: calc(100% - 10px) !important;
    }

    .download-link {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .download-link {
        font-size: 18px !important;
    }
}
