@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');


.form-check-input {
    width: 1.0rem;
    height: 1.0rem;
}

.fix-checkbox {
    transform: translateY(-3px); /* Adjust this value if needed */
}
.fix-checkbox2 {
    transform: translateY(-4px); /* Adjust this value if needed */
}

/* Default Light Mode: Lighter Borders */
tr {
    border-top: 1px solid var(--bs-border-color-translucent);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

/* Dark Mode: Less Noticeable Borders */
[data-bs-theme="dark"] tr {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Lighter, subtle border */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


/* Default styling */
.refresh-button {
    font-size: 18px; /* Adjust icon size */
    padding: 5px;
}

    /* Change icon color based on Bootstrap theme */
    .refresh-button i {
        color: black; /* Default for light mode */
        transition: color 0.3s ease-in-out; /* Smooth transition */
    }

/* In Dark Mode, make the icon white */
[data-bs-theme="dark"] .refresh-button i {
    color: white !important;
}



/* 📌 Side Panel Styling */
#dockPanel {
    position: fixed;
    right: -400px; /* Initially Hidden */
    top: 60px;
    height: calc(100vh - 85px); 
    width: 400px;    
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease-in-out;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
}


    /* 👇 When Open */
    #dockPanel.open {
        right: 0;
    }



/* 🚀 Toggle Button */
#toggleDockPanel {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
    z-index: 1100;
}

#table_Directions thead {
    display: none;
}

.minWidth40{
    min-width:40px !important;

}

.custom-popup {
    position: absolute;
    width: 225px;
    height: 270px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    padding: 15px;
    display: none;
    z-index: 99999; 
   
}



.dropend:hover .custom-popup,
.dropend.show .custom-popup {
    display: block;
}


#table_SavedRoutes thead th:first-child,
#table_SavedRoutes tbody td:first-child {
    width: 25px;
    padding: 2px;
    padding-left:5px;
}

.clickable-icon:hover {
    color: #0d6efd; /* Bootstrap primary color */
}



/* Sticky Table Header */
#table_Favorites {
    border-collapse: collapse;
}

    #table_Favorites thead {
        position: sticky;
        top: -1px;
      /*  background: white;*/ /* Ensures header remains visible */
        z-index: 1020; /* Keeps it above other elements */
    }


/* Ensure rows have a consistent height */
.wellRow, .facilityRow {
    height: 50px; /* Set a minimum height */
    vertical-align: middle;
}

.popover.bg-secondary .popover-body {
    color: black !important;
}

.popover {
    max-width:300px !important;
}



.td_searchResultItem {
    padding: 8px 12px; /* Adjust padding for better spacing */
    white-space: nowrap;
}

/* Make dropdowns smaller and ensure proper alignment */
.text-end .dropdown {
    display: inline-block;
    vertical-align: middle;
}

/* Ensure the action buttons are always centered */
.text-end {
    min-width: 60px; /* Ensure the right column has space */
}

/* Adjust spacing for the icons */
.btn-link {
    font-size: 1.2em;
    padding: 5px;
}












.tableProjects {
    height: 500px;
    overflow: scroll;
    max-height: 380px;
}

    .tableProjects thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 5px;
    }

    .tableProjects tbody th {
        padding: 5px;
    }

    .tableProjects tbody td {
        padding: 5px;
        vertical-align: middle;
        line-height: 1.25em;
        background-color: transparent;
    }

   
    .tableProjects tbody {
        cursor: pointer;
    }


.openProjectRow {
    background-color: #dadef1;
}


.tableIconPicker {
    position: absolute;
    top: 20px;
    bottom: 10px;
    overflow: scroll;
}

    .tableIconPicker thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 5px;
    }

    .tableIconPicker tbody th {
        padding: 5px;
    }

    .tableIconPicker tbody td {
        padding: 5px;
        vertical-align: middle;
        line-height: 1.25em;
    }

   
    .tableIconPicker tbody {
        cursor: pointer;
    }

.iconPickerIconDiv {
    width: 34px;
    height: 34px;
    padding: 3px !important;
}

.iconPickerIconImg {
    max-height: 100%;
    max-width: 100%;
}



/*.tableMapLayers {
    position: absolute;
    top: 160px;
    bottom: 10px;
    overflow: scroll;
}*/

  /*  .tableMapLayers thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 5px;
    }

    .tableMapLayers tbody th {
        padding: 5px;
    }

    .tableMapLayers tbody td {
        padding: 5px;
        vertical-align: middle;
        line-height: 1.25em;
    }

    .tableMapLayers tbody tr:hover {
        color: #334fb9;
        cursor: default;
    }

    .tableMapLayers tbody {
        cursor: pointer;
    }*/






.tableSavedRoutes {
    position: absolute;
    width: 748px;
    top: 0px;
    bottom: 10px;
    overflow: scroll;
}

    .tableSavedRoutes thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 5px;
        vertical-align: middle;
    }

    .tableSavedRoutes tbody th {
        padding: 5px;
    }

    .tableSavedRoutes tbody td {
        padding: 5px;
        vertical-align: middle;
        line-height: 1.25em;
        cursor: pointer;
    }

    .tableSavedRoutes tbody tr:hover {
      
        color: #334fb9;
        cursor: pointer;
    }

    .tableSavedRoutes tbody {
        cursor: pointer;
    }






.tableContacts {
    position: absolute;
    top: 20px;
    left: 0px;
    bottom: 10px;
    overflow: scroll;
}

    .tableContacts thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 5px;
    }

    .tableContacts tbody th {
        padding: 5px;
    }

    .tableContacts tbody td {
        padding: 5px;
        vertical-align: middle;
        line-height: 1.25em;
        cursor: pointer;
    }

    .tableContacts tbody tr:hover {
        color: #334fb9;
        cursor: pointer;
    }

    .tableContacts tbody {
        cursor: pointer;
    }





.tableContactsMultiselect {
    position: absolute;
    top: 20px;
    left: 0px;
    bottom: 10px;
    overflow: scroll;
}

    .tableContactsMultiselect thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 5px;
    }

    .tableContactsMultiselect tbody th {
        padding: 5px;
    }

    .tableContactsMultiselect tbody td {
        padding: 5px;
        vertical-align: middle;
        line-height: 1.25em;
        cursor: pointer;
    }

    .tableContactsMultiselect tbody tr:hover {
        color: #334fb9;
        cursor: pointer;
    }

    .tableContactsMultiselect tbody {
        cursor: pointer;
    }







.tableAdminAccounts_Users {
    height: 500px;
    overflow: scroll;
}

    .tableAdminAccounts_Users thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 5px;
    }

    .tableAdminAccounts_Users tbody th {
        padding: 5px;
    }

    .tableAdminAccounts_Users tbody td {
        padding: 5px;
        vertical-align: middle;
        line-height: 1.25em;
    }

    .tableAdminAccounts_Users tbody tr:hover {
        color: #334fb9;
        cursor: default;
    }

    .tableAdminAccounts_Users tbody {
        cursor: default;
    }



.tableAdminAccounts_Organizations {
    height: 500px;
    overflow: scroll;
}

    .tableAdminAccounts_Organizations thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 5px;
    }

    .tableAdminAccounts_Organizations tbody th {
        padding: 5px;
    }

    .tableAdminAccounts_Organizations tbody td {
        padding: 5px;
        vertical-align: middle;
        line-height: 1.25em;
    }

    .tableAdminAccounts_Organizations tbody tr:hover {
        color: #334fb9;
        cursor: pointer;
    }

    .tableAdminAccounts_Organizations tbody {
        cursor: pointer;
    }





.tableAdminAccounts_OrganizationPrperties {
    height: 200px;
    overflow: scroll;
    margin-top: 5px;
}

    .tableAdminAccounts_OrganizationPrperties thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 5px;
    }

    .tableAdminAccounts_OrganizationPrperties tbody th {
        padding: 5px;
    }

    .tableAdminAccounts_OrganizationPrperties tbody td {
        padding: 5px;
        vertical-align: middle;
        line-height: 1.25em;
    }

    .tableAdminAccounts_OrganizationPrperties tbody tr:hover {
        color: #334fb9;
        cursor: default;
    }

    .tableAdminAccounts_OrganizationPrperties tbody {
        cursor: pointer;
    }


#project_Users_Dialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 600px;
    height: 400px;
}


.tableproject_Users {
    height: 200px;
    overflow: scroll;
    margin-top: 5px;
}

    .tableproject_Users thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 5px;
    }

    .tableproject_Users tbody th {
        padding: 5px;
    }

    .tableproject_Users tbody td {
        padding: 5px;
        vertical-align: middle;
        line-height: 1.25em;
    }

    .tableproject_Users tbody tr:hover {
        color: #334fb9;
        cursor: default;
    }

    .tableproject_Users tbody {
        cursor: pointer;
    }






.table_accounts_RenewalMultipleUsers {
    height: 250px;
    overflow: scroll;
    margin-top: 40px;
}

    .table_accounts_RenewalMultipleUsers thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 5px;
    }

    .table_accounts_RenewalMultipleUsers tbody th {
        padding: 5px;
    }

    .table_accounts_RenewalMultipleUsers tbody td {
        padding: 5px;
        vertical-align: middle;
        line-height: 1.25em;
    }

    .table_accounts_RenewalMultipleUsers tbody tr:hover {
        color: #334fb9;
        cursor: default;
    }

    .table_accounts_RenewalMultipleUsers tbody {
        cursor: pointer;
    }






    .tableSearchResults thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 5px;
    }

    .tableSearchResults tbody th {
        padding: 5px;
    }

    .tableSearchResults tbody td {
        padding: 5px;
        vertical-align: middle;
        line-height: 1.25em;
    }

    .tableSearchResults tbody tr:hover {
        color: #334fb9;
        cursor: default;
    }

    .tableSearchResults tbody {
        cursor: pointer;
    }


#favoriteDialog_IconImg {
    cursor: pointer;
    margin-left: 20px;
}


.modalDefault {
    padding: 20px !important;
}

.pointer {
    cursor: pointer !important;
}

.td_searchResultItem {
   /* height: 20px;
    line-height: 20px;*/
    cursor: pointer;
}

.td_directionsItem {
    height: 20px;
    line-height: 20px;
    cursor: pointer;
}


.td_contactItem {
    height: 20px;
    line-height: 20px;
    cursor: pointer;
}



.mapPopupContent {
    width: 150px;
}

.mapPopupTitle {
    width: 150px;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.3;
    margin-bottom: 10px;
}




.searchResultContent {
    display: block;
    width: 100%;
    text-align: left; /* Adjust text alignment if needed */
}




/* Ensure rows have a fixed height */
#table_SearchResults tbody tr {
    height: 80px; /* Adjust row height as needed */
    max-height: 80px;
    white-space: nowrap;
}

/* Ensure the table takes only the necessary height */
#table_SearchResults {
    width: 100%;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure the container doesn’t stretch rows but allows scrolling */
.scrollable-results-table-container,
.tableSearchResults {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Prevent cells from expanding disproportionately */
.td_searchResultItem, .searchIconDiv {
    vertical-align: middle !important;
    padding: 5px 10px; /* Adjust padding */
}








.searchResultsHeader {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}




#routeBuilder {
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid var(--border-color); /* Use a CSS variable */
    border-radius: 1px;
    z-index: 10000;
    position: absolute;
    top: 60px;
    left: 0px;
    width: 350px;
    height: 175px;
}

/* Define the default border color for light mode */
:root {
    --border-color: #eee9e9; /* Light mode border */
}

/* Change the border color when in dark mode */
[data-bs-theme="dark"] {
    --border-color: #333333; /* Dark mode border */
}






/* Default Light Mode */
:root {
    --border-color-quicksearch: #eee9e9; /* Light mode border */
}

/* Dark Mode */
[data-bs-theme="dark"] {
    --border-color-quicksearch: #333333; /* Dark mode border */
}

/* Apply Dynamic Border to quickSearchDialog */
#quickSearchDialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid var(--border-color-quicksearch); /* Theme-aware border */
    border-radius: 1px;
    z-index: 10000;
    position: absolute;
    top: 70px;
    left: 10px;
    width: 228px;
    height: 210px;
}




.quickSearch-row {
    position: absolute;
    width: 100%;
    height: 40px;
    top: 5px;
    cursor: pointer;
}

   /* .quickSearch-row:hover {
        background-color: #dddddd;
    }*/






.quickSearch-label {
    position: absolute;
    height: 30px;
    top: 11px;
    left: 60px;
    cursor: pointer;
    transition: color 0.3s ease-in-out; /* Smooth color transition */
}

    /* Hover effect - changes text color to Bootstrap primary */
    .quickSearch-label:hover {
        color: var(--bs-primary) !important;
    }



 


.quickSearch-button {
    position: absolute;
    height: 30px;
    top: 5px;
    left: 5px;
    width: 40px;
    border-radius: 2px !important;
    padding: 1px 10px 1px 10px !important;
}

.routebuilder-clear-start-button {
    position: absolute;
    top: 15px;
    right: 60px;
    height: 30px;
    width: 30px;
    /*    font-size: 12px;*/
    border-radius: 2px !important;
    padding: 0px 0px 0px 0px !important;
    background-color: white;
}

.routebuilder-faves-button {
    position: absolute;
    top: 15px;
    right: 0px;
    height: 30px;
    width: 40px;
    /*    font-size: 12px;*/
    border-radius: 2px !important;
    padding: 1px 10px 1px 10px !important;
}


:root {
    --border-color: #eee9e9; /* Light mode border */
}

[data-bs-theme="dark"] {
    --border-color: #333333; /* Dark mode border */
}

#favoritesPickerDialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid var(--border-color); /* Use dynamic variable */
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    bottom: 30px;
    left: 10px;
    width: 350px;
    height: 400px;
}


#usersOnlineDialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    bottom: 30px;
    left: 10px;
    width: 500px;
    height: 600px;
}

#geotabCompaniesDialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    bottom: 30px;
    left: 10px;
    width: 800px;
    height: 600px;
}

#geotabOrgUsageDialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    bottom: 30px;
    left: 10px;
    width: 800px;
    height: 600px;
}

.favoritesPickerHeader {
    position: absolute;
    width: 100%;
    height: 50px;
   /* border-bottom: 1px solid #eee9e9;*/
}

.usersOnlineHeader {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}

.geotabCompaniesHeader {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}

.geotabOrgUsageHeader {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}


/* Light Mode Default */
:root {
    --border-color-nearestplaces: #eee9e9; /* Light mode border */
}

/* Dark Mode */
[data-bs-theme="dark"] {
    --border-color-nearestplaces: #333333; /* Dark mode border */
}

/* Apply Dynamic Border & Styling */
#nearestPlacesPickerDialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid var(--border-color-nearestplaces); /* Theme-aware border */
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    bottom: 30px;
    left: 10px;
    width: 350px;
    height: 400px;
}






.nearestPlacesPickerHeader {
    position: absolute;
    width: 100%;
    height: 50px;
   /* border-bottom: 1px solid #eee9e9;*/
}

.nearestPlacesPickerContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 55px;
  /*  border-bottom: 1px solid #eee9e9;*/
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}



.addEditFavoritesHeader {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}



#DIV_SearchResults_Header,
.searchResultsHeader {
    flex: 0 0 auto;
}



.favoritesPickerContent {
    position: absolute;
    width: 100%;
    top:90px;
    bottom: 55px;   
  /*  border-bottom: 1px solid #eee9e9;*/
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.usersOnlineContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 10px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.geoTabCompaniesContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.geoTabOrgUsageContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

/*#directionsDialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 350px;
    height: 400px;
}*/

/*.directionsDialogContent {
    position: absolute;
    width: 100%;
    top: 40px;
    bottom: 30px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}*/


/*.table_Directions {
 
    top: 20px;
    bottom: 10px;
    left: 5px;
    width: 340px;
    overflow: scroll;
    padding: 0px !important;
}

    .table_Directions thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 2px;
        font-size: 12px;
    }

    .table_Directions tbody th {
        padding: 2px;
    }

    .table_Directions tbody td {
        padding: 2px;
        vertical-align: middle;
        line-height: 1.25em;
    }

    .table_Directions tbody tr:hover {
        color: #334fb9;
        cursor: default;
    }

    .table_Directions tbody {
        cursor: pointer;
    }*/




#table_GeoTabCompanies {
    position: absolute;
    top: 0px;
    bottom: 10px;
    left: 5px;
    width: 340px;
    overflow: scroll;
    padding: 0px !important;
}

    #table_GeoTabCompanies thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 2px;
        font-size: 12px;
    }

    #table_GeoTabCompanies tbody {
        height: 400px;
    }

        #table_GeoTabCompanies tbody th {
            padding: 2px;
        }

        #table_GeoTabCompanies tbody td {
            padding: 2px;
            vertical-align: middle;
            line-height: 1.25em;
        }

        #table_GeoTabCompanies tbody tr:hover {
            color: #334fb9;
            cursor: default;
        }

    #table_GeoTabCompanies tbody {
        cursor: pointer;
    }



