body {
    position:         relative;
    min-width:        1200px;
    min-height:       645px;
    margin:           0;
    background-color: #FFFFFF;
    font-size:        16px !important;
    font-family:      Tahoma, Geneva, sans-serif;
    color:            #555555;
}

.imagePreload {
    position: absolute;
    top:      0;
    left:     0;
}

a:link,
.fakeLink {
    text-decoration: none;
    color:           #003366;
    cursor:          pointer;
}

a:visited,
.fakeLink {
    text-decoration: none;
    color:           #003366;
}

 a:hover:not(#userStoryLink),
.fakeLink:hover {
    text-decoration: underline;
}

a:active:not(#userStoryLink),
.fakeLink:active {
    text-decoration: underline;
    color:           #777777;
}

#splashScreen {
    position:                fixed;
    top:                     0;
    left:                    0;
    width:                   100%;
    height:                  100vh;
    min-width:               1200px;
    min-height:              645px;
    display:                 none;
    z-index:                 900000;
    background:              #FFFFFF url("../images/splash960x540.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size:    cover;
    -o-background-size:      cover;
    background-size:         cover;
}

#splashBody {
    padding: 0 0 10px 0;
    width:   100%;
}

#splashLogoOuterWrapper {
    padding: 20px 0 20px 0;
    width:   100%;
}

#splashLogoInnerWrapper {
    margin: auto;
    width:  941px;
}

#splashLogoInnerWrapper img {
    margin: 0 100px;
}

#splashHeader {
    width:            100%;
    padding-bottom:   10px;
    background-color: rgba(255, 255, 255, 0.4);
}

#splashScreen h2 {
    margin:     0;
    text-align: center;
    font-size:  2.7em;
}

#splashHeader p {
    margin:     10px auto;
    width:      1000px;
    text-align: center;
}

#splashButtonOuterWrapper {
    position:  absolute;
    top:       53%;
    left:      0;
    transform: translate(0, -50%);
    width:     100%;
}

#splashButtonInnerWrapper {
    width:      1000px;
    margin:     20px auto 10px auto;
    text-align: center;
}

#splashButtonInnerWrapper input {
    margin: 0 !important;
}

#splashInfoButton {
    float: left;
}

#splashHowToFAQButton {
    float: right;
}

#splashDiveInButton {
    width: 420px !important;
}

#splashButtonInnerWrapper input {
    background-color: #003366 !important;
    border-color:     #003366 !important;
    color:            #FFFFFF !important;
}

#splashButtonInnerWrapper input:hover {
    background-color: #CCCCCC !important;
    border-color:     #777777 !important;
    color:            #555555 !important;
}

#splashButtonInnerWrapper input:active {
    background-color: #CCCCCC !important;
    border-color:     #003366 !important;
    color:            #003366 !important;
}

#splashScreen input {
    display: inline !important;
    height:  3em !important;
    width:   200px;
    margin:  0;
}

#splashFooter {
    position:         absolute;
    bottom:           0;
    left:             0;
    width:            100%;
    box-sizing:       border-box;
    padding:          10px 10px 10px 10px;
    background-color: rgba(255, 255, 255, 0.4);
}

#disclaimersWrapper {
    width: 80%;
}

#disclaimersWrapper p {
    /*margin: 10px 0;*/
    font-size: 0.7em;
}

#disclaimersWrapper p:first-of-type {
    font-size: 1em;
    margin-top: 10px;
}

#toggleSplashButton {
    position: absolute;
    right:    10px;
    bottom:   10px;
}

.overlay {
    position: fixed;
    top:      0;
    left:     0;
    display:  none;
    width:    100%;
    height:   100vh;
    z-index:  1000000;
}

.overlayBackground {
    position:         absolute;
    top:              0;
    left:             0;
    width:            100%;
    height:           100%;
    background-color: #777777;
    opacity:          0.7;
}

