/* prevent chrome mobile refresh on pull down? */
	html,
	body {
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		/* Prevent the whole page body being dragged/scrolled by long-press on mobile.
		   The drawer and ArcGIS map handle all their own panning internally. */
		overflow: hidden;
	}
	#viewDiv {
		padding: 0;
		margin: 0;
		/* 380px for maps in iframe 
		js changes to 100% on
		standalone */
		height: 380px;
		width: 100%;
		/* Prevent long-press text-select drag from lifting the map div */
		-webkit-user-select: none;
		user-select: none;
	}

	 /* add custom thin scrollbar on standalone
		but get rid of scroll bars 
		when in iframe   */

	.scroll::-webkit-scrollbar {
		display: block;
		width: 4px;
		height: 1.5px;
	}
	/* Scrollbar Track */
	.scroll::-webkit-scrollbar-track {
		box-shadow: inset 0 0 5px lightgrey; 
		border-radius: 2px;
	}
	/* Scrollbar Handle */
	.scroll::-webkit-scrollbar-thumb {
		background: darkgrey; 
		border-radius: 2px;
	}

	/* default to noscroll (esp on iframe) */
	.noscroll {
		-ms-overflow-style: none;  /* Internet Explorer 10+ */
		scrollbar-width: none;  /* Firefox */
	}
	.noscroll::-webkit-scrollbar { 
		display: none;  /* Safari and Chrome */
	}
	.noscroll::-webkit-scrollbar-thumb {
		background:transparent; 
	}
	
	#titleDiv {
		padding: 6px;
		background-color: transparent;
		color: white;
	}
	#contentdiv {
        /* min-width: 450px;
		overflow-y: auto;
        overflow-x: hidden;
		*/
        padding: 0;
        display: none;
		height: 100%;
		overflow-x: hidden;
    	max-height: 500px;
		/* width:400px; set dynamically if not in iframe*/
    }
	#datadiv {
		/* height: 100%; adds a 15 px scroll space at end for some reason */
		/* overflow-y: scroll;  scroll data body, not header. BUT NOT IN IFRAME!! CHANGE IFRAME W/JS */
		padding: 0 10px;
	}
	#datadiv h1 {
		line-height: 100%;
	}
	#movable {
		height: 100%;
	}

	.menuicons {
		/* display: inline; */
		padding: 6px;
		/* background-color: white; */
		z-index: 999;
	}
	.menuicons img {
		width: 56px;
		height: 56px;
		border: 1px solid #ccd6dc;
		padding: 4px;
		border-radius: 5px;
  		/* background: #e7eae3; */
		cursor: pointer;
		margin: 2px 0;
    	margin-left: 3px;
		/* drop-shadow(offset-x offset-y blur-radius color) */
		/* filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 20%)); */
		/* box-shadow: h-offset/none v-offset blur spread color; */
		box-shadow: 2px 2px 5px 1px rgb(0 0 0 / 60%);
		/* be sure to add a matching shadow in .selected */
	}
	/* highlight selected icon */
	.selected {
		box-shadow: 0 0 0 1.5px #0079c1, 2px 2px 2px 1px rgb(0 0 0 / 60%) !important;
	}
	/*on mobile move menu to bottom of map */
	@media only screen and (max-width: 545px) {  
		#menuicons-top {display:none;}
		#menuicons-bottom {
			display: inline-flex;
			position: absolute;
			bottom: 0;
			left: 0;
			margin: 0;
    		padding: 0;
			/* Prevent long-press drag on the icon bar */
			-webkit-user-select: none;
			user-select: none;
			touch-action: manipulation;
		}
		#menuicons-bottom img {
			width: 12.5vw;
    		height: 12.5vw;
			background-color: white;
		}
	}
	/* rules for larger screens */
	@media only screen and (min-width: 546px) {
		/* hide bottom-menu on desktop (mainly for window.resize events) */
		#menuicons-top {display:inline-flex;}
		#menuicons-bottom {display:none;}
		
	}
	/* with this we are basically targeting standalone mode with mobile 
	  since iframe on mobile will have a screen height of 380px
	*/
	@media (min-height: 450px) and (max-width: 545px) {
    	.esri-popup--is-docked-bottom-center {
			/* so docked popups dont go behind menuicons */
			bottom: 65px;
		}
	}


	/* esri-expand.  make it a bit wider on mobile */
	/* add @screen rules to this for dif sized sreens */
	.esri-ui-top-right .esri-expand--auto .esri-expand__container--expanded {
		width: 85% !important;
    	max-width: 380px !important;
	}
	/* esri-expand.  move close button into corner */
	.esri-expand__panel {
		padding: 0 !important;
	}
	/* close contentDiv. default is grey, which conflicts with menuicons */
	.esri-widget--button:active {
		background-color: white;
	}
	/* Get rid of close content div button.  Cant get to work. delete after I make my own bottom expando pane */
	@media only screen and (max-width: 545px) {  /* for mobile divices  */
		.esri-expand__container--expanded>div.esri-expand__panel {
			display: none !important;
		}
	}
	/*
	.esri-expand__content {
		top: -0px;
		position: absolute;
		right: -10px;
		display: inline-block;
		width: 100%; *
	}
	move the content div into corner with NO margins space and visible map
	.esri-ui-top-right {
		top: -15;
    	right: -15;
	}
	*/
	select, option { 
		width: 50%; 
	}
	p {
		font-family: Verdana, Geneva, sans-serif;
		font-size: 14px; 
		line-height:120%;
		border:1px solid white;
		margin:20px 0;
		padding:3px;
	}
	.desc p:hover {
		border:1px solid #cccccc;
	}
	.rg-active {
		outline: 1px solid #49b0f2;
    	background-color: rgb(85 187 222 / 20%);
	}
	.smalltext {
		font-family: "Times New Roman", Times, serif;
		font-size: 12px; 
	}
	.smalltext p {
		margin-top:0;
	}

	.esri-coordinate-conversion{
		display:none;
	}

	/* solves two problems, gives back arrow more space, and since js makes jump menu 60px down, this makes it look pretty  
	@media only screen and (max-width: 450px) {
		 #menuicons {top:32px;}  
	}
	*/

	.dropdown{
		border: 1px solid grey;
		font: 16px/30px Georgia, serif;
		background: #daecd6;
		width: 350px;
		max-width: 95%;
		margin: 0 10px;
	}

	/* ---- Select2 custom theme — green/blue app palette ---- */

	/* The closed control: matches existing .dropdown look */
	.select2-container .select2-selection--single {
		height: 34px !important;
		background: #daecd6 !important;
		border: 1px solid grey !important;
		border-radius: 4px !important;
		font: 15px/32px Georgia, serif !important;
	}
	/* The rendered selected value text */
	.select2-container--default .select2-selection--single .select2-selection__rendered {
		color: #333 !important;
		line-height: 32px !important;
		padding-left: 10px !important;
	}
	/* The dropdown caret arrow */
	.select2-container--default .select2-selection--single .select2-selection__arrow {
		height: 32px !important;
		top: 1px !important;
	}
	/* Focus ring */
	.select2-container--default.select2-container--focus .select2-selection--single,
	.select2-container--default.select2-container--open .select2-selection--single {
		border-color: #0079c1 !important;
		box-shadow: 0 0 0 2px rgba(0,121,193,0.18) !important;
		outline: none !important;
	}
	/* The dropdown panel */
	.select2-dropdown {
		background: #f5faf3 !important;
		border: 1px solid #8ab4a0 !important;
		border-radius: 0 0 4px 4px !important;
		box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
		font: 14px/1.4 Georgia, serif !important;
	}
	/* The search box inside the dropdown */
	.select2-container--default .select2-search--dropdown .select2-search__field {
		border: 1px solid #8ab4a0 !important;
		border-radius: 3px !important;
		padding: 5px 8px !important;
		font: 14px Georgia, serif !important;
		background: white !important;
		margin: 4px !important;
		width: calc(100% - 8px) !important;
		box-sizing: border-box !important;
	}
	.select2-container--default .select2-search--dropdown .select2-search__field:focus {
		border-color: #0079c1 !important;
		outline: none !important;
	}
	/* Individual options */
	.select2-container--default .select2-results__option {
		padding: 7px 10px !important;
		color: #333 !important;
	}
	/* Hover / keyboard highlight */
	.select2-container--default .select2-results__option--highlighted[aria-selected] {
		background: #c9e8d8 !important;
		color: #004a75 !important;
	}
	/* Currently selected option in the list */
	.select2-container--default .select2-results__option[aria-selected=true] {
		background: #0079c1 !important;
		color: white !important;
	}
	/* Wrapper sizing — matches .dropdown width */
	.select2-container {
		width: 350px !important;
		max-width: 95% !important;
		margin: 0 10px !important;
	}
	/* Full-width on the narrow mobile drawer */
	@media only screen and (max-width: 545px) {
		.select2-container {
			width: calc(100% - 20px) !important;
			max-width: none !important;
		}
		.select2-dropdown {
			max-height: 200px;
			overflow-y: auto;
		}
	}
	/* ---- end Select2 theme ---- */

	/* Select2 dropdown must appear above the bottom menu icon bar (z-index 999)
	   and the mobile drawer (z-index 200). The dropdown appends inside the
	   dropdownParent, so we override z-index explicitly here. */
	.select2-container--open .select2-dropdown {
		z-index: 1100 !important;
	}

	/* style the geo image gallery flickr thumbs — 3 per row always */
	div.geo-img-div {
		margin: 2px;
		padding: 2px;
		border: 1px solid #ccc;
		display: inline-block;
		vertical-align: top;
		width: calc(33.333% - 8px);   /* 3 cols: 33% minus margin/padding */
		box-sizing: border-box;
		height: 120px;
		overflow: hidden;
	}
	div.geo-img-div:hover {
		border: 1px solid #49b0f2;;
	}
	div.geo-img-div img {
		width: 100%;
  		height: auto;
	}
	/* Ensure image grid containers fill full width so calc() percentages are correct */
	#datadiv, #fmimgdiv {
		width: 100%;
		box-sizing: border-box;
	}
	div.geo-img-description {
		padding: 6px;
		text-align: center;
		font: 8px san-serif;
	}
	div.geo-img-expanded {
		margin: 2px;
		padding: 2px;
		border: 1px solid #ccc;
		width: 97%;
		max-width: 500px;
		/* height: 120px; */
		overflow: hidden;
	}
	div.geo-img-description-expanded {
		padding: 6px;
		text-align: center;
		font: 12px san-serif;
	}
	div.geo-img-expanded img {
		width: 100%;
	}
	#sliderDiv {
		width: 700px;
		height: 80px;
		background-color: rgba(255, 255, 255, 0.75);
	}
	.esri-slider__anchor .esri-slider__anchor-0 .esri-slider__anchor--moved {
		z-index: 0 !important;
	}
	/*  prevent slider handle from showing on top expand pane,  also .esri-slider__anchor?    */
	#sliderDiv-handle-0 {	
		z-index: 0 !important;
	}
	/* for mobile divices  */
	@media only screen and (max-width: 450px) {
		/* just screws it up, must interfere with esri setting
		#sliderDiv {
			width: 100%;
			height: 80px;
			left: 20px;
		}
		*/
        .esri-slider__tick-label{
          display:none;
        }
      }
	.sliderLabels::after{content: " mya";}
	.esri-slider__tick-label .sliderLabels{font-size: 8pt;  }
	.smallLabels:after {content: " mya";}
	.esri-slider__min:after {content: " .mya";}
	.esri-slider__max:after {content: " .mya";}
	.esri-slider__label {color: blue;font-weight: bold;}
	.esri-slider__label:after {content: " .mya";}

	/* on mobile, style the search a bit differently
	 perhaps put this in its own div? use hide/show()
	 instead of expand  */
	@media only screen and (max-width: 545px) {
		.esri-search {
			margin-top:15px;
		}
	}
	/* make it a bit bigger than the default */
	.esri-search {
		width:350px;
		border: 1px solid grey;
		height: 40px;
	}

	.esri-search .esri-widget--button {
		background-color: rgb(33 150 243 / 30%);
		height: 38px;
		width: 46px;
	}
	/* for some reason inner box is smaller than outer box */
	.esri-input[type=text], .esri-input[type=password], .esri-input[type=number] {
		height: auto;
		width: 100%;
		padding: 0 .5em;
	}
	/* since above stuff screws with the map location search bar */
	.esri-search__input {
		width: auto;
	}
	/* hide the no results dialog */
	.esri-search__warning-body {
		display:none;
	}
	/* make autocomplete text smaller so more appears in space */
	.esri-menu {
		font-size: 12px;
    	line-height: 12px;
	}

	.page-loading {
		z-index: 10000;
		text-align: center;
		padding-top: 25px;
		background-color: rgba(255, 255, 255, 0.7); 
	}
	.mapbutton {
		background-color: white;
		padding: 8px;
		cursor: pointer;
	}
	.savebutton {
		background-color: white;
		padding: 8px;
		cursor: pointer;
	}
	/* add open in new window icon after external links */
	.new-window::after {
		content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
		margin: 0 3px 0 5px;
	}
	.lnglat-container {
		display: inline-block;
    	font-size: 15px;
	}
	.lnglat-container .zed {
		display: inline-block;
		text-align: right;
	}
	.map-source-attrs {
		/* box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 2px 1px -1px rgb(0 0 0 / 12%); */
		/* margin: 6px; */
		color: #333;
		font: normal 16px/22px 'Montserrat', sans-serif;
	}
	.map-source-attr {
		padding-top: 10px;
	}
	.map-comt {
		font-size: 90%;
		color: rgb(77, 77, 77);
	}
	.map-ref {
		font-size: 10px;
		line-height: 12px;
	}
	.attr {
		font-weight: 700;
	}
	.region-group {
		font-size: 80%;
    	display: block;
	}

	form.example input[type=text] {
		padding: 10px;
		font-size: 17px;
		border: 1px solid grey;
		float: left;
		width: 80%;
		background: #f1f1f1;
	}

	/* Style the submit button */
	form.example button {
		float: left;
		width: 20%;
		padding: 10px;
		background: #2196F3;
		color: white;
		font-size: 17px;
		border: 1px solid grey;
		border-left: none; /* Prevent double borders */
		cursor: pointer;
	}

	form.example button:hover {
		background: #0b7dda;
	}

	/* Clear floats */
	form.example::after {
		content: "";
		clear: both;
		display: table;
	}
	.gsunit-title {
		font: small-caps bold 18px/20px 'Montserrat', sans-serif;
		margin-top: 10px;
		color: #0079c1;
	}
	.fm-title {
		font-style: 700;
	}
	/* wrap text around strat col img on fm pages */
	.fm-wrap {
		float: left;   
		margin: 2px 12px 3px 4px;   
		border: 1px solid rgb(191, 191, 194, 0.5);  
	}
	.fm-paleoimg {
		overflow-x:hidden;
	}
	.fm-paleoimg img {
		min-width:100px;
		cursor: pointer;
		border: 1px solid #636262
	}
	.paleo-title h1 {
		margin-bottom: 4px;
	}
	.paleo-subtitle {
		font-size: 16px;
		font-weight: 600;
	}
	.paleo-time {
		font-weight: 600;
		margin: 10px 0;
		color:#4986ad;
	}
	.hidden {
		display: none;
	}
	.rgimg {
		width:80%;
	}
	.rgbtn {
		font-size: 10px;
		color:#4986ad;
	}
	.thick-note {
		margin-left: 6px;
		color:rgb(150, 52, 52);
	}
	.hm-image {
		margin-top:10px;
		margin-left: -8px;
	}
	.rgnote {
		font-family: "Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
		line-height: 12px;
		font-size: 12px;
	}
	#stratslider{
		width:90%;
		height: 70px;
	}



