@import url('https://fonts.googleapis.com/css2?family=Teko:wght@700&display=swap');
	html, body {
		width: 100%;
		height: 100%;
		margin: 0px;
		margin-bottom 20px;
		padding: 0px;
		overflow-x: hidden;
		opacity: 1;
		background-size: 24px 42px;
		background-position: 0 0, 0 0, 12px 21px, 12px 21px, 0 0, 12px 21px;
		/*background-image: url('../images/cnrng_admin_portal_background.gif');*/

		/*background-image: url('../../layout/imgs/backgrounds/4759230.jpg');*/
		/*background-image: url('https://images.unsplash.com/photo-1609443934490-abc76318e029?q=80&w=1340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');*/
		background-image: url('https://images.unsplash.com/photo-1636047152186-7bd1d7a8a6ab?q=80&w=1332&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
				
		/* 4648853.jpg  4759230.jpg  background-1.jpg  cannabis-marijuana-leaf-closeup.jpg */

		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		overflow: hidden;
	}
	.login-dark {
	}

	.login-dark form {
		max-width:348px;
		width:90%;
		background-color: rgba(0, 0, 0, 0.85);
		border-radius:4px;
		padding-left:40px;
		padding-right:40px;
		-webkit-box-shadow: -1px 1px 0 6px rgba(255,255,255,0.2);
		-moz-box-shadow: -1px 1px 0 6px rgba(255,255,255,0.2);
		box-shadow: -1px 1px 0 6px rgba(255,255,255,0.2);
		transform:translate(-50%, -50%);
		position:absolute;
		top:50%;
		left:50%;
		color: #fff;
	}

	.login-dark .illustration {
	  padding:15px 0 20px;
	}

	.login-dark form .form-control {
		padding-left:30px;
		background-color: #2c4c8842;
		border:1px solid #434a52;
		/*border-radius:0;*/
		box-shadow:none;
		outline:none;
		color:#28b136;
	}

	.login-dark form .form-control:focus {
		background-color: #00113142;
		border:1px solid #28b136;
		color: #28b136;
	}

	input {
	  background: #2c4c8842;
	  border:1px solid #434a52;
	  border-radius:0;
	  box-shadow:none;
	  outline:none;
	  color:inherit;
	}

	input:focus {
	  background: #00113142;
	}

	.login-dark form .btn-primary {
	  background:#214a80;
	  border:none;
	  border-radius:4px;
	  padding:11px;
	  box-shadow:none;
	  margin-top:26px;
	  text-shadow:none;
	  outline:none;
	}

	.login-dark form .btn-primary:hover, .login-dark form .btn-primary:active {
	  background:#214a80;
	  outline:none;
	}

	.login-dark form .forgot {
	  display:block;
	  text-align:center;
	  font-size:12px;
	  color:#6f7a85;
	  opacity:0.9;
	  text-decoration:none;
	}

	.login-dark form .forgot:hover, .login-dark form .forgot:active {
	  opacity:1;
	  text-decoration:none;
	}

	.login-dark form .btn-primary:active {
	  transform:translateY(1px);
	}
	.login-logo {
		background-image: url('/assets/images/sections/auth/GreenGrowLogo.webp');
		/*background-image: url('../images/portal-orange.png');*/
		border-radius: 900px;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 256px;
		margin-top: 11px;
	}
	.greenbutton:hover {
		background: #28b136;
		border: solid #FFAE00 1px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		text-decoration: none;
	}

	.greenbutton {
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		color: #FFFFFF;
		font-family: Brush Script MT;
		font-size: 17px;
		font-weight: 500;
		padding-right: 15px;
		padding-left: 15px;
		background-color: #415e1c;
		-webkit-box-shadow: -1px 1px 0 6px #000000;
		-moz-box-shadow: -1px 1px 0 6px #000000;
		box-shadow: -1px 1px 0 6px #000000;
		text-shadow: 1px 1px 6px #000000;
		border: solid #000000 1px;
		text-decoration: none;
		display: inline-block;
		cursor: pointer;
		text-align: center;
	}
	.greenbutton:disabled {
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		color: #7c7c7c;
		font-family: Brush Script MT;
		font-size: 17px;
		font-weight: 500;
		padding-right: 15px;
		padding-left: 15px;
		background-color: #002856;
		-webkit-box-shadow: -1px 1px 0 6px #000000;
		-moz-box-shadow: -1px 1px 0 6px #000000;
		box-shadow: -1px 1px 0 6px #000000;
		text-shadow: 1px 1px 6px #000000;
		border: solid #000000 1px;
		text-decoration: none;
		display: inline-block;
		cursor: pointer;
		text-align: center;
	}
	.date {
		position:relative;
		padding-top:15px;
		height: 50px;
		text-align:center;
	}
	#demo {
		position:relative;
	}

/**/
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400');
@import url('https://fonts.googleapis.com/css?family=Roboto:100');

@mixin button($bcolor,
$url,
$x1,
$y1,
$bor,
$col) {
 background: $bcolor;
 -webkit-mask: url($url);
 mask: url($url);
 -webkit-mask-size: $x1 $y1;
 mask-size: $x1 $y1;
 border: $bor;
 color: $col;
}

