/*main.css*/
@font-face {
	font-family: 'reg';
	src: url('../font/EMprint W05 Regular_web.eot');
	src: url('../font/EMprint W05 Regular_web.eot?#iefix') format('embedded-opentype'),
	   url('../font/EMprint W05 Regular_web.ttf') format('truetype'),
	   url('../font/EMprint W05 Regular_web.woff2') format('woff2'),
	   url('../font/EMprint W05 Regular_web.otf') format('otf');
}

@font-face {
	font-family: 'bold';
	src: url('../font/EMprint W05 Bold_web.eot');
	src: url('../font/EMprint W05 Bold_web.eot?#iefix') format('embedded-opentype'),
	   url('../font/EMprint W05 Bold_web.ttf') format('truetype'),
	   url('../font/EMprint W05 Bold_web.woff2') format('woff2'),
	   url('../font/EMprint W05 Bold_web.otf') format('otf');
}

body{
    font-family: 'reg';
}

.bold{
	font-family: 'bold';
}

.error {
    color: #FFF;
    background: #fe010c;
    border-radius: 6px;
    padding: 10px;
    font-weight: bold;
}

.good{
	color: #FFF;
    background: #4e9100;
    border-radius: 6px;
    padding: 10px;
    font-weight: bold;
}

.login-box a {
  	color: #FFF;
  	text-decoration: none;
}

.login-box a:hover {
  	text-decoration: underline;
}

.btn-submit {
	background-color: #ffc107;
	border: none;
	color: #000;
	padding: 10px;
	width: 100%;
	border-radius: 5px;
	max-width: 200px;
	font-size: 20px;
}

body, html {
	height: 100%;
	margin: 0;
	/*font-family: Arial, Helvetica, sans-serif;*/
	background-size: cover;
	background-position: center;
}

#login-bg, #reg-bg{
	background-image: url('../images/main-bg.jpg');
}

#home-bg{
	background-image: url('../images/home-bg.jpg');
}

.login-box {
	background-color: rgba(0, 0, 0, 0.8);
	padding: 40px;
	border-radius: 10px;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
	color: #fff;
	max-width: 400px;
	margin: auto;
}
#login-logo{
	max-width: 90%;
	margin-bottom: 30px;
}

.btn-custom {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 15px 30px;
  margin: 10px 0;
  width: 100%;
  max-width: 400px;
  font-size: 1.2rem;
  border-radius: 5px;
}
.btn-custom:hover {
  background-color: #444;
  color: #FFF;
}
.btn-custom:active {
  background-color: #444 !important;
  color: #FFF !important;
}

/* Basic button styling */
.ripple-button {
  position: relative;
  overflow: hidden;
}

/* Ripple element styling */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  width: 20px;  /* Start small and scale up */
  height: 20px;
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

/* Ripple animation */
@keyframes ripple-animation {
  to {
    transform: scale(25);  /* Increase this to control how large the ripple gets */
    opacity: 0;            /* Fade out the ripple */
  }
}

.description {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 10px;
}
.direction-text {
  color: #ff0000;
  font-style: italic;
  margin-bottom: 30px;
}