/* change this to ONLY on desktop! */
#roadguide-dev-panel {
	background-color: white;
	color: black;
	font-size: 16px;
	padding: 8px 14px;
	width:350px;
	display: none; /* default = none, unless testing  */
}
@media only screen and (max-width: 546px) {
	/* lift rg dev panel above icons on mobile */
	#roadguide-dev-panel { 
		margin-bottom: 40px;  
	}
}

#miles-box {
	width: 60px;
}

.button {
  background-color: #008CBA; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  /* box-shadow: h-offset/none v-offset blur spread color; */
  box-shadow: 1px 2px 8px 1px rgb(0 0 0 / 50%);
  width: 200px;
  margin-left: 15px;
}
.button:hover {
	color:#ebecec;
	text-decoration: underline;
}
.button:focus {
	outline:none;
}
.svoutput {
	text-align: center;
	color: red;
}
#savediv{
	width:250px;
	background-color: white; 
	padding:8px;
}	
#savediv label {
	font: normal 14px/18px "Avenir Next W00","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.savenote {
	font: normal 11px/12px 'Courier New', serif;
	padding-bottom: 8px;
}
.savetitle {
	font: bold 18px/22px Georgia, serif;
	padding-bottom: 14px;
}
.nav-pills {
    overflow-x: auto;
    overflow-y: hidden;
    /* display: -webkit-box !important;
    display: -moz-box !important; */
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	width: 100%;
}
/* we need a scrollbar on desktop because dragging
doesnt work and isnt obvious */
@media only screen and (min-width: 546px) {
	.nav-pills {
		scrollbar-width: auto;  /* Firefox */
	}
	/* trying to flip scroll bar above icons, but doesnt work! 
	.scrollcontainer .nav-pills{
		transform:rotateX(180deg);
		-moz-transform:rotateX(180deg); 
		-webkit-transform:rotateX(180deg); 
		-ms-transform:rotateX(180deg); 
		-o-transform:rotateX(180deg); 
	}	
	*/
}
.nav-pills img {
	float:left;
}
.navscroll::-webkit-scrollbar {
	display: block;
	height: 4px;
}
/* Scrollbar Track */
.navscroll::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px lightgrey; 
	border-radius: 2px;
}
/* Scrollbar Handle */
.navscroll::-webkit-scrollbar-thumb {
	background: darkgrey; 
	border-radius: 2px;
}


