.tile-map-grid{
    display: block;
    grid-template-columns: repeat(13, 7%);
    grid-template-columns: repeat(13, calc(100% / 13));
    grid-auto-flow:row;
    width:100%;
    margin:0px auto 0px auto;
    max-width:1600px;
    padding:0px;
}

.tile-map-grid:after{
    display:table;
    content:"";
    clear:both;
}

.tile-map-grid > div{
    min-height:2em;
    float:left;
    width: 7%;
    position:relative;
    background-color:#e6e7e8;
    border:1px solid #ffffff;
    user-select:none;
    cursor:pointer;
    box-sizing: content-box;
    display:flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;;
}

.tile-map-grid > div.is-hidden{
    display:none;
}

.tile-map-grid > div:hover{
    background-color:#cccccc;
}
.tile-map-grid > div:hover p{
    /*color:#ffffff !important;*/
}

.tile-map-grid > div.state-selected{
    background-color:#333333 !important;
}

#child-welfare-fact-sheets[data-profile="maltreatment"] .tile-map-grid > div.state-selected {background-color: #0a355b !important;}
#child-welfare-fact-sheets[data-profile="foster-care"] .tile-map-grid > div.state-selected {background-color: #962573 !important;}
#child-welfare-fact-sheets[data-profile="kinship"] .tile-map-grid > div.state-selected {background-color: #007cc2 !important;}
#child-welfare-fact-sheets[data-profile="permanency"] .tile-map-grid > div.state-selected {background-color: #0b5a57 !important;}
#child-welfare-fact-sheets[data-profile="older-youth"] .tile-map-grid > div.state-selected {background-color: #4c1a53 !important;}

.tile-map-grid > div.state-selected p{
    color:#ffffff !important;
    font-weight:bold;
}

.tile-map-grid > div.filler-cell{
    visibility:hidden;
    background-color:#e0e0e0;
}

.tile-map-grid.mobile-grid{
    grid-template-columns: repeat(8, 12.5%);
}
.tile-map-grid.mobile-grid > div{
    width:12.5%;
}

.tile-map-grid > div > div{
    position: relative;
    padding:0px;
}

.tile-map-grid > div > div p{
    margin:0px;
}

.tile-map-grid > div > div > p.state-name{
    display:block;
    white-space:nowrap;
    height:1em;
}

.tile-map-grid > div > div > p.state-abbreviation{
    display:none;
    white-space:nowrap;
    height:1em;
    margin:0px 0px 0 0px;
    text-align:center;
    font-size:13px;
}

.tile-map-grid .state-plot{
    width:100%;
    min-height:0px;
}

@supports (display:grid) and (grid-template-columns: repeat(13, 7%)){
    .tile-map-grid{
        display:grid;
    }

    .tile-map-grid > div{
        width:auto !important;
    }

    .tile-map-grid > div > div > p.state-name,
    .tile-map-grid > div > div > p.state-abbreviation{
        white-space:normal;
        height:auto;
    }

    .tile-map-grid > div > div{
        position: relative;
        /*top: 100%;
        transform: translateY(-100%);*/
    }
}

.tile-map-wrap{
    max-width:1088px;
    margin:1em auto 3em auto;
    padding:1em 0em;

}

.tile-map-wrap > div{
    max-width:550px;
}

@media (min-width:0px){
    .tile-map-grid > div > div > p.state-name{display:none;}
    .tile-map-grid > div > div > p.state-abbreviation{display:block;}

    .tile-map-wrap > div, .tile-map-wrap > div:first-child{
        float:none;
        width:auto;
        padding:0px;
        margin-bottom:2em;
    }

    .tile-map-wrap{
        padding:18px;
    }
}

@media (min-width:480px){
  
}

@media (min-width:880px){

    .tile-map-wrap > div, 
    .tile-map-wrap > div:first-child{
        float:left;
        width:40%;
        padding:0px 10% 0px 0px;
        margin-bottom:0em;
    }
    .tile-map-wrap > div:first-child{
        float:right;
        width:60%;
        padding:0px;
    }

}

@media (min-width:1124px){
    .tile-map-wrap{
        padding:1em 0em;
    }
}

/*@media (min-width:1400px){
    .tile-map-grid > div > div > p.state-name{display:block;}
    .tile-map-grid > div > div > p.state-abbreviation{display:none;}
}*/