/*
base green: #316312
neon green: #39FF14
*/


.section2ZZZ {
	
	/*
	background-color: darkblue;
		*/

	height: 40px;
	
	/*transition: height 0.5s, visibility 0.5s linear;*/

	transform-origin: top center;
/*
	Turns out you can't mix transition and animation. Bummer.
		animation: scale-move 1.25s linear forwards;
		https://divtable.com/generator/
*/

	transition: height 2.5s, visibility 2.5s linear;
}


.hidden {
	/* Working, sort of */
	display: none !important;	 
	
	/*transition: height 0.5s, visibility 0.5s linear; */
}

.visible {
	/*display: table-row;*/
	/*transition: height 0.5s, visibility 0.5s linear;*/
	
	/*
	visibility: visible;
	height: 60px;
	overflow: visible;

	transition-timing-function: linear, step-end;
*/
}



.hideWithAnimation {
	animation: scale-hide 0.7s linear forwards;
}

.showWithAnimation {
	animation: scale-show 0.7s linear forwards;
}
/* Sick cool menu hide/display functionality */
.section2 {
	height: 40px;
	transition: height 0.5s, visibility 0.5s linear;
}


@keyframes scale-hide {
	0%   { 
		/*transform: translateY(0);*/
		transform: scaleY(1);
		}
	100% { 
		/*transform: translateY(-100%);*/
		transform: scaleY(0);
	}
}

@keyframes scale-show {
	0%   { 
		/*transform: translateY(0);*/
		transform: scaleY(0);
		}
	100% { 
		transform: scaleY(1);
	}
}



.hideWithTransition {	
/*	visibility: hidden;*/
	height: 0 !important;
	overflow: hidden !important;

/*	transition-timing-function: linear, step-end; */
  
	padding: 0px !important;
	margin: 0px;
    border: none;  
}

.showWithTransition {	
	/*visibility: visible;*/
	height: 40px !important;
	overflow: visible;

	transition-timing-function: linear, step-end;
  /*
	padding: 0px !important;
	margin: 0px;
    border: none;  
	*/
}



.divBackgroundSeparate {
/*
	background-image: url('../sun_small.png');
	background-repeat: no-repeat;
	background-position: top 52px left 230px;
*/
	/*
	background-color: rgba(0,0,0,0.0);
    background-blend-mode: lighten;
	*/

	opacity: 0.5;
	
	/*
	position:relative;
	top: 0px;
	left: 0px;
*/
}


.green {
	background-color: #5bb05b !important;
}

.grey {
	background-color: #F3F4FC !important;	
}


td {
	/*border: 1px solid lightgray;	*/
	/*background-color: black;*/
}
tr {
	/*border: 1px solid lightgray;*/
	/*background-color: darkgray;*/
}

.tRow {
	display: table-row;
	overflow: hidden;
	height: 40px;
	padding: 3px;	
}
.dtr {
	display: block;
	overflow: hidden;
	height: 40px;
	padding: 3px;
	/*border: 1px solid #777;*/
}

.dtc {
	white-space: nowrap;
	width: 140px;
}

.colStd2 {
	white-space: nowrap;
}

.dtc2 {
	width: 120px;
}

.dtcContainer {
	display: flex;
}

/*
.divBackgroundSeparate::before {
	content: "";
	position: absolute;
	background-image: url('../bg_city_no_sun_600.png');
	height: 300px;
	width: 600px;
	background-repeat: no-repeat;
	left: 0px;
	top: 0px;
	opacity: 1;
}
*/

/* .city, .neonCity replaced with .backgroundImageN */
.city {
	position:relative;	
	background-color: #316312;
	background-image: url('../bg_mountain_day.png');	
	height: 600px;
	width:600px;
	background-repeat: no-repeat;
	/* base green: #316312 */
}

.dragField {
	position:relative;	
	background-color: #CCC;
	background-image: url('../checkered2.png');	
	height: 300px;
	width: 300px;
	background-repeat: no-repeat;
	/* base green: #316312 */
}



.neonCity {
	position:relative;
	background-color: black;
	background-image: url('../bg_city_no_sun_600.png');
	height: 600px;
	width:600px;
	background-repeat: no-repeat;
}

