@charset "utf-8";

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	overflow:auto;
}
.small-pad-bot {
	padding-bottom:.5em;
}
.first-item {
	margin-top: 55px; 
}
.calcite-panels.calcite-bg-dark input[type="range"] {
	border:0;
}
#map {
	width:100%;
	height:100%;
	background-color:darkgray;
}
.map-row {
	margin-right: -30px;
	margin-left: -30px;
	flex-grow:1;
	background-color:lightblue;
} 


.map-panel
{
  background: #fff;
  font: "Avenir Next W00";
  line-height: 1.5em;
  overflow: auto;
  padding: 10px;
  width: 680px;
  height: 375px;
}

/* Map Panels */

.layer-panel.map-panel
 {
	width:auto;
	height:auto;
	min-width:min( 90vw, 450px);
	/*min-height:59vh;*/
	max-width: min(90vw, 680px);
}

@media only screen and (max-height: 769px) {
	.layer-panel.map-panel
	{
	  height:auto;
	  max-height: 57vh;
	}
}

.legend-panel.map-panel
 {
	width:auto;
	height:auto;
	min-width:min(90vw, 400px);
	max-height:min(48vh, 400px);
}
@media only screen and (max-height: 769px) {
	.legend-panel.map-panel
	{
	  height:auto;
	  /*max-height: 80vh;*/
	  /*min-width:50vw;*/
	  max-width:99vw;
	  width:auto;
	}
}

.abs-bottom {
	top:unset !important;
	bottom: 0;
}
.basemap-panel.map-panel {
	width:350px;
}

.map-panel.drawing
{
  width:auto;
  height:auto;
}
.map-panel.auto-width
{
  width:auto;
  /*height:auto;*/
  /*min-width: 500px;*/
  max-height:60vh;
  
	min-width:min( 90vw, 500px);
	/*min-height:59vh;*/
	max-width: min(90vw, 680px);
}
.map-panel.auto-height {
	height:auto;
}

.map-panel.fat-width
{
  min-width:85%;
  height:auto;
}
.details-text {
	border-bottom:1px dotted darkgray;
	margin-bottom:.25em;
}
@media only screen and (max-width: 1024px) {
	.map-panel.fat-width
	{
	  height:auto;
	  max-height: 74vh;
	}
	.modal-body {
		overflow-y:auto;
		max-height:60vh !important;
	}
}

.map-panel.total-water-levels-panel {
	min-width:85%;
	min-height: 537px;
	height: 76vh;
	max-height: 575px;
	max-width: min(90vw, 680px);
}

.map-panel.flood-hazards-panel {
	min-width:75%;
	/*min-height:537px;*/
	height:auto;
	max-width: min(90vw, 450px);
}












#legendArea.esri-legend.esri-widget--panel.esri-widget{
	max-height:none;    
	width:auto;
}
.layer-sidebar-btn {
	width:100%;
	padding:.5em 0;
	margin:.25em 0;
	background-color:white;
	border:1px solid black;
	cursor:pointer;
}
.layer-sidebar-btn:hover,
.layer-sidebar-btn:hover {
	background-color:lightblue;
}
.layer-sidebar-btn span {
	vertical-align:middle;
}

.chart {
  height: 300px;
}
.no-margin {
	/*TODO: make this better, shouldn't use important if possible*/
	margin:0 !important;
}
.calcite-panels .panel-label.visible-mobile-only { 
	display:inline-block !important;
}
.calcite-panels .panel-toggle {
	padding-right:.5em;
}
.select-inline {
	width:auto;
	display:inline-block;
	vertical-align:middle;
}
#legendDiv {
	max-height:175px;
	overflow-y:auto;
}

.radio-contents {
	margin-left:10%;
}
.radio-contents.less-margin {
	margin-left:5%;
}
.radio-contents.ignore-margin {
	margin-left:0%;
}
.radio-contents.contains-opacity {
	padding-bottom:3em;
	padding-right:1em;
}

