
#archive-tree, #details {
    margin-right: 1em;
    margin-left: 1em;
}

#details {
    border: none;
}

.card {
    margin-bottom: 2em;
    background-color: #ecf0fa;
}

    .card__body {
        padding-top: 1.25em !important;
        padding-left: 0 !important;
        padding-right: 0 !important;

        border-color: #37589A !important;

    }

    .card__header {
        background-color: #37589A;
        border-color: #37589A;
        color: white;
        -webkit-appearance:none;
    }

        .card__header:hover, .card__header:focus {
            background-color: #37589A !important;
            color: #fff !important;
        }

    .card__icon {
        float: left;
    }

    .card__list-icon {
        margin-right: 0.5em;
        margin-left: 0.5em;
        display: inline-flex;
    }

    .card__list-link {
        display: inline-flex;
        float: right;
    }

.link {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1rem;
    margin-left: 0.5em;
    margin-right: 0.5em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}

.link3 {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 1rem;
    margin-left: 0.5em;
    margin-right: 0.5em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}

.link__title {
    flex: 2;
    color: #1b6ec2;
    word-break: break-word;
}

.link__title:hover {
    color: #37589a;
}

.link + .link {
    border-top: 1px solid rgb(235, 235, 235);
}

.link__information {
    padding-top: 0.1rem;
    padding-left: inherit;
    display: inline-block;
}

.attachment {
    padding-top: 0.7rem;
    display: inline;
}

.download {
    margin-right: 0.5em;
    margin-left: 0.5em;
    display: inline;
    float: right;
    /* alignment-baseline: revert; */
}


/*Media queries*/

@media (min-width: 764px) {
    .link__information {
        padding-left: 4em;
        display: inline-block;
    }
}

@media (min-width: 1024px) {

    .details-view-container {
        display: flex;
    }

    #archive-tree, #details {
        width: 50%;
        margin-right:1.5em;
        margin-left: 1.5em;
    }

    #archive-tree {
        border: none;
    }
}


