.BusinessListPage
{
    margin: 0 auto;
}
.BusinessListTitle
{
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
}

label.blMapOpts { text-align:center; display:inline-table;}

.BusinessListTable .DataHeader1,
.BusinessListTable .DataHeader2,
.BusinessListTable .DataHeader3,
.BusinessListTable .DataHeader4,
.BusinessListTable .DataHeader5
{
    vertical-align:top;
}

.BusinessListTable .DataHeader1 div.sortableName
{
    display:grid;
    overflow-y: hidden;
    overflow-x: hidden;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas: "ht sort" 
                         "lb lb" 
                         "hb sel" ;
}

.BusinessListTable .DataHeader1 div.sortable,
.BusinessListTable .DataHeader2 div.sortable,
.BusinessListTable .DataHeader3 div.sortable,
.BusinessListTable .DataHeader4 div.sortable,
.BusinessListTable .DataHeader5 div.sortable
{
    display:grid;
    overflow-y: hidden;
    overflow-x: hidden;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    grid-template-areas: "ht sort" 
                         "lb lb" 
                         "hb sel" ;
}

.BusinessListTable .DataHeader1 div.sortable span,.BusinessListTable .DataHeader1 div.sortableName span,
.BusinessListTable .DataHeader2 div.sortable span,
.BusinessListTable .DataHeader3 div.sortable span,
.BusinessListTable .DataHeader4 div.sortable span,
.BusinessListTable .DataHeader5 div.sortable span
{
    grid-column: lb-start / lb-end;
    grid-row: lb-start / lb-end;
}

.BusinessListTable .DataHeader1 div.sortable i.sortable,
.BusinessListTable .DataHeader1 div.sortableName i.sortable,
.BusinessListTable .DataHeader2 div.sortable i.sortable,
.BusinessListTable .DataHeader3 div.sortable i.sortable,
.BusinessListTable .DataHeader4 div.sortable i.sortable,
.BusinessListTable .DataHeader5 div.sortable i.sortable
{
    grid-column: sort-start / sort-end;
    grid-row: sort-start / sort-end;
    color:gray;
    cursor: pointer;
    text-align: right;
}
.BusinessListTable .DataHeader1 div.sortable i.whatis,
.BusinessListTable .DataHeader2 div.sortable i.whatis,
.BusinessListTable .DataHeader3 div.sortable i.whatis,
.BusinessListTable .DataHeader4 div.sortable i.whatis,
.BusinessListTable .DataHeader5 div.sortable i.whatis
{
    grid-column: ht-start / ht-end;
    grid-row: ht-start / ht-end;
    color:dodgerblue;
    cursor: pointer;
    text-align: left;
}

.BusinessListTable .DataHeader1 div.sortable i.selectable,
.BusinessListTable .DataHeader1 div.sortableName i.selectable,
.BusinessListTable .DataHeader2 div.sortable i.selectable,
.BusinessListTable .DataHeader3 div.sortable i.selectable,
.BusinessListTable .DataHeader4 div.sortable i.selectable,
.BusinessListTable .DataHeader5 div.sortable i.selectable
{
    grid-column: sel-start / sel-end;
    grid-row: sel-start / sel-end;
    color:gray;
    cursor: pointer;
    text-align: right;
}

.BusinessListTable .DataHeader1 div.sortable div.blColOpts,.BusinessListTable .DataHeader1 div.sortable select,
.BusinessListTable .DataHeader1 div.sortable div.blColOpts,.BusinessListTable .DataHeader1 div.sortableName select,
.BusinessListTable .DataHeader2 div.sortable div.blColOpts,.BusinessListTable .DataHeader2 div.sortable select,
.BusinessListTable .DataHeader3 div.sortable div.blColOpts,.BusinessListTable .DataHeader3 div.sortable select,
.BusinessListTable .DataHeader4 div.sortable div.blColOpts,.BusinessListTable .DataHeader4 div.sortable select,
.BusinessListTable .DataHeader5 div.sortable div.blColOpts,.BusinessListTable .DataHeader5 div.sortable select
{
    grid-column: hb-start / sel-end;
    grid-row: hb-start / sel-end;
    cursor: pointer;
}


