/* policy-people-person */

.person-grid-container {
    border-radius: 3px;
    color: #111;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    margin: 5px 0px 5px 0px;
    padding: 10px 10px;
    display: grid;
    grid-template-columns: 0fr 0fr 0fr 1fr;
    grid-template-rows: auto;
    gap: 0px 30px;
    grid-auto-flow: row;
    grid-template-areas:
        "person-col-1 person-col-2 person-col-3 person-col-btns";
}

.person-col-1 {
    grid-area: person-col-1;
    display: grid;
    grid-template-columns: 0fr 0fr;
    grid-template-rows: 0fr 0fr 0fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "col-1-c-l1 col-1-c-v1"
        "col-1-c-l2 col-1-c-v2"
        "col-1-c-l3 col-1-c-v3";
    white-space: nowrap;
}

.col-1-c-l1 {
    grid-area: col-1-c-l1;
    text-align: right;
    margin-right: 5px;
    color: #888;
}

.col-1-c-l2 {
    grid-area: col-1-c-l2;
    text-align: right;
    margin-right: 5px;
    color: #888;
}

.col-1-c-l3 {
    grid-area: col-1-c-l3;
    text-align: right;
    margin-right: 5px;
    color: #888;
}

.col-1-c-v1 {
    grid-area: col-1-c-v1;
}

.col-1-c-v2 {
    grid-area: col-1-c-v2;
}

.col-1-c-v3 {
    grid-area: col-1-c-v3;
}

.person-col-2 {
    grid-area: person-col-2;
    display: grid;
    grid-template-columns: 0fr 0fr;
    grid-template-rows: 0fr 0fr 0fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "col-2-c-l1 col-2-c-v1"
        "col-2-c-l2 col-2-c-v2"
        "col-2-c-l3 col-2-c-v3"
        "col-2-c-l4 col-2-c-v4";
    white-space: nowrap;
}

.col-2-c-l1 {
    grid-area: col-2-c-l1;
    text-align: right;
    margin-right: 5px;
    color: #888;
}

.col-2-c-l2 {
    grid-area: col-2-c-l2;
    text-align: right;
    margin-right: 5px;
    color: #888;
}

.col-2-c-l3 {
    grid-area: col-2-c-l3;
    text-align: right;
    margin-right: 5px;
    color: #888;
}

.col-2-c-l4 {
    grid-area: col-2-c-l4;
    text-align: right;
    margin-right: 5px;
    color: #888;
}

.col-2-c-v1 {
    grid-area: col-2-c-v1;
}

.col-2-c-v2 {
    grid-area: col-2-c-v2;
}

.col-2-c-v3 {
    grid-area: col-2-c-v3;
}

.col-2-c-v4 {
    grid-area: col-2-c-v4;
}

.person-col-3 {
    grid-area: person-col-3;
    display: grid;
    grid-template-columns: 0fr 0fr;
    grid-template-rows: 0fr 0fr 0fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "col-3-c-l1 col-3-c-v1"
        "col-3-c-l2 col-3-c-v2"
        "col-3-c-l3 col-3-c-v3"
        "col-3-c-l4 col-3-c-v4";
    white-space: nowrap;
}

.col-3-c-l1 {
    grid-area: col-3-c-l1;
    text-align: right;
    margin-right: 5px;
    color: #888;
}

.col-3-c-l2 {
    grid-area: col-3-c-l2;
    text-align: right;
    margin-right: 5px;
    color: #888;
}

.col-3-c-l3 {
    grid-area: col-3-c-l3;
    text-align: right;
    margin-right: 5px;
    color: #888;
}

.col-3-c-l4 {
    grid-area: col-3-c-l4;
    text-align: right;
    margin-right: 5px;
    color: #888;
}

.col-3-c-v1 {
    grid-area: col-3-c-v1;
}

.col-3-c-v2 {
    grid-area: col-3-c-v2;
}

.col-3-c-v3 {
    grid-area: col-3-c-v3;
}

.col-3-c-v4 {
    grid-area: col-3-c-v4;
}

.person-col-btns {
    justify-self: end;
    align-self: center;
    grid-area: person-col-btns;
}


