:root {
    --left-menu-width: 300px;
    --theme-color: #2D8DC7;
    --sidebar-width: 440px;

    --primary-text-color: #4c4c4c;
    --secondary-text-color: #666666;
    --tetriary-text-color: #ababab;

    --bg-color: #ffffff;
    --link-color: #1b51ff;

    --get-started-color: #337bb8;

    --f7-theme-color: var(--theme-color);

    /* Navbar-related variables */
    --f7-navbar-bg-color: var(--theme-color);
    --f7-navbar-link-color: #ffffff;
    --f7-navbar-text-color: #ffffff;

    /* FAB-related variables */
    --f7-fab-pressed-bg-color: var(--theme-color);
    --f7-fab-button-size: 50px;

    /* Action Sheet related variables */
    --f7-actions-button-text-align: center;
    --f7-actions-button-text-color: var(--theme-color);
    --f7-actions-button-height: 57px;
    --f7-actions-button-font-size: 20px;
    --f7-actions-bg-color: #fff;

    /* Panel-related variables */
    --f7-panel-width: var(--left-menu-width);

    /* List-related variables */
    --f7-list-item-divider-bg-color: #F1EEEE;
    --f7-list-item-title-text-color: #4c4c4c;
    --site-details-toggler-border-color: #e3e3e5;

    /* Panel (left menu)-related variables */
    --lm-icon-fill-color: #6f6f6f;

    /* Searchbar-related variables */
    --f7-searchbar-input-bg-color: #ffffff;

    /* Input-related variables */
    --f7-input-invalid-text-color: var(--f7-input-error-text-color);

    /* Location Details related variables */
    --add-images-icon-color: #989697;
}

:root .theme-dark,
:root.theme-dark {
    --primary-text-color: #ffffff;
    --secondary-text-color: #d3d3d3;
    --tetriary-text-color: #d3d3d3;

    --bg-color: #1c1c1d;
    --link-color: #2d8dc7;

    /* Panel-related variables */
    --f7-panel-bg-color: #1c1c1d;

    /* List-related variables */
    --f7-list-item-title-text-color: inherit;
    --site-details-toggler-border-color: var(--f7-list-item-divider-border-color);

    /* Action Sheet related variables */
    --f7-actions-button-text-color: var(--theme-color);
    --f7-actions-bg-color: #1c1c1d;

    /* Panel (left menu)-related variables */
    --lm-icon-fill-color: #ffffff;

    /* Autocomplete-related variables */
    --f7-autocomplete-dropdown-text-color: #ffffff;

    /* Location Details related variables */
    --add-images-icon-color: #ffffff99;
}

html, body {
    /* on iOS: use full viewport height (vh units) instead of full safe area (% units) */
    height: 100vh;
}

/*iOS body will scroll in certain cases.  This handles that issue*/
.fixBody {
    -webkit-overflow-scrolling: touch !important;
    overflow: hidden !important;
}

.iOSFixedBody {
    position: absolute;
}

.title .bam-tablet-only {
    display: none;
}

@media (min-width: 768px) {
    .title .bam-tablet-only {
        display: inline-block;
    }
}

/* status bar styling */
.ios .statusbar,
.md .statusbar {
    background-color: var(--theme-color);
    transition: 400ms;
}

html.with-statusbar.device-ios .panel,
html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
    top: 0;
    height: 100%;
}

/* F7 search bar customization */
.ios .searchbar.pageSearchbar {
    background: var(--theme-color);
}

.ios .searchbar.pageSearchbar .searchbar-disable-button {
    color: white;
}

/* end of F7 search bar customization */

.md .panel-backdrop,
.ios .panel-backdrop {
    background: rgba(0, 0, 0, 0.2);
    z-index: 10300;
    /*too overlap fab button*/
}

.signinStatusbar {
    background-color: #0079C1 !important;
}

/* end of status bar styling */

div#menuHeader {
    margin: 0;
    padding: 0;
}

.lm-icon {
    width: 32px;
    height: 32px;
    background-color: var(--lm-icon-fill-color);
}

.lm-icon-maps {
    mask-image: url(../images/svg/maps32.svg);
    -webkit-mask-image: url(../images/svg/maps32.svg);
}

.lm-icon-folder {
    mask-image: url(../images/svg/folder32.svg);
    -webkit-mask-image: url(../images/svg/folder32.svg);
}

.lm-icon-arcgis {
    mask-image: url(../images/svg/arcgis32.svg);
    -webkit-mask-image: url(../images/svg/arcgis32.svg);
}

.lm-icon-settings {
    mask-image: url(../images/svg/settings32.svg);
    -webkit-mask-image: url(../images/svg/settings32.svg);
}

.lm-icon-mappin {
    mask-image: url(../images/svg/mappin32.svg);
    -webkit-mask-image: url(../images/svg/mappin32.svg);
}

.lm-icon-polygon {
    mask-image: url(../images/svg/polygon32.svg);
    -webkit-mask-image: url(../images/svg/polygon32.svg);
}

.lm-icon-polygon2 {
    mask-image: url(../images/svg/polygon232.svg);
    -webkit-mask-image: url(../images/svg/polygon232.svg);
}

.lm-icon-reports {
    mask-image: url(../images/svg/reports32.svg);
    -webkit-mask-image: url(../images/svg/reports32.svg);
}

.lm-icon-drivetime {
    mask-image: url(../images/svg/drivetime32.svg);
    -webkit-mask-image: url(../images/svg/drivetime32.svg);
}

.lm-icon-drivetime-threshold {
    mask-image: url(../images/svg/drivetime-threshold32.svg);
    -webkit-mask-image: url(../images/svg/drivetime-threshold32.svg);
}

.lm-icon-walktime {
    mask-image: url(../images/svg/walktime32.svg);
    -webkit-mask-image: url(../images/svg/walktime32.svg);
}

.lm-icon-rings {
    mask-image: url(../images/svg/rings32.svg);
    -webkit-mask-image: url(../images/svg/rings32.svg);
}

.lm-icon-rings-threshold {
    mask-image: url(../images/svg/rings-threshold32.svg);
    -webkit-mask-image: url(../images/svg/rings-threshold32.svg);
}

.lm-icon-layers {
    mask-image: url(../images/svg/layers32.svg);
    -webkit-mask-image: url(../images/svg/layers32.svg);
}

.slidingPanelMenuButton7 {
    width: 24px;
    min-height: 41px;
    background-image: url(../images/svg/menu16.svg);
}

.slidingPanelSearchButton7 {
    width: 24px;
    min-height: 41px;
    background-image: url(../images/svg/search16.svg);
}

.slidingPanelMoreButton7 {
    width: 24px;
    min-height: 41px;
    background-image: url(../images/svg/layers16_white.svg);
}

.slidingPanelDeleteSitesButton7 {
    width: 24px;
    min-height: 41px;
    background-image: url(../images/svg/whitetrash.svg);
}