/* --------------  UGS Template -------------------------*/


/* only display the left ugs sidebar on desktop */
@media only screen and (min-width: 546px) {


/* programatically hide all ugs elements */
.ugs-only-mode {
    display:none;
}
.theme-color {
    background-color: #565656;
}

.leaflet-left {
    top: 0;
    left: 0;
    position: absolute;
    width: 51px;
    height: 100%;
    z-index: 3;
}

/* needed for zoom buttons and all a. links in bar  */
.leaflet-left a {
    height: 45px;
    width: 51px;
    display:block;
    z-index: 10;
}

.leaflet-bar a, .leaflet-bar a:hover {
    color: #404040;
    color: rgba(0,0,0,.75);
    border-bottom: 1px solid #ddd;
    border-bottom-color: rgba(0,0,0,.1);
    border-top: 1px solid rgba(255,255,255,.25);
}

.leaflet-left .leaflet-control, .leaflet-control {
    margin: 0;
    border: none;
}

 .bottomleft { 
    width:200px; 
    /* height:110px;  */
    position: fixed; 
    bottom: 0px; 
    left: 52px; 
    margin: 0px; 
    padding-bottom:30px; 
 } 

 .leaflet-bottomleft a {
    position: absolute;
    left: 0;
    height: 45px;
    width: 51px;
    z-index: 99;
    cursor: pointer;
    border-top: 1px solid #666;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
}

.zoom-in {
    background-image: url(utahgeo/ugs/zoom-in.png);
}
.zoom-out {
    background-image: url(utahgeo/ugs/zoom-out.png);
}
.view-center {
    background-image: url(utahgeo/ugs/zoom-home.png);
}
.rotate {
    background-image: url(utahgeo/ugs/heading.png);
}
.ugslogo {
    bottom: 140px;
    /* left: 4px !important; */
    height: 134px !important;
    /* width: 41px !important; */
    background-image: url(utahgeo/ugs/ugs-logo-vertical.png);
}
.help {
    bottom: 92px;
    background-image: url(utahgeo/ugs/help.png);
}
.bookstore {
    bottom: 46px;
    background-image: url(utahgeo/ugs/bookstore-link.png);
}
.comment {
    bottom: 0px;
    background-image: url(utahgeo/ugs/comment.png);
}

} /* end desktop only */