.overlayContent {
    position:         relative;
    top:              50%;
    left:             50%;
    transform:        translate(-50%, -50%);
    /*position:         absolute;*/
    /*top:              50%;*/
    /*left:             50%;*/
    z-index:          1000001;
    display:          none;
    border-radius:    4px;
    border:           2px solid #777777;
    background-color: #FFFFFF;
    opacity:          1;
    color:            #777777;
}

#spinnerBox {
    height: 180px;
    width:  180px;
    /*margin:  -90px 0 0 -90px;*/
    /*display: none;*/
}

#spinnerBox img {
    position:    absolute;
    top:         20px;
    left:        50%;
    margin-left: -33px;
}

#spinnerBoxMessage {
    position:   absolute;
    width:      100%;
    display:    block;
    text-align: center;
    top:        100px;
}

/*#processingMessage {*/
/*!*display:     none !important;*!*/
/*line-height: 2em;*/
/*}*/

#spinnerBox input {
    position:    absolute;
    width:       80%;
    bottom:      20px;
    left:        50%;
    margin-left: -40%;
}

#messageBox {
    /*position: relative;*/
    /*top: 50%;*/
    /*transform: translate(-50%, -50%);*/
    /*display: none;*/
    box-sizing: border-box;
    width:      500px;
    padding:    50px;
}

#messageBoxContentWrapper {
    overflow:    hidden;
    display:     flex;
    align-items: center;
}

#messageBoxIconWrapper {
    display:      block;
    margin-right: 50px;
    width:        80px;
}

#messageBox i,
#messageBox img,
#messageBox input {
    display: none;
}

.infoIcons,
.questionIcons {
    color: darkblue;
}

.successIcons {
    color: #33CC33;
}

.warningIcons {
    color: #E6E600;
}

.errorIcons {
    color: red;
}

#messageBoxMessage {
    margin: auto;
}

#messageBoxMessage p {
    text-align: left;
}

#messageBoxResponseWrapper {
    display:         flex;
    justify-content: center;
    padding:         30px 50px 0 50px;
}

#messageBoxResponseWrapper input {
    margin: 0 10px;
}

.infoHowToText {
    padding:  20px 20px 0;
    overflow: auto;
}

.infoHowToText img:first-of-type {
    float: left;
}

h2 {
    color:       #555555;
    font-weight: normal;
    font-size:   2.4em;
    text-align:  center;
}

#informationWrapper h2,
#howToWrapper h2 {
    margin: 0 20px 0 260px;
}

h3 {
    clear:       both;
    color:       #555555;
    font-weight: normal;
    font-size:   1.5em;
}

h4 {
    clear:       both;
    color:       #555555;
    font-weight: normal;
    font-size:   1.2em;
}

p {
    margin-left: 20px;
    line-height: 1.4em;
}

ul li {
    margin-bottom: 5px;
}

dl {
    margin-left: 20px;
}

dt {
    color: #555555;
}

.buttonText {
    font-style: italic;
}

.currentFAQAnswer {
    font-weight: bold;
}

.returnToTop {
    margin-left: 20px;
    font-size:   0.8em;
}

.pageAnchor:hover {
    text-decoration: none;
}

.overlayControls {
    position:   absolute;
    bottom:     0;
    left:       0;
    box-sizing: border-box;
    width:      100%;
    padding:    0 20px 20px 15px
}

.overlayControls input {
    float:       left;
    margin-left: 5px;
}

.overlayControls input:last-of-type {
    float: right;
}

header {
    /*position:         fixed;*/
    /*top:              0;*/
    /*left:             0;*/
    width:            100%;
    min-width:        1200px;
    box-sizing:       border-box;
    z-index:          500000;
    overflow:         hidden;
    /*border-color: #FFFFFF;*/
    /*border-bottom-width: 5px;*/
    /*border-bottom-style: solid;*/
    /*border-bottom:    5px solid white;*/
    padding:          5px;
    background-color: #003366;
    color:            #FFFFFF;
}

#usgsLogo {
    float: left;
}

h1 {
    /*display     : inline;*/
    margin:      5px 136px 0 160px;
    position:    relative;
    /*text-align: center;*/
    font-size:   2.3em;
    font-weight: normal;
}

