html {
	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
body {
	background: top center url('/resources/images/background.jpg') no-repeat;
	background-size: cover;
	padding: 0;
	margin: 0;
}
#main {
	background-color: rgba(255,255,255,.7);
	text-align: center;
	/*position:fixed !important;*/
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	padding: 10%;
}

#login {
	display: block;
	margin: 0 auto;
	width: 300px;
}
#logo {
	border-radius: 4px 4px 0 0;
	text-align: center;
	background: rgba(255,171,35, .8) url(/resources/images/logo.png) no-repeat top center;
	padding-top: 55px;
	padding-bottom: 7px;
}

#error {
	padding: 10px;
}

#form {
	background-color: rgba(255,255,255, .8);
	border-radius: 0 0 4px 4px;
	padding: 20px;
}

#form div {
	font-weight: 500;
}

#form .separator {
	height: 10px;
}

#form .label {
	font-size: 12px;
	padding: 0 10px;
}

#form input {
	width: 234px;
	padding: 4px;
	font-size: 18px;
}

#form input.submit {
	font-size: 12px;
	font-weight: 600;
	padding: 8px;
	cursor: pointer;
	background-color: #ffab23;
	border: 1px solid #ed9f21;
	border-radius: 4px;
}

#form input.submit:hover {
	background-color: #eb9d20;
	border: 1px solid #da921e;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	transition-duration: 0.5s;
}
#form input.submit:active {
	background-color: #bf801a;
	border: 1px solid #b27718;
}

#form a.link-lost-pass {
	font-size: 12px;
	color: #000;
}

#ver {
	font-size: 12px;
	color: #555555;
	padding: 10px;
}

.t-a-l {
	text-align: left;
}

.t-a-c {
	text-align: center;
}

.f-s-8 {
	font-size: 8px;
	line-height: 10px;
}
.f-s-10 {
	font-size: 10px;
	line-height: 12px;
}

.f-s-14 {
	font-size: 14px;
	line-height: 18px;
}

.f-s-20 {
	font-size: 20px;
	line-height: 24px;
}

.f-s-30 {
	font-size: 30px;
	line-height: 34px;
}

.info-date {
	text-align: center;
}

.info-date .info-day {
	font-size: 30px;
	line-height: 27px;
}

.info-date .info-month {
	font-size: 8px;
	line-height: 18px;
}

.info-date .info-year {
	font-size: 10px;
	line-height: 15px;
	background-color: grey;
	font-weight: bold;
	color: white;
}

.f-s-xl {
	font-size: x-large !important;
}
.f-s-xxl {
	font-size: xx-large !important;
}

.f-w-b {
	font-weight: bold;
}

.color-japo-black {
	color: rgb(0,0,0);
}
.color-japo-red {
	color: rgb(200,16,46);
}
.color-japo-yellow {
	color: rgb(255,205,0);
}
.color-white {
	color: #fff;
}
.bg-color-white {
	background-color: #fff !important;
}
.bg-color-japo-red {
	background-color: rgb(200,16,46);
}

.notice-inactive-row {
	color: darkgrey;
	text-decoration: line-through;
	font-style: italic;
}
.notice-expired-row {
	color: red;
	/*font-style: italic;*/
}

.x-grid-group-hd-collapsible .x-grid-group-title {
	padding: 0 0 0 24px;
	display: flex;
	align-items: center;
	height: 30px;
	font-size: 15px;
}

#loader {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: 100px;
	height: 100px;
	margin: -75px 0 0 -75px;
	border-top: 15px ridge rgb(200,16,46);
	border-right: 15px groove rgb(50,50,50);
	border-bottom: 15px groove #ffffff;
	border-left: 15px ridge rgb(255,205,0);
	border-radius: 50%;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
	0% { transform: rotate(0deg); opacity: .9}
	50% { transform: rotate(180deg); opacity: .4}
	100% { transform: rotate(360deg); opacity: .9}
}
@-moz-keyframes spin {
	0% { transform: rotate(0deg); opacity: .9}
	50% { transform: rotate(180deg); opacity: .4}
	100% { transform: rotate(360deg); opacity: .9}
}
@-o-keyframes spin {
	0% { transform: rotate(0deg); opacity: .9}
	50% { transform: rotate(180deg); opacity: .4}
	100% { transform: rotate(360deg); opacity: .9}
}
@keyframes spin {
	0% { transform: rotate(0deg); opacity: .9}
	50% { transform: rotate(180deg); opacity: .4}
	100% { transform: rotate(360deg); opacity: .9}
}

@-webkit-keyframes hide-up {
	0%   { opacity: 1;}
	100% {
		opacity: 0;
		height: 0;
		margin: 0;
		padding: 0;
		display: none;
	}
}
@-moz-keyframes hide-up {
	0%   { opacity: 1;}
	100% {
		opacity: 0;
		height: 0;
		margin: 0;
		padding: 0;
		display: none;
	}
}
@-o-keyframes hide-up {
	0%   { opacity: 1;}
	100% {
		opacity: 0;
		height: 0;
		margin: 0;
		padding: 0;
		display: none;
	}
}
@keyframes hide-up {
	0%   { opacity: 1;}
	100% {
		opacity: 0;
		height: 0;
		margin: 0;
		padding: 0;
		display: none;
	}
}
.fade-out {
	-webkit-animation: hide-up 1s 3s 1 forwards; /* Safari 4+ */
	-moz-animation:    hide-up 1s 3s 1 forwards; /* Fx 5+ */
	-o-animation:      hide-up 1s 3s 1 forwards; /* Opera 12+ */
	animation:         hide-up 1s 3s 1 forwards; /* IE 10+, Fx 29+ */
}

.shadow {
	-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
	-ms-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
	border-radius: 4px;
}


@keyframes pulse_animation {
	0% { transform: scale(1); }
	30% { transform: scale(1); }
	40% { transform: scale(1.2); }
	50% { transform: scale(1); }
	60% { transform: scale(1); }
	70% { transform: scale(1.2); }
	80% { transform: scale(1); }
	100% { transform: scale(1); }
}

.pulse {
	animation-name: pulse_animation;
	animation-duration: 2000ms;
	/*transform-origin:80% 80%;*/
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.x-window-header-critical .x-tool-img {
	color: white;
}

.relabelHistory {
	width: 100%;
	max-width: 800px;
}

.relabelHistory th {
	text-align: left;
}

.relabelHistory td {
	border-bottom: 1px solid darkred;
	/*font-family: "Courier New", Courier, monospace;*/
	/*font-family: "Lucida Console", Monaco, monospace;*/
}