/* A3MG: p3sdk 3Play overrides to fix conflict with Bootstrap style sheets*/

.p3sdk-container {
	font-size: 11px !important;
}

.p3sdk-audio-description-component {
	max-height: 40px !important;
	border-bottom: 0px !important;
}
/* End A3MG */

body {
	background-color: rgba(0,0,0,1.0);
	color: rgba(255,255,255,1.00);
	font-family: Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
}

#transectMap > svg {
	width: 100%!important;
	height: 100%!important;
	/*filter: drop-shadow(0 0 2px  black);*/
}

.flipX {
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.img-fluid {
	-webkit-touch-callout: none;
}

#box:focus {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 1.0)
}


/* Global Tab Focus */

*:focus {
	outline-color: #FFF;
	outline-style: dotted;
	outline-width: 1px;
	overflow: visible;
}

/* Custom Tab Focus */

.navbar-nav > .btn:focus {
	color: unset;
	background-color: unset;
	text-decoration: underline;
	border-color: #FFF;
	/*box-shadow: 0 0 0 2px rgba(0, 0, 0, .8)*/
}

.navbar-nav > .btn:hover {
	color: unset;
	background-color: unset;
}

.btn:hover, .btn:focus {
	text-decoration: underline;
}

.btn:focus, .btn.active:focus {
	outline: 0;
	border-color: #000;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .8)
}

.btn.active:hover, .btn.active:focus {
	color: #000;
	background-color: #FFF;
	text-decoration: underline;
}

.btn-counted {
	background-color: white;
	box-shadow: 0 0px 0px #FFF, 0 0px 0px 2px #b20000;
}

.btn-counted:hover, .btn-counted:focus {
	background-color: #ffdbdb!important;
	box-shadow: 0 0px 0px #FFF, 0 0px 0px 2px #b20000!important;
}

.btn-count:hover, .btn-count:focus {
	box-shadow: 0 0px 0px #FFF, 0 0px 0px 2px #000;
	border-color: #FFF;
	/*background-color: white;*/
}

.previously-counted {
	opacity: .64;
}

.btn-link {
	color: #333;
	text-decoration: none;
	padding: 3px;
	margin: -3px;
}

.btn-link-reset {
	color: #CCC;
	text-decoration: none;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: -4px;
	margin-bottom: -4px;
}

.btn-link-reset-dark {
	color: #666;
	text-decoration: none;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: -4px;
	margin-bottom: -4px;
}

.btn-link:hover {
	color: #000;
}

.btn-link:focus {
	color: #000;
}

.dropdown-menu {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	min-width: 70px;
}

.dropdown-item {
	font-size: .8rem;
}

.dropdown-item:focus, .dropdown-item:hover {
	border-radius: var(--bs-dropdown-border-radius);
}

.form-switch .form-check-input:focus {
	border-color: #FFF;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .8)
}

a.icon:focus {
	border-color: #FFF;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .8)
}

.MathJax:focus {
	outline: 0px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 1.0)
}