@media screen and (max-width: 980px) {
    .person-col-3 {
        display: none;
    }

    .person-grid-container {
        gap: 0px 20px;
    }
}

@media screen and (max-width: 740px) {

    .person-col-2 {
        display: none;
    }

    .person-grid-container {
        gap: 0px 10px;
    }
}

@media screen and (max-width: 570px) {

    .person-col-1 {
        display: none;
    }

    .person-grid-container {
        gap: 0px 0px;
    }
}

/* policy application summary */

.summary-container {
    display: grid;
    grid-template-columns: 0.33fr 1fr;
    grid-template-rows: 1fr;
    gap: 10px 10px;
    grid-auto-flow: row;
    grid-template-areas:
        "people summary-panel";
}

.summary-panel {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px 10px;
    grid-auto-flow: row;
    grid-template-areas:
        "history documents products"
        "application vehicle company";
    grid-area: summary-panel;
}

.people {
    min-width: 290px;
    grid-area: people;
}

.vehicle {
    min-width: 290px;
    grid-area: vehicle;
}

.company {
    min-width: 290px;
    grid-area: company;
}

.products {
    min-width: 290px;
    grid-area: products;
}

.application {
    min-width: 290px;
    grid-area: application;
}

.history {
    min-width: 290px;
    grid-area: history;
}

.documents {
    min-width: 290px;
    grid-area: documents;
}

@media screen and (max-width: 1279px) {

    .summary-panel {
        gap: 5px 0px;
        display: flex;
        flex-flow: wrap;
    }

    .people,
    .vehicle,
    .company,
    .products,
    .application,
    .history,
    .documents {
        flex-basis: 50%;
        max-width: 100%;
    }
}