#table_GeoTabOrgUsage {
    position: absolute;
    top: 0px;
    bottom: 10px;
    left: 5px;
    width: 340px;
    overflow: scroll;
    padding: 0px !important;
}

    #table_GeoTabOrgUsage thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 2px;
        font-size: 12px;
    }

    #table_GeoTabOrgUsage tbody {
        height: 400px;
    }

        #table_GeoTabOrgUsage tbody th {
            padding: 2px;
        }

        #table_GeoTabOrgUsage tbody td {
            padding: 2px;
            vertical-align: middle;
            line-height: 1.25em;
        }

        #table_GeoTabOrgUsage tbody tr:hover {
            color: #334fb9;
            cursor: default;
        }

    #table_GeoTabOrgUsage tbody {
        cursor: pointer;
    }



.buttonUploadLayerFile {
    position: absolute;
    margin-left: 40px;
    width: 200px;
    padding: 5px 10px 5px 10px;
    top: 100px;
}

#projectsDialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 1000px;
    height: 600px;
}

#newProjectDialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 400px;
    height: 350px;
}







.mapLayerTreeRow {
    display: flex;
    align-items: center;
    min-height: 28px;
}

.mapLayerTreeToggle,
.mapLayerTreeSpacer {
    width: 20px;
    min-width: 20px;
}

.mapLayerTreeToggle {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 10px;
}

    .mapLayerTreeToggle i {
        transition: transform .15s ease;
    }

    .mapLayerTreeToggle.expanded i {
        transform: rotate(90deg);
    }

.mapLayerTreeLabel {
    margin-left: 8px;
    font-size: 13px;
}

.mapLayerTreeChildren {
    display: none;
    margin-left: 42px;
    padding-left: 8px;
    border-left: 1px solid var(--bs-border-color);
}

.mapLayerTreeChild {
    display: flex;
    align-items: center;
    min-height: 26px;
    gap: 8px;
    font-size: 12px;
}






.mapLayerLegendIcon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex: 0 0 16px;
}

.mapLayerLegendSwatch {
    width: 22px;
    height: 12px;
    flex: 0 0 22px;
    position: relative;
}

.mapLayerLegendLine {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 2px;
}

    .mapLayerLegendLine.highway {
        height: 4px;
        background: #7C63D6;
    }

    .mapLayerLegendLine.arterial {
        height: 3px;
        background: #A5783C;
        box-shadow: 0 0 0 1px #6F4E23;
    }

    .mapLayerLegendLine.residential {
        height: 3px;
        background: #BA6E00;
        box-shadow: 0 0 0 1px #7A4B00;
    }

    .mapLayerLegendLine.winter {
        height: 5px;
        border-top: 5px dashed #7A5424;
    }

        .mapLayerLegendLine.winter::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: -4px;
            border-top: 3px dashed #CE9138;
        }

    .mapLayerLegendLine.grid {
        height: 1px;
        background: #777;
    }

    .mapLayerLegendLine.drillpath {
        height: 1px;
        background: #999;
    }

    .mapLayerLegendLine.lease {
        height: 2px;
        background: #C99B83;
    }

.mapLayerLegendPolygon {
    width: 16px;
    height: 12px;
    border: 1px solid #C99B83;
    background: rgba(242, 210, 189, .45);
    flex: 0 0 16px;
}


.mapLayerLegendTopLevel {
    margin-left: 8px;
}





#savedRoute_PropertiesDialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 470px;
    height: 250px;
}



.addEditFavoritesContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 55px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

#importLayerDialog {
    cursor: default;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 500px;
    height: 350px;
}


#editMapLayersDialog {
    cursor: default;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 400px;
    height: 500px;
}

#editMapLayerIconPickerDialog {
    cursor: default;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 460px;
    height: 550px;
}

/*#mapLayersDialog {
    cursor: default;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 400px;
    height: 500px;
}*/

#directRouteSpeedSettingsDialog {
    cursor: default;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 300px;
    height: 320px;
}

.dialogMask {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(0, 0, 0, 0.6);
}


#accounts_Renewal_Options_Dialog {
    cursor: default;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 660px;
    height: 300px;
}

#accounts_Renewal_Multiple_Dialog {
    cursor: default;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 560px;
    height: 700px;
}

.dropdownStyle {
    width: 100%;
    overflow: visible !important;
}

#confirmDialog {
    cursor: default;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
   /* border: 1px solid #eee9e9;*/
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 400px;
    height: 250px;
}


#sessionExpiredLogout_Inner {
    cursor: default;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 400px;
    height: 250px;
}

#forcedLogout_Inner {
    cursor: default;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 400px;
    height: 250px;
}

#messageDialog_Inner {
    cursor: default;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 400px;
    height: 250px;
}

#saveBeforePrintingWarningDialog_Inner {
    cursor: default;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 400px;
    height: 250px;
}



#emailDirectionsDialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 500px;
    height: 400px;
}

#contactsDialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 500px;
    height: 400px;
}



#selectUsersDialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 500px;
    height: 400px;
}





#addEditContactDialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 500px;
    height: 400px;
}

.importLayersHeader {
    cursor: move;
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}


.directRouteSpeedSettingsHeader {
    cursor: move;
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}

.editMapLayerHeader {
    cursor: move;
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}

.editMapLayerIconPickerHeader {
    cursor: move;
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}

.mapLayersHeader {
    cursor: move;
    position: absolute;
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #eee9e9;
}

.confirmHeader {
    cursor: move;
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}

.messageHeader {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}

.savedRoutesHeader {
    position: absolute;
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #eee9e9;
}

.emailDialogHeader {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}

.contactsDialogHeader {
    position: absolute;
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #eee9e9;
}

.contactsMultiselectDialogHeader {
    position: absolute;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #eee9e9;
}

.addEditContactsDialogHeader {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}

.projectsDialogHeader {
    position: absolute;
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #eee9e9;
}

.newProjectDialogHeader {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}

.editProjectDialogHeader {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}

.directionsDialogHeader {
    position: absolute;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #eee9e9;
}

.importLayerContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.confirmDialogContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.messageDialogContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}



#CB_EmailDirections_UseLast {
    cursor: pointer;
}


.mapLayersContent {
    position: absolute;
    width: 100%;
    top: 70px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.editMapLayerContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.directRouteSpeedSettingsContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

#editMapLayerIconPickerContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 0px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}




.emailDirectionsContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.contactsContent {
    position: absolute;
    width: 100%;
    top: 100px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.contactsMultiselectContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.addEditContactsContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.favoritesMainHeader {
    position: absolute;
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #eee9e9;
}

.favoritesCurrentProjectToolbar {
    /* background-color:yellowgreen;*/
    position: absolute;
    width: 100%;
    top: 70px;
    height: 45px;
}


.favoritesMainContent {
    position: absolute;
    width: 100%;
    top: 110px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    /* display: flex;
    flex-direction: column;
    flex: 1;*/
    overflow-y: auto;
}



.projectsCurrentProjectToolbar {
    /* background-color:yellowgreen;*/
    position: absolute;
    width: 100%;
    top: 70px;
    height: 40px;
}

.projectsContent {
    /* background-color:aqua;*/
    position: absolute;
    width: 100%;
    top: 110px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    /* display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;*/
    overflow-y: auto;
}

.newProjectContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.projectPropertiesContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.adminAccounts_Users_Header {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}

.adminAccounts_Orgs_Header {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}

.adminAccounts_OrgProperties_Header {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}

.project_Users_Dialog_Header {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}

.adminAccounts_UserProperties_Header {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}


.adminAccounts_Users_MainContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.adminAccounts_Orgs_MainContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.accounts_RenewalMultipleUsers_MainContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.adminAccounts_OrgProperties_MainContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.project_Users_Dialog_MainContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}


.accounts_Org_AVL_Properties_MainContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.adminAccounts_UserProperties_MainContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 70px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.input-group-append {
    cursor: pointer;
}




#adminAccounts_Users_Dialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 800px;
    height: 600px;
}

#adminAccounts_Orgs_Dialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 800px;
    height: 600px;
}

#accounts_Organization_AVL_Properties_Dialog_Inner {
    cursor: default;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 600px;
    height: 500px;
}

#adminAccounts_Organization_Properties_Dialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 600px;
    height: 600px;
}

#adminAccounts_User_Properties_Dialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 600px;
    height: 540px;
}


.savedRoutesProjectsControls {
    position: absolute;
    width: 100%;
    top: 70px;
    height: 40px;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}


.savedRoutesContent {
    position: absolute;
    width: 100%;
    top: 110px;
    bottom: 180px;
    border-bottom: 1px solid #eee9e9;
    overflow-y: auto;
}





#searchDialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border: 1px solid #eee9e9;
    border-radius: 4px;
    z-index: 10000;
    position: absolute;
    width: 640px;
    height: 450px;
}

.searchDialogHeader {
    position: absolute;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee9e9;
}

.searchDialogContent {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 55px;
    border-bottom: 1px solid #eee9e9;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.searchIconDiv {
    width: 32px;
    height: 32px;
    padding: 0px !important;
    line-height: 40px;
    text-align: center;
}

.searchIconImg {
    max-height: 100%;
    max-width: 100%;
}

a {
    cursor: pointer;
    text-decoration: none;
}


/* Ensure images load even when collapsed */
.image-collapse.collapse:not(.show) {
    display: block !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    transition: opacity 0.3s ease, height 0.3s ease;
}

.image-collapse.collapse.show {
    opacity: 1;
    height: auto !important;
}






.inputHintPadding {
    padding-top: 35px !important;
}


/*th {  
    background-color: #ffffff !important;
}*/

.selectedRow td {
    background-color: none !important;
}

.selectedRow label {
    color: #335eea !important;
    font-weight: bold;
}


.rollOver:hover {
    color: #0d6efd !important;
}

.cursorPointer {
    cursor: pointer;
}


.alignCenter {
    text-align: center;
}

.textMedium {
    font-size: 14px;
}

.textSmall {
    font-size: 12px;
}

.muted {
    color: grey;
}

.alignCenter {
    text-align: center;
}

/*.closeButton {
    position: absolute;
    right: 7px;
    top: 7px;
}*/

.closeButton {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}


/* Remove underline from links */
.dropdown-menu .dropdown-item {
    text-decoration: none !important; /* No underlining */
    background-color: transparent !important; /* Keeps background unchanged */
    transition: color 0.3s ease-in-out; /* Smooth color transition */
}

    /* Change text color on hover */
    .dropdown-menu .dropdown-item:hover {
        color: var(--bs-primary) !important; /* Uses Bootstrap's primary color */
        background-color: transparent !important; /* No background change */
    }



.moreInfoItem {
    margin-left: 10px;
    font-size: 14px;
}


.roadSpeed-label1 {
    padding-right: 0px;
    text-align: right;
}

.roadSpeed-label2 {
    padding: 0px;
    padding-left: 10px;
}

.roadSpeed-textbox-col {
    padding-right: 0px;
    padding-left: 10px;
}

.roadSpeed-textbox {
    padding: 4px;
    padding-left: 10px;
}


.roadSpeed-row {
    padding-bottom: 5px;
}


.dropdown-menu li {
    position: relative;
}

.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
}

.dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
}

.menuItem {
    padding: 0px !important;
    padding-bottom: 3px !important;
    padding-top: 3px !important;
    margin: 0px !important;
}


#BT_FileMenu :hover {
    background-color: #423f3c;
}

.routeInstructions {
    position: absolute;
    text-align: center;
    font-size: 12px;
    color: red;
    font-family: "Poppins", sans-serif;
    font-weight: bold;
    left: 10px;
    right: 10px;
    bottom: 2px;
    width: 440px;
}

.fontDefault {
    font-family: "Poppins", sans-serif !important;
    line-height: 1.25em;
    font-weight: 400;
 
}

.fontRobotoMono {
    font-family: "Roboto Mono", monospace;
    line-height: 1.0em;
    font-weight: 400;
    font-size: 12px;
}


.fontRegular {
    font-weight: 400;
}

.fontLight {
    font-weight: 300;
}

h6 {       
    font-weight:bold !important;    
}

h3 {
    font-size: 24px;
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;  
}


.tab-container {
    background-color: var(--bs-secondary-bg); 
    display: flex;
    align-items: flex-end; /* Ensures tabs align to the bottom */  
    position: relative;
    padding: 0;
    height: 40px;
    z-index: 999999;
}

.tab-list {
    display: flex;
    white-space: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0;
    margin: 0;
    list-style: none;
    flex-grow: 1;
    align-items: flex-end; /* Aligns tab-items to the bottom */
}

    .tab-list::-webkit-scrollbar {
        display: none;
    }

.tab-item {
    color: var(--bs-body-color); /* Uses Bootstrap's text color */
    padding: 10px 15px;
    text-decoration: none;
    font-weight: normal;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Ensures the tab fully stretches */
}

    /* Hover Effect */
    .tab-item:hover {
        color: var(--bs-body-color);
        background-color: var(--bs-secondary-bg);
        border-bottom: 3px solid var(--bs-primary);
        border-radius: 5px 5px 0 0;
    }

    /* Active Tab */
    .tab-item.active {   
        background-color: var(--bs-body-bg);
        border-bottom: none; /* Removes bottom border to blend into content */
        border-radius: 10px 10px 0 0; /* Rounded top corners */
        padding: 10px 13px;
        position: relative;
        margin-bottom: -1px; /* Ensures it blends into the container */
        z-index: 999999;
        font-weight:bold;
    }


.dropdownTabList {
    position: absolute !important; /* Forces it above other elements */
    z-index: 1050 !important; /* Ensures it's above the tab content */
    top: 100%; /* Positions it correctly below the button */
    left: 0;
    display: block; /* Ensures visibility (Bootstrap will handle hiding it) */
}

#tabDropdown::after {
    display: none !important; /* Removes Bootstrap's default dropdown caret */
}





















.buttonDefault {
    padding: 5px 20px;
    width: fit-content;
    font-size: 13px;
}

.buttonProjectPropertiesCustom {
    color: #335eea;
}

    .buttonProjectPropertiesCustom:hover {
        color: white;
    }

.buttonCosy {
    padding: 2px 10px;
}

.buttonReallyCosy {
    padding: 0px 6px;
}


.buttonOptions {
    font-size: 13px;
    width: fit-content;
    padding: 3px 20px 3px 20px;
}

.calloutButton {
    position: relative;
    font-family: "Poppins", sans-serif;
    left: 0px;
    width: 150px;
    height: 40px;
    font-size: 12px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: -10px;
}

.calloutButtonNEW {
    position: relative;
    left: 0;
    width: 150px;
    height: 40px;
    margin-bottom: 5px;
    padding: 0;
    font-size: 13px;
    font-family: "Poppins", sans-serif;
}


.mapPopupTitle {
    width: 130px;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.3;
    margin-bottom: 10px;
}

.btn-success {
    background-color: #0F9D58;
}

.font9 {
    font-size: 9px !important;
}

.font10 {
    font-size: 10px !important;
}

.font11 {
    font-size: 11px !important;
}

.font12 {
    font-size: 12px !important;
}

.font13 {
    font-size: 13px !important;
}

.font14 {
    font-size: 14px !important;
}

.font15 {
    font-size: 15px !important;
}
.font16 {
    font-size: 16px !important;
}

.boldest {
    font-weight: 700 !important;
}

.bolder {
    font-weight: bolder;
}

.bold {
    font-weight: bold !important; 
}

.normal {
    font-weight: normal !important;
}


.pointInfoRow {
    padding: 5px;
}

/*.pointInfoRow_Highlight {
    background-color: #e6e5e5;
}*/

.pointInfoTitleColumn {
    width: 150px;
    padding: 2px;
}