.oi {
	position: relative;
	top: 0px; /* was 1px */
	display: inline-block;
	speak: none;
	font-family: 'Icons';
	font-style: normal;
	font-weight: normal;
	  /* line-height: 1; override button height change */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

span.underline {
	text-decoration: underline;
}

.ratio-hype::before {
	padding-top: 74% /* Set this to the aspect ratio of the Hype actual pixel size */
}

.ratio-16x9::before {
	padding-top: calc(56.25% + 40px); /* 16x9 Plus 3Play height */
}

p {
	font-size: 1.0rem;
	font-weight: normal;
}

h1, .h1 {
	font-size: 1.2rem;
	font-weight: bold;
}

h2, .h2 {
	font-size: 1.1rem;
	font-weight: bold;
}

h3, .h3 {
	font-size: 1.0rem;
	font-weight: bold;
}

.no-bullets {
    list-style-type: none;
}

.no-bullets-credits {
	list-style-type: none;
	padding-left: 0em;
}

legend {
	font-size: 1.0rem;
	font-weight: bold;
}

.figure-caption {
	color: #333;
}

.card-header {
	font-size: 1.0rem;
	font-weight: bold;
}

.page-link {
	color: #f2f2f2;
	background-color: rgba(0, 0, 0, 0.36);
	border: 1px solid #dee2e6
}

.page-link.roundright {
	border-top-right-radius: .25rem !important;
	border-bottom-right-radius: .25rem !important
}

.page-link:hover, .page-link:focus {
	color: black;
	background-color: #e9ecef;
	border-color: #dee2e6
}

.page-link.disabled {
	color: #949799 !important;
	background-color: rgba(0, 0, 0, 0.36);
	border: 1px solid #949799
}

.page-link.disabled:hover {
	color: #949799 !important;
	background-color: rgba(0, 0, 0, 0.36);
	border: 1px solid #949799
}

/* Custom Top
----------------------------------------------- */

.top-53, .top-53-open {
	top: 53%!important;
}

.top-47, .top-47-open {
	top: 47%!important;
}

/* Negative TOP Margins
----------------------------------------------- */

.mt-n1 {
	margin-top: -0.25rem !important;
}

.mt-n2 {
	margin-top: -0.5rem !important;
}

.mt-n3 {
	margin-top: -1rem !important;
}

.mt-n4 {
	margin-top: -1.25rem !important;
}

.mt-n5 {
	margin-top: -1.5rem !important;
}


/* Sidebar
----------------------------------------------- */

#wrapper, #wrapper2 {
	overflow-x: hidden;
}

#sidebar-wrapper, #sidebar-wrapper2 {
	min-height: calc(100vh - 114px);
	min-width: 300px;
	width: 300px;
	margin-left: 0;
	transition: margin 0.25s ease-out;
}

#page-content-wrapper, #page-content-wrapper2 {
	min-width: calc(100vw - 300px);
}

body.sb-sidenav-toggled #wrapper #sidebar-wrapper, body.sb-sidenav-toggled #wrapper2 #sidebar-wrapper2 {
	margin-left: -300px;
}

.scrollarea {
	overflow-y: auto;
	overflow-x: hidden;
}

/* hide close when burger shown */

.sidebar-close.collapsed .close-icon {
	display: none;
}

.sidebar-close:not(.collapsed) .navbar-toggler-icon {
	display: inline;
}

.sidebar-toggle {
	position: relative;
	z-index: 999;
	top: -50px;
	left: 290px;
	background-color: #c1e5b5;
	opacity: .8;
	width: 38px;
	font-size: 1.3em;
}

.sidebar-toggle:hover {
	background-color: #c1e5b5;
	opacity: 1.0;
	color: #000;
	border-color: #c1e5b5;
	outline-color: #000;
}

.sidebar-toggle:focus {
	background-color: #c1e5b5;
	opacity: 1.0;
	color: #000;
	border-color: #000;
}

.bg-sidebar-header {
	background-color: #c1e5b5;
}

.bg-sidebar-body {
	background-color: #181a15;
	box-shadow: 0 0 9px -2px rgba(0,0,0,0.8);
}

/* Custom Colors
----------------------------------------------- */

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	color: #000;
}

.nav-link {
	color: #666;
}

.nav-link:hover, .nav-link:focus {
	color: #333;
}

.bg-landscape {
	background-color: #b2b596;
}

.bg-landscape-cardbody {
	background-color: #fcfcf7;
}

.bg-transect {
	background-color: #dde0b6;
}

.bg-transect-cardbody {
	background-color: #fcfcf7;
}

.btn.disabled, .btn:disabled {
	opacity: 1.0 !important;
}

.btn-light:disabled, .btn-secondary:disabled {
	color: #CCC;
	background-color: #333;
	border-color: #666;
}

a.light-links {
	color: #e2e2e2;
	font-weight: bold;
	text-decoration: underline;
}

a.light-links:hover {
	color: #fff;
}

a.head-links {
	color: #212529;
	text-decoration: none;
}

a.head-links:hover {
	color: #000;
	text-decoration: underline;
}