@media screen and (max-width: 990px) {

    .summary-panel {
        gap: 5px 0px;
        display: flex;
        flex-flow: wrap;
    }

    .people,
    .vehicle,
    .company,
    .products,
    .application,
    .history,
    .documents {
        flex-basis: 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 750px) {

    .summary-container {
        gap: 5px 0px;
        display: flex;
        flex-flow: wrap;
    }

    .people,
    .vehicle,
    .company,
    .products,
    .application,
    .history,
    .documents {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* summary items */

.summary-grid-container-products {
    padding: 10px 5px;
    color: #111;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 0fr 0fr 0fr 0fr;
    gap: 0px 8px;
    grid-auto-flow: row;
    grid-template-areas:
        "summary-col-l-1 summary-col-v-1"
        "summary-col-l-2 summary-col-v-2"
        "summary-col-l-3 summary-col-v-3";
}

.summary-grid-container-vehicle {
    padding: 10px 5px;
    color: #111;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    display: grid;
    grid-template-columns: 35% 65%;
    grid-template-rows: 0fr 0fr 0fr 0fr;
    gap: 0px 8px;
    grid-auto-flow: row;
    grid-template-areas:
        "summary-col-l-1 summary-col-v-1"
        "summary-col-l-2 summary-col-v-2"
        "summary-col-l-3 summary-col-v-3"
        "summary-col-l-4 summary-col-v-4";
}

.summary-grid-container-person {
    padding: 10px 5px;
    color: #111;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    display: grid;
    grid-template-columns: 35% 65%;
    grid-template-rows: 0fr 0fr 0fr 0fr;
    gap: 0px 8px;
    grid-auto-flow: row;
    grid-template-areas:
        "summary-col-l-1 summary-col-v-1"
        "summary-col-l-2 summary-col-v-2"
        "summary-col-l-3 summary-col-v-3"
        "summary-col-l-4 summary-col-v-4";
}

.summary-grid-container-company {
    padding: 10px 5px;
    color: #111;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    display: grid;
    grid-template-columns: 35% 65%;
    grid-template-rows: 0fr 0fr 0fr 0fr;
    gap: 0px 8px;
    grid-auto-flow: row;
    grid-template-areas:
        "summary-col-l-1 summary-col-v-1"
        "summary-col-l-2 summary-col-v-2"
        "summary-col-l-3 summary-col-v-3"
        "summary-col-l-4 summary-col-v-4";
}

.summary-grid-container-application {
    padding: 10px 5px;
    color: #111;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    display: grid;
    grid-template-columns: 35% 65%;
    grid-template-rows: 0fr 0fr 0fr 0fr 0fr 0fr;
    gap: 0px 8px;
    grid-auto-flow: row;
    grid-template-areas:
        "summary-col-l-1 summary-col-v-1"
        "summary-col-l-2 summary-col-v-2"
        "summary-col-l-3 summary-col-v-3"
        "summary-col-l-4 summary-col-v-4"
        "summary-col-l-5 summary-col-v-5"
        "summary-col-l-6 summary-col-v-6";
}

.summary-grid-container-history {
    padding: 10px 5px;
    color: #111;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 0fr 0fr;
    gap: 0px 8px;
    grid-auto-flow: row;
    grid-template-areas:
        "summary-col-l-1 summary-col-v-1";
}

.summary-grid-container-third-party-documents {
    padding: 10px 5px;
    color: #111;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: 0fr 0fr;
    gap: 0px 8px;
    grid-auto-flow: row;
    grid-template-areas:
        "summary-col-l-1 summary-col-v-1";
}

.summary-grid-container-product-summary {
    padding: 10px 5px;
    color: #111;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 0fr;
    gap: 0px 8px;
    grid-auto-flow: row;
    grid-template-areas:
        "summary-col-l-1 summary-col-v-1";
}

.summary-col-l-1 {
    grid-area: summary-col-l-1;
    text-align: right;
    color: #888;
}

.summary-col-l-2 {
    grid-area: summary-col-l-2;
    text-align: right;
    color: #888;
}

.summary-col-l-3 {
    grid-area: summary-col-l-3;
    text-align: right;
    color: #888;
}

.summary-col-l-4 {
    grid-area: summary-col-l-4;
    text-align: right;
    color: #888;
}

.summary-col-l-5 {
    grid-area: summary-col-l-5;
    text-align: right;
    color: #888;
}

.summary-col-l-6 {
    grid-area: summary-col-l-6;
    text-align: right;
    color: #888;
}

.summary-col-l-7 {
    grid-area: summary-col-l-7;
    text-align: right;
    color: #888;
}

.summary-col-v-1 {
    grid-area: summary-col-v-1;
    text-align: left;
}

.summary-col-v-2 {
    grid-area: summary-col-v-2;
    text-align: left;
}

.summary-col-v-3 {
    grid-area: summary-col-v-3;
    text-align: left;
}

.summary-col-v-4 {
    grid-area: summary-col-v-4;
    text-align: left;
}

.summary-col-v-5 {
    grid-area: summary-col-v-5;
    text-align: left;
}

.summary-col-v-6 {
    grid-area: summary-col-v-6;
    text-align: left;
}

.summary-col-v-7 {
    grid-area: summary-col-v-7;
    text-align: left;
}

/* policy-address */

.address-grid-container {
    border-left: 2px dotted #d4d4d4;
    padding: 0px 25px;
    margin: 0px 0px 0px 15px;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    display: grid;
    grid-template-columns: 0.1fr 1fr;
    grid-template-rows: 0fr 0fr 0fr 0fr 0fr 0fr 0fr;
    gap: 0px 10px;
    grid-auto-flow: row;
    grid-template-areas:
        "address-col-l1 address-col-v1"
        "address-col-l2 address-col-v2"
        "address-col-l3 address-col-v3"
        "address-col-l4 address-col-v4"
        "address-col-l5 address-col-v5"
        "address-col-l6 address-col-v6"
        "address-col-l7 address-col-v7";
}

.address-col-l1 {
    grid-area: address-col-l1;
    text-align: right;
    color: #888;
}

.address-col-l2 {
    grid-area: address-col-l2;
    text-align: right;
    color: #888;
}

.address-col-l3 {
    grid-area: address-col-l3;
    text-align: right;
    color: #888;
}

.address-col-l4 {
    grid-area: address-col-l4;
    text-align: right;
    color: #888;
}

.address-col-l5 {
    grid-area: address-col-l5;
    text-align: right;
    color: #888;
}

.address-col-l6 {
    grid-area: address-col-l6;
    text-align: right;
    color: #888;
}

.address-col-l7 {
    grid-area: address-col-l7;
    text-align: right;
    color: #888;
}


.address-col-v1 {
    grid-area: address-col-v1;
    text-align: left;
    color: #000;
}

.address-col-v2 {
    grid-area: address-col-v2;
    text-align: left;
    color: #000;
}

.address-col-v3 {
    grid-area: address-col-v3;
    text-align: left;
    color: #000;
}

.address-col-v4 {
    grid-area: address-col-v4;
    text-align: left;
    color: #000;
}

.address-col-v5 {
    grid-area: address-col-v5;
    text-align: left;
    color: #000;
}

.address-col-v6 {
    grid-area: address-col-v6;
    text-align: left;
    color: #000;
}

.address-col-v7 {
    grid-area: address-col-v7;
    text-align: left;
    color: #000;
}

/* Generic */

.generic-grid-container-simple{
    padding: 0 0;
    margin: 0px 0px 20px 15px;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    display: grid;
    grid-template-columns: 0.1fr 1fr;
    grid-template-rows: 0fr 0fr 0fr 0fr 0fr 0fr 0fr 0fr;
    gap: 0px 10px;
    grid-auto-flow: row;
    grid-template-areas:
        "generic-col-l1 generic-col-v1"
        "generic-col-l2 generic-col-v2"
        "generic-col-l3 generic-col-v3"
        "generic-col-l4 generic-col-v4"
        "generic-col-l5 generic-col-v5"
        "generic-col-l6 generic-col-v6"
        "generic-col-l7 generic-col-v7"
        "generic-col-l8 generic-col-v8";
}

.generic-grid-container {
    border-left: 2px dotted #d4d4d4;
    padding: 0px 25px;
    margin: 0px 0px 0px 15px;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    display: grid;
    grid-template-columns: 0.1fr 1fr;
    grid-template-rows: 0fr 0fr 0fr 0fr 0fr 0fr 0fr 0fr;
    gap: 0px 10px;
    grid-auto-flow: row;
    grid-template-areas:
        "generic-col-l1 generic-col-v1"
        "generic-col-l2 generic-col-v2"
        "generic-col-l3 generic-col-v3"
        "generic-col-l4 generic-col-v4"
        "generic-col-l5 generic-col-v5"
        "generic-col-l6 generic-col-v6"
        "generic-col-l7 generic-col-v7"
        "generic-col-l8 generic-col-v8";
}

.generic-col-l1 {
    grid-area: generic-col-l1;
    text-align: right;
    color: #888;
}

.generic-col-l2 {
    grid-area: generic-col-l2;
    text-align: right;
    color: #888;
}

.generic-col-l3 {
    grid-area: generic-col-l3;
    text-align: right;
    color: #888;
}

.generic-col-l4 {
    grid-area: generic-col-l4;
    text-align: right;
    color: #888;
}

.generic-col-l5 {
    grid-area: generic-col-l5;
    text-align: right;
    color: #888;
}

.generic-col-l6 {
    grid-area: generic-col-l6;
    text-align: right;
    color: #888;
}

.generic-col-l7 {
    grid-area: generic-col-l7;
    text-align: right;
    color: #888;
}

.generic-col-l8 {
    grid-area: generic-col-l8;
    text-align: right;
    color: #888;
}

.generic-col-v1 {
    grid-area: generic-col-v1;
    text-align: left;
    color: #000;
}

.generic-col-v2 {
    grid-area: generic-col-v2;
    text-align: left;
    color: #000;
}

.generic-col-v3 {
    grid-area: generic-col-v3;
    text-align: left;
    color: #000;
}

.generic-col-v4 {
    grid-area: generic-col-v4;
    text-align: left;
    color: #000;
}

.generic-col-v5 {
    grid-area: generic-col-v5;
    text-align: left;
    color: #000;
}

.generic-col-v6 {
    grid-area: generic-col-v6;
    text-align: left;
    color: #000;
}

.generic-col-v7 {
    grid-area: generic-col-v7;
    text-align: left;
    color: #000;
}

.generic-col-v8 {
    grid-area: generic-col-v8;
    text-align: left;
    color: #000;
}