#expiryNotice {
    position: fixed;
    z-index: 10000000;
    display: none;
    left: 50%;
    margin-left: -250px;
    width: 500px;
    height: 51px;
    top: 60px;
    background-color: #fbedc5;
    border-radius: 3px;
    border: 1px solid #df4759;
}


.markerLabel {
    background-color: white;
    border: 2px solid black;
    z-index: 13000 !important;
    /*  font-family: "Open Sans", Helvetica, sans-serif;*/
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    line-height: 1.1em;
    font-size: 13px;
    padding: 5px;
}


.assetLabelCallout_Stopped {
    margin-left: 10px;
    background-color: black;
    border: 2px solid black;
    z-index: 12000 !important;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    line-height: 1.1em;
    font-size: 13px;
    padding: 10px;
    color: white;
}

.assetLabelCallout_Moving {
    margin-left: 10px;
    background-color: #2979FF;
    border: 2px solid #2979FF;
    z-index: 12000 !important;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    line-height: 1.1em;
    font-size: 13px;
    padding: 10px;
    color: white;
}

.assetLabelCallout_Equipment {
    margin-left: 10px;
    background-color: #506690;
    border: 2px solid #506690;
    z-index: 12000 !important;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    line-height: 1.1em;
    font-size: 13px;
    padding: 10px;
    color: white;
}



.turnLabel {
    background-color: lightgray;
    border: 2px solid black;
    z-index: 50000 !important;
    /*  font-family: "Open Sans", Helvetica, sans-serif;*/
    font-family: "Poppins", sans-serif;
    font-weight: bolder;
    color: black;
    line-height: 1.1em;
    font-size: 14px;
    padding: 3px;
}


.favoriteLabelCallout {
    background-color: white;
    border: 1px solid black;
    z-index: 12000 !important;
    /*  font-family: "Open Sans", Helvetica, sans-serif;*/
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    line-height: 1.1em;
    font-size: 12px;
    padding: 3px;
}


.border-textbox {
    border: 1px solid #d5cece !important;
}

    .border-textbox:hover {
        box-shadow: 0 0 2pt 0.25pt #335eea;
    }

    .border-textbox:focus {
        box-shadow: 0 0 3pt 0.5pt #335eea;
        outline-width: 0px;
    }


.favoriteName {
    color: var(--bs-body-color) !important; /* Uses Bootstrap's text color */
    transition: color 0.3s ease-in-out !important; /* Smooth transition */
    cursor: pointer !important; /* Makes it clear it's interactive */
}

    .favoriteName:hover {
        color: var(--bs-primary) !important; /* Changes to Bootstrap's primary color on hover */
    }



.bt-100 {
    width: 100px;
}

.favoritesCheckboxDiv {
    width: 30px;
    padding: 0px !important;
}

.favoritesCheckbox {
    margin: 0px !important;
}

.favoritesIconDiv {
    width: 16px;
    height: 16px;
    padding: 0px !important;
}

/*.invisibleFavoriteIconImg {
    max-height: 100%;
    max-width: 100%;
}*/
.invisibleFavoriteIconImg {
    width: 16px; /* Adjust size as needed */
    height: 16px;
    object-fit: contain; /* Ensures proper scaling */
}


.invisibleFavoriteIconDiv {
    width: 30px;
    height: 24px;
    padding: 0px !important;
}

/*.favoritesIconImg {
    max-height: 100%;
    max-width: 100%;
    padding: 0px;
}*/

.favoritesIconImg {
    width: 24px; /* Adjust size as needed */
    height: 24px;
    object-fit: contain; /* Ensures proper scaling */
}



.directionsIconDiv {
    width: 16px;
    height: 16px;
    padding: 0px !important;
}

.directionsIconImg {
    max-height: 100%;
    max-width: 100%;
}


.tooltip,
.tooltip .tooltip-inner {
    font-family: 'Poppins', sans-serif !important; 
    font-size:13px;
}




body {
    margin: 0;
    padding: 0;
}

#mapContainer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 400px; /* Start in shrunk mode */
    transition: right 0.3s ease-in-out;
}



#map {
    width: 100%;
    height: 100%;
}


#mapLibre {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}


input {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
}


::-webkit-scrollbar {
    display: none;
}

/* Remove underline */
.link-no-underline {
    text-decoration: none !important;
    color: inherit; /* Keeps default text color */
    transition: color 0.3s ease-in-out; /* Smooth transition for hover effect */
}

    /* Hover effect - changes text color on hover */
    .link-no-underline:hover {
        color: var(--bs-primary) !important; /* Uses Bootstrap primary color */
        text-decoration: none !important; /* Ensure no underline */
    }


#BT_ShowMapLibre {
    width: fit-content !important;
    height: fit-content !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 3px 8px !important;
    margin: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

    #BT_ShowMapLibre:hover {
        filter: brightness(0.92);
    }



#mapLibreViewControl {
    position: absolute;
    bottom: 100px;
    left: 10px;
    z-index: 2000;
    width: 180px;
    padding: 8px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.mapLibreViewControlTitle {
    font-weight: bold;
    margin-bottom: 7px;
}

.mapLibreViewRow {
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
}

    .mapLibreViewRow button {
        flex: 1;
        padding: 4px 5px;
        border: 1px solid var(--bs-border-color);
        border-radius: 4px;
        background: var(--bs-tertiary-bg);
        color: var(--bs-body-color);
        font-size: 11px;
        cursor: pointer;
    }

        .mapLibreViewRow button:hover {
            background: var(--bs-secondary-bg);
        }

.mapLibreViewInfo {
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid var(--bs-border-color);
}



/*--------------------------------------------------------------------------------------------------
    MapLibre Popups
--------------------------------------------------------------------------------------------------*/

.maplibregl-popup-content {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}


/* Popup close X */

.maplibregl-popup-close-button {
    color: var(--bs-body-color);
}

    .maplibregl-popup-close-button:hover {
        background-color: var(--bs-secondary-bg);
    }


/* Popup arrow */

.maplibregl-popup-anchor-top .maplibregl-popup-tip {
    border-bottom-color: var(--bs-body-bg);
}

.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
    border-top-color: var(--bs-body-bg);
}

.maplibregl-popup-anchor-left .maplibregl-popup-tip {
    border-right-color: var(--bs-body-bg);
}

.maplibregl-popup-anchor-right .maplibregl-popup-tip {
    border-left-color: var(--bs-body-bg);
}

.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
    border-bottom-color: var(--bs-body-bg);
}

.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
    border-top-color: var(--bs-body-bg);
}




#div_Geotab_VehiclesListContainer {
    position: absolute;
    display: flex;
    right: 0px;
    top: 40px;
    height: calc(100% - 20px);
    width: 400px;
  /*  z-index: 1999;*/
  /*  background-color: white;*/
    padding: 5px;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
}

#div_Geotab_TrailersListContainer {
    position: absolute;
    display: flex;
    right: 0px;
    top: 40px;
    height: calc(100% - 20px);
    width: 400px;
  /*  z-index: 1999;*/
   /* background-color: white;*/
    padding: 10px;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
}



#div_AssetsListContainer {
    position: absolute;
    display: flex;
    right: 0px;
    top: 90px;
    height: calc(100% - 86px);
    width: 400px;
    z-index: 1999;
   /* background-color: white;*/
    padding: 10px;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
}

#div_AddressesListContainer {
    position: absolute;
    display: flex;
    right: 0px;
    top: 90px;
    height: calc(100% - 86px);
    width: 400px;
    z-index: 1999;
    /* background-color: white;*/
    padding: 10px;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
}

#div_TrailersListContainer {
    position: absolute;
    display: flex;
    right: 0px;
    top: 90px;
    height: calc(100% - 86px);
    width: 400px;
    z-index: 1999;
    /*  background-color: white;*/
    padding: 10px;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
}

#div_EquipmentListContainer {
    position: absolute;
    display: flex;
    right: 0px;
    top: 90px;
    height: calc(100% - 86px);
    width: 400px;
    z-index: 1999;
    /*background-color: white;*/
    padding: 10px;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
}


#div_UnpoweredListContainer {
    position: absolute;
    display: flex;
    right: 0px;
    top: 90px;
    height: calc(100% - 86px);
    width: 400px;
    z-index: 1999;
    /* background-color: white;*/
    padding: 10px;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
}

.div_AssetsListContainer_NEW {
    position: absolute;
    display: flex;
    right: 0px;
    top: 60px;
    height: calc(100% - 74px);
    width: 400px;
    z-index: 1999;
   /* background-color: white;*/
    padding: 10px;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
}


.header_Geotab, .footer_Geotab {
 
   /* background-color: red;*/

    width: 100%;
    text-align: center;
    flex-shrink: 0;
}

.header_Geotab {
    height: 40px;
    top: 0px;
}

.footer_Geotab {
    height: 70px;
}




.header_AssetAddresses, .footer_AssetAddresses {
  /*  background: #f1f1f1;*/
    width: 100%;
    text-align: center;
    flex-shrink: 0;
}

.header_AssetAddresses {
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    position: relative !important;
}

.footer_AssetAddresses {
    height: 70px;
}

.middle_AssetAddresses {
    overflow-y: auto;
    flex-grow: 1;
    padding: 10px;
}