a.head-links:focus {
	outline-color: #000;
	outline-style: dotted;
	outline-width: 1px;
	overflow: visible;
	text-decoration: underline;
}

.border {
	border: 1px solid #999!important;
}

.btn-outline-warning {
	color: #967100;
	border-color: #967100;
}

.btn-outline-warning:disabled {
	color: #967100;
}

.btn-outline-info {
	color: #00829c;
	border-color: #00829c;
}

.btn-outline-info:disabled {
	color: #00829c;
}

.form-control:focus {
	box-shadow: 0 0 0 .2rem rgba(110, 150, 214, 1.0);
}

.form-control:hover:enabled {
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .8);
}

.form-control:disabled, .form-control[readonly] {
	background-color: #f5f5f5;
}

.invalid-feedback {
	color: #b3424d;
}

.valid-feedback {
	color: #187a4d;
}

table {
	font-size: .8rem;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
	/* display: none; <- Crashes Chrome on hover */
	-webkit-appearance: none;
	margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type="number"] {
	-moz-appearance: textfield;
}

.cursor-help {
	cursor: help;
}

#measureLabels, #transectMap {
	cursor: crosshair;
}

#box {
	cursor: move;
}

#drawShadow1 > div, #drawShadow2 > div, #drawShadow3 > div > div {
	/*OLD jsDraw2D shadows */
}


/* Calculator
----------------------------------------------- */

#panel1, #panel2, #panel3, #panel4, #panel5 {
	text-align: right;
	width: 142px;
	height: 32px;
	font-size: 15px;
	background-color: white;
	margin-bottom: 4px;
	color: #000;
}

.btn-single {
	margin-bottom: 2px;
	margin-left: 0px;
	width: 32px;
	height: 30px;
	font-size: 13px;
}

.btn-double {
	margin-bottom: 2px;
	margin-left: 0px;
	width: 68px;
	height: 30px;
	margin-top: 0px;
	margin-right: 0px;
	font-size: 13px;
}

/* TIPPY TOOLTIPS
----------------------------------------------- */

.tippy-box {
	font-weight: normal;
}


/* Bootstrap TOOLTIPS and POPOVERS
----------------------------------------------- */

