body {
    height: 100vh;
    height: -webkit-fill-available !important;
    height: fill-available !important;
}

html {
    height: -webkit-fill-available !important;

}

.viewport-full {
    height: -webkit-fill-available !important;
    height: fill-available !important;
}

/* Esri CSS mods*/

esri-navigation-toggle {
    display: none;
}

.esri-ui-top-left .esri-widget--button {
    border: none !important;
    border-radius: 50%;
    background-color: #242424 !important;
}

.esri-ui-top-left .esri-component {
    margin-bottom: 3px;
}

.esri-widget--button {
    width: 30px;
    height: 30px;
}

.esri-ui-corner .esri-component {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.esri-component.esri-zoom.esri-widget>* {
    margin-top: 2px;
}

.esri-input,
.esri-search__suggestions-list {
    background-color: #242424;
    color: white;
    font-size: 12px;
    font-family: 'Open Sans Bold';
}

.esri-search__suggestions-list {
    color: #bebebe;
}

.esri-search__submit-button,
.esri-search__clear-button {
    width: 38px;
    height: 38px;
    background-position-x: 7px !important;
    background-position-y: 8px !important;
}

.esri-view-width-less-than-small .esri-search__input {
    font-size: 12px;
}

.esri-icon-search:before {
    font-size: 18px;
}

.esri-menu li {
    border-top: solid 1px #909090;
}

.esri-input[type="text"],
.esri-input[type="number"] {
    height: 38px;
}

.esri-view .esri-view-surface {
    position: relative;
}

.esri-attribution {
    display: none;
}

.esri-coordinate-conversion__display {
    padding: 0px;
    min-height: 2px;
}

.esri-zoom-box__container {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
}

.esri-zoom-box__overlay-background {
    fill: rgba(0, 0, 0, 0.5);
}

.esri-zoom-box__outline {
    outline: solid 2px red;
    fill: transparent;
    stroke: none;
}

[class*="esri-icon"] {
    display: inline-block;
    color: white;
    font-size: 10px;
}

.esri-icon-home:before,
.esri-icon-locate:before,
.esri-icon-search:before {
    content: "";
}

.esri-locate,
.esri-home,
.esri-search__submit-button {
    background-image: url(../images/crosshair.svg);
    background-position-x: 6px;
    background-position-y: 6px;
    background-size: 20px;
    background-repeat: no-repeat;
}

.esri-compass .esri-compass__icon {
    font-size: 17px;
}

.esri-icon-locate:before {
    margin-left: 1px;
    font-size: 19px;
}

.botRight {
    bottom: -14px;
    right: 0px !important;
    position: absolute;
    border: none !important;
    border-radius: 50%;
    background-color: #242424 !important;
}

.esri-home {
    background-image: url(../images/home.svg);
    background-position-x: 4px;
    background-position-y: 4px;
    background-size: 22px;
}

.esri-search__submit-button {
    background-image: url(../images/search.svg);
    background-size: 23px;
}

.esri-icon-environment-settings,
.esri-icon-visible {
    font-size: 16px;
}

.esri-ui-bottom-left {
    bottom: -25px;
}

.esri-scale-bar__label {
    margin-top: -3px;
    margin-left: 6px;
    padding: 0.5em 0 0 0;
    color: white;
    text-shadow: none;
    white-space: nowrap;
    font-size: 10px;
    font-family: 'Open Sans Bold';
}

.esri-scale-bar__line--bottom {
    top: -1px;
    border-top: 2px solid #ffffff;
}

.esri-scale-bar__line {
    background-color: transparent;
}

.esri-scale-bar__line--top:before,
.esri-scale-bar__line--top:after,
.esri-scale-bar__line--bottom:before,
.esri-scale-bar__line--bottom:after {
    border-right: none;
    background-color: white;
}

.esri-scale-bar.esri-widget {
    padding: 4px 7px 7px 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3) !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: -25px;
}

.esri-scale-bar__bar-container {
    font-size: 8px;
}

.esri-scale-bar__line {
    background-color: transparent;
}

.esri-ui-bottom-left .esri-component {
    margin-right: 0px;
}

.esri-view .esri-view-surface--inset-outline:focus::after {
    outline: none !important;
}

.esri-search .esri-widget__loader-text,
.esri-widget__loader-animation {
    display: none;
}

/* Assembly CSS mods*/

.bg-red {
    background-color: #b94f4c !important;
}

.bg-green-light {
    background-color: #b1f1bc !important;
}

.txt-l {
    letter-spacing: -1px;
    font-size: 20px;
    line-height: 32px;
}

.txt-s {
    line-height: 15px;
}

.range>input::-webkit-slider-thumb {
    border: 2px solid white;
    background: #448ee4;
}

.range--s {
    height: 18px;
}

/* DOM and map view components*/
html,
body,
#viewDiv,
#zui {
    margin: 0;
}