i.info-icon {
    width: 30px;
    height: 30px;
    background-image: url(../images/svg/layerInfo.svg);
}

i.share-icon {
    width: 30px;
    height: 30px;
    background-image: url(../images/svg/share_box.svg);
}

i.fab-icon {
    width: 32px;
    height: 32px;
}

i.fab-reports-icon {
    background-image: url(../images/svg/reports_wht.svg);
}

i.fab-compare-icon {
    background-image: url(../images/svg/comparesite_wht.svg);
}

i.fab-edit-icon {
    background-image: url(../images/svg/edit_pencil_wht.svg);
}

i.fab-delete-icon {
    background-image: url(../images/svg/closecircled32.svg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

i.fab-more-icon {
    background-image: url(../images/svg/ellipses_16.svg);
    background-position-y: 1px;
    width: 30px;
    height: 30px;
}

i.fab-close-icon {
    background-image: url(../images/svg/down-arrow-white.svg);
    width: 30px;
    height: 30px;
}

i.fab-photo-icon {
    background-image: url(../images/svg/camera32g_wt.svg);
}

i.fab-suitability-table-icon {
    background-image: url(../images/svg/table-32.svg);
}

i.fab-suitability-add {
    background-image: url(../images/svg/add_plus_wht.svg);
}

.fab-opened .fab-buttons a:nth-child(7) {
    -webkit-transition-delay: 300ms;
    transition-delay: 300ms;
}

.fab-opened .fab-buttons a:nth-child(8) {
    -webkit-transition-delay: 350ms;
    transition-delay: 350ms;
}

.md .fab.bam-fab,
.ios .fab.bam-fab {
    bottom: 115px !important;
    z-index: 10200; /*to overlap fab-backdrop*/
}

.fab-backdrop {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    will-change: opacity;
    contain: strict;
    z-index: 10100;
    /*to overlap statusbar element*/
}

.fab-backdrop.backdrop-in {
    visibility: visible;
    opacity: 1;
}

/* FAB buttons a little larger */
.fab div.fab-buttons a {
    width: 46px;
    height: 46px;
    padding-right: 1px;
}

#fabButtonsContainer {
    left: 25px;
}

.ios .bam-fab-label,
.md .bam-fab-label {
    background: none;
    color: white;
    box-shadow: none;
    -webkit-box-shadow: none;
    font-size: 12pt;
}

.md .button {
    height: unset;
}

i.icon-checked {
    width: 22px;
    height: 22px;

    position: absolute;
    right: 10px;

    background: no-repeat center;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2013%2010'%3E%3Cpolygon%20fill%3D'%23007aff'%20points%3D'11.6%2C0%204.4%2C7.2%201.4%2C4.2%200%2C5.6%204.4%2C10%204.4%2C10%204.4%2C10%2013%2C1.4%20'%2F%3E%3C%2Fsvg%3E");
    background-size: 13px 10px;
}

i.info-icon-white {
    width: 30px;
    height: 30px;
    background-image: url(../images/svg/layerInfoWhite.svg);
}

.md .navbar a.icon-only {
    width: unset;
}

.device-browser {
    --f7-navbar-height: 54px;
    --f7-navbar-tablet-height: 54px;
}

.md .checkbox i:after,
.md .icon-checkbox:after {
    content: ''; /*was checkbox_md*/
}

/*.device-browser div.ux2Header2 {*/
/*padding-top: 6px;*/
/*height: 49px;*/
/*}*/

/*.device-browser div#mapCardHeader {*/
/*height: 48px;*/
/*}*/

/*.device-ipad div.popup-tablet-fullscreen.popupSidePanel {*/
/*    top: 0;*/
/*}*/

/*.device-ipad div.popup-tablet-fullscreen.compareSiteSelectorPopup,*/
/*.device-ipad div.popup-tablet-fullscreen.mapContentsPopup {*/
/*    height: 100%;*/
/*}*/

/* override F7 styling for Map Contents Layers */

#tab_mapLayers .md .checkbox i:after,
.md .icon-checkbox:after {
    background-color: transparent !important;
    top: 0 !important;
    left: 0 !important;
    border: none !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url(../images/layer_on.png) !important;
    background-repeat: no-repeat;
    background-size: 22px;
}

#tab_mapLayers .md .checkbox i,
.md .icon-checkbox {
    left: 0 !important;
    background-color: transparent !important;
    border: none !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url(../images/layer_off.png) !important;
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: 0 0;
}

#tab_mapLayers div.item-inner:after {
    display: none !important;
}

#tab_mapLayers li {
    border-bottom: solid 1px rgba(33, 33, 33, 0.16);
}

/* End override F7 styling for Map Contents Layers */

.md .toast {
    background: #747474;
}

.md .toast.modal-in {
    opacity: .85;
}

.ios .toast {
    background: #747474;
}

.ios .toast.modal-in {
    opacity: .85;
}

.ios .toast.toast-bottom.modal-in {
    opacity: .85;
}

.toast .toast-text {
    width: 100%;
    text-align: center;
}

.md .toolbar-inner {
    padding: 0 8px;
}

/* F7 Smart Select's navbar workaround */
.md .smart-select-page .color-theme-white .navbar,
.md .smart-select-page .color-theme-white.navbar {
    background: var(--theme-color);
}

i.webmaps-search-suggest {
    width: 18px;
    min-height: 41px;
    background-image: url(../images/svg/search16_gr.svg);
}

.ios .list .item-inner.webmapsSuggestInner,
.md .list .item-inner.webmapsSuggestInner {
    margin-left: 8px;
}

.md .searchbar-input-wrap .autocomplete-dropdown .item-content {
    padding-left: 23px;
}

.ios .searchbar-input-wrap .autocomplete-dropdown .item-content {
    padding-left: 12px;
}

.md .searchbar input[type="search"] {
    font-size: 13pt;
}

.ios .page-content.arcGISpageContent {
    --f7-page-content-extra-padding-top: 26px;
}

.md .page-content.arcGISpageContent {
    --f7-page-content-extra-padding-top: 50px;
}

.item-divider.listItemDivider {
    text-transform: uppercase;
    font-size: 14px;
}

.device-ipad .item-divider.listItemDivider {
    font-size: 13px !important;
}

.md .item-divider.listItemDivider {
    height: 27px;
    line-height: 27px;
}

.groupThumbnail {
    width: 32px;
    height: 32px;
    mask-size: 32px;
    -x-mask-size: 32px;
    -webkit-mask-size: 32px;
    background-color: var(--lm-icon-fill-color);
    mask-image: url(../images/svg/folder16.svg);
    -webkit-mask-image: url(../images/svg/folder16.svg);
}

.webmapThumbnail {
    width: 67px;
    height: 44px;
}

.webmapNoThumbnail {
    background-image: url("../images/svg/noLayerThumbnail.svg");
    background-position: center;
    background-repeat: no-repeat;
}