.backgroundImage0 {
	position:relative;	
	background-color: #316312;
	background-image: url('../bg_mountain_day.png');	
	height: 600px;
	width:600px;
	background-repeat: no-repeat;
	/* base green: #316312 */
}

.backgroundImage1 {
	position:relative;	
	background-color: black;
	background-image: url('../bg_city_no_sun_600.png');
	height: 600px;
	width:600px;
	background-repeat: no-repeat;
}

.backgroundImage2 {
	position:relative;
	background-color: black;
	background-image: url('../2bg_city_no_sun_600.png');
	height: 600px;
	width:600px;
	background-repeat: no-repeat;
}

.backgroundImage3 {
	position:relative;
	background-color: black;
	background-image: url('../3bg_city_no_sun_600.png');
	height: 600px;
	width:600px;
	background-repeat: no-repeat;
}

.backgroundImage4 {
	position:relative;
	background-color: black;
	background-image: url('../4bg_city_no_sun_600.png');
	height: 600px;
	width:600px;
	background-repeat: no-repeat;
}


/*  Restore these if ::before doesn't work  	*/

.sun {
	position: relative; 
	display: flex;
	align-items: center;
	justify-content: center;
	height: 300px;
	width: 600px;
	background: red;
	display: none;
}
.sun::before {    
	
	/*background: var(--color);*/
	opacity: var(--opac);
	
	content: "";
	background-image: url('../sun_small.png');
	/*background-size: cover;*/
	position: absolute;
	/*background-position: top 52px left 230px;z-index:30;*/
	
	background-repeat: no-repeat;
	top: 52px;
	left: 230px;

	right: 200px;
	bottom: 122px;
}

.canvas {
/*	position: relative;*/
	height: 600px;
	width: 600px;	
}

.static {
  position: relative;
  color: lightgray;  
  font-size: 14pt;
  line-height: 0.9;
  text-align: center;	
}


/* sun orig

.sun {

	background-image: url('../sun_small.png'); 
	background-repeat: no-repeat;
	background-position: top 52px left 230px;z-index:30;
	opacity: 0.8;

	height: 300px;
	width: 600px;
}
*/


/*
.canvasTop,.canvasBottom{
    position:absolute; top:0px; left:0px;
    width:600px;
    height:600px;
}
*/


/* Old method
#wrapper{
    position:relative;
    width:600px;
    height:600px;
}

.wrapperClass{position:relative;}
.wrapperClass:after {
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:0px;
	height:600px;

	background-repeat: no-repeat;
	
	background-position: top 70px left 245px;
	
	
	
	background-position: center;
	z-index: 20;
	

	
	background:url(../sun_small.png);
		background:url(../sun_small.png) repeat-x 0 0;

	
	
	
	Use with on-top background image 
	 opacity: 0.5;
}

*/

.headerWide {	
	white-space: nowrap;
}


.divNoWrap {
	display: inline-block;
	white-space: nowrap;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
::selection {
  color: black;
  background: #F3F4FC;
}


.tblClass {
	height: 600px;
	position:absolute;
	left:620px;
	top:0px;
	width:auto;
	margin-top: 8px;		
}

.stdFont {
	font-family: 'Roboto';
	font-size: 12pt;
	color: lightgray;
}

.displayLabel {
	
	font-family: 'Roboto';
	font-size: 16pt;
	text-align: center;
    line-height: 2;
	background: #000;
	color: #DDD;
	/*
	margin-left: 15px;
	margin-right: 15px;
	*/
	width: 60px;
}

.button {
	font-family: 'Roboto';
	font-size: 12pt;
	box-shadow: 3px 3px 5px darkgray;
	text-align: center;
    line-height: 2;
	background-color: #F3F4FC;
	width: 100px;
	height: 30px;
	cursor: pointer;
	border-radius: 5px;
}

.smallButton {
	font-family: 'Roboto';
	font-size: 22pt;
	box-shadow: 3px 3px 5px darkgray;
	text-align: center;
    line-height: 1;
	background: #F3F4FC;
	width: 30px;
	height: 30px;
	cursor: pointer;
	border-radius: 15px;
}

.buttonWide {
	width: 200px;	
}


.arrow {
	font-size:20pt;
	line-height: 29px;
	width: 50px;
}
::selection {
  color: black;
  background: #F3F4FC;
}

.lbl {
	font-family: 'Roboto';
	font-size: 13pt;
	color: #DDD;
}

#tblControls {	
	/*border-spacing: 20px;*/
}