.collaboratorImage {
    float:        right;
    margin-right: 8px;
}

main {
    /*margin-top: 65px;*/
    overflow: hidden;
}

#leftColumn {
    float:         left;
    width:         49%;
    margin-left:   5px;
    padding-right: 5px;
    overflow:      auto;
}

#rightColumn {
    float:        right;
    width:        49%;
    min-width:    588px;
    margin-right: 5px;
}

.sectionContainer {
    margin:   0.3em 0;
    overflow: hidden;
}

#splashScreen input,
.sectionContainer input,
.overlayContent input,
select,
.leaflet-control-layers-base label span,
.overlayButton,
.favoriteButton,
.downloadButton,
.viewButton,
.chartLegendButton,
button,
#userStoryButton,
.formRow input,
.centeredContentFormRow input,
input[type=file] + label,
input[type=radio] + label {
    -webkit-appearance: none; /*Removes default chrome and safari style*/
    -moz-appearance:    none; /* Removes Default Firefox style*/
    display:            block;
    box-sizing:         border-box;
    height:             2em;
    outline:            0;
    border-radius:      4px;
    border:             2px solid #AAAAAA;
    padding:            0 1em;
    background-color:   #FFFFFF;
    font-size:          1em;
    color:              #888888;
    text-align:         center;
    /*-moz-text-align-last: center;*/
    /*text-align-last:      center;*/
}

.overlayControls input,
select,
.favoriteButton,
.downloadButton
{
    display: inline;
}

select,
#historicalDataButton {
    background:    #FFFFFF url(../images/downChevron.png) no-repeat right 10px center;
    padding-right: 3em !important;
}

select::-ms-expand {
    display: none;
}

.sectionContainer label + input {
    float: right;
}

#splashScreen input:hover,
input:focus, input:hover,
select:focus, select:hover,
.leaflet-control-layers-base label > span:focus,
.leaflet-control-layers-base label > span:hover,
.overlayButton:focus, .overlayButton:hover,
.favoriteButton:focus, .favoriteButton:hover,
.downloadButton:focus, .downloadButton:hover,
.viewButton:focus, .viewButton:hover,
.chartLegendButton:focus, .chartLegendButton:hover,
button:focus, button:hover,
#userStoryButton:hover,
input[type=file] + label:focus,
input[type=file] + label:hover,
input[type=radio] + label:focus,
input[type=radio] + label:hover {
    background-color: #CCCCCC;
    border-color:     #777777;
    color:            #555555;
}

#splashScreen input:active,
input:active,
select:active,
.leaflet-control-layers-base label > span:active,
.overlayButton:active,
.favoriteButton:active,
.downloadButton:active,
.viewButton:active,
.chartLegendButton:active,
button:active,
#userStoryButton:active,
input[type=file] + label:active,
input[type=radio] + label:active {
    border-color: #003366;
    color:        #003366;
}

select:focus, select:hover,
#historicalDataButton:focus, #historicalDataButton:hover {
    background: #FFFFFF url(../images/downChevronFocus.png) no-repeat right 10px center;
}

select:active,
#historicalDataButton:active {
    background: #FFFFFF url(../images/downChevronActive.png) no-repeat right 10px center;
}

select:disabled,
#historicalDataButton:disabled {
    background:   #FFFFFF url(../images/downChevron.png) no-repeat right 10px center;
    border-color: #CCCCCC;
    color:        #AAAAAA;
}

.selectedInput,
.selectedInput:focus,
.selectedInput:hover,
.leaflet-control-layers-base label input:checked ~ span {
    border-color:     #003366 !important;
    background-color: #003366 !important;
    color:            #FFFFFF !important;
    box-sizing:       border-box;
}

input:disabled,
button:disabled,
input[type=radio]:disabled + label {
    color:            #BBBBBB;
    border-color:     #DDDDDD;
    background-color: #FFFFFF;
}

.sectionContainer {
    position: static;
}