.listview_AssetAddresses {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    .listview_AssetAddresses li {
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }














.vehicleList_Header {
    font-size: 18px;
    font-weight: 800;
    font-family: "Poppins", sans-serif;
   /* color: black;*/
    margin: 0px;
}

.samsara_Asset_Title {
    font-size: 13px;
    font-weight: bold;
    font-family: "Poppins", sans-serif;
   /* color: black;*/
    margin: 1px;
}

.samsara_Equipment_Title {
    font-size: 13px;
    font-weight: bold;
    font-family: "Poppins", sans-serif;
  /*  color: black;*/
    margin: 1px;
}

.samsara_Equipment_SubTitle {
    font-size: 13px;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    color: #3677D6;
    margin: 1px;
}
.samsara_Asset_SubTitle {
    font-size: 13px;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    color: #3677D6;
    margin: 1px;
}

.samsara_Asset_Content {
    font-size: 13px;
    font-family: "Poppins", sans-serif;
   /* color: black;*/
    margin: 1px;
}
.samsara_Asset_Content1 {
    font-size: 12px;
    font-family: "Poppins", sans-serif;
   /* color: black;*/
    margin: 1px;
}

.samsara_Asset_Content2 {
    font-size: 11px;
    font-weight: normal;
    font-family: "Poppins", sans-serif;
    margin: 1px;
}




.addressList_Name_td {
    padding-left: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 5px !important;
    padding-right: 10px !important;
    vertical-align: middle !important;
}


.equipmentList_Name_td {
    padding-left: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 5px !important;
    padding-right: 10px !important;
    vertical-align: middle !important;
}


.vehicleList_NameAndDriver_td {
    padding-top: 10px !important;
    padding-bottom: 5px !important;
    padding-right: 0px !important;
    padding-left: 10px !important;
    vertical-align: middle !important;
}

.vehicleList_LastUpdateAndSpeed_td {
    padding-top: 10px !important;
    padding-bottom: 5px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.addressList_Icons_td {
    padding-top: 10px !important;
    padding-bottom: 5px !important;
    padding-right: 5px !important;
    padding-left: 10px !important;
    text-align: center !important;
    vertical-align: middle !important;
}



.vehicleList_MoreInfo_td {
    padding: 0px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.addressesList_Content {
    font-size: 12px;
    font-weight: normal;   
    font-family: "Poppins", sans-serif;
    margin: 1px;
}
.trailersList_TrailerName {
    font-size: 13px;
    font-weight: normal;   
    font-family: "Poppins", sans-serif;
    margin: 1px;
}
.vehicleList_VehicleContent {
    font-size: 12px;
    font-weight: normal;   
    font-family: "Poppins", sans-serif;
    margin: 1px;
}





.addressesList_FormattedAddress {
    font-size: 11px;
    font-weight: normal;
    font-family: "Poppins", sans-serif;
    margin: 1px;
}

.trailersList_LicensePlate {
    font-size: 12px;
    font-weight: normal;
    font-family: "Poppins", sans-serif;
    margin: 1px;
}
.equipmentList_Location {
    font-size: 13px;
    font-weight: normal;
    font-family: "Poppins", sans-serif;
    margin: 1px;
}

.trailersList_AssignedDriver {
    font-size: 12px;
    font-weight: normal;
    font-family: "Poppins", sans-serif;
    margin: 1px;  
}




.Yellow {
    color: #f5e20e !important;
}

.Red {
    color: #c67373 !important;
}

.Red_Bright {
    color: #ff0000 !important;
}

.Blue {
    color: #335eea !important;
}

.Green {
    color: #42ba96 !important;
}

.Grey {
    color: #858585 !important;
}

.LightGrey {
    color: #a8a4a4 !important;
}

.DarkGrey {
    color: #2e2a27 !important;
}

.Black {
    color: #000000 !important;
}

.White {
    color: #ffffff !important;
}

.addressesList_tr {
    cursor: pointer;
}
.trailersList_tr {
    cursor: pointer;
}
.vehicleList_tr {
    cursor: pointer;
}

.underline {
}

    .underline:hover {
        text-decoration: underline;
    }




    /*.addressesList_VisibleButton {
    content: "";
    display: inline-block;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNS40LjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNCNUI0QjQ7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMiwyYzUuNSwwLDEwLDQuNSwxMCwxMHMtNC41LDEwLTEwLDEwUzIsMTcuNSwyLDEyUzYuNSwyLDEyLDIgTTEyLDRjLTQuNCwwLTgsMy42LTgsOHMzLjYsOCw4LDhzOC0zLjYsOC04DQoJUzE2LjQsNCwxMiw0IE0xMiwxMC41YzAuOCwwLDEuNSwwLjcsMS41LDEuNXMtMC43LDEuNS0xLjUsMS41cy0xLjUtMC43LTEuNS0xLjVTMTEuMiwxMC41LDEyLDEwLjUgTTcuNSwxMC41QzguMywxMC41LDksMTEuMiw5LDEyDQoJcy0wLjcsMS41LTEuNSwxLjVTNiwxMi44LDYsMTJTNi43LDEwLjUsNy41LDEwLjUgTTE2LjUsMTAuNWMwLjgsMCwxLjUsMC43LDEuNSwxLjVzLTAuNywxLjUtMS41LDEuNWMtMC44LDAtMS41LTAuNy0xLjUtMS41DQoJUzE1LjcsMTAuNSwxNi41LDEwLjV6Ii8+DQo8L3N2Zz4NCg==');
    background-repeat: no-repeat;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0px !important;
    margin-top: 7px;
}*/
    .addressesList_VisibleButton {
        content: "";
        display: inline-block;
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNS40LjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiM2NjY2NjY7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMS44LDlsMy4yLDMuMmMwLTAuMSwwLTAuMSwwLTAuMmMwLTEuNy0xLjMtMy0zLTNDMTEuOSw5LDExLjksOSwxMS44LDkgTTcuNSw5LjhsMS41LDEuNkM5LDExLjYsOSwxMS44LDksMTINCgljMCwxLjcsMS4zLDMsMywzYzAuMiwwLDAuNCwwLDAuNi0wLjFsMS42LDEuNUMxMy41LDE2LjgsMTIuOCwxNywxMiwxN2MtMi44LDAtNS0yLjItNS01QzcsMTEuMiw3LjIsMTAuNSw3LjUsOS44IE0yLDQuM2wyLjMsMi4zDQoJTDQuNyw3Yy0xLjcsMS4zLTMsMy0zLjcsNWMxLjcsNC40LDYsNy41LDExLDcuNWMxLjYsMCwzLTAuMyw0LjQtMC44bDAuNCwwLjRsMi45LDIuOWwxLjMtMS4zTDMuMywzIE0xMiw3YzIuOCwwLDUsMi4yLDUsNQ0KCWMwLDAuNi0wLjEsMS4zLTAuNCwxLjhsMi45LDIuOWMxLjUtMS4yLDIuNy0yLjksMy40LTQuOGMtMS43LTQuNC02LTcuNS0xMS03LjVjLTEuNCwwLTIuNywwLjItNCwwLjdsMi4yLDIuMkMxMC43LDcuMSwxMS40LDcsMTIsN3oNCgkiLz4NCjwvc3ZnPg0K');
        background-repeat: no-repeat;
        width: 1.0rem;
        height: 1.0rem;
        padding: 0px !important;
        margin-top: 7px;
    }

.addressesList_PolygonGeofenceButton {
    content: "";
    display: inline-block;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNS40LjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGOTkxMUU7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik03LjEsMTkuOWgxMC4xbDMuNC0xMC4ybC04LjUtNS45TDMuNyw5LjdMNy4xLDE5Ljl6IE01LjUsMjIuMUwxLDguOGwxMS4xLTcuOGwxMS4xLDcuOGwtNC40LDEzLjNINS41eiIvPg0KPC9zdmc+DQo=');
    background-repeat: no-repeat;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0px !important;
    margin-top: 7px;
}
.addressesList_CircleGeofenceButton {
    content: "";
    display: inline-block;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNS40LjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiM0NzY4RjQ7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMiwyYzMuMywwLDYsMi43LDYsNS45YzAsNC41LTYsMTEuMS02LDExLjFTNiwxMi40LDYsNy45QzYsNC43LDguNywyLDEyLDIgTTEyLDZjLTEuMSwwLTIsMC45LTIsMnMwLjksMiwyLDINCglzMi0wLjksMi0yUzEzLjEsNiwxMiw2IE0yMCwxOWMwLDIuMi0zLjYsNC04LDRzLTgtMS44LTgtNGMwLTEuMywxLjItMi40LDMuMS0zLjJsMC42LDAuOUM2LjcsMTcuMiw2LDE3LjgsNiwxOC41DQoJYzAsMS40LDIuNywyLjUsNiwyLjVzNi0xLjEsNi0yLjVjMC0wLjctMC43LTEuMy0xLjgtMS44bDAuNi0wLjlDMTguOCwxNi42LDIwLDE3LjcsMjAsMTl6Ii8+DQo8L3N2Zz4NCg==');
    background-repeat: no-repeat;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0px !important;
    margin-top: 7px;
}

.vehiclesList_PolygonGeofence {
    content: "";
    display: inline-block;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNS40LjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGOTkxMUU7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik03LjEsMTkuOWgxMC4xbDMuNC0xMC4ybC04LjUtNS45TDMuNyw5LjdMNy4xLDE5Ljl6IE01LjUsMjIuMUwxLDguOGwxMS4xLTcuOGwxMS4xLDcuOGwtNC40LDEzLjNINS41eiIvPg0KPC9zdmc+DQo=');
    background-repeat: no-repeat;
    width: 0.8rem;
    height: 0.8rem;
 /*   padding: 0px !important;
    margin-top: 7px;*/
}




.vehicleList_MoreInfoButton {
    content: "";
    display: inline-block;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNS40LjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNCNUI0QjQ7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMiwyYzUuNSwwLDEwLDQuNSwxMCwxMHMtNC41LDEwLTEwLDEwUzIsMTcuNSwyLDEyUzYuNSwyLDEyLDIgTTEyLDRjLTQuNCwwLTgsMy42LTgsOHMzLjYsOCw4LDhzOC0zLjYsOC04DQoJUzE2LjQsNCwxMiw0IE0xMiwxMC41YzAuOCwwLDEuNSwwLjcsMS41LDEuNXMtMC43LDEuNS0xLjUsMS41cy0xLjUtMC43LTEuNS0xLjVTMTEuMiwxMC41LDEyLDEwLjUgTTcuNSwxMC41QzguMywxMC41LDksMTEuMiw5LDEyDQoJcy0wLjcsMS41LTEuNSwxLjVTNiwxMi44LDYsMTJTNi43LDEwLjUsNy41LDEwLjUgTTE2LjUsMTAuNWMwLjgsMCwxLjUsMC43LDEuNSwxLjVzLTAuNywxLjUtMS41LDEuNWMtMC44LDAtMS41LTAuNy0xLjUtMS41DQoJUzE1LjcsMTAuNSwxNi41LDEwLjV6Ii8+DQo8L3N2Zz4NCg==');
    background-repeat: no-repeat;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0px !important;
    margin-top: 7px;
}

    .vehicleList_MoreInfoButton:hover {
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNS40LjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiM3RjdBN0E7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMiwyYzUuNSwwLDEwLDQuNSwxMCwxMHMtNC41LDEwLTEwLDEwUzIsMTcuNSwyLDEyUzYuNSwyLDEyLDIgTTEyLDRjLTQuNCwwLTgsMy42LTgsOHMzLjYsOCw4LDhzOC0zLjYsOC04DQoJUzE2LjQsNCwxMiw0IE0xMiwxMC41YzAuOCwwLDEuNSwwLjcsMS41LDEuNXMtMC43LDEuNS0xLjUsMS41cy0xLjUtMC43LTEuNS0xLjVTMTEuMiwxMC41LDEyLDEwLjUgTTcuNSwxMC41QzguMywxMC41LDksMTEuMiw5LDEyDQoJcy0wLjcsMS41LTEuNSwxLjVTNiwxMi44LDYsMTJTNi43LDEwLjUsNy41LDEwLjUgTTE2LjUsMTAuNWMwLjgsMCwxLjUsMC43LDEuNSwxLjVzLTAuNywxLjUtMS41LDEuNWMtMC44LDAtMS41LTAuNy0xLjUtMS41DQoJUzE1LjcsMTAuNSwxNi41LDEwLjV6Ii8+DQo8L3N2Zz4NCg==');
    }



.buttonRefresh::before {
    content: "";
    display: inline-block;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.65%2C6.35C16.2%2C4.9%2014.21%2C4%2012%2C4A8%2C8%200%200%2C0%204%2C12A8%2C8%200%200%2C0%2012%2C20C15.73%2C20%2018.84%2C17.45%2019.73%2C14H17.65C16.83%2C16.33%2014.61%2C18%2012%2C18A6%2C6%200%200%2C1%206%2C12A6%2C6%200%200%2C1%2012%2C6C13.66%2C6%2015.14%2C6.69%2016.22%2C7.78L13%2C11H20V4L17.65%2C6.35Z%22%20%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    width: 1.5rem;
    height: 1.5rem;
}

.buttonRefresh:hover {
    background-color: #3b4046;
}



.calloutHeader {
    font-size: 14px;
    font-weight: bold;
    font-family: "Poppins", sans-serif;
    color: var(--bs-body-color);
    margin: 1px;
}

.calloutBody {
    font-size: 12px;
    font-weight: normal;
    font-family: "Poppins", sans-serif;
    color: var(--bs-body-color);
    margin: 1px;
}

#divMousePositionBox {
    position: absolute;
    right: 10px;
    bottom: 80px;
    width: 172px;
    height: 24px;
    z-index: 1998;
    background-color: white;
    opacity: 0.5;
}




#divStatusBar {
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    height: 24px;
    z-index: 1999;
    background-color: #2e2a27;
    opacity: 1.0;
}

.statusBarItem {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    white-space: pre;
}



.link {
    color: #ffffff;
    text-decoration: underline;
    cursor: pointer;
}

    .link:hover {
        color: #3677D6;
    }

.link2 {
    color: #3557b5;
    text-decoration: underline;
    cursor: pointer;
}

    .link2:hover {
        color: #000000;
    }

.orangebutton {
    border: 0px solid #E39112;
    padding: 4px;
    color: #FFFFFF;
    background-color: #ED9A19;
    font-size: 8pt;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 3px;
}

    .orangebutton:hover {
        background-color: #E39112;
    }

    .orangebutton:disabled {
        background-color: #a0a0a0;
        cursor: default;
    }



.whitebutton {
    border: 1px solid #5092BA;
    border-radius: 3px;
    padding: 4px;
    color: #5CA3D9;
    background-color: #fff;
    font-size: 8pt;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}


    .whitebutton:hover {
        background-color: #a0a0a0;
    }


#mainHeader {
    position: absolute;
    width: 100%;
    height: 60px;
    /* background-color: #2e2a27;*/
    background-color: #212529;
    z-index: 2000;
}


.toolbar_TooltipContainer {
    left: calc(50% - 100px);
    z-index: 99999999;
}

.toolbar_ControlsContainer {
    left: calc(50% - 273px);
    /*  background-color: red;*/
}



.toolbarGroup_Container {
    position: absolute;
    top: 0px;
    height: 60px;
    border-left: 1px solid #4d4c4c;
    border-right: 1px solid #4d4c4c;
}

.toolbarGroup {
    position: absolute;
    top: 0px;
    display: flex;
    align-items: center;
}

.toolbarGroupLabel {
    position: absolute;
    top: 44px;
    color: white;
    display: flex;
    justify-content: center;
    height: 10px;
}

.toolbarbutton_NEW {
    width: 40px;
    height: 40px;
    margin: 2px;
    border: 0px solid #3677D6;
    border-left: 1px solid #333131;
    border-radius: 0px;
    padding: 10px;
    padding-left: 6px;
    color: #ffffff;
    background-color: #212529;
    line-height: normal;
    font-weight: normal;
    font-size: 12px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
}



.toolbarbutton {
    position: absolute;
    border: 0px solid #3677D6;
    border-left: 1px solid #4d4c4c;
    border-radius: 0px;
    padding: 10px;
    padding-left: 6px;
    color: #ffffff;
    background-color: #212529;
    line-height: normal;
    font-weight: normal;
    font-size: 12px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    top: 5px;
    height: 40px;
    width: 40px;
    text-align: center;
}

.toolbarbutton_NEW:hover {
    background-color: #3b4046;
}





.iconPicker {
    background-color: var(--bs-body-bg);
    position: fixed !important;
    top: 48px;
    width: 380px;
    height: 66px;
    display: none;
    padding: 10px;
    z-index: 2147483647 !important;
    border-radius: 4px;
}


.iconPickerCol {
    padding: 3px !important;
    vertical-align: middle;
    width: 40px;
    height: 40px;
}

    .iconPickerCol:hover {
        background-color: #0c0c0b;
    }

.iconPickerColSelected {
    border-bottom: 2px solid white;
}

.iconPickerImage {
    width: 34px;
    height: 34px;
    cursor: pointer;
}




.pcSettingMenu {
    background-color: #2e2a27;
}


.redbutton {
    border: 0px solid #D3381A;
    border-radius: 3px;
    padding: 4px;
    color: #FFFFFF;
    background-color: #E85234;
    font-size: 8pt;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}

    .redbutton:hover {
        background-color: #c42a0b;
    }

    .redbutton:disabled {
        background-color: #a0a0a0;
        cursor: default;
    }

    .redbutton div.dxb {
        padding: 1px 5px;
        border: 0px;
    }

    .redbutton div.dxbf {
        padding: 0px 4px;
        border: dotted 1px black;
    }

.redbuttonHovered {
    background-color: #D3381A;
}

.redbuttonPressed {
    border-color: #D3381A;
    padding: 5px 3px 3px 5px;
}

.redbuttonDisabled {
    background-color: #A8A8A8;
    border-color: #8E8E8E;
    color: #646664;
}





@font-face {
    font-family: 'Material-Design-Iconic-Font';
    src: url('../Fonts/Material-Design-Iconic-Font.eot'); /* IE9 Compat Modes */
    src: url('../Fonts/Material-Design-Iconic-Font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../Fonts/Material-Design-Iconic-Font.woff') format('woff'), /* Modern Browsers */
    url('../Fonts/Material-Design-Iconic-Font.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../Fonts/Material-Design-Iconic-Font.svg#svgFontName') format('svg'); /* Legacy iOS */
}


@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}





.polyline_BC_511_Construction {
    stroke: green;
    fill: none;
    stroke-dasharray: 10,10;
    stroke-width: 5;
}


input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.accordion {
    background-color: #2e2a27;
    color: #fff;
    cursor: pointer;
    padding-left: 25px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: left;
    vertical-align: middle;
    border: none;
    outline: none;
    transition: 0.4s;
    border-bottom: solid 1px #000000;
}


    .active, .accordion:hover {
        background-color: #000000;
    }

.accordion_panel {
    padding-left: 18px;
    padding-bottom: 10px;
    background-color: white;
    display: none;
    overflow: hidden;
}

.divImageViewer:hover {
    cursor: pointer;
}

a:hover {
    cursor: pointer;
    color: #334fb9;
}

input {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.ButtonClose {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    z-index: 5000;
    color: white;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    border-radius: 12px;
    border-width: 2px;
    border-color: white;
    background-color: #232323;
    border-style: solid;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
}

.labelMedium {
    position: absolute;
    font-size: 14px;
    color: black;
    font-family: "Poppins", sans-serif;
}


.ButtonBlack {
    background-color: #555555;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 3px;
    width: 100%;
    height: 100%;
}

    .ButtonBlack:hover {
        background-color: #404040;
    }

.ButtonGreen {
    background-color: #49B050;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 3px;
    width: 150px;
    height: 50px;
}

.ButtonBlue:hover {
    background-color: #5092BA;
}

.ButtonBlue {
    background-color: #5CA3D9;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 3px;
    width: 150px;
    height: 50px;
}

.ButtonGreen:hover {
    background-color: #429B43;
}



.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
}


.divWelcomeToPatchMap {
    position: absolute;
    left: 200px;
    width: 700px;
    top: 200px;
    height: 530px;
    z-index: 1000;
    background-color: #ffffff;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    top: 40%;
    left: 50%;
    margin-top: -150px;
    margin-left: -350px;
}

.iFrameWelcomeToPatchMap {
    position: absolute;
    left: 20px;
    width: 660px;
    top: 100px;
    height: 350px;
    border: 1px solid black;
}


.divBrowserWarningBox {
    position: absolute;
    left: 200px;
    right: 200px;
    top: 200px;
    bottom: 200px;
    z-index: 1000;
    background-color: #ffffff;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
}


.DialogHeaderSeparetorLine {
    position: absolute;
    left: 25px;
    width: 650px;
    top: 75px;
    height: 7px;
    background-color: #e6e6e6;
}

#divWhatNewIFrame {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 90px;
    bottom: 80px;
    overflow: hidden;
}

#divContentBox {
    position: absolute;
    left: 25px;
    right: 25px;
    top: 100px;
    bottom: 80px;
}

.iframe {
    position: absolute;
    width: 110%;
    height: 110%;
    border: none;
}

#labelContent {
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    font-family: "Poppins", sans-serif;
    color: #202020;
}

.labelMediumHeader {
    position: absolute;
    font-size: 18px;
    font-weight: bold;
    font-family: "Poppins", sans-serif;
    color: #6471B6;
}

.labelLargeHeader {
    position: absolute;
    font-size: 22px;
    font-weight: bold;
    font-family: "Poppins", sans-serif;
    color: #6471B6;
}



#DivMenu {
    margin: 0px;
    padding: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1000;
    background-color: transparent;
    opacity: 1.0;
    width: 100%;
}

#RoutePreference {
    margin: 10px;
    padding: 0px;
    position: absolute;
    right: 10px;
    top: 75px;
    z-index: 1000;
    background-color: transparent;
    opacity: 1.0;
}


#SearchControl {
    margin: 0px;
    padding: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1000;
    background-color: transparent;
    opacity: 1.0;
}

#divSavedLocations {
    margin: 10px;
    padding: 0px;
    position: absolute;
    left: 320px;
    top: 10px;
    z-index: 1000;
    background-color: transparent;
    opacity: 1.0;
}

#divTest {
    margin: 10px;
    padding: 0px;
    position: absolute;
    left: 400px;
    top: 400px;
    z-index: 1000;
    background-color: transparent;
    opacity: 1.0;
}

.mapLogo {
    position: absolute;
    left: 5px;
    bottom: 30px;
    width: 150px;
    z-index: 10;
    opacity: 1.0;
}

.logoLoading {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    margin-left: -150px;
    margin-top: -37px;
}

.loadingPanel {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background-color: black;
    z-index: 2000;
    opacity: 0.8;
}


#DivLogout {
    position: absolute;
    right: 5px;
    top: 7px;
    z-index: 1000;
    opacity: 1.0;
}



#DivTools {
    position: absolute;
    left: 320px;
    top: 6px;
    z-index: 1000;
    opacity: 1.0;
    height: 36px;
}


#divViewAlternateRoutes {
    position: absolute;
    left: 245px;
    top: 5px;
    z-index: 1000;
    opacity: 1.0;
    width: 150px;
    height: 32px;
    visibility: hidden;
}







#divFacilityResultsPanel {
    position: absolute;
    left: 5px;
    top: 185px;
    width: 340px;
    height: 320px;
    z-index: 1000;
    background-color: transparent;
    visibility: hidden;
}




#divDirections {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 1000;
    background-color: white;
    opacity: 1.0;
    visibility: hidden;
}



#divWhereToGoNEW {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 340px;
    height: 175px;
    z-index: 1000;
    background-color: transparent;
}