.ios .list .item-content,
.md .list .item-content {
    min-height: 60px;
}

.ios .list .list-button,
.md .list .list-button {
    min-height: 60px;
    line-height: 59px;
    color: var(--link-color);
}

.md .list .list-button {
    text-align: center;
}

.ios .list .item-subtitle,
.md .list .item-subtitle {
    color: #A2A2A2;
    font-size: 9pt;
}

.icon-warning-small {
    width: 16px;
    height: 16px;
    mask-image: url(../images/svg/warning-16.svg);
    -webkit-mask-image: url(../images/svg/warning-16.svg);
}

.icon-report {
    width: 32px;
    height: 32px;
    margin-top: 19px;
    margin-bottom: 19px;
}

.icon-classic-report {
    background: url(../images/svg/reports32blu.svg);
}

.icon-infographic-report {
    background: url(../images/svg/chart32.svg);
}

.icon-warning-report {
    mask-image: url(../images/svg/warning-32.svg);
    -webkit-mask-image: url(../images/svg/warning-32.svg);
}

.item-link.reportLink .item-title {
    color: #0079c1;
}

.theme-dark .item-link.reportLink .item-title {
    color: inherit;
}

.dialog .dialog-text {
    word-break: break-word;
}

#leftMenuPanel .sendFeedback {
    bottom: 0;
    position: absolute !important;
    width: 100%;
    min-width: 48px;
}

/* Override F7 select style for traffic time selectors */
select#typicalDayOfWeek,
select#typicalMinutes,
select#liveMinutes {
    color: var(--theme-color);
}

.organizationInfo {
    margin: 15px;
}

.organizationName {
    font-size: 13pt;
}

.organizationThumbnail {
    width: 112px;
    display: inline-block;
}

.list .item-content.factsItemContent {
    min-height: 75px;
}

.factsIcon {
    width: 36px;
    height: 36px;
}

#noAfter:after {
    display: none;
}

.forceLineAfter:after {
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, .12);
    display: block;
    z-index: 15;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.list.currentSiteItem ul:after {
    display: none;
}

/*
.list .item-title.factsTitle {
    color: #989696;
    font-size: 15px;
    font-weight: 400;
}
*/

.list .item-header.factsTitle {
    color: #989696;
    font-size: 15px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.list .item-subtitle.factsText {
    color: #2B2B2B;
    font-size: 17px;
}

.currentSiteIcon {
    align-self: baseline;
    -webkit-align-self: baseline;
}

.factsItemInner {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    white-space: nowrap;
}

.list .item-title.currentSiteTitle {
    font-size: 17px;
    font-weight: unset;
}

.list .item-text.currentSiteDescription,
.list .item-subtitle.currentSiteDescription {
    font-size: 12px;
    color: #666;
    padding-right: 25px;
}

.theme-dark .list .item-text.currentSiteDescription,
.theme-dark .list .item-subtitle.currentSiteDescription {
    color: #d3d3d3;
}

.list .item-description.currentSiteDescription {
    font-size: 12px;
    color: #ABABAB;
}

.theme-dark .list .item-description.currentSiteDescription {
    color: #d3d3d3;
}

.list .item-title.tapestryTitle {
    padding-left: 15px;
    white-space: initial;
}

.item-divider.tapestryItemDivider {
    text-transform: uppercase;
    font-size: 10pt;
}

.tapestryImage {
    display: block;
}

.ios .list.dataVintageList,
.md .list.dataVintageList {
    margin: 8px 0;
}

.ios .list .accordion-item-toggle .item-inner.dataVintageToggleInner,
.md .list .accordion-item-toggle .item-inner.dataVintageToggleInner {
    background-image: unset !important;
    padding-right: 16px;
}

.ios .list .item-inner.dataVintageToggleInner .item-after,
.md .list .item-inner.dataVintageToggleInner .item-after {
    color: #989696;
}

.ios .list .item-content.dataVintageItemContent,
.md .list .item-content.dataVintageItemContent {
    min-height: 48px;
    padding-left: 32px;
}

/*.page-content {*/
/*background-color: #FFFFFF;*/
/*}*/

.addToMyFactsBtn {
    width: 100%;
}

#editFactsList ul li input{
    font-size: 11pt;
}

#dataBrowserSearchbar input {
    font-size: 12pt;
}


#dataBrowserCategoryPageContent .list.dataBrowserList .subCategory {
    padding-left: 39px;
}

#editFactsView .centerTitle {
    width: calc(100% - 130px);
    text-align: center;
}

.list.dataBrowserList {
    font-size: 16px;
}

.dataBrowserCatList {
    font-size: 11pt;
}

.list.sitesList .item-title,
.list.dataBrowserList .item-title {
    --f7-list-item-text-max-lines: 5;
    --f7-list-item-title-white-space: normal;
}

.list.dataBrowserList ul ul {
    padding-left: 0;
}

.dataBrowserThumbnail {
    width: 36px;
}

.dataBrowserList .icon {
    padding-right: 15px;
}

.md .dataBrowserListItem .icon-next:after {
    /*font-size: 20px;*/
    font-size: var(--f7-list-chevron-icon-font-size);
    color: var(--f7-list-chevron-icon-color);
}

.ios .dataBrowserListItem .icon-forward:after {
    font-size: 13px;
    /* font-size: var(--f7-list-chevron-icon-font-size); */
    color: var(--f7-list-chevron-icon-color);
}

.sheetModelList {
    height: 100%;
    overflow: auto
}

.icon-data-browser-open-cart {
    width: 32px;
    height: 32px;
    background: url(../images/svg/down-arrow-grey.svg);
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    /* wasn't able to use mask-image */
}

.icon-data-browser-close-cart {
    width: 32px;
    height: 32px;
    background: url(../images/svg/down-arrow-grey.svg);
}

.segmented.bamSegmented {
    padding: 10px;
    background: #FFFFFF;
}

.segmented.bamSegmented .button {
    text-transform: capitalize;
    font-size: 14px;
}

.theme-dark .segmented.bamSegmented {
    background-color: #1c1c1d;
}

.projectsSitesLayerTitle {
    font-size: 12pt;
}

.projectsSiteItemContent {
    padding-left: 15px;
}

#projectsThresholdLayersCell {
    display: none;
}

.list.media-list .item-title.projectsSiteTitleRow {
    /*color: #4A4949;*/
    font-size: 11pt;
    font-weight: normal;
}

.swipeActionButtonTitle {
    height: auto;
    text-align: center;
    font-size: 8.5pt;
    color: #ffffff;
    width: 100%;
}