#viewDiv,
#zui {
    height: 100%;
}

.viewDiv {
    height: 100%;
    cursor: -webkit-grab;
    cursor: grab;
    position: absolute;
    right: 0;
    top: 0
}

/* Zui components*/
.zuiClose,
.zuiPop {
    border: 1px solid white;
    border-radius: 50%;
    background-color: #c47c7c;
}

.zuiPop {
    background-color: #3e3a3a;
    margin-right: 44px;
}

#zui {
    background-color: #2d2d2d;
}

/* Loader*/
.loading {
    top: 50%;
    pointer-events: none;
}

/* Records panel*/
#menuPanel {
    background-color: rgba(36, 36, 36, 0.95);
    z-index: 100;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

/* Sidebar*/
#sidebar {
    background-color: rgb(52 52 52);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.tool {
    opacity: 0.35;
    padding-top: 6px;
    padding-bottom: 6px;
}

.icon.tool{
    padding: 0px;
}

.tool:hover,
.tool.active {
    opacity: 1;
}

.break {
    flex: 1;
    padding-top: 6px;
    padding-bottom: 6px;
}

.minimizer {
    margin-top: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.viewinfo {
    font-size: 11px;
}

/*Scrollbar styles*/
.recordTable::-webkit-scrollbar {
    width: 8px;
}

.recordTable {
    scrollbar-width: thin;
}

.recordTable::-webkit-scrollbar-track {
    background: #4c4a4a;
}

.recordTable::-webkit-scrollbar-thumb {
    background-color: #828384;
    border-radius: 6px;
    border: 3px solid #828384;
}

/* Scale buttons*/
.sBin {
    font-size: 11px;
    opacity: 0.4;
    cursor: pointer
}

.sBin.active {
    opacity: 1;
}

/* Coordinate and scale overlay*/
#mouseCoord {
    bottom: 5px;
    z-index: 2;
    width: 200px;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    line-height: 13px;
    margin-left: auto;
    margin-right: auto;
}

/*Coordinate display */
#coords {
    font-size: 11px;
}

/*Coord selectors*/
.setCoord {
    font-size: 9px !important;
    padding: 1px 6px;
    background-color: #5f768a;
}

/*Reverse geocode*/
.reverse {
    font-size: 10px;
    line-height: 10px;
}

/* Basemaps*/
#baseMaps {
    z-index: 2;
    pointer-events: cursor !important;
}

/* Basemap buttons*/
.basemap {
    top: 5px;
    z-index: 2;
    border-radius: 50%;
    height: 26px;
    width: 26px;
    padding: 0px;
    font-size: 20px !important;
    background-color: #697075 !important;
}

.basemap.active,
.setCoord.active {
    background-color: #448ee4 !important;
}

.basemap>.icon {
    margin-left: 3px;
}

/* Toggle reference blends*/
#showReference,
#showBlend {
    padding: 1px 6px;
    background-color: #5f768a;
    font-size: 9px;
    line-height: 14px;
    vertical-align: top;
    margin-top: 6px;
}

#showReference.active,
#showBlend.active {
    background-color: #548fc3;
}

/* Scale number*/
#scale {
    font-size: 10px;
    font-family: 'Open Sans Bold';
}

/* Modals*/
.modal-wrapper,
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    text-align: justify;
    z-index: 1001
}

.modal-wrapper {
    z-index: 101;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

.w160 {
    width: 130px !important
}

/*Splash elements*/
.splash {
    z-index: 1001;
    border-radius: 4px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    min-width: 320px;
}

.splashText {
    text-align: justify;
    color: #CCC;
    color: white;
    font-size: 12px;
    margin: 14px;
    line-height: 16px
}

/*Button styling*/
.btn--xs {
    padding: 0 6px;
    width: 60px;
    background-color: #6e6e6e;
    line-height: 18px;
}

.btn--xs.paginate {
    margin-top: 2px;
    padding: 0 3px;
    width: 42px;
    line-height: 14px;
}

.btn {
    font-size: 10px;
}

/*Sort buttons*/
.activeSort {
    background-color: #448ee4;
}

.activeSort .icon {
    display: inline !important;
}

.sorter {
    font-size: 9px;
    height: 16px;
    line-height: 15px;
}

/* Record pane*/
.w420-ml {
    width: 420px !important;
}

#feature-listing,
#unitInfo {
    font-family: 'Roboto-regular';
    line-height: 15px;
    pointer-events: none;
}

.ngmdbLink {
    pointer-events: auto;
}

#feature-listing.active {
    pointer-events: auto;
}

#longList {
    border-radius: 10px;
    background-color: rgba(135, 255, 231, 0.08);
}

input {
    border-radius: 0;
}

input[type="search"] {
    -webkit-appearance: none;
}

input#feature-filter {
    color: white;
    max-width: 450px;
    width: 90%;
    height: 32px
}

