﻿

.conquering-diseases-block-title {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
}

@media(min-width:770px) {
    .conquering-diseases-block-title {
        flex-flow: row nowrap;
    }
}

.conquering-diseases-block-title >*:first-child {
    flex:1;
}

.conquering-diseases-trials-list {
    margin: 0;
    padding: 0;
}


.conquering-diseases-trials-list li {
    list-style-type: none;
    display: block;
    padding: .5rem;
    border-bottom: 1px solid #e7e7e7;
}

.conquering-diseases-trials-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-column-gap: 1rem;
    border:none;
}

.conquering-diseases-trials-list .card {
    margin:0;
    padding:0;
    display:flex;
    flex-flow:column nowrap;
}

    .conquering-diseases-trials-list .card > div {
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
        flex: 1;
        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 25%);
        border: none;
        background-color: #fff;
    }

.conquering-diseases-trials-list .card > div > header {
    background-color: #e6e7e6;
    position: relative;
    width: 100%;
}

        .conquering-diseases-trials-list .card > div > header .card-title {
            display: flex;
            flex-flow: row nowrap;
            padding: 12px;
            margin: 0;
            align-items: center;
        }

    .conquering-diseases-trials-list .card-title > h2 {
        margin: 0;
        padding: 0;
        margin-bottom: 0 !important; /* need to override main styles*/
        flex: 1;
        font-size: 1rem;
        color: #555;
    }

    .conquering-diseases-trials-list .card > div > article {
        padding: 1rem;
        font-size: .9rem;
        flex: 1 1 auto;
    }

        .conquering-diseases-trials-list .card > div > article > h1 {
            font-size: 1.1rem;
            line-height: 1.3rem;
            padding: 0;
            margin: 0;
            margin-top: 1rem;
            font-weight:600;
        }

        .conquering-diseases-trials-list .card > div > article p {
            margin: 1rem 0 !important;
            line-height: 1.3rem;
        }

        .conquering-diseases-trials-list .card > div > article .healthy-volunteers {
            display: flex;
            flex-flow:row nowrap;
            align-items: center;
        }

        .conquering-diseases-trials-list .card > div > article .healthy-volunteers > svg {
           width:18px;
           height:18px;
           margin-right:.5rem;
        }

    .conquering-diseases-trials-list .card > div > footer > section.trial-details {
        display: flex;
        align-items: center;
    }

        .conquering-diseases-trials-list .card > div > footer > section.trial-details > div {
            flex: 1;
            padding: 8px;
            text-align: center;
        }

            .conquering-diseases-trials-list .card > div > footer > section.trial-details > div > h4 {
                padding: 0;
                margin: 0;
                font-size: .8rem;
                color: #666;
                line-height: 1rem;
            }

            .conquering-diseases-trials-list .card > div > footer > section.trial-details > div > h3 {
                padding: 0;
                margin: 0;
                font-size: .85rem;
                font-weight: bolder;
                white-space: nowrap;
                line-height: 1rem;
            }

            .conquering-diseases-trials-list .card > div > footer > section.trial-details > div.spacer {
                flex: 0 0 auto;
                max-width: 2px;
                min-width: 2px;
                padding: 0;
                height: 1.4rem;
                background-color: #e6e7e6;
            }

    .conquering-diseases-trials-list .card > div > footer > section.investigator {
        min-height: 80px;
        max-height: 80px;
        border-top: 1px solid #e6e7e6;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }

        .conquering-diseases-trials-list .card > div > footer > section.investigator img {
            flex: 0 1 auto;
            margin-left: 1rem;
            max-width: 50px;
            max-height: 50px;
            border-radius: 50%;
            border: 2px solid #fff;
        }

    .conquering-diseases-trials-list .card > div > footer > section.investigator > article {
        padding-left: 1rem;
        font-size: .8rem;
        color: #666;
    }

    .conquering-diseases-trials-list .card > div > footer > section.investigator > article h4 {
        margin: 0;
        
    }

        .conquering-diseases-trials-list .card > div > footer > section.investigator > article h4 a {
            text-decoration: none;
            color: #333;
            cursor: pointer;
        }

        .conquering-diseases-trials-list .card > div > footer > section.investigator > article div {
            font-size: .9em;
            color: #333;
        }