#overlayButtonOuterWrapper {
    float: left;
    width: 12%;
}

.overlayButtonInnerWrapper {
    display:    inline-block;
    width:      45%;
    text-align: center;
}

/*#infoButtonWrapper {*/
/*background : transparent url('../images/infoButton.png') center top no-repeat;*/
/*-webkit-background-size : contain;*/
/*-moz-background-size    : contain;*/
/*-o-background-size      : contain;*/
/*background-size         : contain;*/
/*}*/

/*#infoButtonWrapper:hover {*/
/*background-image : url('../images/infoButtonHover.png');*/
/*}*/

/*#infoButtonWrapper:active {*/
/*background-image : url('../images/infoButtonActive.png');
}*/

#infoButton, #howToButton {
    display:          inline;
    padding:          0;
    height:           32px;
    width:            32px;
    border-radius:    16px;
    /*border-color: #0094EC;*/
    /*background-color: #0094EC;*/
    border-color:     #003366;
    background-color: #003366;
    color:            #FFFFFF;
    font-family:      Georgia, "Times New Roman", serif;
    font-size:        1.3em;
}

#infoButton:hover, #howToButton:hover {
    background-color: #CCCCCC;
    border-color:     #777777;
    color:            #555555;
}

#infoButton:active, #howToButton:active {
    background-color: #CCCCCC;
    border-color:     #777777;
    color:            #555555;
}

/*#howToButton {*/
/*border-color : #003366;*/
/*color        : #003366;*/
/*}*/

#regionViewButton,
#favoriteViewButton {
    float: right;
    width: 42.5%;
}

#regionViewButton {
    margin-right: 0.5%;
}

#mostRecentDataButton,
#historicalDataButton {
    width: 49.5%;
}

#mostRecentDataButton {
    float: left;
}

#historicalDataButton {
    float: right;
}

#singleSiteViewButton,
#regionalOverviewButton {
    float:        left;
    width:        45%;
    margin-right: 0.5%;
}

.mapToggleButton {
    float:      right;
    width:      9%;
    color:      rgba(255, 255, 255, 0) !important;
    background: no-repeat center center/25px 25px;
    /*background-repeat:   no-repeat;*/
    /*background-position: center center;*/
}

#hideMapButton:enabled {
    background-image: url("../images/leftArrow.png")
}

#hideMapButton:hover,
#hideMapButton:focus {
    background-image: url("../images/leftArrowHover.png");
}

#hideMapButton:active {
    background-image: url("../images/leftArrowActive.png");
}

#hideMapButton:disabled {
    background-image: url("../images/leftArrowDisabled.png");
}

#showMapButton {
    background-image: url("../images/rightArrow.png")
}

#showMapButton:hover,
#showMapButton:focus {
    background-image: url("../images/rightArrowHover.png");
}

#showMapButton:active {
    background-image: url("../images/rightArrowActive.png");
}

.favoriteButton {
    margin: 0 10px 0 0;
}

.downloadButtonATag:hover
.downloadButtonATag:active {
    text-decoration: none;
}

#mapLatestHistoricalSelectionWrapper,
#viewSelectionWrapper {
    display: none;
}

#regionDataTimeSelect {
    width: 83%;
    color: #555555;
}

.ui-datepicker {
	z-index: 1000 !important;
}
.datePickerInundationHighlight:not(.ui-datepicker-current-day) a:not(.ui-state-highlight) {
    /*background-color : rgba(248, 108, 95, 0.7) !important;*/
    background-color: rgba(207, 51, 31, 0.7) !important;
    color:            #FFFFFF;
}

.datePickerOverwashHighlight:not(.ui-datepicker-current-day) a:not(.ui-state-highlight) {
    /* Slightly darker orange used than elsewhere for clarity on datePicker */
    /*background-color : rgba(219, 134, 30, 0.7) !important;*/
    background-color: rgba(255, 89, 0, 0.7) !important;
    color:            #FFFFFF;
}