.header {
 text-align: center;
 font-family: 'Roboto', sans-serif;
 font-size: 34px;
 margin-top: 12vh;
}

.footer {
 text-align: center;
 font-family: 'Lato', sans-serif;
 font-weight: 300;
 font-size: 20px;
 margin-top: 15vh;
}

.button-container-1 {
 position: relative;
 width: 100px;
 height: 50px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 6vh;
 overflow: hidden;
 border: 1px solid;
 font-family: 'Lato', sans-serif;
 font-weight: 300;
 font-size: 20px;
 transition: 0.5s;
 letter-spacing: 1px;
  border-radius: 8px;

 button {
  width: 101%;
  height: 100%;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: bold;

  @include button(#000,
  "https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png",
  2300%,
  100%,
  none,
  #fff);
  cursor: pointer;
  -webkit-animation: ani2 0.7s steps(22) forwards;
  animation: ani2 0.7s steps(22) forwards;

  &:hover {
   -webkit-animation: ani 0.7s steps(22) forwards;
   animation: ani 0.7s steps(22) forwards;
  }
 }
}

.button-container-2 {
 position: relative;
 width: 100px;
 height: 50px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 7vh;
 overflow: hidden;
 border: 1px solid #000;
 font-family: 'Lato', sans-serif;
 font-weight: 300;
 transition: 0.5s;
 letter-spacing: 1px;
 border-radius: 8px;

 button {
  width: 101%;
  height: 100%;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: bold;

  @include button(#000, "https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png",
  3000%,
  100%,
  none,
  #fff);
  cursor: pointer;
  -webkit-animation: ani2 0.7s steps(29) forwards;
  animation: ani2 0.7s steps(29) forwards;

  &:hover {
   -webkit-animation: ani 0.7s steps(29) forwards;
   animation: ani 0.7s steps(29) forwards;
  }
 }
}


.mas {
    position: absolute;
    color: #000;
    text-align: center;
    width: 101%;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    position: absolute;
    font-size: 11px;
    margin-top: 17px;
    overflow: hidden;
	  font-weight: bold;

}

@-webkit-keyframes ani {
 from {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
 }

 to {
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
 }
}

@keyframes ani {
 from {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
 }

 to {
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
 }
}

@-webkit-keyframes ani2 {
 from {
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
 }

 to {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
 }
}

@keyframes ani2 {
 from {
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
 }

 to {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
 }
}

a{
	color:#00ff95;
}

.button-container-3 {
 position: relative;
 width: 100px;
 height: 50px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 8vh;
 overflow: hidden;
 border: 1px solid #000;
 font-family: 'Lato', sans-serif;
 font-weight: 300;
 transition: 0.5s;
 letter-spacing: 1px;
 border-radius: 8px;

 button {
  width: 101%;
  height: 100%;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: bold;


  @include button(#000, "https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png",
  7100%,
  100%,
  none,
  #fff);
  cursor: pointer;
  -webkit-animation: ani2 0.7s steps(70) forwards;
  animation: ani2 0.7s steps(70) forwards;

  &:hover {
   -webkit-animation: ani 0.7s steps(70) forwards;
   animation: ani 0.7s steps(70) forwards;
  }
 }
}

/**/
	#version {
		position: absolute;
		display: inline-block;
		font-family: 'Teko', sans-serif;
	        font-size: 30px;
		padding-top:20px;
	        color: rgba(255, 255, 255, 0.2);
	}

/*	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-webkit-autofill:active
	{
		-webkit-box-shadow: 0 0 0 2px  inset !important;
		background-color: #000 !important;
		color: #fff !important;
	}

	input:-internal-autofill-selected {
/*
		/*background-image: none !important;*/
		//background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
/*		color: -internal-light-dark(white, black) !important;
	}

	.adminicon,
	.adminicon:focus,
	.adminicon:-webkit-autofill,
	.adminicon:-webkit-autofill:hover,
	.adminicon:-webkit-autofill:focus,
	.adminicon:-webkit-autofill:active
	{
		background: url(https://cdn3.iconfinder.com/data/icons/fatcow/16/lock.png) no-repeat scroll 7px 10px;
		padding-left:30px;
	}
	.keyicon,
	.keyicon:focus,
	.keyicon:-webkit-autofill,
	.keyicon:-webkit-autofill:hover,
	.keyicon:-webkit-autofill:focus,
	.keyicon:-webkit-autofill:active
	{
		background: url(https://cdn3.iconfinder.com/data/icons/fatcow/16x16/key.png) no-repeat scroll 7px 10px;
		padding-left:30px;
	}
*/

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 4px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

#response {
	background: rgba(137,0,0,0.73) none no-repeat scroll 0 0;
	border: 1px solid #FF0000;
	border-radius: 40px 9px 40px 9px;
	color: white;
	border-radius: 3px;
	padding:4px;
	display: none;
	text-align: center;
	margin-top: 9px;
	margin-bottom: 9px;
}

#login_div {
}

.invalidLogin {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
#backgroundVideo {
/*position: fixed; top: 0; left: 0; width: 100%; height: 100%; */
object-fit: cover;
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
/*  z-index: -100;*/
}