body,html { padding:0px;margin:0px;background:dimgray;  }
.nomContainer{word-break:break-word;}
.cursor-pointer { cursor:pointer; }

.text-link { color: #007bff !important; cursor:pointer; }
.text-link:hover { cursor:pointer; }

.container, .container-fluid { 
	background:white; 
	padding:0px;
	box-shadow:2px 3px 24px;
}
.container { max-width:1160px; }
#navBar { position:sticky; top:0; z-index:99; }
.buttonIcon {
	background: none;
	border: 0px;
	outline: 0px;
	display:block;
	cursor: pointer;
}
.buttonIcon:focus {
	border: 0px;
	outline: none;
}

.addButton {

    border: 1px solid #4f7dfa;
    background: white;
    color: #4f7dfa;
    font-size: .8rem;
    font-weight: bold;
}

.fullHeight { height:100%; }

#loginArea {
	width:95%;
	max-width:512px;
	padding:90px; 
	border: 1px solid lightgray; 
	border-radius:5px;
	margin: 0 auto;
	box-shadow:0px 1px 4px lightgray;
}

h1,h2,h3,h4,h5 { line-height:1.2em; padding:0px; margin:0px;}
.masterBlaster h5 {  margin-bottom:.8rem;  } 

.table thead th { border-top:0px; }
#contentInner {
	padding:12px;
} 

.trash { color:#dc3545; font-size: .9rem; }
.add { color:#3ba03b; font-size: .9rem; }

.textAreaFacade {
	background:inherit;
	border:0px;
	outline:0px;
	cursor:pointer; 
	height:100%;
	resize:none
}
.textAreaFacade:hover {  
	border-radius:5px;
	background:rgb(250,250,250); 
}
textarea .textAreaFacade {
	height:1.5em;
}
.nav-pills { text-align:center; }


.camperNoteArea { 
	width: 220%; 
	height: 75%; 
	margin-bottom: 10px;
}

.singleLineTextarea {
	height: 36px;
}
@media (min-width: 576px) {
}


@media (min-width: 768px) {

}

@media (max-width:843px) {
	
}
@media (max-width:900px) { .noMobile { display:none !important; } }
@media (min-width:900px) {
	.mobileOnly { display:none; }
	.nav-pills { text-align:left; }
}

@media (max-width: 992px) {
	
}

@media (min-width: 992px) { 

	.camperNoteArea { width:auto;height:75%; }
}


@media (min-width: 979px) {
	ul.nav li.dropdown:hover > ul.dropdown-menu {
		display: block;
	}
}

@media (min-width: 1200px) { 


}    

 
#iconShelf { 
  position: fixed;
  right: 1%;
  bottom: 1%;
  height: 32px;
  width: 32px;
}   
#snackBar {
  visibility: hidden;
  min-width: 250px; 
  color: black;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 101;
  left: 20%;
  right:20%;
  top: 30px;
  font-size: 17px;
  font-weight:300;
  box-shadow: 0px 0px 10px rgba(0,0,0,.75);
  font-family:Helvetica; 
}

#snackBar.snackBarAnimation {
  visibility: visible;
  -webkit-animation: fadeInsnackBar	 0.5s, fadeOutsnackBar	 0.5s 2.5s;
  animation: fadeInsnackBar	 0.5s, fadeOutsnackBar	 0.5s 2.5s;
}

@-webkit-keyframes fadeInsnackBar	 {
  from {top: 0; opacity: 0;} 
  to {top: 30px; opacity: 1;}
}

@keyframes fadeInsnackBar	 {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadeOutsnackBar	 {
  from {top: 30px; opacity: 1;} 
  to {top: 0; opacity: 0;}
}

@keyframes fadeOutsnackBar	 {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}



.tooltip {
  position: relative;
  display: inline-block; 
  opacity:1;
  z-index:1;
  cursor:help;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  
  
  box-shadow: 0px 0px 10px rgba(0,0,0,.75);
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

#secretPixel:link {
	color: dimgray;
}

/*

.loader,
.loader:before,
.loader:after {
  background: #ffffff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  color: black;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}*/
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}