.tooltip-inner {
	color: #1d2822;
	text-align: left;
	padding: 1em;
	max-width: 300px;
	background-color: #fff;
	border: 2px solid #55524b;
	border-radius: 6px;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
	border-top-color: #55524b;
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before {
	border-bottom-color: #55524b;
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before {
	border-right-color: #55524b;
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before {
	border-left-color: #55524b;
}

.tooltip.show {
	opacity: 1.0;
}

.popover {
	min-width: 500px;
}

/* Accordion Custom
----------------------------------------------- */

.accordion-button {
	color: #000;
	background-color: #e6e6e6;
}

.accordion-button:not(.collapsed) {
	color: #000;
	background-color: #e6e6e6;
}

.accordion-button:focus {
	box-shadow: 0 0 0 .25rem rgba(0,0,0,.5);
}


/* Modalx Custom
----------------------------------------------- */

.btn-close:focus {
	box-shadow: 0 0 0 .25rem rgba(0,0,0,.5);
}

h2 .accordion-button {
	font-size: 1.3rem;
	font-weight: bold;
	color: #333;
}

h2.modalx {
	font-size: 1.3rem;
	font-weight: bold;
	color: #000;
}

h3.modalx {
	font-size: 1.2rem;
	font-weight: bold;
	color: #000;
}

p.modalx, ul.modalx {
	font-size: 1.1rem;
	font-weight: normal;
	color: #000;
}

.modalx.small {
	font-size: .875em;
}

li.instructions {
	margin-bottom: .6rem!important; /*Bullet Text Extra Bottom Margin*/
}

a.modal-links {
	color: #000;
	font-weight: bold;
	text-decoration: underline;
}

a.modal-links:hover {
	color: #333;
	text-decoration: none;
}

a.modal-links:focus {
	color: #333;
	text-decoration: none;
	outline: 2px solid #000;
}


/* Nav bar styling
----------------------------------------------- */

.navbar {
	background-color: #141412;
	padding: 0;
}

.nav-item.active {
	background-image: url(../images/active-nav.svg);
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: 18px auto;
    /*background-color: #333;*/
}

.navbar .navbar-brand {
	color: #ffed8a;
	font-weight: bold;
	text-align: center;
	padding: 6px 14px;
	line-height: 42px;
    /*left: 76px;*/
    /* [disabled]position: relative; */
}

.navbar-brand {
	/* [disabled]padding-right: 0; */
	margin-right: 0;
	color: #ffed8a;
	/*background-image: url(../images/sunshape_yellow.png);
    background-repeat: no-repeat;
    background-size: 45px auto;
    background-position: 60px 50%;
    padding-left: 112px !important; */
}

.navbar-brand.active {
	color: #ffed8a;
}

.navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
	color: #ffed8a;
	font-weight: bold;
}

.navbar .navbar-brand.active:hover, .navbar .navbar-brand.active:focus {
	color: #FFF;
	text-decoration: underline;
}

.navbar .navbar-text {
	color: #d5f0e2;
}

.navbar .navbar-text a {
	color: #003333;
}

.navbar .navbar-text a:hover, .navbar .navbar-text a:focus {
	color: #003333;
	text-decoration: underline;
}

.navbar .navbar-nav .nav-link {
	color: #ffed8a;
	border-radius: 0;
	margin: 0;
	/*  margin: 0 0.25em;  */
	font-size: 1.2rem;
	padding-top: 15px;
	padding-bottom: 15px;
}

.nav-link.disabled {
	color: #adadad !important;
	pointer-events: auto !important;
	cursor: unset;
}

.nav-link:hover, .nav-link:focus {
	text-decoration: underline;
}

.nav-item {
	/*border-left: 1px solid #404847;*/
}

.navbar .navbar-nav .nav-link:not(.disabled):hover, .navbar .navbar-nav .nav-link:not(.disabled):focus {
	color: #FFFFFF;
}

.navbar .navbar-nav .nav-item.active .nav-link, .navbar .navbar-nav .nav-item.active .nav-link:hover, .navbar .navbar-nav .nav-item.active .nav-link:focus, .navbar .navbar-nav .nav-item.show .nav-link, .navbar .navbar-nav .nav-item.show .nav-link:hover, .navbar .navbar-nav .nav-item.show .nav-link:focus {
	color: #FFF;
	font-weight: bold;
}

.modal-xl {
	max-width: 900px !important;
}

.modal-header {
	background-color: #ffed8a;
}

.modal-title {
	font-weight: bold;
	color: #000;
	font-size: 1.3rem;
}

.close:hover, .close:focus {
	color: #000;
	background-color: #FFF;
	opacity: 1.0;
}

.footer-logo {
	padding-right: 14px;
	margin-top: 2px;
	float: right;
}

.navbar-toggler {
	background-color: #333;
	margin-right: 8px;
}

.navbar-toggler:hover {
	background-color: #444;
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 2px;
	color: rgba(255,255,255,.9);
}

.fixed-column-width-60 {
	width: 45px;
}

.row-pad-btm {
	padding: 12px 45px;
}

.row-pad {
	padding: 0 45px 12px;
}

.btm-row-pad {
	padding: 12px 45px;
}

/* Footer Navigation and Modals
----------------------------------------------- */

.footer {
	width: 100%;
    /*height: 60px; /* Set the fixed height of the footer here */
    /*line-height: 24px; /* Vertically center the text there */
	/*background-color: #222;*/
	background-color: #141412;
    
    /*color: #B4CABE;*/
}

.footer-item {
	text-align: center;
	margin-top: 18px;
	margin-bottom: 18px;
	padding-left: 15px;
	float: left;
}

.footer-item a {
	font-size: 16px;
	color: #ffed8a;
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
}

.footer-item a:hover {
	color: #FFF;
	text-decoration: underline;
}
/*.dropdown-item:hover {
    background-color: rgba(0,0,0,0.00);
	color: #FFF;
}*/

.page-next, .page-prev {
	position: fixed;
	top: 50%;
	z-index: 1;
	overflow: hidden;
	padding-top: 24px;
	padding-bottom: 24px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%)
}

.page-next a, .page-prev a {
	display: block;
	font: 0/0 a;
	color: transparent;
	text-shadow: none;
	border: 0;
	background-color: rgba(115,83,57,.45);
	background-repeat: no-repeat;
	position: absolute;
	transition-duration: .25s;
	transition-property: background-color;
	transition-timing-function: ease-in-out;
	will-change: background-color
}

.page-next a:focus, .page-next a:hover, .page-prev a:focus, .page-prev a:hover {
	background-color: rgba(115,83,57,.9)
}

.page-next a.is-disabled, .page-prev a.is-disabled {
	opacity: .33;
	cursor: default;
	background-color: rgba(51,51,51,.33)
}

.page-prev {
	left: 0
}

.page-next, .page-prev a {
	right: 0
}

.page-next a {
	left: 0;
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg)
}