.NameRole {
        display:grid;
        overflow-y: none;
        overflow-x: none;
        grid-template-columns: minmax(min-content,1fr) auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "name icons" 
                             "role icons" 
                             "role icons" 
                             "role sel" 
}

.NameRoleUG {
        display:grid;
        overflow-y: none;
        overflow-x: none;
        grid-template-columns: minmax(min-content,1fr) auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "name icons" 
                             "role icons" 
                             "role icons" 
                             "ug sel" 
}

.bn {
    grid-column: name-start / name-end;
    grid-row: name-start /name-end;

}
.br {
    grid-column: role-start / role-end;
    grid-row: role-start /role-end;

}
.bi
{
    grid-column: icons-start / icons-end;
    grid-row: icons-start / icons-end;
    cursor: pointer;
}
i.bi
{
    display: contents;
}
.bs {
    grid-column: sel-start / sel-end;
    grid-row: sel-start / sel-end;
    cursor: pointer;
}
.bug {
    grid-column: ug-start / ug-end;
    grid-row: ug-start / ug-end;
}

.BusinessList {
    display: grid;
    overflow-y: auto;
    overflow-x: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "mapchart" 
                            "controls" 
                            "table";
    grid-row: businesslist-start / businesslist-end;

}

@media only screen and (min-width: 1px) and (max-width: 1299px) {
    .BusinessListMapSub
    {
        width: 95%;
        min-height: 200px;
        margin:0 auto;
        display:block;
        resize:both;    /* allow map to be enlarged */
    }
    .DocumentSectionContent div.BusinessList div.BusinessListMap div.BusinessListMapSub
    {
        height:200px;
    }

    .BusinessListTable {
        overflow-y:auto;
        grid-column: table-start / table-end;
        grid-row: table-start / table-end;
    }
}

@media only screen and (min-width: 1300px) {
    .BusinessList {
        display: grid;
        overflow-y: hidden;
        overflow-x: auto;
        grid-template-columns: 2fr 3fr;
        grid-template-rows:    auto 1fr;
        grid-template-areas: "mapchart controls" 
                             "mapchart table";
    }
    div.NoMap {
        grid-template-columns: auto 1fr;
    }


    .DocumentSectionContent div.BusinessList {
        display: grid;
        height:auto;
        overflow-y: auto;
        overflow-x: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas: "mapchart" 
                             "controls" 
                             "table";
    }
    .BusinessListMapSub
    {
        width: 95%;
        height: 98%;
        min-height: 400px;
        margin:0 auto;
        display:block;
        resize:both;    /* allow map to be enlarged */
    }
    .DocumentSectionContent div.BusinessList div.BusinessListMap div.BusinessListMapSub
    {
        height:400px;
    }

    .BusinessListTable {
        overflow-y:auto;
        grid-column: table-start / table-end;
        grid-row: table-start / table-end;
        /*height: 76vh;*/
    }
}

.DocumentSectionContent div.BusinessList div.BusinessListTable {
    height: auto;
}



.BusinessListChart {
    grid-column: mapchart-start / mapchart-end;
    grid-row: mapchart-start / mapchart-end;
    width: 95%;
    margin: 0 auto;
    min-height: 400px;
    /*max-width: var(--MaxPageWidth);*/
}

.BusinessListControls {
    grid-column: controls-start / controls-end;
    grid-row: controls-start / controls-end;
}

.BusinessListMap {
    grid-column: mapchart-start / mapchart-end;
    grid-row: mapchart-start / mapchart-end;
    width: 100%;
    margin: 0 auto;
    min-height: 200px;
    display: none;
    resize: both; /* allow map to be enlarged */
}


.BusinessListControlGroup
{
    display: inline-block;
	text-align: left;
	float: left;
	margin-left: 2px;
}
.BusinessListControl
{
}
.BusinessListRadioLabel
{
    font-size: .8em;
}
.BusinessListRadio, .blMessage
{
    font-size: .75em;
}