#filterReset {
    border-radius: 50%;
    vertical-align: middle;
    background: rgba(86, 94, 103, 0.25);
    pointer-events: none;
    opacity: 0.25;
}

#filterReset.activeFilter {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

.tagged {
    padding-right: 2px;
    padding-left: 2px;
    background-color: #ffff93;
    color: #080808;
    font-style: italic;
    font-weight: 700
}

.projSite {
    margin-bottom: 2px;
    border-color: #3f3f3f;
    background-color: rgba(53, 86, 127, 0.1);
    cursor: pointer;
}

html.no-touch .projSite:hover {
    background-color: rgba(53, 86, 127, 0.25);
}

.projSite.active {
    background-color: #e65c5c42;
}

.recTitle {
    color: #96c9ff;
    font-weight: 600;
}

.scaleLight {
    color: #ffd39e;
}

.recSeries {
    color: #e4a5a5;
}

.optText {
    font-weight: 300;
    font-size: 12px;
    cursor: none;
}

.activeRec,
html.no-touch .activeRec:hover {
    background-color: rgb(66, 66, 66);
    pointer-events: none;
}

.activeRec .citation {
    min-height: 60px;
}

.sub {
    font-size: 13px;
    line-height: 22px;
}

.pubCount {
    margin-left: -18px;
    background-color: rgb(183, 34, 34);
    height: 16px;
    width: fit-content;
    line-height: 13px;
    border: 1px solid white;
    border-radius: 6px
}

.panelHeader {
    font-size: 11px;
}

#syncRecs {
    font-size: 11px;
    line-height: 20px;
}

.checkbox {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border-width: 2px;
    margin-top: 5px;
}

.checkbox>.icon {
    position: absolute;
    width: 15px;
    height: 15px;
    top: -3px;
    left: -3px;
}

.radio {
    cursor: pointer;
    top: 2px;
    width: 14px;
    height: 14px;
}

span.capEach {
    display: inline-block;
}

span.capEach::first-letter {
    text-transform: uppercase;
}

.detailedInfo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.prevThumb {
    width: 50px !important;
    height: 50px !important;
    /*
    border: 1px solid white;
    border-radius: 50%;
    background-position: center;
    */
}

.prevThumb.null {
    height: 54px !important;
    width: 54px !important;
    border: none;
}

.geoThumb {
    max-width: 185px;
    max-height: 185px;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: auto;
}

.shrink:after {
    float: right;
    margin-top: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #546771;
    color: white;
    content: '\2B';
    text-align: center;
    font-weight: 300;
    font-size: 20px;
    line-height: 17px;
    pointer-events: auto;
}

.shrink.expanded:after {
    content: "\2212";
    pointer-events: auto;
}

html.no-touch .thumbNext:hover,
html.no-touch .thumbPrev:hover {
    border-radius: 50%;
    background-color: #809bc6;
}

.thumbNext:after,
.thumbPrev:after {
    float: right;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(95, 128, 145, 0.65);
    color: white;
    content: "\25B8";
    text-align: center;
    font-weight: 300;
    font-size: 18px;
    line-height: 23px;
    pointer-events: auto;
}

.thumbPrev:after {
    content: "\25C2";
}

/* Overview map*/
#overviewDiv {
    position: absolute;
    right: 12px;
    bottom: 52px;
    z-index: 1;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border: 1px solid white;
    border-radius: 50%;
}

#extentDiv {
    position: absolute;
    z-index: 2;
    background-color: rgba(245, 30, 30, 0.25);
}

#mapOptions {
    z-index: 100;
    font-size: 10px;
    pointer-events: none;
    align-items: center;
}

.infoLinks {
    border: 1px solid white;
    background: transparent;
    line-height: 8px;
    pointer-events: auto;
}

.infoLinks:disabled {
    border: 1px solid rgb(199 199 199 / 30%);
}

/* Media queries*/
@media screen and (max-width: 575px) {

    #overviewDiv,
    #extentDiv,
    .esri-scale-bar.esri-widget {
        display: none;
    }
}

/* ----------- 450 - 650px ----------- */
@media screen and (min-width: 320px) and (max-width: 575px) {
    #mouseCoord {
        margin-left: auto !important;
        margin-right: 6px;
    }
}

@media screen and (min-width: 320px) and (max-width: 400px) {

    #showReference,
    #showBlend,
    .reverse,
    #coords,
    #coordSelect,
    .opHeader {
        display: none
    }
}

@media screen and (max-width: 320px) {

    .esri-ui-top-left,
    #mouseCoord,
    #showReference,
    #showBlend {
        display: none
    }
}

/*Handle table minimizer*/
@media screen and (min-width: 640px) {
    .recordTable {
        margin-top: -52px
    }

    .esri-ui-top-left {
        margin-left: 16px
    }

}