#divRouteNameNEW {
    position: absolute;
    right: 5px;
    left: 10px;
    top: 40px;
    z-index: 1000;
    opacity: 1.0;
    background-color: white;
}


#divRouteDetails {
    position: absolute;
    right: 75px;
    left: 10px;
    top: 57px;
    z-index: 1000;
    opacity: 1.0;
    background-color: white;
}




#divDirectionsText {
    position: absolute;
    right: 5px;
    left: 5px;
    top: 87px;
    bottom: 5px;
    z-index: 1000;
    opacity: 1.0;
    background-color: white;
}




#divRouteSaved {
    position: absolute;
    width: 16px;
    height: 16px;
    top: -10px;
    left: 135px;
    background-color: transparent;
    z-index: 1500;
}



#divDirectionsListBox {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 112px;
    bottom: 25px;
    z-index: 1000;
    opacity: 1.0;
    background-color: red;
}

#divCheckboxZoomToSelectedTurn {
    position: absolute;
    right: 10px;
    left: 160px;
    bottom: 5px;
    height: 20px;
    z-index: 1000;
    opacity: 1.0;
    background-color: transparent;
}

#divCheckboxShowTurnsOnMap {
    position: absolute;
    width: 150px;
    left: 5px;
    bottom: 5px;
    height: 20px;
    z-index: 1000;
    opacity: 1.0;
    background-color: transparent;
}



#divDLSContents {
    position: relative;
    width: 335px;
    height: 105px;
    background-color: transparent;
}

#divPNGContents {
    position: relative;
    width: 335px;
    height: 105px;
    background-color: transparent;
}

#divFacilitiesContents {
    position: relative;
    width: 335px;
    height: 110px;
    background-color: transparent;
}

#divFacilitiesLabel {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
}

#divFacilitiesHelpButton {
    position: absolute;
    top: 0px;
    right: 15px;
    width: 10px;
    height: 6px;
}


#divAddressHelpButton {
    position: absolute;
    top: 0px;
    right: 15px;
    width: 10px;
    height: 6px;
}


#divWellsHelpButton {
    position: absolute;
    top: 0px;
    right: 15px;
    width: 10px;
    height: 6px;
}

#divFacilitiesMoreOptionsButton {
    position: absolute;
    top: 60px;
    left: 0px;
    width: 75px;
    height: 6px;
}

#divFacilitiesMoreOptionsPanel {
    position: absolute;
    top: 80px;
    left: 0px;
    right: 0px;
    bottom: 50px;
    background-color: #FCFCFC;
}



#divCB_FacPlants {
    position: absolute;
    bottom: 25px;
    left: 0px;
    width: 150px;
    background-color: transparent;
}

#divCB_FacCompressors {
    position: absolute;
    bottom: 25px;
    left: 130px;
    width: 95px;
    background-color: transparent;
}

#divCB_FacBatteries {
    position: absolute;
    bottom: 3px;
    left: 0px;
    width: 75px;
    background-color: transparent;
}

#divCB_FacOther {
    position: absolute;
    bottom: 3px;
    left: 130px;
    width: 65px;
    background-color: transparent;
}

#divFacilities_TB {
    position: absolute;
    top: 20px;
    left: 0px;
    right: 0px;
}

#divBT_FacilitiesSearch {
    position: absolute;
    width: 80px;
    height: 36px;
    bottom: 0px;
    right: 0px;
}

#divPlacesContents {
    position: relative;
    width: 335px;
    height: 110px;
    background-color: transparent;
    z-index: 4999;
}

#divPC_Search {
    position: absolute;
    top: 45px;
    left: 10px;
    right: 10px;
    z-index: 4999;
}



#divCampsTabContents {
    position: relative;
    width: 335px;
    height: 200px;
    background-color: transparent;
}

#divCampCompanyLabel {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    z-index: 5000;
}

#divCB_CampCompany {
    position: absolute;
    top: 25px;
    left: 5px;
    right: 5px;
    z-index: 5000;
}


#divCampNameLabel {
    position: absolute;
    top: 75px;
    left: 5px;
    right: 5px;
}

#divCB_CampName {
    position: absolute;
    top: 95px;
    left: 5px;
    right: 5px;
}

#divBedsLabel {
    position: absolute;
    top: 145px;
    left: 5px;
    width: 150px;
}

#divCB_NumberOfBeds {
    position: absolute;
    top: 165px;
    left: 5px;
    width: 150px;
    z-index: 4000;
}



#divBT_CampsNearMapCenter {
    position: absolute;
    height: 36px;
    top: 165px;
    left: 5px;
}


#divBT_SearchCamps {
    position: absolute;
    width: 80px;
    height: 36px;
    top: 160px;
    right: 5px;
}




#divRigsTabContents {
    position: relative;
    width: 335px;
    height: 200px;
    background-color: transparent;
}

#divRigContractorLabel {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 200px;
    z-index: 5000;
}

#divCB_DrillingCompany {
    position: absolute;
    top: 25px;
    left: 5px;
    width: 200px;
    z-index: 5000;
}


#divRigNumberLabel {
    position: absolute;
    top: 5px;
    left: 220px;
    right: 10px;
}



#divCoordinatesContents {
    position: relative;
    width: 300px;
    height: 235px;
    background-color: transparent;
}

#divDDContents {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 60px;
    top: 120px;
    background-color: transparent;
}

#divDDMContents {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 60px;
    top: 120px;
    background-color: transparent;
    visibility: hidden;
}

#divDMSContents {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 60px;
    top: 120px;
    background-color: transparent;
    visibility: hidden;
}

#divUTMContents {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 60px;
    top: 120px;
    background-color: transparent;
    visibility: hidden;
}

#divDMSLatDegreesLabel {
    position: absolute;
    left: 0px;
    width: 140px;
    top: 0px;
    background-color: transparent;
}

#divDMSLonDegreesLabel {
    position: absolute;
    left: 155px;
    width: 145px;
    top: 0px;
    background-color: transparent;
}

#divDMSTBLatDegrees {
    position: absolute;
    left: 0px;
    width: 40px;
    top: 17px;
    background-color: transparent;
}

#divDMSBLatMinutes {
    position: absolute;
    left: 45px;
    width: 40px;
    top: 17px;
    background-color: transparent;
}

#divDMSBLatSeconds {
    position: absolute;
    left: 90px;
    width: 50px;
    top: 17px;
    background-color: transparent;
}

#divDMSTBLonDegrees {
    position: absolute;
    left: 155px;
    width: 40px;
    top: 17px;
    background-color: transparent;
}

#divDMSBLonMinutes {
    position: absolute;
    left: 200px;
    width: 40px;
    top: 17px;
    background-color: transparent;
}

#divDMSBLonSeconds {
    position: absolute;
    left: 245px;
    width: 50px;
    top: 17px;
    background-color: transparent;
}

#divDDMLatDegreesLabel {
    position: absolute;
    left: 0px;
    width: 140px;
    top: 0px;
    background-color: transparent;
}

#divDDMLonDegreesLabel {
    position: absolute;
    left: 155px;
    width: 145px;
    top: 0px;
    background-color: transparent;
}

#divDDMTBLatDegrees {
    position: absolute;
    left: 0px;
    width: 40px;
    top: 17px;
    background-color: transparent;
}

#divDDMBLatMinutes {
    position: absolute;
    left: 45px;
    width: 95px;
    top: 17px;
    background-color: transparent;
}

#divDDMTBLonDegrees {
    position: absolute;
    left: 155px;
    width: 40px;
    top: 17px;
    background-color: transparent;
}

#divDDMBLonMinutes {
    position: absolute;
    left: 200px;
    width: 95px;
    top: 17px;
    background-color: transparent;
}

#divUTMNorthingLabel {
    position: absolute;
    left: 0px;
    width: 110px;
    top: 0px;
    background-color: transparent;
}

#divUTMEastingLabel {
    position: absolute;
    left: 115px;
    width: 110px;
    top: 0px;
    background-color: transparent;
}

#divUTMZoneLabel {
    position: absolute;
    left: 230px;
    width: 65px;
    top: 0px;
    background-color: transparent;
}

#divUTMTBNorthing {
    position: absolute;
    left: 0px;
    width: 110px;
    top: 17px;
    background-color: transparent;
}

#divUTMTBEasting {
    position: absolute;
    left: 115px;
    width: 110px;
    top: 17px;
    background-color: transparent;
}

#divUTMTBZone {
    position: absolute;
    left: 230px;
    width: 65px;
    top: 17px;
    background-color: transparent;
}

#divDDLatLabel {
    position: absolute;
    left: 0px;
    width: 140px;
    top: 0px;
    background-color: transparent;
}

#divDDLonLabel {
    position: absolute;
    left: 150px;
    width: 140px;
    top: 0px;
    background-color: transparent;
}

#divDDTBLat {
    position: absolute;
    left: 0px;
    width: 145px;
    top: 17px;
    background-color: transparent;
}

#divDDTBLon {
    position: absolute;
    left: 150px;
    width: 145px;
    top: 17px;
    background-color: transparent;
}

#divCoordinateFormat {
    position: absolute;
    left: 0px;
    top: 10px;
    right: 0px;
}

#RBL_CoordFormats {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
}



#divDLSExampleLabel {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
}

#divDLS_TB {
    position: absolute;
    left: 0px;
    top: 20px;
    right: 0px;
}

#divSearchMethodRadioList {
    position: absolute;
    left: 0px;
    top: 60px;
    width: 100px;
    background-color: transparent;
}


#divPNGExampleLabel {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
}

#divPNG_TB {
    position: absolute;
    left: 0px;
    top: 20px;
    right: 0px;
}

#divBT_PNGSearch {
    position: absolute;
    top: 70px;
    right: 0px;
    height: 36px;
    width: 80px;
    background-color: transparent;
}






#divRenewLabel {
    position: absolute;
    top: 50px;
    right: 10px;
    left: 10px;
}


#divAreYouSureLabel {
    position: absolute;
    right: 10px;
    left: 10px;
    top: 48px;
    opacity: 1.0;
}



.mapLayerIconGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 8px;
    max-height: 460px;
    overflow-y: auto;
}

.mapLayerIconOption {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border: 1px solid var(--bs-border-color);
    border-radius: 5px;
    background: var(--bs-body-bg);
    cursor: pointer;
}

    .mapLayerIconOption:hover {
        background: var(--bs-tertiary-bg);
    }

    .mapLayerIconOption img {
        max-width: 28px;
        max-height: 28px;
    }









.mapLayersMegaMenu {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, calc(100vw - 30px));
    display: none;
    z-index: 2000000;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    overflow: hidden;
}

.mapLayersMegaHeader {
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--bs-border-color);
}

.mapLayersMegaContent {
    display: grid;
    grid-template-columns: 1fr 1fr 1.35fr;
}

.mapLayersMegaColumn {
    padding: 15px 20px 18px 20px;
    min-height: 280px;
}

    .mapLayersMegaColumn + .mapLayersMegaColumn {
        border-left: 1px solid var(--bs-border-color);
    }

.mapLayersSectionTitle {
    font-size: 13px;
    font-weight: 700;
}

.mapLayersSectionSubTitle {
    font-size: 11px;
    opacity: .6;
    margin-bottom: 12px;
}

.mapLayersMegaColumn .form-check {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.mapLayersMegaColumn .form-check-input {
    margin-top: 0;
}

.mapLayersMegaColumn .form-check-label {
    margin-left: 8px;
    line-height: 1.3;
    font-size: 13px;
}



.mapLayersCustomColumn {
    display: flex;
    flex-direction: column;
}

.mapLayersCustomHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.mapLayersCustomTable {
    max-height: 240px;
    overflow-y: auto;
    margin-top: 4px;
}

    .mapLayersCustomTable table {
        font-size: 12px;
    }

.mapLayersCustomFooter {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}


.mapLayersMegaMenu .fix-checkbox2 {
    margin-top: 0 !important;
    position: static !important;
}

    .mapLayersMegaMenu .fix-checkbox2 + .form-check-label {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

.mapLayersOptionalColumn .form-check-label {
    position: relative;
    top: -3px;
}




#importLayerDialog {
    display: none;
    position: fixed;
    width: 520px;
    height: 270px;
    max-width: calc(100vw - 30px);
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000001 !important;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    box-shadow: 0 12px 35px rgba(0,0,0,.35);
    overflow: hidden;
}

.importLayersHeader {
    height: 50px;
    position: relative;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}

.importLayerContent {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 60px;
}

.importLayerFooter {
    position: absolute;
    height: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}



.mapLayerVisibleIcon {
    color: var(--bs-body-color);
}


.measurePanel {
    position: absolute;
    left: 5px;
    top: 80px;
    width: 330px;
    padding: 12px 14px;
    display: none;
    z-index: 500;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(0,0,0,.22);
}

.measurePanelTitle {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: .65;
    margin-bottom: 8px;
}

.measurePanelValues {
    display: flex;
    gap: 15px;
}

.measurePanelColumn {
    width: 50%;
}

    .measurePanelColumn:first-child {
        border-right: 1px solid var(--bs-border-color);
    }

.measurePanelLabel {
    font-size: 10px;
    text-transform: uppercase;
    opacity: .55;
}

.measurePanelPrimary {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
}

.measurePanelSecondary {
    font-size: 12px;
    opacity: .7;
}

.measurePanelHint {
    font-size: 11px;
    opacity: .65;
    margin-top: 10px;
}

.measurePanelButtons {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px;
}







#divMeasurePanel {
    position: relative;
    width: 190px;
    left: 329px;
    top: 5px;
    height: 35px;
    z-index: 100000;
    opacity: 1.0;
    background-color: #2e2a27;
    display: none;
}


#divSpeed30LBL {
    position: absolute;
    width: 200px;
    left: 15px;
    top: 55px;
    background-color: transparent;
}

#divSpeed40LBL {
    position: absolute;
    width: 200px;
    left: 15px;
    top: 92px;
    background-color: transparent;
}

#divSpeed50LBL {
    position: absolute;
    width: 200px;
    left: 15px;
    top: 129px;
    background-color: transparent;
}

#divSpeed60LBL {
    position: absolute;
    width: 200px;
    left: 15px;
    top: 166px;
    background-color: transparent;
}

#divSpeed70LBL {
    position: absolute;
    width: 200px;
    left: 15px;
    top: 203px;
    background-color: transparent;
}

#divSpeed80LBL {
    position: absolute;
    width: 200px;
    left: 15px;
    top: 240px;
    background-color: transparent;
}

#divSpeed90LBL {
    position: absolute;
    width: 200px;
    left: 15px;
    top: 277px;
    background-color: transparent;
}

#divSpeed100LBL {
    position: absolute;
    width: 200px;
    left: 15px;
    top: 314px;
    background-color: transparent;
}

#divSpeed110LBL {
    position: absolute;
    width: 200px;
    left: 15px;
    top: 351px;
    background-color: transparent;
}




#divKm1 {
    position: absolute;
    width: 20px;
    left: 165px;
    top: 55px;
    background-color: transparent;
}

#divKm2 {
    position: absolute;
    width: 20px;
    left: 165px;
    top: 92px;
    background-color: transparent;
}

#divKm3 {
    position: absolute;
    width: 20px;
    left: 165px;
    top: 129px;
    background-color: transparent;
}

#divKm4 {
    position: absolute;
    width: 20px;
    left: 165px;
    top: 166px;
    background-color: transparent;
}

#divKm5 {
    position: absolute;
    width: 20px;
    left: 165px;
    top: 203px;
    background-color: transparent;
}

#divKm6 {
    position: absolute;
    width: 20px;
    left: 165px;
    top: 240px;
    background-color: transparent;
}

#divKm7 {
    position: absolute;
    width: 20px;
    left: 165px;
    top: 277px;
    background-color: transparent;
}

#divKm8 {
    position: absolute;
    width: 20px;
    left: 165px;
    top: 314px;
    background-color: transparent;
}

#divKm9 {
    position: absolute;
    width: 20px;
    left: 165px;
    top: 351px;
    background-color: transparent;
}





#divSpeed30 {
    position: absolute;
    width: 60px;
    left: 100px;
    top: 45px;
    background-color: transparent;
}


#divSpeed40 {
    position: absolute;
    width: 60px;
    left: 100px;
    top: 82px;
    background-color: transparent;
}

#divSpeed50 {
    position: absolute;
    width: 60px;
    left: 100px;
    top: 119px;
    background-color: transparent;
}