/* =====================================================
   MOBILE BOTTOM PULL-UP DRAWER
   Only active on standalone mobile (<=545px).
   On desktop the existing idExpand widget is used.
   ===================================================== */

#mobiledrawer {
	display: none; /* hidden by default; JS shows it as flex on mobile standalone */
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 51vh;           /* default open = 51% so map still visible */
	min-height: 36px;
	max-height: 88vh;
	background-color: rgba(255,255,255, 0.97);
	border-radius: 12px 12px 0 0;
	box-shadow: 0 -3px 10px 1px rgba(0,0,0,0.25);
	touch-action: none;     /* required by interact.js */
	box-sizing: border-box;
	/* Use flex column so the handle is always pinned at the top and can
	   never be pushed below or overlapped by the scrollable content area,
	   regardless of how much content is injected into #mobiledrawer-content. */
	flex-direction: column;
	overflow: hidden;
	z-index: 200;
	/* smooth snap transitions */
	transition: height 0.25s ease;
}

/* The drag handle bar at top of drawer */
#mobiledrawer-handle {
	height: 32px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	position: relative;
	background-color: rgba(255,255,255, 0.97);
	border-radius: 12px 12px 0 0;
	/* flex-shrink:0 prevents the handle from collapsing when content is long;
	   z-index:1 keeps it painted above #mobiledrawer-content in all cases. */
	flex-shrink: 0;
	z-index: 1;
}