.BusinessListTable,.BusinessListTable table.DataTable
{
    /*max-width: var(--MaxPageWidth);*/
    width: 100%;
    clear: left;
    font-size:medium;
}
.Upload 
{
    margin-top:10px;
        cursor:pointer;
        float:right;
        font-size: 16px;
}


.WeatherLegend {
    width: 95%;
    margin: 0 auto;
    display: block;
}
.WeatherLegend img { height:20px;
}

.blclPopup
{
    display: none;
    position: fixed;
    min-width:125px;
    margin-top: 25px;
    top: 5vh;
    left: 10vw;
    width: auto;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1000;
    border: 1px solid var(--Border);
    box-shadow: 10px 10px 10px var(--Border);
    text-align: left;
    background-color: var(--Content);
}

.blclPopup div.PopupBoxBody {
    text-align: left;
}

.blclPopup div.PopupBoxBody input[type=button] {
    text-align: center;
}


.maplocator {
    font-family:'FontAwesome';
    font-style:normal;
    font-size: 16pt;
    color:gray;
    cursor: pointer;
}

.blSelect {
    margin-left:3px;
    font-family:'FontAwesome';
    font-style:normal;
    font-size: 12pt;
    color:gray;
    cursor: pointer;
}

.blSanctionedIcon {
    height: 20px;
    width: 20px;
}
.blSanctionedIcon:before {
    content: '   ';
    background-image: url('/sanctions.png');
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
}

.blSanctioned {
    height:20px;
    width:20px;
    cursor: pointer;
    font-style:normal;
}

.blNews { 

}

.blSettings, .blDownload, .blAlertOpts {
    margin-left:10px;
    cursor: pointer;
    font-style:normal;
    color: var(--TopMenuBackColor);
    float: right;
    padding:2px;
    border: 1px solid var(--SiteBackground);
}

.blSettings, .blDownload {
    margin-top: 10px;
}

.blAlertOpts {
    margin-top: 8px;
}

.blDownload {
    margin-right: 20px;
}

.blSettings:hover,.blDownload:hover, .blAlertOpts:hover, .blAdd:hover {
    color: var(--Link);
    border: 1px solid var(--Link);
}

.blAdd{
    color: var(--TopMenuBackColor);
    border: 1px solid var(--SiteBackground);
    box-shadow: 1px 1px 1px var(--Border);
}

.blAlertOpts {
   font-weight:bold;
   font-size: x-small;
}

div.PopupBoxHeader i.blAlertOpts, div.PopupBoxHeader span.blAlertOpts
,div.PopupBoxHeader i.blDownload {
   float: initial;
   border: 1px solid var(--Header);
   margin-right:5px;
   margin-top:auto;
 }

.whatis,.blColOpts
{ 
    cursor: pointer;
}

._PopupBox div.BusinessList div.BusinessListTable {
    /*height: 97%;*/
}

.SevereOnlyMessage {
    position: absolute;
    top: 15px;
    right: 135px;
    width: 190px;

    background-color: white;
    border-radius: 5px;

    text-align: center;

    z-index: 1000;

    box-shadow: 0 1px 5px rgb(0 0 0 / 40%);
}

.blo {
display:grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto 1fr;
grid-template-areas: "head head" "updn cb" "updn cb";
}
.blohead { grid-column: head-start/head-end;}
.bloup { grid-column: updn-start/updn-end; line-height:0.25em;}
.blodn { grid-column: updn-start/updn-end;}
.blocb {
    grid-column: cb-start/cb-end;
    margin-top: -9px;
    line-height: 1.5;
    margin-bottom: 7px;
}

@media only print 
{
    .blDirectOpts,.blColOpts,.whatis,.sortable { display: none; }
    .BusinessListTable,.BusinessListTable table.DataTable
    {
        font-size:10pt;
    }
    .BusinessList {
        overflow-y: hidden;
        overflow-x: hidden;
    }

}