/*Flex and Column Grid Display */

.card-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 2rem;
    padding-bottom: 1em
}

.card-box {
    display: flex;
    flex-flow: column
}

/* Card Types */

.card {
    border: 1px solid var(--brand-gray);
    border-radius: 0.5rem;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .3);
}

    a.card-anchor:hover {
        text-decoration: none;
    }

    a.card-anchor:hover .card {
        box-shadow: 0 0 6px var(--brand-primary);
        transition: all 0.3s;
    }

.card-default {
    color: var(--text-dark);
    background-color: var(--white);
}

.card-warning {
    color: var(--text-dark);
    background-color: var(--white);
    background-color: rgba(255,255,255,0.9);
}

.card-select-filters {
    color: var(--text-dark);
    background-color: var(--white);
    background-color: rgba(255,255,255,0.9);
}

/* Card Header */
.card-header {
    background-color: transparent;
}

.card-box {
    color: var(--text-dark);
    /* background-color: white; */
    background: linear-gradient(180deg, white 0%, #f2f2f2 100%);
    /* border: none; */
}


.location-item {
    margin-bottom: 1rem;
}

.card-box-items {
    padding: 1.6rem .8rem .8rem;
}

/*.card-site .location-header h2 svg {
    position: absolute;
    left: 1.5rem;
}*/

    .card-box .card-box-header {
        height: 3rem;
    }

        .card-box .card-box-header h1, .location-item h1 {
            font-size: 1.5rem;
            font-weight: 100
        }

    .card-box .card-box-header h2 {
        font-size: 1.2rem;
        font-weight: 100;
        padding-left: 1.5rem;
    }

    .card-box .card-box-header h2 svg {
        position: absolute;
        left: 1.5rem;
    }


/* Adjust the active site header layout for devices larger than phones to display the content horizonally */

@media (min-width: 576px) {

    .card-select-filters {
        display: grid;
        grid-template-columns: 1fr 66%;
        grid-gap: 0.75rem;
    }

    .card-select-filters .card-header {
        background: transparent;
    }

    .card-box.active {
        display: grid;
        grid-template-columns: 1fr 320px 60px;
        grid-gap: 0.75rem;
    }

        

    .card-select-filters > div, .card-box.active > div {
        padding-top: 1.25rem !important;
    }

        .card-box.active .card-box-header {
            text-align: left !important;
        }

    .card-box .activator,
    .sensor-header .activator {
        display: none;
    }

    .card-box.active .activator,
    .card-detail .sensor-header .activator {
        display: flex;
        padding-top: 0 !important;
    }


}

/* Remove right padding content activator link when cite flows stop the next next row */
@media (max-width: 575px) {
    .card-box.active .activator,
    .card-detail .sensor-header .activator {
        padding-right: 0 !important;
    }
}


    /* Sensors */
    .card-sensor {
        color: #222;
        background-color: var(--white);
        border: none;
    }


        .card-sensor .card-body {
            padding-bottom: 0
        }

        .card-sensor .card-footer {
            background: none;
            border: none;
        }

    /* Detail */
    .card-detail {
        color: #222;
        background-color: var(--white);
        border: none;
    }



    /* Adjust layout based on device */
        .card-detail .sensor-header {
            display: block;
        }


        .card-detail .detail-callouts {
            display: block;
        }

        .card-detail .card-body {
            display: block;
           
        }


    @media (min-width: 576px) {

        .card-detail .sensor-header {
            display: grid;
            grid-template-columns: 1fr 60px;
            grid-gap: 0.75rem;
        }


        .card-detail .detail-callouts {
            display: grid;
            grid-template-columns: 1fr 300px 370px;
            grid-gap: 0.75rem;
        }

        .card-detail .detail-callouts, .card-detail .detail-legend {
            border-color: var(--brand-dark) !important;
        }

        .card-detail .card-body {
            display: grid;
            grid-template-columns: 1fr 240px;
            grid-gap: 0.75rem;
        }
    }




    /* Utilities */

.border-top {
    border-top: 1px solid var(--brand-light)
}

.border-bottom {
    border-bottom: 1px solid var(--brand-light)
}

    .box-shadow {
        box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05)
    }