/*
.neonButton {
	color: transparent;		
	display: inline-block;
	margin-left: 40px;
	font-family: 'Roboto';
	font-size: 36px;		
	font-weight: bold;
	width: auto;
	background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
	-webkit-background-clip: text;
	
	border: 3px solid orange;
	border-radius: 15px;
	padding: 4px;
	cursor: pointer;
}
*/


.neonButtonOff {
    /*width: 200px;*/
    /*height: 50px;*/
    /*padding-top: 5px;*/
    /*position: absolute;*/
    /*left: -18px;*/
	overflow: hidden;
    text-align: center;		
	color: transparent;		
	display: inline-block;
	/*margin-left: 40px;*/
	font-family: 'Roboto';
	font-size: 36px;		
	font-weight: bold;
    /*margin-left: 5px;*/
	line-height: 45px;

	-webkit-background-clip: text;
	background-image: url('../bg_sungrad.png');
}


.neonButtonContainer2 {
	margin-left: -11px;	
}

.neonButtonContainer {

	overflow: hidden;
	width: 200px;
	height: 44px;
	border: 3px solid orange;
	border-radius: 15px;
/*	padding: 4px 8px 4px 8px; */
/*    margin-left: 24px;  */
	cursor: pointer;
}
.neonButtonContainer:hover {

	border-radius: 0px;
	border: none;
	/*width: 200px;*/
   
    margin-top: 0px;
	margin-left: 0px;
	line-height: -25px;
	
	background: linear-gradient(90deg, red 50%, transparent 50%), linear-gradient(90deg, red 50%, transparent 50%), linear-gradient(0deg, red 50%, transparent 50%), linear-gradient(0deg, red 50%, transparent 50%);
	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
/*  background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px; */
/*  background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px;*/

	background-size: 10px 4px, 10px 4px, 4px 10px, 4px 10px;
	background-position: 0px 0px, 0px 0px, 200px 50px, 200px 50px;

	padding: 10px;
	animation: border-dance 4s infinite linear;
}

@keyframes border-dance {
  0% {
    background-position: 0px 0px, 300px 60px, 0px 150px, 216px 0px;
  }
  100% {
    background-position: 300px 0px, 0px 60px, 0px 0px, 216px 150px;
  }
}


/*
@keyframes border-dance {
  0% {
    background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px;
  }
  100% {
    background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px;
  }
}
*/

.animatedBorder {
  height: 100px;
  width: 200px;
  background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px;
  background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px;
  padding: 10px;
  animation: border-dance 4s infinite linear;
}



.neonButtonOn {
	color: transparent;		
	display: inline-block;
	margin-left: 40px;
	font-family: 'Roboto';
	font-size: 36px;		
	font-weight: bold;
	width: auto;
    /*position: absolute;*/
    left: -18px;
	
	-webkit-background-clip: text;
	
	border: 3px solid orange;
	border-radius: 15px;
	padding: 4px 8px 4px 8px;
	cursor: pointer;

	background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    background-size: 200% 200%;	
    animation: RainbowAnimation 4s ease infinite;
}

@keyframes RainbowAnimation { 
    0% {		
		background-position:10% 0%;
		box-shadow: 0 0 0 0 rgba(204,169,44, 0.5);
	}
    
	50% {
		background-position:91% 100%;
		box-shadow: 0 0 5px 13px rgba(204,169,44, 0);
	}
    
	100% {
		background-position:10% 0%;
		box-shadow: 0 0 0 0 rgba(204,169,44, 0);
	}
}

/* The switch - box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


.pulse {
	transform: scale(1);
	animation: textpulse 2s infinite;
}


@keyframes textpulse {

	0% {
		transform: scale(0.95);
		text-shadow: 0px 0px 1px rgba(251,72,196, 0.7);
	}

	70% {
		transform: scale(1);
		text-shadow: 0px 0px 9px rgba(251,72,196, 1.0);
	}

	100% {
		transform: scale(0.95);
		text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
	}


}