@import url('https://fonts.googleapis.com/css?family=Poppins');

/* BASIC */
html, body {
		margin: 0px;
		padding: 0px;
}

body {
	/* 	font-family: "Poppins", sans-serif; */
	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
	background-color: white;
	/* 	min-height: 500px; */
	font-size: 12pt;
	height: 100vh;
}

a {
	color: #a8ec23;
	display: inline-block;
	text-decoration: none;
	font-weight: 400;
}

h2 {
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	display: inline-block;
	margin: 40px 8px 10px 8px;
	color: #cccccc;
}

/* STRUCTURE */
.wrapper {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0px;
	
	background-image: url("../images/clouds.jpg");
	background-repeat: no-repeat;
	background-size: cover;
/* 	position: fixed !important; */
/* 	position: absolute; */
/* 	margin: 0 auto; */
/* 	position: relative; */
/* 	min-width: 1000px; */
	min-height: 350px;
	min-width: 360px;
	overflow: hidden;
/* 	top: 0; */
/* 	bottom: 0; */
/* 	left: 0; */
/* 	right: 0; */
}

.triangle-top {
	width: 443px;
	height: 204px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.triangle-top .light-green {
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 204px 443px 0 0;
	border-color: #A8EC23 transparent transparent transparent;
}

.triangle-bottom {
	width: 336px;
	height: 155px;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 0;
}

.triangle-bottom .dark-green {
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 155px 0 0 336px;
	border-color: transparent transparent transparent #1d7e3f;
}

.cxw-logo {
	position: absolute;
	bottom: 15px;
	right: 15px;
	width: 25%;
	min-width: 300px;
	max-height: 77px;
	z-index: 1;
}

.cxw-logo img {
    max-width:100%;
    height:auto;
}

@media screen and (max-width: 1100px) and (max-height: 570px), screen and (max-height: 500px) {
	#icon {
		display: none;
	}
}

@media screen and (max-width: 1100px) and (max-height: 500px) {
	.cxw-logo {
		display: none;
	}
}

.error-pane {
	margin: 5px auto;
	width: 85%;
	min-height: 41px;
}

.login-message {
	background-color: #d6eaf8;
	border: 1px solid #2e86c1 ;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	padding: 10px;
}

.login-failure {
	background-color: #ffecb3;
	border: 1px solid #ffc107;
}

#icon {
	width: 100px;
	height: 100px;
}


.centerBox {
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	background: rgba(255,255,255,0.7);
	padding: 30px;
	width: 90%;
	max-width: 450px;
	position: relative;
	padding: 0px;
	-webkit-box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
	box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
	text-align: center;
	z-index: 10;
}


@media screen and (max-width: 450px) {
	.centerBox {
		width: 100%;
		max-width: 100%;
		border-radius: 0;
	}
}

#formFooter {
	background-color: #f6f6f6;
	border-top: 1px solid #dce8f1;
	padding: 25px;
	text-align: center;
	-webkit-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
}

/* TABS */
h2.inactive {
	color: #cccccc;
}

h2.active {
	color: #0d0d0d;
	border-bottom: 2px solid #1d7e3f;
}

/* FORM TYPOGRAPHY*/
.btn,
input[type=button], input[type=submit], input[type=reset] {
	background-color: #a8ec23;
	border: 1px solid #1d7e3f;
	color: #000;
	padding: 15px 80px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	text-transform: uppercase;
	font-size: 13px;
	-webkit-box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
	box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	margin: 5px 20px 40px 20px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	-webkit-appearance: none;
}
.btn:hover,
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover
	{
	background-color: #1d7e3f;
	color: #fff;
}
.btn:active
input[type=button]:active, input[type=submit]:active, input[type=reset]:active
	{
	-moz-transform: scale(0.95);
	-webkit-transform: scale(0.95);
	-o-transform: scale(0.95);
	-ms-transform: scale(0.95);
	transform: scale(0.95);
}

input[type=button]:disabled , input[type=submit]:disabled , input[type=reset]:disabled 
	{
	background-color: #333;
	border: #000;
	color: #fff;
	cursor: default;
}

input[type=text], input[type=password] {
	background-color: #f6f6f6;
	border: none;
	color: #0d0d0d;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 5px;
	width: 85%;
	border: 2px solid #f6f6f6;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}

input[type=text]:focus, input[type=password]:focus {
	background-color: #fff;
	border-bottom: 2px solid #1d7e3f;
}

input[type=text]:placeholder, input[type=password]:placeholder {
	color: #cccccc;
}

/* input#password:after { */
/* 	content: url('../images/eye'); */
/* } */
.password{
	position: relative;
}
#showpw {
	height: 24px;
	width: 24px;
	position: absolute;
	right: 48px;
	top: 0;
	bottom: 0;
	margin: auto;
	background-color: #666;
    -webkit-mask: url(../images/reveal.svg) no-repeat center;
    mask: url(../images/reveal.svg) no-repeat center;
    transition: 0.2s;
}
#showpw:hover {
	
	background-color: #1d7e3f;
}

#showpw.revealed-pw {
/* 	background-color: #a8ec23; */
	-webkit-mask: url(../images/hide.svg) no-repeat center;
    mask: url(../images/hide.svg) no-repeat center;
}

.message.welcome,
.message.logout {
	margin: 30px 0;
}

/* ANIMATIONS */

/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* Simple CSS3 fade-in/fade-out Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }

.fadeIn {
  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fadeIn.first {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.fadeIn.second {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.fadeIn.third {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.fadeIn.fourth {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

.fadeIn.fifth {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.fadeOut {
  opacity:1;
  -webkit-animation:fadeOut ease-in 1;
  -moz-animation:fadeOut ease-in 1;
  animation:fadeOut ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fadeOut.fast,
.fadeIn.fast {
  -webkit-animation-duration:0.2s;
  -moz-animation-duration:0.2s;
  animation-duration:0.2s;
}

.underlineHover:after {
  display: block;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 2px;
  background-color: #1d7e3f;
  content: "";
  transition: width 0.2s;
}

.underlineHover:hover {
  color: #0d0d0d;
}

.underlineHover:hover:after{
  width: 100%;
}


/* OTHERS */

*:focus {
    outline: none;
} 

#icon {
  width:60%;
}

* {
  box-sizing: border-box;
}


.invisible {
  opacity: 0;
}

/* LOADER */

.loader {
  position: absolute;
  bottom: 150px;
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  perspective: 800px;
}

.loaderInner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;  
}

.loaderInner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 3px solid #444;
}

.loaderInner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid #444;
}

.loaderInner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 3px solid #444;
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}