.list .swipeout-actions-right a.swipeout-action-button {
    width: 80px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.list .swipeout-actions-right a.swipeout-action-button-grey {
    background-color: #a7aaab;
}

.list .swipeout-actions-right a.swipeout-action-button-orange {
    background-color: #d17e20;
}

.list .swipeout-actions-right a.swipeout-action-button-green {
    background-color: #539e36;
}

.list .swipeout-actions-right a.swipeout-action-button-blue {
    background-color: #3a8ec2;
}

.swipe-action-icon {
    background-size: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
}

.swipe-action-icon-more {
    background-image: url(../images/svg/ellipses_h32.svg);
}

.swipe-action-icon-zoom {
    background-image: url(../images/svg/closecircled32.svg);
}

.swipe-action-icon-details {
    background-image: url(../images/svg/media32.svg);
}

.swipe-action-icon-edit {
    background-image: url(../images/svg/edit_pencil_wht.svg);
    background-position-y: 2px;
}

.swipe-action-icon-open {
    background-image: url(../images/svg/closecircled32.svg);
    background-position-y: 2px;
}

.swipe-action-icon-close {
    background-image: url(../images/svg/closecircled32.svg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background-position-y: 2px;
}

/* Suitability page (table, etc.) */

.suitability-layer-icon {
    width: 32px;
    height: 32px;
    background-color: var(--lm-icon-fill-color);
    mask-image: url(../images/svg/suitabilityLayerIcon.svg);
    -webkit-mask-image: url(../images/svg/suitabilityLayerIcon.svg);
}

.suitabilityTablePopup {
    max-width: unset;
}

.suitabilitySiteNameContainer {
    display: flex;
    align-items: center;
    max-width: 195px;
}

.suitabilitySiteNameImage {
    width: 22px;
    height: 22px;
    border: 1px solid darkgrey;
    flex-shrink: 0;
}

.suitabilitySiteNameText {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 170px;
    max-height: 45px;
    text-align: left;
    margin-left: 3px;
    color: #393939;
    line-height: 16pt;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.theme-dark .suitabilitySiteNameText {
    color: inherit;
}

.suitability-accordion-item-content {
    padding-left: 20px;
}

.ios .accordion-item-content.suitability-accordion-item-content .list li.hidden-by-searchbar,
.md .accordion-item-content.suitability-accordion-item-content .list li.hidden-by-searchbar {
    display: initial !important;
}

/* to apply sticky headers for table */
table.data-table {
    width: 100%;
    border: none;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    text-align: left;
}

.bam-suitability-table {
    overflow: auto;
    border: none !important;
}

.ios .bam-suitability-table .data-table tbody tr:not(:first-child) td:before,
.md .bam-suitability-table .data-table tbody tr:not(:first-child) td:before {
    height: unset !important;
}

.ios .bam-suitability-table .data-table thead th,
.md .bam-suitability-table .data-table thead th {
    font-weight: unset;
    --f7-table-head-cell-height: 40px;
}


.bam-suitability-table table th,
.bam-suitability-table table td {
    text-align: center;
}

.bam-suitability-table table.data-table thead.sticky-head tr th {
    position: sticky;
    position: -webkit-sticky;
    z-index: 20;
    /* to override z-index of table cells */
    top: 0;
    background-color: #ebf4fa;
}

.theme-dark .bam-suitability-table table.data-table thead.sticky-head tr th {
    background-color: #a9a9a9;
}

.bam-suitability-table tr.grey-cell {
    background-color: #f7f9f7;
}

.theme-dark .bam-suitability-table tr.grey-cell {
    background-color: #5d5d5d;
}

.bam-suitability-table tr.dark-grey-cell {
    background-color: #ebebeb;
}

.theme-dark .bam-suitability-table tr.dark-grey-cell {
    background-color: #1c1c1d; /* same as --f7-list-bg-color */
}

.bam-suitability-table tr.highlighted-cell {
    background-color: #d8ecf4;
}

.theme-dark .bam-suitability-table tr.highlighted-cell {
    background-color: #79797f;
}

.bam-suitability-table tbody td:before {
    display: none;
}

.suit-hdr-sitename {
    padding: 0 6px 0 12px !important;
    white-space: normal !important;
    text-align: center !important;
}

.suit-hdr-base {
    padding: 9px 6px !important;
    white-space: normal !important;
    text-align: center !important;
}

.suit-hdr-rank {
    min-width: 50px;
}

.suit-hdr-finalscore,
.suit-hdr-rank,
.suit-hdr-sitearea {
    white-space: nowrap !important;
}

.suit-hdr-others {
    /* min-width: 192px; */
    min-width: 96px;
}

.suit-col-base {
    padding: 0 6px !important;
    /* white-space: normal !important; */
    /* text-align: center !important; */
}

/*.suit-col-sitename-td {*/
/*    padding: 0 4px 0 12px;*/
/*}*/

/* .suit-col-sitename-wt {
    min-width: 232px;
    max-width: 232px;
} */

.suit-col-rank-td {
    /*min-width: 88px;*/
}

.suit-col-rank-wt {
    margin-left: -20%;
    width: 100%;
}

#bamSuitabilityTable,
#bamSuitabilityTable thead,
#suitabilityTablePage {
    font-family: Roboto, Noto, Helvetica, Arial, sans-serif;
}

#bamSuitabilityTable thead {
    font-size: 13px;
}

#bamSuitabilityTable tbody {
    font-size: 10pt;
}

#bamSuitabilityTable tr {
    line-height: 2;
}

/* End: Suitability page (table, etc.) */

.ios .item-content.noPadding,
.md .item-content.noPadding,
.ios .item-inner.noPadding,
.md .item-inner.noPadding {
    padding: unset;
}

.item-divider.compareItemDivider {
    justify-content: center;
    text-transform: uppercase;
    font-size: 10pt;
}

.compareItemContent {
    height: 52px;
}

.compareItemRow {
    width: 100%;
    height: 100%;
    text-align: center;
}

.compareItem {
    height: 100%;
    min-height: 60px;
    /*workaround for iOS 10*/
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #393939;
    font-size: 10pt;
}

.theme-dark .compareItem {
    color: #ffffff;
}

.compareItemLeft {
    background-color: #ffffff;
}

.theme-dark .compareItemLeft {
    background-color: #404040;
}

.compareItemRight {
    background-color: #ebebeb;
}

.theme-dark .compareItemRight {
    background-color: #6c6b6b;
}

i.arrow-up-icon {
    height: 15px;
    width: 15px;
    background-image: url(../images/svg/arrow_up.svg);
}

.theme-dark i.arrow-up-icon {
    background-image: url(../images/svg/arrow_up_wht.svg);
}

i.arrow-down-icon {
    width: 15px;
    height: 15px;
    background-image: url(../images/svg/arrow_down.svg);
}

.theme-dark i.arrow-down-icon {
    background-image: url(../images/svg/arrow_down_wht.svg);
}