.datePickerCollisionHighlight:not(.ui-datepicker-current-day) a:not(.ui-state-highlight) {
    /*background-color : rgba(255, 203, 66, 0.7) !important;*/
    background-color: rgba(255, 204, 74, 0.7) !important;
}

.datePickerNoEventHighlight:not(.ui-datepicker-current-day) a:not(.ui-state-highlight) {
    background-color: rgba(94, 210, 25, 0.7) !important;
}

#dataTimeSelect {
    box-sizing: content-box;
    width:      58%;
    color:      #555555;
}

#mapWrapper {
    position:      relative;
    margin-bottom: 0.3em;
}

#map {
    width:         100%;
    height:        45vh;
    min-height:    30em;
    border-radius: 4px;
}

.leaflet-control-layers-expanded {
    padding:     5px 10px 10px 10px;
    font-family: Tahoma, Geneva, sans-serif !important;
    text-align:  center;
}

.leaflet-control-layers-list {
    width: 370px;
}

.leaflet-control-layers-list .leaflet-control-layers-separator {
    display: none;
}

.leaflet-control-layers-base {
    float: left;
    width: 180px;
}

.leaflet-control-layers-overlays {
    width:       180px;
    margin-left: 190px;
}

.leaflet-control-layers-title {
    font-size: 1.2em;
}

.leaflet-control-layers-list label {
    margin-top: 10px;
}

.leaflet-control-layers-list input {
    display: none;
}

.leaflet-control-layers-base span,
.overlayButton {
    box-sizing:          content-box !important;
    line-height:         2em;
    user-select:         none;
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select:    none; /* Firefox all */
    -ms-user-select:     none; /* IE 10+ */
}

.leaflet-container .leaflet-control-attribution {
    font-size:  9px;
    border-top: 2px solid #777777;
}

.transectTableRow:hover {
    cursor: pointer;
}

#inundationButton,
#inundationEventTable .transectTableRow:hover,
#inundationEventTable .hovered {
    background: rgba(248, 108, 95, 0.4);
}

#overwashButton,
#overwashEventTable .transectTableRow:hover,
#overwashEventTable .hovered {
    background: rgba(253, 153, 27, 0.4);
}

#collisionButton,
#collisionEventTable .transectTableRow:hover,
#collisionEventTable .hovered {
    background: rgba(255, 203, 66, 0.4);
}

#noEventButton,
#noEventTable .transectTableRow:hover,
#noEventTable .hovered {
    background: rgba(94, 210, 25, 0.4);
}

input:checked ~ span #inundationButton {
    border-color:     rgb(248, 108, 95) !important;
    background-color: rgb(248, 108, 95) !important;
    color:            #000000 !important;
}

input:checked ~ span #overwashButton {
    border-color:     rgb(253, 153, 27) !important;
    background-color: rgb(253, 153, 27) !important;
    color:            #000000 !important;
}

input:checked ~ span #collisionButton {
    border-color:     rgb(255, 203, 66) !important;
    background-color: rgb(255, 203, 66) !important;
    color:            #000000 !important;
}

input:checked ~ span #noEventButton {
    border-color:     rgb(94, 210, 25) !important;
    background-color: rgb(94, 210, 25) !important;
    color:            #000000 !important;
}

.popupButtonWrapper {
    display: block;
    width:240px;
    margin: 10px auto;
}

.popupDownloadFormatWrapper {
    display: none;
}

.popupDownloadFormatButtonWrapper {
    width: 183px;
    margin: 10px auto;
}

.popupDownloadFormatButtonWrapper .downloadButton {
    margin: 0 10px 0 0;
}

.popupDownloadFormatButtonWrapper .downloadButton:last-child {
    margin: 0;
}

.popupLine {
    clear: both;
}

.popupLine:last-of-type {
    margin-bottom: 10px;
}

.popupLineTitle {
    font-weight: bold;
    color:       #003366;
}

.inundationText {
    /*color: rgb(207, 51, 31);*/
}

.overwashText {
    /*color: rgb(255, 89, 0);*/
}