.vertical-range-flex {
display:flex;
}
.vertical-range-div {
min-width:3em;
}
.vertical-text-div {
	width:inherit;
}
input[type="range"].vertical-range,
input[type="range"][orient="vertical"] {
width:20px;
height:80px;


/*writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 8px;
height: 175px;
padding: 0 5px;
}

.remove-bullets {
list-style-type:none;
padding-left:.25em;

}
.remove-bullets li {
	padding-bottom:1em;
}

/* Tutorial CSS */
.twl-page-2-flex,
.twl-page-3-flex,
.twl-page-4-flex,
.twl-page-5-flex {
display:flex;
margin-bottom: 2em;
}
.twl-page-2-pic {
flex: 1 1 auto;
align-self: center;
align-content: flex-start;
padding:.5em;
}
.twl-page-2-text{
	flex: 2 1 auto;
	/* align-self: center;*/
	align-content: flex-start;
	padding:.5em;
	padding-left:1em;
}
.twl-page-4-text {
	padding-left: 2em;
}

.twl-page-3-flex > div:first-child,
.twl-page-4-flex > div:first-child,
.twl-page-5-flex > div:first-child {
flex: 1;
}

.twl-page-4-flex > div:first-child{
flex: 2;
}
.twl-page-3-flex > div:last-child {
flex: 5;
}
.twl-page-4-flex > div:last-child {
flex: 3;
}
.twl-page-5-flex > div:last-child {
flex: 2;
}

.twl-page-3-slider-vert,
.twl-page-4-slider-vert,
.twl-page-5-slider-vert {
display:inline-block;
vertical-align:top;
width:15%;
padding-left:2em;
padding-top:1em;
}
.twl-page-3-text,
.twl-page-4-text,
.twl-page-5-text {
display:inline-block;
vertical-align:top;
width:80%;
}

.twl-page-6-sum-text,
.twl-page-6-text {
display:inline-block;
vertical-align:top;
width:49%;
}

.tutorial-slider {
height:300px;
}
p.tutorial-stat {
text-align:right;
position:absolute;
bottom:0;
right:1em;
}

.full-width-btn {
width:99%;
}
.half-width-btn {
width:49%;
}
.third-width-btn {
width:32%;
}
.vsm-margin-top {
margin-top: .25em;
}
/* side bar additional styling */ 
.align-self-center {
align-self: center;
}
.limit-slider-height {
	display:flex;
	overflow-y: hidden;
	/*padding: 1em .5em 2em;*/
}
.flood-hazard-parent {
clear:both;
}

.opacity-set {
	border-bottom:1px dotted gray;
	margin-bottom:.5em;
}
.small-margin-bot {
	margin-bottom:.5em;
}


/* TAKEN FROM BOOTSTRAP 4 MIN.CSS */
.custom-switch .custom-control-label::after {
    top: calc(.25rem + 2px);
    left: calc(-2.25rem + 2px);
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    background-color: #adb5bd;
    border-radius: .5rem;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out;
    transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out;
}
.custom-control-label::after {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
}
.custom-switch .custom-control-label::before {
    left: -2.25rem;
    width: 1.75rem;
    pointer-events: all;
    border-radius: .5rem;
}
.custom-control-label::before, .custom-file-label, .custom-select {
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.custom-control-label::before {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
}
.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
}
.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.small-margin-left {
	margin-left:.5em;
}
.floating-close {
	position:absolute;
	right:1.5em;
	z-index:9;
}

.left-side-dropdown {
	width:auto;
	display:inline-block;
margin-bottom:.25em;
}

.reorder-cont {
	display:flex;
	align-items: center;
}
.reorder-cont > div {
	width:10%;
}
.reorder-opacity {
	flex-grow:9;
}
.place-top {
	position:absolute;
	top:0;
}
.place-bottom {
	position:absolute;
	bottom:0;
}
.hide-order-btn  {
	visibility: hidden;
}
.slider-tick-label {
	min-height:30px;
	margin-left: 20px;
}

#tut-plan-horizon-slider.slider.slider-vertical {
	height:355px;
}
.slider.slider-vertical {
	
	min-height:280px;
}
.limit-slider-height .slider.slider-vertical {
	min-height:200px;
}
#side-plan-horizon-slider.slider.slider-vertical  {
	height:228px;
}
#side-plan-horizon-slider > div.slider-tick-label-container .slider-tick-label {
	min-height:19px;
}

.calcite-panels .panel-body {
	max-height:none;
}


.basemap-div li.esri-basemap-gallery__item {
	display: flex;
	flex: 0 0 25%;
	align-items: flex-start;
	border: 1px dotted lightgray;
}
.basemap-div  .esri-basemap-gallery__item-container {
	flex-flow:row wrap;
	max-width:100%;
}
.modal-content {
	overflow-y:hidden;
}
.modal-body {
	overflow-y:auto;
	max-height:80vh;
}

.esri-ui-bottom-left {
	bottom:15px;
}
.calcite-navbar.calcite-text-light .calcite-search-expander .esri-search__submit-button {
	background-color:steelblue;
}


/* Metadata table */

table.meta-table {
	font-size:12px;
	width:99%;
	margin-bottom:.5em;
  }
  table.meta-table tbody tr td,
  table.meta-table thead tr th {
	border:1px dotted black;
	border-collapse:collapse;
	padding: .25em 1em;
  }
  
  table.meta-table tbody tr:nth-child(even) {
  background-color:#eee;
  }
  table.meta-table tr th {
	text-align:center;
  }
  
.meta-table { 
    table-layout: fixed;
}
.meta-table th:nth-child(2){
    width:40%;
}
.meta-table th:nth-child(3){
    width:20%;
}
.meta-table th:nth-child(4){
    width:20%;
}
.meta-table th:nth-child(5){
    width:9%;
}
.meta-table th:nth-child(7){
    width:20%;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

a.btn-primary.white-font {
	color:white;
}
/*
.esri-view-width-xsmall .esri-expand--auto .esri-expand__container--expanded {
	background: transparent;
}
*/