#divSpeed60 {
    position: absolute;
    width: 60px;
    left: 100px;
    top: 156px;
    background-color: transparent;
}

#divSpeed70 {
    position: absolute;
    width: 60px;
    left: 100px;
    top: 193px;
    background-color: transparent;
}

#divSpeed80 {
    position: absolute;
    width: 60px;
    left: 100px;
    top: 230px;
    background-color: transparent;
}

#divSpeed90 {
    position: absolute;
    width: 60px;
    left: 100px;
    top: 267px;
    background-color: transparent;
}

#divSpeed100 {
    position: absolute;
    width: 60px;
    left: 100px;
    top: 304px;
    background-color: transparent;
}

#divSpeed110 {
    position: absolute;
    width: 60px;
    left: 100px;
    top: 341px;
    background-color: transparent;
}


#divLegendAnchor {
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: 1px;
    height: 1px;
    z-index: 1000;
    background-color: transparent;
}



#divWhatToPrint {
    position: absolute;
    left: 10px;
    top: 40px;
    height: 90px;
    right: 10px;
    background-color: transparent;
}



#divRB_PrintMapOnly {
    position: absolute;
    left: 0px;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background-color: transparent;
}

#divRB_PrintDirectionsOnly {
    position: absolute;
    left: 0px;
    top: 35px;
    right: 10px;
    z-index: 1000;
    background-color: transparent;
}


#divRB_PrintDirectionsAndMap {
    position: absolute;
    left: 0px;
    top: 60px;
    right: 10px;
    z-index: 1000;
    background-color: transparent;
}




#divPaperSize {
    position: absolute;
    left: 0px;
    top: 140px;
    height: 45px;
    right: 10px;
    background-color: transparent;
}

#divRB_Letter {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1000;
    background-color: transparent;
}

#divRB_Legal {
    position: absolute;
    left: 75px;
    top: 10px;
    z-index: 1000;
    background-color: transparent;
}

#divRB_Tabloid {
    position: absolute;
    left: 140px;
    top: 10px;
    z-index: 1000;
    background-color: transparent;
}


#divLBL_MapTitle {
    position: absolute;
    left: 10px;
    top: 190px;
    height: 30px;
    right: 10px;
    z-index: 1000;
    background-color: transparent;
}

#divTB_MapTitle {
    position: absolute;
    left: 10px;
    top: 210px;
    height: 30px;
    right: 10px;
    z-index: 1000;
    background-color: transparent;
}


#divDirectOptionsPanel {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    opacity: 1.0;
    background-color: green;
    visibility: visible;
}

#divCB_ShowFavoritesOnMap {
    position: absolute;
    width: 200px;
    top: 5px;
    left: 215px;
    right: 5px;
    height: 20px;
    z-index: 1002;
    opacity: 1.0;
    background-color: transparent;
}

#divEditRoadSpeeds {
    position: absolute;
    top: 8px;
    left: 380px;
    z-index: 1003;
    opacity: 1.0;
    background-color: transparent;
}



#divRouteCalcMethodFaster {
    position: absolute;
    width: 100%;
    top: 5px;
    left: 5px;
    right: 5px;
    height: 20px;
    z-index: 1001;
    opacity: 1.0;
    background-color: transparent;
}

#divRouteCalcMethodShorter {
    position: absolute;
    width: 100%;
    top: 5px;
    left: 80px;
    right: 5px;
    height: 20px;
    z-index: 1001;
    opacity: 1.0;
    background-color: transparent;
}


#divRouteColor {
    position: absolute;
    width: 50px;
    top: 7px;
    left: 150px;
    right: 5px;
    height: 20px;
    z-index: 1001;
    opacity: 1.0;
    background-color: transparent;
}

#divDirectOptionsPanel {
    position: relative;
    top: 70px;
    left: 5px;
    right: 5px;
    height: 30px;
    z-index: 1002;
    opacity: 1.0;
    background-color: red;
    visibility: visible;
}







#divQuickSearchUseFavoriteLabel {
    position: absolute;
    left: 50px;
    top: 7px;
    right: 5px;
    height: 20px;
    z-index: 1000;
    background-color: transparent;
}



#divQuickSearchUseHospitalLabel {
    position: absolute;
    left: 50px;
    top: 42px;
    right: 5px;
    height: 20px;
    z-index: 1000;
    background-color: transparent;
}



#divQuickSearchUseTownLabel {
    position: absolute;
    left: 50px;
    top: 77px;
    right: 5px;
    height: 20px;
    z-index: 1000;
    background-color: transparent;
}


#divQuickSearchUseWasteFacilityLabel {
    position: absolute;
    left: 50px;
    top: 107px;
    right: 5px;
    height: 20px;
    z-index: 1000;
    background-color: transparent;
}


#divQuickSearchUseSTARSLabel {
    position: absolute;
    left: 50px;
    top: 145px;
    right: 5px;
    height: 20px;
    z-index: 1000;
    background-color: transparent;
}



.viaPointsList {
    position: absolute;
    top: 60px;
    bottom: 105px;
    left: 0px;
    right: 0px;
    overflow-y: scroll;
    overflow: auto;
   /* background-color: lightgray;*/
}

.ViaPointRow {
    position: relative;
    height: 50px;
    right: 0px;
   /* background-color: #F2F2F2;*/
   /* border-width: 1px;
    border-color: #EAEAEA;
    border-style: solid;*/
}

#divViaPointName {
    vertical-align: middle;
}

.endPointText {
    position: absolute;
    text-align: left;
   /* color: black;*/
    padding-left: 50px;
    line-height: 60px;
}

    .endPointText:hover {
        color: var(--bs-primary) !important;
        cursor: pointer;
    }



.viaPointText {
    text-align: left;
   /* color: black;*/
    padding-left: 50px;
    line-height: 50px;
}

.viaPointStopTime {
    text-align: left;
  /*  color: #3677D6;*/
    padding-left: 10px;
    line-height: 50px;
    text-decoration: underline;
}

    .viaPointStopTime:hover {
        color: #334fb9;
        cursor: pointer;
    }



.buttonFont {
    padding: 0px;
    font-size: 14px;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
}


.viaPointText:hover {
    color: #334fb9;
    cursor: pointer;
}

.divViaPointSymbol {
    position: absolute;
    height: 24px;
    width: 24px;
    left: 10px;
    top: 13px;
    border-radius: 3px;
    background-image: url('../images/Flag_Yellow.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.divViaPointSymbol_1 {
    position: absolute;
    height: 24px;
    width: 24px;
    left: 10px;
    top: 13px;
    border-radius: 3px;
    background-image: url('../images/Flag_Yellow_1.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.divViaPointSymbol_2 {
    position: absolute;
    height: 24px;
    width: 24px;
    left: 10px;
    top: 13px;
    border-radius: 3px;
    background-image: url('../images/Flag_Yellow_2.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.divViaPointSymbol_3 {
    position: absolute;
    height: 24px;
    width: 24px;
    left: 10px;
    top: 13px;
    border-radius: 3px;
    background-image: url('../images/Flag_Yellow_3.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.divViaPointSymbol_4 {
    position: absolute;
    height: 24px;
    width: 24px;
    left: 10px;
    top: 13px;
    border-radius: 3px;
    background-image: url('../images/Flag_Yellow_4.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.divViaPointSymbol_5 {
    position: absolute;
    height: 24px;
    width: 24px;
    left: 10px;
    top: 13px;
    border-radius: 3px;
    background-image: url('../images/Flag_Yellow_5.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.divViaPointSymbol_6 {
    position: absolute;
    height: 24px;
    width: 24px;
    left: 10px;
    top: 13px;
    border-radius: 3px;
    background-image: url('../images/Flag_Yellow_6.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.divViaPointSymbol_7 {
    position: absolute;
    height: 24px;
    width: 24px;
    left: 10px;
    top: 13px;
    border-radius: 3px;
    background-image: url('../images/Flag_Yellow_7.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.divViaPointSymbol_8 {
    position: absolute;
    height: 24px;
    width: 24px;
    left: 10px;
    top: 13px;
    border-radius: 3px;
    background-image: url('../images/Flag_Yellow_8.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.divViaPointSymbol_9 {
    position: absolute;
    height: 24px;
    width: 24px;
    left: 10px;
    top: 13px;
    border-radius: 3px;
    background-image: url('../images/Flag_Yellow_9.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.divViaPointDelete {
    position: absolute;
    height: 24px;
    width: 24px;
    right: 10px;
    top: 11px;
    border-radius: 3px;
    background-image: url('../images/viapointdelete.png');
    background-repeat: no-repeat;
    background-position: center;
}

    .divViaPointDelete:hover {
        cursor: pointer;
        background-color: white;
    }

.divViaPointUpArrow {
    position: absolute;
    height: 24px;
    width: 24px;
    right: 60px;
    top: 13px;
    border-radius: 3px;
    background-image: url('../images/arrow-up.png');
    background-repeat: no-repeat;
    background-position: center;
}

    .divViaPointUpArrow:hover {
        cursor: pointer;
        background-color: white;
    }


.divViaPointDownArrow {
    position: absolute;
    height: 24px;
    width: 24px;
    right: 40px;
    top: 13px;
    border-radius: 3px;
    background-image: url('../images/arrow-down.png');
    background-repeat: no-repeat;
    background-position: center;
}

    .divViaPointDownArrow:hover {
        cursor: pointer;
        background-color: white;
    }

#divSearchPanelContents {
    position: relative;
    width: 390px;
    height: 140px;
    padding: 0px;
    z-index: 1000;
    background-color: white;
}


#divWhereToGoPanelContents {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0px;
    z-index: 1000;
    background-color: transparent;
}

#divStartImage {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 24px;
    height: 24px;
    z-index: 1000;
}

#divEndImage {
    position: absolute;
    left: 0px;
    top: 36px;
    width: 24px;
    height: 24px;
    z-index: 1000;
}

.startLabel {
    position: absolute;
    left: 27px;
    top: 2px;
    width: 310px;
    height: 24px;
    z-index: 1000;
}

.endLabel {
    position: absolute;
    left: 27px;
    top: 38px;
    width: 310px;
    height: 24px;
    z-index: 1000;
}


#divCloseRoutePanel {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 50px;
    z-index: 1000;
    opacity: 1.0;
    background-color: white;
}


#divOldPasswordLabel {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 45px;
    background-color: transparent;
}

#divTB_OldPassword {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 65px;
    background-color: transparent;
}


#divNewPasswordLabel {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 110px;
    background-color: transparent;
}

#divTB_NewPassword {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 130px;
    background-color: transparent;
}

#divNewPasswordLabelConfirm {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 175px;
    background-color: transparent;
}

#divTB_NewPassword2 {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 195px;
    background-color: transparent;
}




#divLBL_MainLabel {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 45px;
    background-color: transparent;
}

#divBT_GoToVideoPage {
    position: absolute;
    right: 10px;
    width: 100px;
    height: 40px;
    bottom: 10px;
    background-color: transparent;
}

#divWelcomePatchMapVideo {
    position: absolute;
    right: 10px;
    left: 10px;
    width: 700px;
    height: 420px;
    top: 70px;
    background-color: green;
}

#divCB_DontShowThisAgain {
    position: absolute;
    right: 10px;
    left: 10px;
    bottom: 5px;
    background-color: transparent;
}


.auto-style1 {
    width: 167px;
}


#divLBL_FirstName {
    position: absolute;
    left: 10px;
    width: 120px;
    top: 75px;
    background-color: transparent;
}

#divLBL_LastName {
    position: absolute;
    left: 135px;
    right: 10px;
    top: 75px;
    background-color: transparent;
}


#divTB_FirstName {
    position: absolute;
    left: 10px;
    width: 120px;
    top: 95px;
    background-color: transparent;
}

#divTB_LastName {
    position: absolute;
    left: 135px;
    right: 10px;
    top: 95px;
    background-color: transparent;
}




#divLBL_Company {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 135px;
    background-color: transparent;
}


#divTB_Company {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 155px;
    background-color: transparent;
}




#divLBL_Phone {
    position: absolute;
    left: 10px;
    width: 120px;
    top: 195px;
    background-color: transparent;
}

#divLBL_Emal {
    position: absolute;
    left: 135px;
    right: 10px;
    top: 195px;
    background-color: transparent;
}


#divTB_Phone {
    position: absolute;
    left: 10px;
    width: 120px;
    top: 215px;
    background-color: transparent;
}

#divTB_Email {
    position: absolute;
    left: 135px;
    right: 10px;
    top: 215px;
    background-color: transparent;
}

#divLL_ChangePassword {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 270px;
    background-color: transparent;
    text-align: center;
}


#divCB_ReceiveEmails {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 310px;
    background-color: transparent;
}

#divCB_VisibleInUserSearch {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 330px;
    background-color: transparent;
}




#divBT_MoreInfo {
    position: absolute;
    left: 30px;
    top: 380px;
    background-color: transparent;
}




#divSubscription {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 425px;
    bottom: 10px;
}


#divLBL_Subscription {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 45px;
}

#divBT_Renew {
    position: absolute;
    left: 10px;
    width: 100px;
    height: 40px;
    top: 70px;
}



#divReceiveEmails {
    width: 100%;
    height: 40px;
    margin-top: 20px;
}

#divLayersPopup {
    position: relative;
    width: 150px;
    height: 90px;
    background-color: transparent;
}



#divFavoritesContent {
    position: relative;
    width: 200px;
    height: 280px;
    background-color: transparent;
}

#divRouteNameContent {
    position: relative;
    width: 300px;
    height: 100px;
    background-color: transparent;
}

#divRouteNameLabel {
    position: absolute;
    width: 100%;
    top: 0px;
    background-color: transparent;
}

#divRouteNameTextbox {
    position: absolute;
    width: 100%;
    top: 20px;
    background-color: transparent;
}


#divUserSearchContent {
    position: relative;
    width: 300px;
    height: 100px;
    background-color: transparent;
}

#divUserSearchNameLabel {
    position: absolute;
    width: 100%;
    top: 0px;
    background-color: transparent;
}

#divTB_SearchUser {
    position: absolute;
    width: 100%;
    top: 20px;
    background-color: transparent;
}


#divRoutePointNameContent {
    position: relative;
    width: 300px;
    height: 100px;
    background-color: transparent;
}

#divRouteNameContent2 {
    position: relative;
    width: 300px;
    height: 100px;
    background-color: transparent;
}

#divRoutePointNameLabel {
    position: absolute;
    width: 100%;
    top: 0px;
    background-color: transparent;
}

#divRouteNameLabel2 {
    position: absolute;
    width: 100%;
    top: 0px;
    background-color: transparent;
}

#divRoutePointNameTextbox {
    position: absolute;
    width: 100%;
    top: 20px;
    background-color: transparent;
}

#divRouteNameTextbox2 {
    position: absolute;
    width: 100%;
    top: 20px;
    background-color: transparent;
}

#divContactsListbox {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 80px;
    bottom: 50px;
    background-color: transparent;
}


#divBT_ShareWithSkyBase {
    position: absolute;
    right: 60px;
    width: 100px;
    top: 10px;
    background-color: transparent;
}


#divBT_AddAllSavedShareContacts {
    position: absolute;
    left: 5px;
    width: 100px;
    top: 45px;
    background-color: transparent;
}

#divShareContactsLabel {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 65px;
    background-color: transparent;
}

#divLB_ShareContacts {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 85px;
    bottom: 60px;
    background-color: transparent;
}




#divBT_AddManageShareContact {
    position: absolute;
    right: 90px;
    width: 75px;
    top: 45px;
    height: 30px;
    background-color: transparent;
}





#divLB_UserSearchResults {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 45px;
    bottom: 60px;
    background-color: transparent;
}


#divLB_STARS {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 45px;
    bottom: 50px;
    background-color: transparent;
}




#divWastePlantsListbox {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 45px;
    bottom: 50px;
    background-color: transparent;
}

#divTownsListbox {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 45px;
    bottom: 50px;
    background-color: transparent;
}

#divHospitalsListbox {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 45px;
    bottom: 50px;
    background-color: transparent;
}



#divBT_DeleteFavoriteFromEditBox {
    position: absolute;
    right: 40px;
    top: 10px;
    height: 20px;
    background-color: transparent;
}


#divLBL_FavoriteNameEdit {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 45px;
    height: 20px;
    background-color: transparent;
}

#divTB_FavoriteNameEdit {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 63px;
    height: 20px;
    background-color: transparent;
}