.ios .list .item-divider.underlinedItemDivider:after,
.md .list .item-divider.underlinedItemDivider:after {
    /*exact content of .list .item-inner:after*/
    /*how to eliminate this?*/
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 1px;
    width: 100%;
    background-color: #e3e3e5;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.md .list .item-divider.underlinedItemDivider:before {
    content: '';
    position: absolute;
    background-color: #e3e3e5;
    display: block !important;
    /*to override F7 .md .item-divider:before hide*/
    z-index: 15;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    height: 1px;
    width: 100%;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.md .list .item-inner.md-no-after::after {
    display: none !important;
}

@media (min-width: 496px) {
    .actions-modal {
        width: inherit;
        left: unset;
        margin-left: unset;
    }
}

/* actions menu customization */

/* fullscreen width on tablets */
.ios .actions-group {
    margin: unset;
    border-radius: unset;
}

/* remove rounded rectangle-like buttons appearance (not applicable for Android theme) */
.ios .actions-button:first-child,
.ios .actions-label:first-child {
    border-radius: unset;
}

.ios .actions-button:last-child,
.ios .actions-label:last-child {
    border-radius: unset;
}

.ios .actions-button:last-child:after,
.ios .actions-label:last-child:after {
    display: inherit !important;
}

.ios .actions-button:first-child:last-child,
.ios .actions-label:first-child:last-child {
    border-radius: unset;
}

.ios .actions-modal.modal-in {
    transform: unset;
    -webkit-transform: unset;
}

.ios .actions-modal.modal-in:last-child {
    padding-bottom: env(safe-area-inset-bottom);
}

.md .actions-button:after {
    /*same as .ios .actions-button:after */
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, 0.2);
    display: block;
    z-index: 15;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.ios label.item-checkbox>.icon-checkbox,
.md label.item-checkbox>.icon-checkbox {
    margin-right: 11px;
}

/* end same styles for ios and android actions menu */

.actions-modal {
    /* height: 90%; */
    max-height: 90%;
}

/* end actions menu customization */

/*disable F7 busy spinner*/
.preloader-inner {
    display: none !important;
}

#areaRadiusVal {
    display: inline;
    border-radius: 8px;
    width: 131px;
    height: 27px;
    font-size: 13pt;
    text-align: center;
    vertical-align: middle;
}

.ios #areaRadiusVal {
    background: white;
}

.md #areaRadiusVal {
    background: #eaeaea;
    border: solid 1px #ccc !important;
}

.md #reportsSortByLinkButton,
.md #projectsSortByLinkButton,
.md #basemapsSortByLinkButton,
.md #projectsEditSites,
.md #imageGalleryEditPhotos {
    padding-left: 10px;
    color: var(--link-color);
    font-size: 16px;
}

.md #projectsFilteredByLinkButton {
    padding-left: 0;
    color: var(--link-color);
    font-size: 16px;
}

.ios #projectsEditSites {
    padding-right: 10px;
}

.md #runReportsViewLinkButton {
    padding-left: 0;
    color: var(--link-color);
    font-size: 15px;
}

.ios #runReportsViewLinkButton {
    font-size: 15px;
}

.runReportsPreviewIcon {
    width: 32px;
    height: 32px;
    background-image: url(../images/svg/reportPreview32.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    margin: 19px;
}

div#filterNotification {
    width: 8px;
    height: 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #d17e20;
    top: -11px;
    right: 5px;
    position: relative;
}

div#toolbarFilteredBy {
    display: inline-block;
}

.toolbarLabel {
    display: inline-block;
    font-size: 15px;
    color: var(--primary-text-color);
}

.toolbarFilter {
    font-size: 15px !important;
}

.toolbar-inner .right {
    position: absolute;
    right: 0;
    min-width: 88px;
    padding-right: 13px;
}

/*enforce max width on sidebar pages*/
.limit-to-sidebar-width {
    max-width: var(--sidebar-width) !important;
}

/*enforce max width on dynamically generated page content*/
div.smart-select-page {
    max-width: var(--sidebar-width) !important;
}

.page.stacked {
    display: initial;
}

/* override view color */
.view,
.views {
    background-color: #f0f0f0;
}

#webmapsSearchbar {
    height: 70px;
}

/* CreateSite sheet */

#createSiteSheet {
    height: 210px;
    position: fixed;
    /*z-index: 10501;*/
}

.createSiteLink {
    position: absolute;
    bottom: 14px;
    font-size: 13pt;
    width: calc(25% - 7px);
    color: var(--link-color);
}

#createSiteCancel {
    left: 14px;
}

#createSiteApply {
    right: 14px;
}

#siteHubOptionsDiv {
    position: absolute;
    bottom: 18px;
    left: calc(50% - 85px);
    text-align: center;
    color: var(--link-color);
    padding-top: 3px;
    width: 170px;
    height: auto;
    line-height: .98;
}

@media screen and (max-width: 374px) {
    .createSiteLink {
        font-size: 10pt;
    }

    #siteHubOptionsDiv {
        font-size: 10pt;
    }
}

#createSiteTabsDiv {
    /* position: relative; */
    /* padding-top: 14px; */
    margin: 10px 15px;
    padding: 0;
}

p#createSiteTabsDiv i {
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
}

button#csSimpleRings i {
    mask-size: 20px;
    -x-mask-size: 20px;
    -webkit-mask-size: 20px;
    background-color: var(--lm-icon-fill-color);
    mask-image: url(../images/svg/rings16.svg);
    -webkit-mask-image: url(../images/svg/rings16.svg);
}

button#csDriveTime i {
    mask-size: 20px;
    -x-mask-size: 20px;
    -webkit-mask-size: 20px;
    background-color: var(--lm-icon-fill-color);
    mask-image: url(../images/svg/drivetime16.svg);
    -webkit-mask-image: url(../images/svg/drivetime16.svg);
}

button#csWalkTime i {
    mask-size: 20px;
    -x-mask-size: 20px;
    -webkit-mask-size: 20px;
    background-color: var(--lm-icon-fill-color);
    mask-image: url(../images/svg/walktime16.svg);
    -webkit-mask-image: url(../images/svg/walktime16.svg);
}

button.button-active#csSimpleRings i {
    background-image: url(../images/svg/rings16_white.svg);
}

button.button-active#csDriveTime i {
    background-image: url(../images/svg/drivetime16_white.svg);
}

button.button-active#csWalkTime i {
    background-image: url(../images/svg/walktime16_white.svg);
}

.createSiteBufferValue.createSiteBufferValueError {
    border-color: var(--f7-input-error-text-color) !important;
    color: var(--f7-input-error-text-color);
}

.createSiteBufferValue,
.settingsSiteBufferValue {
    border-radius: 8px !important;
    width: 45px;
    height: 27px;
    margin-right: 16px !important;
    color: #333;
    font-size: 13pt;
    text-align: center;
    vertical-align: middle !important;
    padding-top: 2px !important;
    border: solid 1px !important;
    border-color: var(--theme-color) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#createSiteRadiiFormatContainer {
    display: none;
    position: fixed;
    padding: 5px;
}