.collisionText {
    /*color: rgb(255, 204, 74);*/
}

.noRegimeText {
    /*color: rgb(94, 210, 25);*/
}

.meanRegionalImpactIndicator {
    float: right;
    margin-right: -10px;
}

.meanRegionalImpactIndicatorPositioningDiv {
    /*width:      100%;*/
}

.meanRegionalImpactIndicatorWrapper
.regimeDistributionWrapper {
    margin-top: 5px;
}

.meanRegionalImpactGradient,
.meanRegionalImpactIndicatorWrapper,
.regimeDistributionWrapper {
    display:    block;
    box-sizing: border-box;
    width:      100%;
    /*padding:    0 10px;*/
}

.meanRegionalImpactLabelWrapper {
    /*margin-top: 0px;*/
    height: 10px;
    font-size:  0.85em;
    /*text-align: center;*/
}

.meanImpactNoneLabel {
    float: left;
}

.meanImpactModerateLabel {
    display: block;
    width: 60px;
    margin: auto;
    text-align: center;
}

.meanImpactSevereLabel {
    float: right;
}
.regimeDistributionWrapper {
    overflow: hidden;
}

.regimeDistributionBox {
    float:      left;
    box-sizing: border-box;
    height:     20px;
    border:     1px solid #666666;
    border-right-width: 0;
    text-align: center;
    text-overflow: ellipsis;
}

.regimeDistributionBox:last-of-type {
    border-right-width: 1px;
}

#noRegimeDistributionBox {
    background-color: hsl(90, 100%, 47.8%);
}

#collisionRegimeDistributionBox {
    background-color: hsl(60, 100%, 47.8%);
}

#overwashRegimeDistributionBox {
    background-color: hsl(30, 100%, 47.8%);
}

#inundationRegimeDistributionBox {
    background-color: hsl(0, 100%, 47.8%);
}

#mapLegend {
    z-index:        1000;
    position:      absolute;
    bottom:        43px;
    right:         10px;
    width:         130px;
    border-radius: 4px;
    border:        2px solid #777777;
    padding:       5px;
    background:    rgba(255, 255, 255, .8);
    color:         #555555;
}

.mapLegendRow {
    overflow: hidden;
    margin:   0 0 5px 0;
}

.mapLegendRow:last-of-type {
    margin: 0;
}

.mapLegendRow img {
    float:         left;
    padding-right: 5px;
}

.regionLegendText,
.siteLegendText {
    float:     left;
    /*width     : 133px;*/
    font-size: 0.7em;
}

.regionLegendText {
    margin: -2px 0 0 0;
}

.siteLegendText {
    margin: 2px 0 0 0;
}

#verticalGradientBar {
    margin-top: 3px;
}

.gradientLegendText {
    margin: 0 0 5px 0;
}

.gradientLegendText:last-of-type {
    margin: 0 0 0 0;
}

#summaryHeader,
#summaryContent,
#inundationEventTableHeader,
#inundationEventTable,
#overwashEventTableHeader,
#overwashEventTable,
#collisionEventTableHeader,
#collisionEventTable,
#noEventTableHeader,
#noEventTable {
    display: none;
}

#summaryContent {
    text-align: center;
}

.ui-accordion-content {
    max-height: 230px;
    /*overflow: auto;*/
}

#resultAccordion {
    padding-bottom: 10px;
}

#resultAccordion table,
#singleSiteDataWrapper table {
    width:           100%;
    margin:          auto;
    font-size:       0.8em !important;
    text-align:      center !important;
    border-collapse: collapse;
}

#resultAccordion th,
#resultAccordion td,
#singleSiteDataWrapper th,
#singleSiteDataWrapper td {
    padding:     0.1em 0.3em;
    font-weight: 400;
}

#resultAccordion th,
#singleSiteDataWrapper th {
    padding-bottom: 5px;
}

#resultAccordion thead,
#singleSiteDataWrapper thead {
    border-bottom: 1px solid #777777;
    color:         #555555;
}