.loader2 {
  color: official;
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.loader2 div {
  transform-origin: 32px 32px;
  animation: loader2 1.2s linear infinite;
}
.loader2 div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 29px;
  width: 5px;
  height: 14px;
  border-radius: 20%;
  background: #fff;
}
.loader2 div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.loader2 div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.loader2 div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.loader2 div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.loader2 div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.loader2 div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.loader2 div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.loader2 div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.loader2 div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.loader2 div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.loader2 div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.loader2 div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes loader2 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#iconShelf { 
  position: fixed;
  right: 1%;
  bottom: 1%;
  height: 32px;
  width: 32px;
  z-index:90;
  }  
  .egg,.egg:after{border-radius:50%;width:24px;height:32px;margin-top:-2px;box-shadow:0px 0px 5px rgba(0,0,0,.75);}.egg{background:white;font-size:10px;position:relative;border-top:1.1em solid rgba(255,255,255,.2);border-right:1.1em solid rgba(255,255,255,.2);border-bottom:1.1em solid rgba(255,255,255,.2);border-left:1.1em solid #fff;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
  .egg:before,.egg:after{content:none;}
  
  
  
  
			body,html { /*overflow-x:hidden;*/ background:white; }
			
			.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12  { padding: 0px; }
			.pRow { padding-left: 15px; padding-right:15px; }

			.container {
				width:100vw;
				max-width:100%; /* <- scrollbar fix */
				margin:0px; 
				display:flex;
				box-shadow: 0px 0px;
			}

			.paddedLand { padding: 12px; }

			.row { margin:0px; } /* EXPERIMENTAL */

			#navBar {

				height:100vh;
				/*flex-basis:18%;*/
				/*width:18%;*/

				width: 251px;

				margin:0px;
				padding:12px;
				padding-top:4px;
				box-shadow: 5px 0px 5px rgba(0,0,0,.15);
				/*margin-right: .5%;*/
				position:sticky;

				background:#222c3c; 

				flex-shrink:0;
			}
			#navBar::-webkit-scrollbar { display:none; }

			#contentInner {

			/*	max-width:100%;
				min-width:75%;
				flex-basis:80%;*/
				flex-grow:1;
				padding: 0px;
				/*margin-left:1em;*/
			}
			.collapse {
				color:inherit;
				/*bugger off linter. */
			}
			/*.dropdown-toggle::after { display:none; content:""; }*/
			.navbar-nav .dropdown-menu { 
				position: relative;
				float: none;
				display: block !important;
				border: 0px;
				margin: 0px;
				padding: 0px; 
			}
			nav .dropdown-item,.logoutLink { font-size:15px; color: #b7c0cd; }
			.dropdown-item.active:hover, .dropdown-item.active{background:#1d2531; box-shadow:inset 3px 0 0 0 #00a8ff}

			nav .dropdown-item:hover { color:white; background:none; }

			a.nav-link.dropdown-toggle{color:white;}
			.dropdown-divider{border-top:0px;}

			.nav-item.dropdown.show { overflow:visible;height:auto; }
			.nav-item.dropdown { overflow:hidden; }
			nav .dropdown-menu.show { 
				position:relative !important; 
				transform:none !important;
			}
			.navbar-brand{color:white;margin-top:10px;}
			.dropdownLinks.inactive { display:none; }
			/*#chillBar { width:100vw; background:#262626;height:30px; }*/

			.locationAndQR { margin:10px;display:flex;align-items:center; }
			.locationAndQR a { padding: 12px; }

			#pageHeaderRow {
				position: -webkit-sticky;
				position: sticky;
				top: 0px;
				background: white;
				z-index: 2;
				padding: 12px;
				padding-bottom:0px;
				margin-top: -12px;
				padding-top: 12px;
				align-items:baseline;
			}
			.col-md-2 .nav.nav-pills.row { position:sticky; top:12px; background: white;}

			.navbar-toggler { display:none; }
			
			.navbar-brand {
				font-family:'Quicksand', Sans-serif;
			}
			#expandon{ display:none; height:100%; align-items: flex-end; }

			.profileTab { padding:12px; padding-top:0px;}

			.nav.nav-pills.row, .nav.nav-pills.row.pillCup { border-right:1px solid lightgray;vertical-align:top;padding: 12px; }

			#locationSelect { padding-left: .5em; }

			.nav-pills .nav-link { border-radius: 0px; }
			.nav-pills a.nav-link:hover { background: #007bff0f; }
			.nav-pills a.nav-link.active:hover { background: #007bff; }

			
			/*The container */
			.masterBlaster { display:flex; flex-direction: row; flex-wrap: wrap; flex-flow: wrap; justify-content: space-between; padding: 12px; }

			/*The page title */
			.masterBlaster>h2 { display:block; flex-basis: 100%; padding-bottom: 1rem; margin-bottom:1rem; border-bottom: 1px solid rgba(0,0,0,.1); }

			/* The Page Links */
			.submarine { display: block; flex-basis: 12%; }
			.submarine a.active { background:#007bff; color:white; }
			.submarine a.active:hover { background:#007bff; color: white; }
			.submarine a {display:block; padding: .5rem 1rem; color:#007bff; text-decoration: none; background-color: transparent;}
			.submarine a:hover { color:#0056b3; background: #007bff0f; }

			/* The individual sub-pages */
			.subPages { display:flex; flex-grow: .85; flex-basis: 80%; padding: 12px; }

			.profileTab { 
				
				width: 960px;
				max-width: 100%;
				margin-right: auto;
				margin-left: 2rem;
			}
			.profileTab h3 { display:block; margin-bottom: 14px; } 

			.rLabel { display: none; }

			
			[data-birthday="true"] [data-jbui-name="name"]:after {
				content: ' 🧁';
				text-decoration: none;
				opacity: .8;
				pointer-events: none;
			}

			/* Rene's green dot */
			[data-checkin-direction="in"] .checkinCheckoutPlate:before {
				position: absolute;
				display: block; 
				width: 12px;
				height: 12px;
				border-radius: 43px;
				content: ' ';
				background: #4CAF50;
				overflow: hidden;
				margin-left: -1.5rem;
				margin-top: .6rem; 
			}

			@media only screen and (max-width: 1447px) {
					
				.profileTab { 
					
					width: 100%;
					
					margin-right: auto;
					margin-left: auto;
				}
			} 
			@media only screen and (min-width: 1201px) {
				.submarine { 
					height:-moz-fit-content; 
					height: fit-content; 
					position:sticky; 
					top: 83px; 
					max-height: calc(100vh - 83px); 
				}
				.curriculum #project-selector { display:none; }
			} 

			@media only screen and (max-width: 1200px) {

				.curriculum #project-selector { display:block; }
				.curriculum b, .curriculum br, .curriculum a { display:none; }

				.masterBlaster>h2 { flex-basis: auto; flex-shrink: 1; margin-bottom: 0px; padding-bottom:0px; border-bottom:0px; }
				.submarine { flex-basis: auto; flex-grow: 1; display:flex; justify-content: flex-end;
					align-items: center; }
					.submarine select { margin-left:.5rem; }
				.subPages { flex-basis:100%; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.1); }
			}
			@media only screen and (max-width:900px) {
				.navbar-brand { margin-top:0px; }

				body>.container { flex-direction:column; /*overflow-x: hidden;*/ }	
				#navBar { height:50px; max-height: 50px; min-height:50px; width: 100%; overflow: hidden; transition: height .25s ease-out;resize:none; }
				.navbar-toggler { display:inline; float:right; color:white; }
				.col-md-2 .nav.nav-pills.row {top:0px;position:relative;}
				#pageHeaderRow{top:50px;/* margin-left:-12px;*//*width:100vw;*/}
				#loginArea {box-shadow:none; border:0px; margin:0px; width:auto; padding:0px;}

				.rosterRow { width:100%; padding:0px; margin: 0px; margin-bottom:2px; }
				.rosterRow .col-5, .rosterRow .col-7, .rosterRow .col-6 { padding:0px;  }
				.rosterRow textarea { width: 90vw; }


				#pageHeaderRow h2 { font-size: 26px; }
				#filterBox {height:calc(1.8125rem + 2px); }

				
				.profileTab { padding:0px; }

				#contentInner { margin-left:0px; }

				div.subPages { margin-top: 0px; }
				.masterBlaster { padding: 0px;  }
				.submarine { padding:0px 12px; background:white; z-index:2; position:sticky; top:50px; /*box-shadow: 3px 3px 3px rgba(0,0,0,.1);*/}
				.masterBlaster>h2 { padding:0px 12px; background:white; z-index:2; position:sticky; top:50spx; /*box-shadow: 3px 3px 3px rgba(0,0,0,.1);*/ display:none; }
			

				.rLabel { font-weight: 500; display: inline; }

				.noMobile { display: none; }
				
			}
			
			@media only screen and (max-width: 450px) {
				.masterBlaster>h2 {font-size:1.4em;display:none;}
			}

			@media only screen and (min-width:901px) {
				#navBar {
					height:100vh !important; max-height:100vh !important;overflow:auto;z-index:0;
					scrollbar-width:thin;
				}
				#navBar:scrollBar { width:1px; }
				.navbar-brand {
					display:block;
					text-align:center;
				}
			}