/* https://www.w3schools.com/colors/colors_mixer.asp rbg=0,66,37 */
:root {
	--gz-color:#004225;
	--gz-color-900:#00331d;
	--gz-color-800:#00663a;
	--gz-color-700:#009957;
	--gz-color-600:#004225;
	--gz-color-500:#00ff91;
	--gz-color-400:#33ffa7;
	--gz-color-300:#66ffbd;
	--gz-color-200:#99ffd3;
	--gz-color-100:#ccffe9;
	
	--gz-grey-900:#0d4b30;
	--gz-grey-800:#265e46;
	--gz-grey-700:#40715c;
	--gz-grey-600:#598471;
	--gz-grey-500:#739787;
	--gz-grey-400:#8caa9d;
	--gz-grey-300:#a6bdb3;
	--gz-grey-200:#bfd0c8;
	--gz-grey-100:#d9e3de;
	
	--gz-red-900:#1a3b21;
	--gz-red-800:#33351e;
	--gz-red-700:#4c2e1a;
	--gz-red-600:#662816;
	--gz-red-500:#802112;
	--gz-red-400:#991a0f;
	--gz-red-300:#b2140b;
	--gz-red-200:#cc0d07;
	--gz-red-100:#e60704;
	
	--gz-blue-900:#003b3b;
	--gz-blue-800:#003551;
	--gz-blue-700:#002e66;
	--gz-blue-600:#00287c;
	--gz-blue-500:#002192;
	--gz-blue-400:#001aa8;
	--gz-blue-300:#0014be;
	--gz-blue-200:#000dd3;
	--gz-blue-100:#0007e9;

	--gz-cyan-900:#00553b;
	--gz-cyan-800:#006851;
	--gz-cyan-700:#007b66;
	--gz-cyan-600:#008e7c;
	--gz-cyan-500:#00a092;
	--gz-cyan-400:#00b3a8;
	--gz-cyan-300:#00c6be;
	--gz-cyan-200:#00d9d3;
	--gz-cyan-100:#00ece9;
	
	--gz-yellow-900:#1a5521;
	--gz-yellow-800:#33681e;
	--gz-yellow-700:#4c7b1a;
	--gz-yellow-600:#668e16;
	--gz-yellow-500:#80a012;
	--gz-yellow-400:#99b30f;
	--gz-yellow-300:#b2c60b;
	--gz-yellow-200:#ccd907;
	--gz-yellow-100:#e6ec04;
/*
	template substitution
*/
	--bs-btn-active-border-color:#FFFFFF;
}

html, body { min-height:100% !important; height:100%; font-family:"Times New Roman"; overflow:hidden;}
#body-content {
/*
    max-height: calc(100% - 100px);
    margin-top: 58px;
    overflow-y: auto;
*/
    padding: 0px;
}

* { border-radius:0 !important; }
.row { margin:0; padding:0; } /* overflow h-scroll with w-100 page formatting */

.text-fit{
    word-wrap: break-word;
}

.modal.fade .modal-dialog {
  transition: transform 0.1s ease-in;
}

/* https://masonry.desandro.com/layout */

.grid-item {width:240px; margin:0; padding:0; }
/*
.grid-item {float:left; width:300px; margin:0; padding:0; }
.grid-item {float:left; width:300px; height:350px;}
.grid-item { float:left; width:80px; height:60px; border:2px solid hsla(0,0%,0%,0.5); }
.grid-item--width2 { width:160px; }
.grid-item--height2 { height:140px; }
*/

pre, .pre-wrap {
	white-space:pre-wrap;       /* Since CSS 2.1 */
	white-space:-moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space:-pre-wrap;      /* Opera 4-6 */
	white-space:-o-pre-wrap;    /* Opera 7 */
	word-wrap:break-word;       /* Internet Explorer 5.5+ */
	font-family:var($font-family-base);
}

/* accordion settings */
.accordion {
    --bs-accordion-bg: var(--bs-gray-100);
    --bs-accordion-btn-bg: var--bs-gray-100);
	--bs-accordion-active-color: var(--bs-white);
	--bs-accordion-active-bg: var(--bs-gray-400);
	--bs-accordion-body-padding-x: 0px;
	--bs-accordion-body-padding-y: 5px;
}

.accordion-button:focus{
  border-color: var(--gz-color);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px rgba(0, 42, 25, 0.6);
}
.container {
	padding-left: 0px;
	padding-right: 0px;
}

select:focus,
.form-control:focus {
  border-color: var(--gz-color);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 1px rgba(0, 42, 25, 0.6);
}

#page_nav {
  border-color: var(--gz-color);
}
.border-dark-gz{ border-color: var(--gz-color)!important;}

.nav-link{ color: var(--gz-color);}
.nav-link:hover{
	color: var(--gz-yellow-300)!important;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 1px rgba(0, 42, 25, 0.6);
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
	background-color:var(--gz-color);
}

.link-primary{ color: var(--gz-color)!important;}
.link-dark{ color: var(--bs-dark)!important;}

/* removes accordion button for empty accordion body */
.remove-accordion-button.accordion-button::after{ background:var(--bs-accordion-btn-bg); }

/* removes dropdows arrow for search input */
.selectize-control.single .selectize-input::after{ border:none; border-style:none; content:none; }
.navbar .dropdown-menu:after{ display:none;}

.html5-qrcode-element {font-size:x-large; margin-top:10px;}