#divLBL_LBL_FavoriteDescEdit {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 103px;
    height: 20px;
    background-color: transparent;
}

#divTB_FavoriteDescEdit {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 121px;
    height: 20px;
    background-color: transparent;
}


#divCB_ShowOnMap {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 162px;
    height: 20px;
    background-color: transparent;
}


#divCB_UseAsStart {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 190px;
    height: 20px;
    background-color: transparent;
}

#divCB_UseAsEnd {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 208px;
    height: 20px;
    background-color: transparent;
}


#divLLCoordsLabelFav {
    position: absolute;
    left: 10px;
    width: 200px;
    top: 245px;
    background-color: transparent;
}

#divLBL_CoordsLLFav {
    position: absolute;
    left: 15px;
    width: 140px;
    top: 265px;
    background-color: transparent;
}

#divUTMCoordsLabelFav {
    position: absolute;
    left: 175px;
    width: 140px;
    top: 245px;
    background-color: transparent;
}

#divLBL_CoordsUTMFav {
    position: absolute;
    left: 180px;
    width: 140px;
    top: 265px;
    background-color: transparent;
}



#divRigsLegend {
    position: absolute;
    right: 60px;
    top: 10px;
    background-color: white;
    z-index: 1001;
}

#divRig30Image {
    position: absolute;
    left: 5px;
    top: 45px;
    background-color: white;
    height: 36px;
    width: 24px;
}

#divRig60Image {
    position: absolute;
    left: 5px;
    top: 87px;
    background-color: white;
    height: 36px;
    width: 24px;
}

#divRig30 {
    position: absolute;
    left: 35px;
    top: 50px;
    background-color: white;
}

#divRig60 {
    position: absolute;
    left: 35px;
    top: 92px;
    background-color: white;
}

#divCloseRigsLegend {
    position: absolute;
    right: 5px;
    top: 45px;
    background-color: white;
}

#divCB_ShowRigLabels {
    position: absolute;
    right: 5px;
    left: 5px;
    bottom: 5px;
    background-color: white;
}


#divLB_Routes {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 75px;
    bottom: 50px;
    background-color: transparent;
}


#divBT_SortRoutesSharedWithYou {
    position: absolute;
    width: 40px;
    left: 5px;
    top: 45px;
    height: 20px;
    background-color: transparent;
}


#divmemoTest {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 5px;
    top: 5px;
}


#divLB_RoutesSharedWithYou {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 40px;
    bottom: 50px;
    background-color: transparent;
}


#divBT_SharedWithMeRoutes {
    position: absolute;
    width: 100px;
    right: 50px;
    top: 12px;
    height: 20px;
    background-color: transparent;
}



#divBT_SharedWithLink {
    position: absolute;
    width: 140px;
    left: 45px;
    top: 50px;
    height: 20px;
    background-color: transparent;
}






#divfavoritesListbox {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 80px;
    bottom: 60px;
    background-color: transparent;
}



#divBT_ImportFavorites {
    position: absolute;
    left: 10px;
    bottom: 20px;
    background-color: transparent;
}






#divPointInfoLabel {
    position: absolute;
    width: 100px;
    left: 20px;
    top: 50px;
    background-color: transparent;
}

#divLBL_LegalDesc {
    position: absolute;
    width: 100px;
    left: 105px;
    top: 50px;
    background-color: transparent;
}


#divLocationLabel {
    position: absolute;
    width: 100px;
    left: 20px;
    top: 70px;
    background-color: transparent;
}

#divLBL_Municipality {
    position: absolute;
    right: 10px;
    left: 90px;
    top: 70px;
    background-color: transparent;
}


#divNearestTownLabel {
    position: absolute;
    width: 100px;
    left: 20px;
    top: 90px;
    background-color: transparent;
}

#divLBL_NearestTown {
    position: absolute;
    right: 10px;
    left: 125px;
    top: 90px;
    background-color: transparent;
}


#divNearestHospitalLabel {
    position: absolute;
    width: 120px;
    left: 20px;
    top: 110px;
    background-color: transparent;
}

#divLBL_Hospital {
    position: absolute;
    right: 10px;
    left: 145px;
    top: 110px;
    background-color: transparent;
}


#divNearestRoadHeaderLabel {
    position: absolute;
    width: 120px;
    left: 20px;
    top: 130px;
    background-color: transparent;
}

#divNearestRoadNameLabel {
    position: absolute;
    width: 120px;
    left: 30px;
    top: 148px;
    background-color: transparent;
}

#divLBL_NearestRoadName {
    position: absolute;
    right: 10px;
    left: 80px;
    top: 148px;
    background-color: transparent;
}



#divNearestRoadTypeLabel {
    position: absolute;
    width: 120px;
    left: 30px;
    top: 166px;
    background-color: transparent;
}

#divLBL_NearestTypeName {
    position: absolute;
    right: 10px;
    left: 80px;
    top: 166px;
    background-color: transparent;
}

#divNearestRoadSpeedLabel {
    position: absolute;
    width: 120px;
    left: 30px;
    top: 182px;
    background-color: transparent;
}

#divLBL_NearestRoadSpeed {
    position: absolute;
    right: 10px;
    left: 80px;
    top: 182px;
    background-color: transparent;
}

#divNearestWellsLabel {
    position: absolute;
    width: 120px;
    left: 20px;
    top: 202px;
    background-color: transparent;
}

#divLBL_NearestWells {
    position: absolute;
    right: 10px;
    left: 70px;
    top: 202px;
    background-color: transparent;
}

#divNearestFacilitiesLabel {
    position: absolute;
    width: 120px;
    left: 20px;
    top: 222px;
    background-color: transparent;
}

#divLBL_NearestFacilities {
    position: absolute;
    right: 10px;
    left: 90px;
    top: 222px;
    background-color: transparent;
}


#divLLCoordsLabel {
    position: absolute;
    width: 200px;
    left: 20px;
    top: 250px;
    background-color: transparent;
}

#divUTMCoordsLabel {
    position: absolute;
    width: 120px;
    left: 220px;
    top: 250px;
    background-color: transparent;
}


#divLBL_CoordsLL {
    position: absolute;
    width: 200px;
    left: 20px;
    top: 270px;
    background-color: transparent;
}

#divLBL_CoordsUTM {
    position: absolute;
    width: 120px;
    left: 220px;
    top: 270px;
    background-color: transparent;
}




#divCB_ShowHideFavorites {
    position: absolute;
    width: 150px;
    right: 45px;
    top: 8px;
    background-color: transparent;
}


#divSortNearest {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
    background-color: transparent;
}

#divSortAlpha {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 25px;
    background-color: transparent;
}


#RB_SortRoutesByDate {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
    background-color: transparent;
}

#RB_SortRoutesByAlpha {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 25px;
    background-color: transparent;
}


#divMapGoogleSat {
    position: absolute;
    top: 5px;
    width: 60px;
    right: 70px;
    z-index: 1001;
}

#divMapBingSat {
    position: absolute;
    top: 5px;
    width: 60px;
    right: 5px;
    z-index: 1001;
}



#divCurrentlyShowingMapLabel {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    z-index: 1001;
}

.MapTypeCheckmark {
    position: absolute;
    right: 10px;
    top: 10px;
    height: 48px;
    width: 48px;
}


.mapTypeSelectorItem {
    position: absolute;
    width: 190px;
    height: 150px;
    margin: 5px;
    cursor: pointer;
}

    .mapTypeSelectorItem:hover {
        border: 3px solid #3677D6;
    }



.mapTypeSelectorLabel {
    position: absolute;
    margin-left: 5px;
    color: white;
}





#divLegend {
    position: absolute;
    width: 75px;
    bottom: 10px;
    right: 10px;
    background-color: transparent;
    z-index: 1001;
}





#divBT_SavedPrintsFromMenu {
    position: absolute;
    top: 95px;
    right: 5px;
    left: 5px;
    height: 40px;
    background-color: transparent;
    z-index: 1001;
}


#divLB_WellInfo {
    position: absolute;
    top: 50px;
    right: 10px;
    left: 10px;
    bottom: 10px;
}

#divLB_NearbyCamps {
    position: absolute;
    top: 50px;
    right: 10px;
    left: 10px;
    bottom: 10px;
}





#divLB_FacilityInfo {
    position: absolute;
    top: 50px;
    right: 10px;
    left: 10px;
    bottom: 10px;
}





#divWorker {
    position: absolute;
    top: 12px;
    left: 10px;
    background-color: transparent;
    z-index: 2000;
    opacity: 0.8;
}

#divWorkerText {
    position: absolute;
    top: 27px;
    left: 75px;
    background-color: transparent;
    z-index: 2000;
    opacity: 0.8;
}



#divEmailRouteContent {
    position: relative;
    width: 400px;
    height: 330px;
}





#divShareRecipientsLabel {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 40px;
}


#divTB_ShareRecipients {
    position: absolute;
    left: 5px;
    right: 90px;
    top: 60px;
}

#divBT_PeopleToShareWith {
    position: absolute;
    right: 5px;
    width: 80px;
    top: 60px;
    height: 36px;
}



#divDataViewWells {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50px;
    bottom: 10px;
}



#divLBL_LicenseInfo {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50px;
    bottom: 10px;
}





#divLBL_ShareName {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 105px;
}

#divTB_ShareName {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 125px;
}

#divteNotesLabel {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 170px;
}

#divTB_NotesToUser {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 190px;
    height: 60px;
}

#divBT_Share {
    position: absolute;
    right: 5px;
    height: 36px;
    width: 80px;
    bottom: 5px;
}




#divAddContactNameLabel {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 45px;
}

#divTB_AddContactName {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 65px;
}



#divAddContactEmailLabel {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 110px;
}

#divTB_AddContactEmail {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 130px;
}


#divCB_UseLastEmailAddresses {
    position: absolute;
    width: 150px;
    left: 80px;
    top: 46px;
    z-index: 3000;
}



#divEmailRecipientsLabel {
    position: absolute;
    width: 400px;
    top: 0px;
}

#divEmailRecipientsTextbox {
    position: absolute;
    width: 300px;
    top: 22px;
}




#divEmailRouteNameLabel {
    position: absolute;
    width: 400px;
    top: 72px;
}

#divEmailRouteNameTextbox {
    position: absolute;
    width: 400px;
    top: 92px;
}



#divEmailRouteNotesLabel {
    position: absolute;
    width: 400px;
    top: 135px;
}

#divEmailRouteNotesTextbox {
    position: absolute;
    width: 400px;
    height: 100px;
    top: 154px;
}

#divEmailRouteRadioButtons {
    position: absolute;
    width: 200px;
    height: 50px;
    top: 265px;
}



#divTestButton {
    position: absolute;
    top: 20px;
    left: 300px;
    width: 100px;
    z-index: 5000;
}



#divCB_DrillRigs {
    position: absolute;
    left: 20px;
    top: 45px;
    background-color: transparent;
}





#divCB_HwyCameras {
    position: absolute;
    left: 20px;
    top: 135px;
    background-color: transparent;
}




#divLayerNameLabel {
    position: absolute;
    left: 10px;
    top: 50px;
}

#divTB_LayerName {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 68px;
}

#divBT_DeleteLayer {
    position: absolute;
    right: 12px;
    top: 40px;
}


#divLayerLineColorLabel {
    position: absolute;
    left: 10px;
    top: 120px;
}

#divCE_LayerLineColor {
    position: absolute;
    left: 10px;
    top: 140px;
}



#divLayerLineWidthLabel {
    position: absolute;
    left: 100px;
    top: 120px;
}

#divCB_LayerLineWidth {
    position: absolute;
    left: 100px;
    top: 140px;
    width: 80px;
}



#divLayerLineOpacityLabel {
    position: absolute;
    left: 190px;
    top: 120px;
}

#divCB_LayerLineOpacity {
    position: absolute;
    left: 190px;
    right: 10px;
    top: 140px;
}

#divLayerPointIconLabel {
    position: absolute;
    left: 10px;
    top: 190px;
}

#divBT_ChangePointIcon {
    position: absolute;
    left: 10px;
    top: 210px;
    height: 60px;
    width: 60px;
}


#divCB_ShowLayerOnMap {
    position: absolute;
    left: 140px;
    top: 225px;
}


.LBL_RenewNotice {
    position: absolute;
    top: 18px;
    left: 20px;
    color: red;
}

.LBL_RenewNotice_Hide {
    position: absolute;
    top: 18px;
    right: 120px;
    color: black;
}



#divExpiryNoticeAnchor {
    position: absolute;
    right: 60px;
    top: 5px;
    width: 5px;
    height: 5px;
    background-color: transparent;
}


#divPrices {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: white;
    border: 3px solid lightgray;
}

#divBT_ClosePricing {
    position: absolute;
    width: 20px;
    right: 5px;
    height: 20px;
    top: 5px;
    background-color: transparent;
}


#divRenewalsHeader {
    position: absolute;
    left: 25px;
    right: 110px;
    height: 100px;
    top: 5px;
    background-color: transparent;
    line-height: 100px;
    padding-left: 80px;
    text-align: center;
}

#divPricingContact {
    position: absolute;
    left: 5px;
    right: 0px;
    height: 30px;
    bottom: 0px;
    background-color: transparent;
}

#divIMG_Phone {
    position: absolute;
    left: 240px;
    width: 16px;
    height: 16px;
    bottom: 7px;
    background-color: transparent;
}

#divLBL_Phone2 {
    position: absolute;
    left: 260px;
    width: 120px;
    height: 16px;
    bottom: 7px;
    background-color: transparent;
}


#divIMG_Email {
    position: absolute;
    left: 380px;
    width: 16px;
    height: 16px;
    bottom: 7px;
    background-color: transparent;
}

#divLBL_Email {
    position: absolute;
    left: 400px;
    width: 120px;
    height: 16px;
    bottom: 7px;
    background-color: transparent;
}



#divPeriod3Months {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 40px;
    top: 20px;
    background-color: transparent;
    line-height: 40px;
    text-align: Center;
}

#div3MonthsPrice {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 40px;
    top: 60px;
    background-color: transparent;
    line-height: 40px;
    text-align: Center;
}

#divBT_3MonthsPriceContainer {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 40px;
    top: 100px;
    background-color: transparent;
    text-align: Center;
}

#divPeriod6Months {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 40px;
    top: 20px;
    background-color: transparent;
    line-height: 40px;
    text-align: Center;
}

#div6MonthsPrice {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 40px;
    top: 60px;
    background-color: transparent;
    line-height: 40px;
    text-align: Center;
}

#divBT_6MonthsPriceContainer {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 40px;
    top: 100px;
    background-color: transparent;
    text-align: Center;
}


#divPeriod12Months {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 40px;
    top: 20px;
    background-color: transparent;
    line-height: 40px;
    text-align: Center;
}

#div12MonthsPrice {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 40px;
    top: 60px;
    background-color: transparent;
    line-height: 40px;
    text-align: Center;
}

#divBT_12MonthsPriceContainer {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 40px;
    top: 100px;
    background-color: transparent;
    text-align: Center;
}



#div3Months {
    position: absolute;
    left: 0px;
    width: 250px;
    bottom: 30px;
    top: 100px;
    background-color: white;
    border: 1px solid lightgray;
}

#div6Months {
    position: absolute;
    left: 250px;
    width: 250px;
    bottom: 30px;
    top: 100px;
    background-color: white;
    border: 1px solid lightgray;
}

#div12Months {
    position: absolute;
    left: 500px;
    right: 0px;
    bottom: 30px;
    top: 100px;
    background-color: white;
    border: 1px solid lightgray;
}


.leaflet-arrowheads path {
    stroke: #ff0000; /* Darker color */
    stroke-width: 2px; /* Thinner lines */
    fill: #ff0000;
    opacity: 1.0;
}

#div_MapBackground {
    background-color: #212529 !important;
    color: white !important;
    z-index: 9999;
}

    #div_MapBackground img {
        opacity: 1 !important;
    }

    #div_MapBackground h5 {
        color: white !important;
    }


#emailDirectionsDialog {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
}

.emailDialogHeader,
.emailDirectionsContent {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

#emailDirectionsDialog textarea,
#emailDirectionsDialog input[type="text"] {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

    #emailDirectionsDialog input::placeholder,
    #emailDirectionsDialog textarea::placeholder {
        color: var(--bs-secondary-color) !important;
    }

[data-bs-theme="dark"] #emailDirectionsDialog {
    background-color: #161b22 !important;
    color: #f1f3f5 !important;
    border-color: #333333 !important;
}