/* The pill-shaped grip indicator */
.mobiledrawer-grip {
	display: block;
	width: 48px;
	height: 5px;
	border-radius: 3px;
	background-color: #ccc;
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
}

/* Up/down arrow icon — click to snap between heights */
.mobiledrawer-arrows {
	position: absolute;
	right: 12px;
	top: 6px;
	font-size: 14px;
	color: #666;
	cursor: pointer;
}

/* Scrollable content area inside the drawer */
#mobiledrawer-content {
	overflow-y: auto;
	overflow-x: hidden;
	/* flex:1 fills all remaining height after the 32px handle in the flex-column parent */
	flex: 1;
	min-height: 0;   /* required: lets flex child shrink below its content height */
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: none;
	padding-bottom: 50px; /* room above bottom menuicons */
}

/* Bottom spacer — sits at the end of #movable content.
   Zero height by default; JS sets real height on mobile so the 
   last content item scrolls clear of the bottom menu icon bar. */
#mobile-bottom-spacer {
	height: 0;
	display: block;
}

/* On mobile standalone, push viewDiv bottom up so map peeks above drawer.
   JS will update this dynamically as the drawer is dragged. */
@media only screen and (max-width: 545px) {
	/* Hide ONLY the content-pane flyout button on mobile — it's replaced by the
	   bottom drawer. Basemap gallery, search, and save buttons remain visible.
	   The .content-pane-expand class is added to idExpand's container via JS. */
	.content-pane-expand {
		display: none !important;
	}

	/* Strat table: wrap in a horizontally-scrollable container so the table
	   never clips on the right edge. The extra right padding gives breathing room. */
	#datadiv {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-right: 12px;
		box-sizing: border-box;
	}
	#datadiv table {
		max-width: 100%;
	}
}