/* gigzantic specific theme applied color changes */
.text-dark-gz, .btn-text-dark-gz { color:var(--gz-color); }
.bg-dark-gz, .btn-bg-dark-gz { background-color:var(--gz-color); }
.text-bg-dark-gz, .btn-dark-gz, .btn-text-bg-dark-gz { color:#FFFFFF; background-color:var(--gz-color); }

.bg-red-gz { background-color:var(--gz-red-600); }

.btn-dark-gz:hover, .btn-text-bg-dark-gz:hover { color:#FFFFFF; background-color:var(--gz-color-800); }
.btn-dark-gz:focus, .btn-text-bg-dark-gz:focus { color:#FFFFFF; background-color:var(--gz-color-800); }
.btn-dark-gz:active, .btn-text-bg-dark-gz:active { color:#FFFFFF; background-color:var(--gz-color-800); }

.text-primary { color:var(--gz-yellow-700) !important; }
.bg-primary, .text-bg-primary { background-color:var(--gz-yellow-700) !important; }
.btn-primary { color:#FFFFFF !important; background-color:var(--gz-yellow-400); border-color:var(--gz-yellow-400); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	background-color:var(--gz-yellow-300);
	border-color:var(--gz-yellow-300) !important;
}

.btn-outline-primary {
	color:#000000;
	border-color:var(--gz-grey-700) !important;
}
.btn-outline-secondary {
	color:#000000;
	border-color:var(--gz-grey-500) !important;
}
.btn-check+.btn:hover{
	color:#FFFFFF;
	background-color:var(--gz-yellow-400) !important;
}
.btn-check:checked+.btn, .btn-check:checked, .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
	color:#FFFFFF !important;
	background-color:var(--gz-yellow-700) !important;
	border-color:var(--gz-grey-700) !important;
}

.form-check-input:checked {
  background-color: var(--gz-color) !important;
  border-color: var(--gz-yellow-500) !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 .25rem rgba(0, 42, 25, .25);
  border-color: var(--gz-grey-100) !important;
}
.form-check-input:disabled {
  background-color: var(--gz-grey-700) !important;
  border-color: #000000 !important;
}

.form-switch .form-check-input {
  color: #FFFFFF !important;
  background-color: var(--gz-yellow-700) !important;
  border-color: var(--gz-yellow-800) !important;
}
.form-switch .form-check-input:checked {
  color: #FFFFFF;
  background-color: var(--gz-yellow-400);
  border-color: var(--gz-yellow-600);
}
.form-switch .form-check-input:focus {
  box-shadow: 0 0 2px 2px var(--gz-yellow-700);
  border-color: var(--gz-yellow-700);
}

.text-bg-light-gz { color:var(--gz-color); background-color:#FFFFFF; }
.logo-gz{
	color:#FFFFFF;
	outline: 0;
	vertical-align: baseline;
	text-decoration: none;
	background-repeat: no-repeat;
	font: 50px/62px "Tahoma",sans-serif;
	margin: 0px;
	padding: 0px;
	text-indent: 0px;
}
.logo-sm-gz {font-size:12px;}
nav {--bs-breadcrumb-divider: none;}

.imagesizer-gz { width:150px; height:150px; }

::-webkit-scrollbar {
	width: 20px;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1; 
    border-radius: 0px;
}

/* background-color: transparent; */
::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background-color: #d6dee1;
	border: 7px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #a8bbbf;
}

.scrollbar-off::-webkit-scrollbar {
	width: 0px !important;
}

.container {
  max-width: 1024px; /* or 950px */
}

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1024px; /* or 950px */
}

/* adjustment for specific screen size */
@media screen and (min-width: 1024px) {
    someDivHeight{
        height:250px;
    }
}



/* https://codepen.io/sbchittenden/pen/YNVVgP */
/*
.page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}
.content-wrapper {
  display: flex;
  width: 80vw;
  min-height: 80vh;
  position: relative;
}

input {
  display: none;
}

#section-1, #section-2 {
  display: flex;
  width: 80vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#section-1 {
  opacity: 1;
  z-index: 5;
  transition: transform 0.5s, opacity 0.5s;
}

#section-2 {
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
}

.image-container {
  width: 50%;
  height: 100%;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

img {
	flex-shrink: 0;
	min-width: 100%;
	min-height: 100%;
}

.info-container {
  width: 50%;
  height: 100%;
  background-color: lightsalmon;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#section-2 .image-container {
  opacity: 0;
  transform: translateY(2em);
  transition: all 1s 0.7s;
}
#section-2 .info-container {
  opacity: 0;
  transform: translateY(-2em);
  transition: all 1s 0.7s;
}

label {
  display: block;
  border: solid 2px black;
  padding: 1em 2em;
  border-radius: 5px;
  cursor: pointer;
}

#toggle2:checked ~ #section-2 {
  opacity: 1;
}

#toggle2:checked ~ #section-1 {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

#toggle2:checked ~ #section-2 .image-container,
#toggle2:checked ~ #section-2 .info-container {
  opacity: 1;
  transform: translateY(0);
}

#toggle3:checked ~ #section-1 {
  transition: transform 0.5s 0.5s, opacity 0.5s 0.5s;
}

#toggle3:checked ~ #section-2 .image-container,
#toggle3:checked ~ #section-2 .info-container {
  transition: transform 0.5s, opacity 0.5s;
}

<div class="page-wrapper">
	<div class="content-wrapper">
		<input type="radio" name="toggle" id="toggle1">
		<input type="radio" name="toggle" id="toggle2">
		<input type="radio" name="toggle" id="toggle3">
		<section id="section-1">
			<div class="image-container">
				<img src="/cmn/img/evt/ev8_w250_h250.png" alt="">
			</div>
			<div class="info-container">
				<h1>Hello.</h1>
				<label for="toggle2">Click Me.</label>
			</div>
		</section>
		<section id="section-2">
			<div class="image-container">
				<img src="/cmn/img/evt/ev2_w250_h250.png" alt="">
			</div>
			<div class="info-container">
				<h1>Hello Again.</h1>
				<label for="toggle3">Click Me.</label>
			</div>
		</section>
	</div>
</div>
*/