[data-bs-theme="dark"] .emailDialogHeader,
[data-bs-theme="dark"] .emailDirectionsContent {
    background-color: #161b22 !important;
    color: #f1f3f5 !important;
    border-color: #333333 !important;
}

[data-bs-theme="dark"] #emailDirectionsDialog textarea,
[data-bs-theme="dark"] #emailDirectionsDialog input[type="text"] {
    background-color: #0f141a !important;
    color: #f1f3f5 !important;
    border-color: #333333 !important;
}

[data-bs-theme="dark"] #emailDirectionsDialog .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

#emailDirectionsDialog {
    padding: 20px !important;
    box-sizing: border-box;
}

.emailDirectionsContent {
    padding: 15px !important;
}

.emailDialogHeader {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#emailDirectionsDialog textarea,
#emailDirectionsDialog input[type="text"] {
    padding: 10px 12px !important;
}

.pm-dialog-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 50px;
    padding: 10px 16px 10px 0px !important;
}

    

    .pm-dialog-header .pm-btn-close {
        position: absolute !important;
        top: 6px !important;
        right: 6px !important;
        margin: 0 !important;
        z-index: 1000 !important;
    }

/* Contacts Multiselect Dialog */

#contactsDialog_Multiselect {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border-radius: 4px;
    position: absolute;
    width: 560px !important;
    height: 560px !important;
    z-index: 999999999 !important;
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
}

    #contactsDialog_Multiselect .contactsMultiselectDialogHeader {
        position: absolute;
        width: 100%;
        height: 40px;
        border-bottom: 1px solid var(--bs-border-color) !important;
        background-color: var(--bs-tertiary-bg) !important;
        color: var(--bs-body-color) !important;
    }

    #contactsDialog_Multiselect .modal-title {
        font-size: 16px !important;
        line-height: 1.2em !important;
        margin: 0 !important;
    }



    #contactsDialog_Multiselect .table,
    #contactsDialog_Multiselect thead,
    #contactsDialog_Multiselect tbody,
    #contactsDialog_Multiselect tr,
    #contactsDialog_Multiselect th,
    #contactsDialog_Multiselect td {
        background-color: var(--bs-body-bg) !important;
        color: var(--bs-body-color) !important;
        border-color: var(--bs-border-color) !important;
    }


    #contactsDialog_Multiselect .contacts-multiselect-footer {
        position: absolute !important;
        height: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 15px 10px;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }



[data-bs-theme="dark"] #contactsDialog_Multiselect .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme="light"] #contactsDialog_Multiselect .btn-close {
    filter: none;
}


#contactsDialog_Multiselect .contacts-groups-panel {
    height: 70px;
    padding: 6px 10px 8px 10px;
    border-bottom: 1px solid var(--bs-border-color);
}

#contactsDialog_Multiselect .contacts-group-ddl {
    width: 275px !important;
    flex: 0 0 275px !important;
}

#contactsDialog_Multiselect .contacts-add-group-btn {
    width: 95px !important;
    white-space: nowrap !important;
}


#contactsDialog_Multiselect .contacts-table-panel {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 92px;
    bottom: 0;
}

#contactsDialog_Multiselect .contacts-table-toolbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}




#modal_Confirm {
    z-index: 2147483647 !important;
}

    #modal_Confirm .modal-dialog {
        z-index: 2147483647 !important;
    }




#addEditContactDialog {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
}

    #addEditContactDialog .modal-title,
    #LBL_AddEditContactHeader {
        font-size: 16px !important;
        line-height: 1.2em !important;
        margin: 0 !important;
    }

    #addEditContactDialog .addEditContactDialogHeader,
    #addEditContactDialog .addEditContactContent,
    #addEditContactDialog .modal-header,
    #addEditContactDialog .modal-body,
    #addEditContactDialog .modal-footer {
        background-color: var(--bs-body-bg) !important;
        color: var(--bs-body-color) !important;
        border-color: var(--bs-border-color) !important;
    }

    #addEditContactDialog input,
    #addEditContactDialog textarea {
        background-color: var(--bs-body-bg) !important;
        color: var(--bs-body-color) !important;
        border-color: var(--bs-border-color) !important;
    }

        #addEditContactDialog input::placeholder,
        #addEditContactDialog textarea::placeholder {
            color: var(--bs-secondary-color) !important;
        }

[data-bs-theme="dark"] #addEditContactDialog .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme="light"] #addEditContactDialog .btn-close {
    filter: none;
}




.pm-recipient-box {
    min-height: 38px;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.pm-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}

.pm-recipient-chip-x {
    cursor: pointer;
    font-weight: bold;
    opacity: 0.75;
}

    .pm-recipient-chip-x:hover {
        opacity: 1;
    }




#modal_Message {
    z-index: 2147483647 !important;
}

    #modal_Message .modal-dialog {
        z-index: 2147483647 !important;
    }

#contactsDialog_Multiselect .contactsMultiselectContent {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 70px;
    padding: 0;
    overflow: hidden !important;
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
}

#contactsDialog_Multiselect .contacts-select-tools {
    position: relative !important;
    z-index: 5;
    margin-bottom: 6px !important;
}

#contactsDialog_Multiselect .tableContactsMultiselect {
    position: absolute !important;
    top: 24px !important;
    left: 0;
    right: 0;
    bottom: 42px;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    margin-top: 0 !important;
}

#contactsDialog_Multiselect #table_ContactsMultiselect {
    margin-bottom: 0 !important;
}

    #contactsDialog_Multiselect #table_ContactsMultiselect thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--bs-body-bg) !important;
    }


#emailDirectionsDialog.pm-email-dialog {
    height: auto !important;
    min-height: 430px !important;
    max-height: calc(100vh - 40px) !important;
}

    #emailDirectionsDialog.pm-email-dialog .pm-recipient-box {
        min-height: 38px;
        max-height: 105px;
        overflow-y: auto;
    }

    #emailDirectionsDialog.pm-email-dialog .pm-dialog-body {
        overflow-y: auto;
        max-height: calc(100vh - 160px);
    }




#contactGroupDialog {
    cursor: move;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
    display: none;
    border-radius: 4px;
    position: absolute;
    width: 420px;
    height: 230px;
    z-index: 9999999999 !important;
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
}

    #contactGroupDialog .contactGroupDialogHeader {
        position: absolute;
        width: 100%;
        height: 50px;
        border-bottom: 1px solid var(--bs-border-color) !important;
        background-color: var(--bs-tertiary-bg) !important;
    }

    #contactGroupDialog .contactGroupDialogContent {
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 70px;
    }

    #contactGroupDialog .contactGroupDialogFooter {
        position: absolute;
        height: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 15px 10px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    #contactGroupDialog input {
        background-color: var(--bs-body-bg) !important;
        color: var(--bs-body-color) !important;
        border-color: var(--bs-border-color) !important;
    }

[data-bs-theme="dark"] #contactGroupDialog .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}





/* Search modal z-index fix */

#modal_Search {
    z-index: 2147483646 !important;
}

    #modal_Search .modal-dialog,
    #modal_Search .modal-content {
        position: relative !important;
        z-index: 2147483647 !important;
    }

body.modal-open .modal-backdrop {
    z-index: 2147483600 !important;
}





    #tab_Results_Content > .d-flex:first-child {
        flex: 0 0 auto !important;
    }

    #tab_Results_Content > .scrollable-results-table-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #tab_Results_Content > .d-flex:last-child {
        flex: 0 0 auto !important;
    }

#table_SearchResults {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}


#tab_Results_Content > .d-flex:first-child {
    flex: 0 0 46px !important;
    min-height: 46px !important;
    overflow: visible !important;
    z-index: 5;
}

#BT_SearchResultsTab_Header_ZoomtoLSDCenter {
    position: relative !important;
    z-index: 10 !important;
    white-space: nowrap !important;
}



#tab_Assets,
#tab_Directions,
#tab_Favorites,
#tab_Routes,
#tab_Results {
    position: absolute !important;
    top: 40px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#tab_Results {
    padding: 0.75rem !important;
}

#tab_Results_Content {
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

    #tab_Results_Content > .d-flex:first-child {
        flex: 0 0 46px !important;
        min-height: 46px !important;
        overflow: visible !important;
        z-index: 5;
    }

    #tab_Results_Content > .scrollable-results-table-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #tab_Results_Content > .d-flex:last-child {
        flex: 0 0 auto !important;
    }

#BT_SearchResultsTab_Header_ZoomtoLSDCenter {
    position: relative !important;
    z-index: 10 !important;
    white-space: nowrap !important;
}



#table_SearchResults td.searchIconDiv {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 5px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

#table_SearchResults .searchIconImg {
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
}

.searchIconImgWell {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    object-fit: contain !important;
}

.searchIconImgFacility {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
}

#table_SearchResults img.searchIconImgWell {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
}

.activeMainTab {
    display: block !important;
}

#tab_Results.activeMainTab {
    display: flex !important;
}


#table_SearchResults td.searchActionsDiv {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 5px !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

#table_SearchResults td.td_searchResultItem {
    width: auto !important;
}


#table_SearchResults td.searchActionsDiv {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 5px !important;
    text-align: center !important;
    vertical-align: middle !important;
    overflow: visible !important;
}

#table_SearchResults .dropdown-menu {
    z-index: 2147483647 !important;
}

.scrollable-results-table-container {
    overflow-y: auto !important;
    overflow-x: visible !important;
}

#table_SearchResults td:nth-child(2) {
    width: auto !important;
}


#table_SearchResults {
    table-layout: fixed !important;
    width: 100% !important;
}

    #table_SearchResults td.searchIconDiv {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
    }

    #table_SearchResults td.searchActionsDiv {
        display: table-cell !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        padding: 5px !important;
        text-align: center !important;
        vertical-align: middle !important;
        overflow: visible !important;
    }

    #table_SearchResults td:nth-child(2) {
        width: calc(100% - 86px) !important;
        max-width: calc(100% - 86px) !important;
        overflow: hidden !important;
    }

    #table_SearchResults .dropdown {
        position: relative !important;
    }

    #table_SearchResults .dropdown-menu {
        position: absolute !important;
        z-index: 2147483647 !important;
    }


#favoriteDialog,
#favoriteDialog_Inner,
#addEditFavoriteDialog,
#addEditFavoriteDialog_Inner {
    z-index: 2147483647 !important;
}

    #favoriteDialog .modal-dialog,
    #addEditFavoriteDialog .modal-dialog {
        z-index: 2147483647 !important;
    }

body.modal-open .modal-backdrop {
    z-index: 2147483600 !important;
}

#modal_FavoritesAddEdit {
    z-index: 2147483647 !important;
}

    #modal_FavoritesAddEdit .modal-dialog {
        z-index: 2147483647 !important;
    }

    #modal_FavoritesAddEdit .modal-content {
        z-index: 2147483647 !important;
    }

body.modal-open .modal-backdrop {
    z-index: 2147483600 !important;
}


#modal_RecentSearches {
    z-index: 2147483647 !important;
}

    #modal_RecentSearches .modal-dialog,
    #modal_RecentSearches .modal-content {
        z-index: 2147483647 !important;
    }

body.modal-open .modal-backdrop {
    z-index: 2147483600 !important;
}

#table_RecentSearches tbody td {
    padding: 4px 8px !important;
    line-height: 1.15em !important;
    vertical-align: middle !important;
}

#table_RecentSearches tbody tr {
    height: 34px !important;
}

#table_RecentSearches .form-check-input {
    margin-top: 0 !important;
}


#modal_MapLayers {
    z-index: 2147483647 !important;
}

    #modal_MapLayers .modal-dialog,
    #modal_MapLayers .modal-content {
        z-index: 2147483647 !important;
    }

body.modal-open .modal-backdrop {
    z-index: 2147483600 !important;
}


body.modal-open .modal-backdrop {
    z-index: 2147483600 !important;
}

.modal,
.modal-dialog,
.modal-content {
    z-index: 2147483647;
}

#tab_Assets.activeMainTab {
    display: flex !important;
}

#AVL_Samsara_MainContainer {
    display: flex;
    min-height: 0;
}

#div_AssetsListContainer {
    min-height: 0;
}

.leaflet-label,
.assetLabelCallout_Moving,
.assetLabelCallout_Stopped,
.assetLabelCallout_Equipment {
    pointer-events: none !important;
}


#div_AssetsListContainer,
#div_AddressesListContainer,
#div_TrailersListContainer,
#div_EquipmentListContainer,
#div_UnpoweredListContainer {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    flex-direction: column !important;
}

#div_AssetsListContainer {
    display: flex;
}

    #div_AssetsListContainer > .input-group,
    #div_AddressesListContainer > .input-group,
    #div_TrailersListContainer > .input-group,
    #div_EquipmentListContainer > .input-group,
    #div_UnpoweredListContainer > .input-group {
        flex: 0 0 auto !important;
    }

    #div_AssetsListContainer > div[style*="overflow-y: auto"],
    #div_AddressesListContainer > div[style*="overflow-y: auto"],
    #div_TrailersListContainer > div[style*="overflow-y: auto"],
    #div_EquipmentListContainer > div[style*="overflow-y: auto"],
    #div_UnpoweredListContainer > div[style*="overflow-y: auto"] {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #div_AssetsListContainer > .container,
    #div_AddressesListContainer > .container,
    #div_TrailersListContainer > .container,
    #div_EquipmentListContainer > .container,
    #div_UnpoweredListContainer > .container {
        flex: 0 0 auto !important;
    }


#LBL_Samsara_TabTitle {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#LBL_Samsara_TabTitleContainer {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: auto !important;
}

#AVL_Samsara_MainContainer {
    padding-top: 0 !important;
}

    #AVL_Samsara_MainContainer .header_AssetAddresses > div {
        margin-bottom: 0 !important;
    }



#AVL_GeoTab_MainContainer {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

#div_Geotab_VehiclesListContainer,
#div_Geotab_TrailersListContainer {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
}

    #div_Geotab_VehiclesListContainer > .input-group,
    #div_Geotab_TrailersListContainer > .input-group {
        flex: 0 0 auto;
    }

    #div_Geotab_VehiclesListContainer > div[style*="overflow-y: auto"],
    #div_Geotab_TrailersListContainer > div[style*="overflow-y: auto"] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

.leaflet-tooltip,
.leaflet-tooltip * {
    pointer-events: none !important;
}


/* 511 Road Conditions Menu */

#div511 {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
}

    #div511 .accordion {
        background-color: var(--bs-tertiary-bg) !important;
        color: var(--bs-body-color) !important;
        border-bottom: 1px solid var(--bs-border-color) !important;
    }

        #div511 .accordion.active,
        #div511 .accordion:hover {
            background-color: var(--bs-secondary-bg) !important;
            color: var(--bs-body-color) !important;
        }

    #div511 .accordion_panel {
        background-color: var(--bs-body-bg) !important;
        color: var(--bs-body-color) !important;
        border-bottom: 1px solid var(--bs-border-color);
    }

    #div511 label,
    #div511 .form-check-label,
    #div511 .fontDefault {
        color: var(--bs-body-color) !important;
    }

    #div511 .divCheckBox_511 {
        color: var(--bs-body-color) !important;
    }

#LBL_AB_511_LastUpdate {
    color: var(--bs-secondary-color) !important;
}

#div511,
#div511[style] {
    height: auto !important;
    max-height: calc(100vh - 90px) !important;
    overflow-y: auto !important;
}

    #div511 .accordion_panel {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

#div511 {
    right: auto !important;
}

#div511 {
    transition: opacity .15s ease;
}

.pm-511-popup {
    color: var(--bs-body-color);
}

.pm-511-popup-title {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    padding: 7px;
    font-size: 14px;
}

/* Leaflet popups - dark mode friendly */

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

.leaflet-popup-content {
    color: var(--bs-body-color) !important;
}

.leaflet-container a.leaflet-popup-close-button {
    color: var(--bs-body-color) !important;
}

.bc511-popup-title {
    background-color: #E0E0E0;
    border: 1px solid #ADADAD;
    color: #000000;
    padding: 7px;
    font-size: 14px;
}

.bc511-popup-heading {
    position: absolute;
    top: 20px;
    left: 60px;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.leaflet-popup-content .bc511-camera-title {
    font-size: 14px;
    color: #000000;
    margin-bottom: 8px;
}

[data-bs-theme="dark"] .leaflet-popup-content .bc511-camera-title {
    color: #f5f5f5 !important;
}