#addBuffer {
    margin-right: 15px;
    margin-left: 6px;
    margin-top: 5px;
    font-size: 21pt;
}

#removeBuffer {
    padding-right: 15px;
    padding-left: 4px;
    margin-top: 5px;
    font-size: 11pt;
    font-weight: bold;
}

#createSiteEntryLabel {
    display: flex;
    flex: 0 0 auto;
    margin-top: 7px;
    padding-left: 6px;
    font-size: 13pt;
    float: left;
    color: var(--primary-text-color);
    width:70px;
}

/* end of CreateSite sheet */

/* menu header and controls */

#LM_Header {
    height: 150px;
    background-color: var(--theme-color);
}

#LM_UserThumbnail {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-top: 60px;
    margin-left: 15px
}

#LM_AccountInfo {
    position: absolute;
    top: 66px;
    left: 72px;
    width: 217px;
}

#LM_AccountName {
    display: inline-block;
    position: relative;
    float: left;
    max-width: 200px;
    font-size: 12pt;
    color: #f8f8f8;
    white-space: nowrap;
    overflow: hidden;
    padding: 1px;
    text-overflow: ellipsis;
}

#LM_AccountDropdown {
    display: inline-block;
    position: relative;
    float: left;
    margin-left: 12px;
    width: 40px;
    height: 40px;
    background-image: url(../images/svg/downarrowwhite.svg);
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 9px 16px;
}

#LM_AccountSubName {
    position: absolute;
    top: 18px;
    left: 1px;
    max-width: 234px;
    font-size: 10pt;
    color: #f8f8f8;
    white-space: nowrap;
    overflow: hidden;
    padding: 1px;
    text-overflow: ellipsis;
    text-align: left;
}

/* end of menu header and controls */

/* Site details page*/

/* Add images section */

.list .item-content.addImagesContainer {
    background-color: #f8f8f8;
    justify-content: center;
    padding-left: unset;
}

.theme-dark .list .item-content.addImagesContainer {
    background-color: #1c1c1d;
}

i.add-images-icon {
    width: 36px;
    height: 36px;
    background-color: var(--add-images-icon-color);
    mask-image: url(../images/svg/add_images.svg);
    -webkit-mask-image: url(../images/svg/add_images.svg);
    mask-size: 36px 36px;
    -webkit-mask-size: 36px 36px;
}

.item-subtitle.addImagesMessage {
    margin-left: 10px;
}

/* End Add images section */

/* Images slider section */

.fullHeight {
    height: 100% !important;
}

.fullWidth {
    width: 100% !important;
}

.siteDetailsPhotosImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.md .swiper-pagination-bullet,
.ios .swiper-pagination-bullet {
    background: #b7b7b7;
    opacity: 1;
}

.md .swiper-pagination-bullet-active,
.ios .swiper-pagination-bullet-active {
    background: #ffffff;
}

.md .swiper-pagination-bullet:only-child,
.ios .swiper-pagination-bullet:only-child {
    visibility: hidden;
}

i.image-gallery-icon {
    width: 30px;
    height: 30px;
    background-image: url(../images/svg/grid-view-48.svg);
}

.imageGalleryLink {
    position: absolute;
    right: 5%;
    bottom: 5%;
}

/* End Images slider section */

/* Site Photos Gallery */

.galleryImage {
    width: 100%;
    height: 100px;
    background-color: #d2d2d2;
    border-radius: 3px;
    object-fit: cover;
}

/* End Site Photos Gallery */

/* Photo Browser */

/*.gallery-top {*/
/*    height: 100%;*/
/*    width: 100%;*/
/*}*/

/*.gallery-thumbs {*/
/*    position: absolute;*/
/*    height: 80px;*/
/*    width: 100%;*/
/*    background-color: rgba(0,0,0,.3);*/
/*    box-sizing: border-box;*/
/*    padding: 10px 0;*/
/*    bottom: 0;}*/

/*.gallery-thumbs .swiper-slide {*/
/*    width: auto;*/
/*    height: 100%;*/
/*    margin: 0 4px;*/
/*    max-width: 160px;*/
/*    overflow: hidden;*/
/*}*/

/*.galleryThumbsImage {*/
/*    height: 100%;*/
/*}*/

/*.photoBrowserNavbarTitle {*/
/*    font-size: 12pt;*/
/*}*/

i.trash-icon {
    width: 20px;
    height: 24px;
    background-image: url(../images/svg/whitetrash.svg);
}

/* End Photo Browser */

i.refresh-icon {
    width: 22px;
    height: 22px;
    background-image: url(../images/svg/refresh_icon.svg);
}

.siteDetailsName {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 20;
    background: white;
}

/* Extra buttons section */

.siteDetailsButton {
    display: block;
    text-align: center;
}

.site-details-icon {
    width: 32px;
    height: 32px;
    background-color: var(--link-color);
}

.site-details-reports-icon {
    mask-image: url(../images/svg/reports32blu.svg);
    -webkit-mask-image: url(../images/svg/reports32blu.svg);
}

.site-details-compare-icon {
    mask-image: url(../images/svg/comparesite32.svg);
    -webkit-mask-image: url(../images/svg/comparesite32.svg);
}

.site-details-facts-icon {
    mask-image: url(../images/svg/chart32.svg);
    -webkit-mask-image: url(../images/svg/chart32.svg);
}

.site-details-edit-icon {
    mask-image: url(../images/svg/edit_pencil_blu.svg);
    -webkit-mask-image: url(../images/svg/edit_pencil_blu.svg);
}