td {
    white-space: nowrap;
}

.selectedTransect {
    background: rgba(75, 155, 209, 0.4) !important;
}

#userStoryWrapper {
    text-align: center;
}

#userStoryLink input {
    margin: 10px auto;
}

#rightColumnInitialLoadContent {
    text-align: center;
}

#newFeaturesHeader {
    color:       #FF0000;
    font-weight: bold
}

#officialForecastLinkWrapper {
    font-weight: bold;
}

#singleSiteDataWrapper {
    /*margin-top: 17px;*/
}

#singleSiteDataWrapper,
#regionalOverviewDataWrapper {
    position:   relative;
    display:    none;
    overflow-y: auto;
}

#singleSiteOfficialForecastLinkParagraph {
    margin:      4px 0 4px 0;
    /*font-size: 0.8em;*/
    font-weight: bold;
    text-align:  center;
}

#rightColumnInitialLoadContent p {
    margin-right: 20px;
}

#rightColumnInitialLoadContent {
    margin-top: 30px;
}

#disclaimerTextWrapper {
    font-size: 0.7em;
}
#detailsTimeChart {
    width:               98%;
    min-height:          234px;
    height:              35vh;
    margin:              4px 0 0 10px;
    user-select:         none;
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select:    none; /* Firefox all */
    -ms-user-select:     none; /* IE 10+ */
}

#transectChartWrapper {
    position:   relative;
    margin-top: 8px;
}

#singleSiteChartLegendButton {
    position: absolute;
    right:    10px;
    top:      -15px;
    z-index:  10000;
}

#transectChart {
    width:               98%;
    min-height:          181px;
    height:              28vh;
    margin-left:         10px;
    user-select:         none;
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select:    none; /* Firefox all */
    -ms-user-select:     none; /* IE 10+ */
}

#chartControls {
    position: relative;
    overflow: hidden;
}

#animationControl {
    margin:  5px 0;
    height:  auto !important;
    padding: 5px 5px 5px 5px !important;
}

button::-moz-focus-inner {
    padding: 0;
    border:  0
}

#animationControl img {
    display: block;
}

#transectDataPointIndexSlider {
    position:         absolute;
    height:           21px;
    min-width:        89%;
    right:            2px;
    margin:           9px 1% 0 0;
    padding:          0;
    background-color: #FFFFFF;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-ms-track {
    width:        100%;
    height:       3px;
    cursor:       pointer;
    background:   transparent;
    border-color: transparent;
    color:        transparent;
}

input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper {
    background: #AAAAAA;
}

input[type=range]:focus::-ms-fill-lower,
input[type=range]:focus::-ms-fill-upper,
input[type=range]:hover::-ms-fill-lower,
input[type=range]:hover::-ms-fill-upper {
    background: #777777;
}

input[type=range]:active::-ms-fill-lower,
input[type=range]:active::-ms-fill-upper {
    background: #003366;
}

input[type=range]::-ms-thumb {
    box-sizing:    border-box;
    height:        20px;
    width:         10px;
    border:        2px solid #AAAAAA;
    border-radius: 4px;
    background:    #FFFFFF;
    cursor:        pointer;
}

input[type=range]:focus::-ms-thumb,
input[type=range]:hover::-ms-thumb {
    border-color: #777777;
}

input[type=range]:active::-ms-thumb {
    border-color: #003366;
}

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

input[type=range]::-webkit-slider-runnable-track {
    width:      100%;
    height:     3px;
    cursor:     pointer;
    background: #AAAAAA;
}

input[type=range]:focus::-webkit-slider-runnable-track,
input[type=range]:hover::-webkit-slider-runnable-track {
    background: #777777;
}

input[type=range]:active::-webkit-slider-runnable-track {
    background: #003366;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    /*box-sizing         : content-box;*/
    margin-top:         -9px;
    margin-left:        -3px;
    height:             20px;
    width:              10px;
    border:             2px solid #AAAAAA;
    border-radius:      4px;
    background:         #FFFFFF;
    cursor:             pointer;
}