.page-prev.btn.btn-secondary {
	border-radius: 0 8px 8px 0;
	border-style: none;
	background-color: rgba(120, 120, 120, 0.5);
}

.page-prev.btn.btn-secondary:hover {
	background-color: rgba(180, 180, 180, 0.5);
}

.page-next.btn.btn-secondary {
	border-radius: 8px 0 0 8px;
	border-style: none;
	background-color: rgba(120, 120, 120, 0.5);
}

.page-next.btn.btn-secondary:hover {
	background-color: rgba(180, 180, 180, 0.5);
}

.btn-secondary .oi.oi-chevron-left {
	font-size: 20px;
	top: 4px;
}

.btn-secondary .oi.oi-chevron-right {
	font-size: 20px;
	top: 4px;
}

.maplabels {
	font-size: 1.0rem;
}

.centerprompt {
	min-width: 276px;
	overflow: hidden;
}

.centerprompt2 {
	min-width: 260px;
	overflow: hidden;
}
  
  
  
  /* Sidebar small screens
----------------------------------------------- */

@media (max-width: 413px) {
	#sidebar-wrapper, #sidebar-wrapper2 {
		min-width: 244px;
		width: 244px;
	}
	

	
	body.sb-sidenav-toggled #wrapper #sidebar-wrapper, body.sb-sidenav-toggled #wrapper2 #sidebar-wrapper2 {
		margin-left: -244px;
	}
	
	.sidebar-toggle {
		top: -50px;
		left: 232px;
		width: 30px;
		height: 32px;
		font-size: .8em;
	}
	
	table {
		font-size: .6rem;
	}
}
  


@media (max-width: 575px) {
	
	#page-content-wrapper, #page-content-wrapper2 {
		min-width: 100%;
	}
	
	.footer-item a {
		font-size: 15px;
	}
	
	.footer-item {
		width: 100%;
		float: none;
		margin-bottom: 0px;
		padding-left: 0px;
	}
	
	.footer-logo {
		width: 100%;
		margin-bottom: 10px;
		padding-right: 0px;
		text-align: center;
	}
	
	h1, .h1 {
		font-size: 1.0rem;
	}
	
	.navbar-brand {
		font-size: 1.1rem;
	}

}


/* Drop action panel below map on narrow screens */

@media (max-width: 666px) {
	.top-53 {
		top: 116%!important;
	}
	
	.top-47 {
		top: 116%!important;
	}
}

/* Drop action panel below map on narrow screens with sidebar open */

@media (max-width: 888px) {
	.top-53-open {
		top: 113%!important;
	}
	
	.top-47-open {
		top: 113%!important;
	}
}

@media (min-width:768px) {
	
}

@media (max-width: 991px) {
	.maplabels {
		font-size: .7rem!important;
	}
}

@media (min-width: 991px) {
	
}

@media (max-width: 1199px) {
	.maplabels {
		font-size: .8rem;
	}
}

@media (min-width: 1199px) {
	
}