.site-details-delete-icon {
    mask-image: url(../images/svg/closecircled32blu.svg);
    -webkit-mask-image: url(../images/svg/closecircled32blu.svg);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.siteDetailsButtonLabel {
    color: var(--link-color);
    font-size: 9pt;
    text-align: center;
    padding-top: 5px;
}

/* End Extra buttons section */

/* Details / Notes / Reports section */

.md .addListItem .item-media {
    min-width: 1px;
    padding-bottom: 10px;
}

.ios .list .addListItem .item-inner,
.md .list .addListItem .item-inner {
    margin-left: 5px;
}

i.list-add {
    width: 16px;
    height: 16px;
    background-color: var(--link-color);
    mask-image: url(../images/svg/add_plus_blu.svg);
    -webkit-mask-image: url(../images/svg/add_plus_blu.svg);
}

.siteDetailsToggler:before {
    content: '';
    position: absolute;
    background-color: var(--site-details-toggler-border-color);
    display: block; /*to override F7 .md .item-divider:before hide*/
    z-index: 15;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    height: 1px;
    width: 100%;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.ios .list .item-content.siteDetailsTogglerContent,
.md .list .item-content.siteDetailsTogglerContent,
.ios .list .item-inner.siteDetailsTogglerInner,
.md .list .item-inner.siteDetailsTogglerInner {
    height: 32px;
    min-height: 32px;
    /* margin-top: 8px; */
    padding: 2px 0;
}

.list .item-divider.siteDetailsItemDivider {
    height: 23px;
    min-height: 23px;
}

.ios .list .item-inner.siteDetailsTogglerInner,
.md .list .item-inner.siteDetailsTogglerInner {
    font-size: 10pt;
}

.ios .list .item-title.siteDetailsTogglerTitle,
.md .list .item-title.siteDetailsTogglerTitle {
    width: 100%;
    text-align: right;
    text-align: -webkit-right;
    color: var(--link-color);
}

i.siteDetailsTogglerArrow {
    width: 20px;
    height: 20px;
    background-color: var(--link-color);
    mask-image: url(../images/svg/downArrowBlue2.svg);
    -webkit-mask-image: url(../images/svg/downArrowBlue2.svg);
}

.list .item-divider.siteDetailsItemDivider, .list.dataBrowserList .item-divider.listItemDivider {
    text-transform: uppercase;
    font-size: 9pt;
    color: #9e9d9d;
    /*border-bottom: solid 1px #ccc;*/
}

.md .siteDetailsItemDivider {
    line-height: 23px;
    border-top: solid 1px #ccc;
}

.md .list .item-after.timestampItemAfter,
.ios .list .item-after.timestampItemAfter {
    font-size: 9pt;
    color: #ABABAB;
}

.ios .list .item-title.siteNoteListItemTitle,
.md .list .item-title.siteNoteListItemTitle {
    font-size: 11.5pt;
}

/* Thresholds (Disabled site fields) section */

.list input[type="text"]:read-only {
    color: var(--tetriary-text-color);
}

/* End Thresholds (Disabled site fields) section */

/* End Details / Notes / Reports section */
.watermark360,
.watermarkPano {
    position: relative;
}

.watermark360:after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 15px;
    left: 13px;
    background-image: url(../images/360-view-32-f.svg);
    background-size: 32px 32px;
    background-repeat: no-repeat;
    border-left: solid 2px transparent;
    border-right: solid 2px transparent;
    border-bottom: solid 2px transparent;
    border-top: solid 2px transparent;
    filter: drop-shadow(0 0 2px #000);
}

.watermarkPano:after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 20px;
    left: 13px;
    background-image: url(../images/svg/pano-view-24-f.svg);
    background-size: 32px 32px;
    background-repeat: no-repeat;
    border-left: solid 2px transparent;
    border-right: solid 2px transparent;
    border-bottom: solid 2px transparent;
    border-top: solid 2px transparent;
    filter: drop-shadow(0 0 2px #000);
}

.colGalleryImage.watermark360:after {
    top: 5% !important;
    left: 5% !important;
    width: 20px;
    height: 20px;
    background-image: url(../images/360-view-24-f.svg) !important;
    background-size: 20px 20px !important;
    background-repeat: no-repeat;
    border-left: solid 2px transparent;
    border-right: solid 2px transparent;
    border-bottom: solid 2px transparent;
    border-top: solid 2px transparent;
    filter: drop-shadow(0 0 2px #000);
}

.colGalleryImage.watermarkPano:after {
    top: calc(5% + 3px) !important;
    left: 5% !important;
    width: 20px;
    height: 20px;
    background-image: url(../images/svg/pano-view-24-f.svg) !important;
    background-size: 20px 20px !important;
    background-repeat: no-repeat;
    border-left: solid 2px transparent;
    border-right: solid 2px transparent;
    border-bottom: solid 2px transparent;
    border-top: solid 2px transparent;
    filter: drop-shadow(0 0 2px #000);
}

/*.swiper-slide.selected-thumbnail {*/
/*    outline: 4px solid #2D8DC7;*/
/*    outline-offset: -2px;*/
/*}*/

.swiper-slide.watermark360:after {
    top: 5% !important;
    left: 5% !important;
    width: 20px;
    height: 20px;
    background-image: url(../images/360-view-24-f.svg) !important;
    background-size: 20px 20px !important;
    background-repeat: no-repeat;
    border-left: solid 2px transparent;
    border-right: solid 2px transparent;
    border-bottom: solid 2px transparent;
    border-top: solid 2px transparent;
    filter: drop-shadow(0 0 2px #000);
}

.swiper-slide.watermarkPano:after {
    top: calc(5% + 3px) !important;
    left: 5% !important;
    width: 20px;
    height: 20px;
    background-image: url(../images/svg/pano-view-24-f.svg) !important;
    background-size: 20px 20px !important;
    background-repeat: no-repeat;
    border-left: solid 2px transparent;
    border-right: solid 2px transparent;
    border-bottom: solid 2px transparent;
    border-top: solid 2px transparent;
    filter: drop-shadow(0 0 2px #000);
}

/* End Site details page*/

/* BottomToast */
#BT_bottomToast {
    position: fixed;
    visibility: hidden;
    width: 100%;
    height: 60px;
    left: 0;
    bottom: -100px;
    background-color: #eeeeee;
    text-align: left;
    border-radius: 2px;
    font-family: arial, serif;
    font-size: 10.5pt;
    z-index: 99999999;
    transition: bottom .25s, visibility 1s;
}

.theme-dark #BT_bottomToast {
    background-color: inherit;
}

.BT_visible {
    bottom: 0 !important;
    visibility: visible !important;
}

.BT_toastDiv {
    height: calc(100% - 60px) !important;
}

#BT_progBarDiv {
    position: absolute;
    top: 16px;
    left: 5%;
    width: 90%;
    height: 8px;
    border-radius: 8px;
    background: lightgray;
}

#BT_progBar {
    position: absolute;
    top: 0;
    left: 0;
    width: 10%;
    height: 100%;
    background: var(--theme-color);
    border-radius: 8px;
    transition: width .5s;
}

#BT_progStatus {
    position: relative;
    top: 15px;
    left: 0;
    color: #484747;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

.theme-dark #BT_progStatus {
    color: inherit;
}

.md label.item-checkbox.delete-label {
    position: unset !important;
}

.deleteCheckbox {
    position: absolute !important;
    bottom: 10px !important;
    right: 6px !important;
}

.colGalleryImage {
    position: relative !important;
}

.ios .row .col:nth-last-child(4),
.ios .row .col:nth-last-child(4)~.col {
    width: 25%;
    width: calc((100% - 6px*3)/ 4);
}


.md .data-table td,
.ios .data-table td {
    height: 64px !important;
    overflow: hidden;
}

.md .list .item-after,
.ios .list .item-after {
    font-size: 10.5pt;
}

/*#panzoom_cont {*/
/*    position: absolute;*/
/*    top: 55px;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: calc(100% - 55px);*/
/*}*/

/*#panzoom_360 {*/
/*    position: absolute;*/
/*    top: 55px;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: calc(100% - 55px);*/
/*}*/

/*div#photoBrowserPageContent {*/
/*    overflow-x: hidden;*/
/*    overflow-y: hidden;*/
/*    background: #28272f !important;*/
/*}*/

/* Custom backdrop for wide-screen devices on the right of main content. */
/* Implemented similar to F7's '.fab-backdrop' */

.bam-page-backdrop {
    position: absolute;
    left: var(--sidebar-width);
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    transition-duration: 400ms;
}

.bam-page-backdrop.not-animated {
    transition-duration: 0ms;
}

.bam-page-backdrop.backdrop-in {
    visibility: visible;
    opacity: 1;
}

/* End Custom backdrop for wide-screen devices. */


/* Get Started */

.getStartedPageContent {
    background: var(--get-started-color);
}

.getStartedSwiper {
    height: 80%;
}

.getStartedSwiper .swiper-pagination {
    bottom: 70px;
}

.getStartedPlaceholder {
    height: 10%;
}

.getStartedImage {
    height: 55%;
    background-repeat: no-repeat;
    background-position: center;
}

.getStartedImageDemographics {
    background-image: url(../images/svg/gs-tap-into-demographics.svg);
}

.getStartedImageCompare {
    background-image: url(../images/svg/gs-compare-market-insights.svg);
}

.getStartedImageCollectData {
    background-image: url(../images/svg/gs-collect-location-information.svg);
}

.getStartedText {
    color: #ffffff;
    font-family: "ProximaNovaSoft-Regular", Calibri, "Gill Sans", "Gill Sans MT", Candara, Segoe, "Segoe UI", Arial, sans-serif;
    text-align: center;
}

.getStartedTitle {
    font-size: 3vh;
}

.getStartedDescription {
    font-size: 1.8vh;
    padding-left: 50px;
    padding-right: 50px;
}

@media (min-width: 768px) {
    /* for tablets use viewport width-based font size */
    .getStartedTitle {
        font-size: 3.5vw;
    }

    .getStartedDescription {
        font-size: 2vw;
    }
}

.getStartedCloseButton {
    /* position: fixed; */
    /* bottom: 30px; */
    /* right: calc(50% - 100px); */
    width: 200px;
    height: 45px;
    font-size: 15pt;
    border-radius: 27px;
    border: solid 1px #ffffff;
    line-height: 45px;
    margin: auto;
    text-align: center;
}

/* End Get Started */

/* Onboarding (intro for first user) */

.onboardingPopup,
#onboardingView,
.onboardingPage,
.theme-dark .onboardingPopup,
.theme-dark #onboardingView,
.theme-dark .onboardingPage {
    background: rgba(0, 0, 0, 0);
}

#onboardingContentSection,
.onboardingPopup .navbar-bg {
    background: rgba(0, 0, 0, 0.4);
}

.onboardingCloseButton {
    width: 24px;
    min-height: 41px;
    background-image: url(../images/svg/coachxbutton.svg);
}

/* quite OK */
.onboardingSearchButton {
    width: 41px;
    min-height: 41px;
    background-image: url(../images/coachmarkmag.png);
}

/* same but with SVG icon, quite OK on devices, not good in browser */
/*.onboardingSearchButton2 {*/
/*    width: 41px;*/
/*    height: 41px;*/
/*    background-image: url(../images/svg/coachmarks_mag.svg);*/
/*}*/

.onboardingText {
    color: #00B9F2;
    font-size: 2vh; /* for phones use viewport height-based font size */
    word-wrap: break-word;
    /* text-align: left; */
}

@media (min-width: 768px) {
    /* for tablets use viewport width-based font size */
    .onboardingText {
        font-size: 2vw;
    }
}

.onboardingLine {
    width: 2px;
    background-color: #3D88C4;
    min-height: 40px;
    height: 100%;
}


.onboardingDetailsFacts1 {
    width: 100%;
    height: 30%;
}

.onboardingDetailsFacts2 {
    float: left;
    width: 30%;
    height: 20%;
}

.onboardingDetailsFacts3 {
    position: relative;
    float: right;
    width: 70%;
    height: 20%;
}
.onboardingDetailsFacts3 .onboardingText {
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 20px;
}

.onboardingDetailsFacts4 {
    position: relative;
    float: left;
    width: 70%;
    height: 20%;
}

.onboardingDetailsFacts4 .onboardingText {
    text-align: left;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 20px;
}

.onboardingDetailsFacts5 {
    float: right;
    width: 30%;
    height: 50%;
}

.onboardingDetailsFacts5 .onboardingLine {
    float: right;
    margin-right: 40px;
}

.onboardingDetailsFacts6 {
    float: left;
    width: 70%;
    height: 30%;
}

.onboardingDetailsFacts6 .onboardingLine {
    float: left;
    margin-left: 40px;
}


.onboardingCreateSite1 {
    float: left;
    width: 70%;
    height: 20%;
    position: relative;
}

.onboardingCreateSite1 img {
    position: absolute;
    bottom: 0;
    right: 10%;
}

.onboardingCreateSite2 {
    float: right;
    width: 30%;
    height: 20%;
}

.onboardingCreateSite2 .onboardingLine {
    float: right;
}

.ios .onboardingCreateSite2 .onboardingLine {
    /* ideally, should be calculated on the fly, but it is too complicated */
    margin-right: 88px;
}

.md .onboardingCreateSite2 .onboardingLine {
    /* ideally, should be calculated on the fly, but it is too complicated */
    margin-right: 90px;
}

.onboardingCreateSite3 {
    float: left;
    width: 30%;
    height: 20%;
}

.onboardingCreateSite4 {
    float: right;
    width: 70%;
    height: 20%;
}

.onboardingCreateSite4 .onboardingText {
    text-align: right;
    margin: 20px;
}

.onboardingCreateSite5Base {
    float: left;
    width: 100%;
    height: 20%;

    text-align: center;
    display: flex;
    justify-content: center;
}

.onboardingCreateSite5Base .onboardingText {
    margin: 10px;
}

.onboardingCreateSite5 {
    align-items: center;
}

.onboardingCreateSite6 {
    align-items: flex-end;
}

/* End: Onboarding (intro for first user) */

/* F7-based main searchbar */

#geoSearchResults {
    position: absolute;
    top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
    left: 10px;
    width: calc(100% - 20px);
    z-index: 1000;
}

i.geo-search-suggest-pin {
    width: 24px;
    height: 24px;
    background-color: var(--lm-icon-fill-color);
    mask-image: url(../images/svg/mappin32.svg);
    -webkit-mask-image: url(../images/svg/mappin32.svg);
    mask-size: 24px 24px;
    -webkit-mask-size: 24px 24px;
    margin: auto;
}

/* End F7-based main searchbar */

/* Ordering webmap over ring layers */

div[class*="esri-webmap-layer"] {
    z-index: 350;
}

/* End Ordering webmap over ring layers */
