:root {
    --col-1-width: 20rem;
    --min-width: 68rem;

    --phone-width: 50rem;
    /* --max-width: 1100px; */
}

body {
    margin: 0;
    overflow: hidden;
}

.container {
    display: grid;
    grid-template-areas: 
        "logo       title    " 
        "searchBox  info     " 
        "filters    conflictsHeader" 
        "filters    conflicts" 
        "footer     footer   "; 
    grid-template-columns: var(--col-1-width) 1fr;
    grid-template-rows: 100px 4rem auto 1fr 2rem;
    grid-gap: .2em;
    margin: 0px;
    height: 100vh;
    width: calc(100vw - 1.1rem); 
}

@media screen and (min-width: 1200px) {
    :root {
        font-size: 22px; 
    }
    .container {
        width: 1200px; 
    }
    #ethicsModal {
        width: 1200px;
    }
}

.family .dc-chart {
    display: flex;
    flex-direction: column;
    flex-flow: space-around;
    padding: 0.7rem 1rem 0.2rem 0rem;
}

.container *> {
    border: 1px solid black;    
}

.logo {
    grid-area: logo;
}

.title {
    grid-area: title;
}


.info {
    grid-area: info;
}

.search-box {
    grid-area: searchBox;
}

.filters {
    grid-area: filters;
    overflow-y: auto;
}

.stats {
    grid-area: stats;
}

.download {
    grid-area: download;
}

.date {
    grid-area: date;
}

.results {
    grid-area: results;
    overflow-y: scroll;
    height: 2rem;
}

.conflictHeader {
    grid-area: conflictHeader;
}

.conflicts {
    grid-area: conflicts;
    overflow: auto;
}

.footer {
    grid-area: footer;
}

.conflict {
    grid-area: conflict;
}




/* Phone */
@media screen and (max-width: 50rem) { 
    h4.tagline {
        display: none;
    }

    :root {
        --col-1-width: 11rem;
    }

    body {
        width: 100vw;
    } 

    .container {
        display: grid;
        grid-template-areas: 
            "logo       logo     " 
            "title      title    "
            "searchBox  searchBox  " 
            "filters    conflictsHeader" 
            "filters    conflicts" 
            "footer     footer   "; 
        grid-template-columns: var(--col-1-width) var(100vw - --col-1-width);
        grid-template-rows: 80px 3rem 3.3rem auto auto 2rem;
        grid-gap: .2em;
        margin: 0px;
        height: 100vh;
        width: 100vw;
    }

    h4.tagline {
        display: none;
    }

    .info {
        display: none;
    }

    .logo {
        margin-left: auto;
        margin-right: auto;
    }
   
    .search-input {
        margin: 0.2rem 0.2rem 0.2rem 0.2rem;
        width: 12rem;
    }

    .search-title {
        margin-top: 6px;
        margin-left: 2px;
    }

    h1.title {
        margin: 0.0rem auto auto auto;
    }

    .tiny-photo {
        display: none;
    }

    .conflict-page-body {
        overflow-y: auto;
        height: calc(100vh - 14rem);
        margin: 0.2rem 0.5rem 0.7rem 0.2rem;
        padding: .0rem .0rem;
    }

    table {
        margin-left: 0.0rem; 
        margin-right: 1.0rem; 
    }
}