input[type=range]:focus::-webkit-slider-thumb,
input[type=range]:hover::-webkit-slider-thumb {
    border-color: #777777;
}

input[type=range]:active::-webkit-slider-thumb {
    border-color: #003366;
}

input[type=range]::-moz-range-track {
    width:      100%;
    height:     3px;
    cursor:     pointer;
    background: #AAAAAA;
}

input[type=range]:focus::-moz-range-track,
input[type=range]:hover::-moz-range-track {
    background: #777777;
}

input[type=range]:active::-moz-range-track {
    background: #003366;
}

input[type=range]::-moz-range-thumb {
    box-sizing:    border-box;
    height:        20px;
    width:         10px;
    border:        2px solid #AAAAAA;
    border-radius: 4px;
    background:    #FFFFFF;
    cursor:        pointer;
}

input[type=range]:focus::-moz-range-thumb,
input[type=range]:hover::-moz-range-thumb {
    border-color: #777777;
}

input[type=range]:active::-moz-range-thumb {
    border-color: #003366;
}

.jqplot-title {
    padding-bottom: 8px;
    font-family:    Tahoma, Geneva, sans-serif;
    font-size:      1em;
    color:          #555555;
}

.jqplot-target {
    font-family: Tahoma, Geneva, sans-serif;
    color:       #555555;
}

#levelsTableWrapper {
    margin:        7px 2px 0 0;
    border:        2px solid #AAAAAA;
    border-radius: 4px;
    padding:       0.5em;
}

#regionalOverviewHeader {
    margin:      10px 10px 0;
    line-height: 1.7em;
    font-size:   1.2em;
    text-align:  center;
}

#overviewChartLegendButton {
    position: absolute;
    z-index:  10000;
    top:      10px;
    right:    10px;
}

#regionalOverviewColumnWrapper {
    position:   relative;
    margin-top: 10px;
}

.overviewTimeChartWrapper {
    padding:       10px 0 10px 25px;
    border-radius: 4px;
    border:        2px solid rgba(0, 51, 102, 0);
}

.overviewTimeChartWrapper:hover {
    cursor: pointer;
}

.overviewTimeChartWrapper:active {
    border-color: rgba(0, 51, 102, 100);
}

.overviewTimeChartWrapper .jqplot-title {
    width:         84% !important;
    height:        21px; !important;
    margin-left:   8%;
    overflow:      hidden;
    white-space:   nowrap;
    text-overflow: ellipsis;
}

.highlightedOverviewTimeChart {
    border-color: #777777;
}

#leftOverlay {
    width:      50%;
    min-width:  600px;
    min-height: 500px;
}

#chartLegend {
    display:    block;
    box-sizing: border-box;
    width:      480px;
    /*margin:     -250px 0 0 -242px;*/
    padding:    10px 10px 70px 10px;
}

#chartLegend h2 {
    margin:    0 0 1em 0;
    font-size: 1.5em;
}

.chartLegendRow {
    overflow: hidden;
    margin:   0 0 15px 0;
}

.chartLegendRow:last-of-type {
    margin: 0;
}

.chartLegendRow img {
    float:        left;
    margin-right: 10px;
}

.chartLegendText {
    display:     block;
    margin-left: 110px;
    color:       #555555;
}

.chartLegendSubText {
    display:     block;
    margin-left: 110px;
    font-size:   0.8em;
    color:       #777777;
}

.chartLegendHighlight {
    color: #555555;
}

#chartLegendDisclaimer {
    font-style: italic;
    font-size:  0.8em;
    color:      #555555;
}

#wideOverviewChartLegend {
    display:    none;
    box-sizing: border-box;
    max-width:  370px;
    margin:     auto;
    padding:    10px;
}

#wideOverviewChartLegend h4 {
    margin:     0 0 30px 0;
    text-align: center;
    font-size:  1em;
}

#wideOverviewChartLegend .chartLegendText,
#wideOverviewChartLegend .chartLegendSubText {
    margin-left: 60px;
}