/******************************/
/* FONT ASSIGNMENTS
/******************************/

*, header, footer, section, body, app { font-family:-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, "Helvetica Neue", Arial, sans-serif; }

h1, h2, h3, h4, h5, h6 { font-weight:100; }

th, strong { font-weight:500; }

html { font-size:100%; font-style:normal; font-weight:400; }
body { font-size:0.875rem; }

.text-light	 { font-weight:300; }
.text-regular   { font-weight:400; }
.text-semibold  { font-weight:500; }
.text-bold	  { font-weight:700; }



/******************************/
/* GENERAL
/******************************/

html, body { height:100%; margin:0; padding:0; }
body { background:#64748e; color:#22272d; text-align:left; line-height:1.25em; }
	body.no-scroll { overflow:hidden; }

h1, h2, h3, h4, h5, h6 { margin:0; line-height:1em; font-size:2rem; }

p { }

ul { list-style: disc; margin: 0; padding: 0; }
	ul.checklist { list-style-image: url('/img/list-check.svg'); }
li { margin: 0 0 0 1.5em; padding: 0 0 0 0.5em; }

a { color: #1B77BD; text-decoration: none; transition: all 600ms ease; white-space: nowrap; cursor: pointer; }
	a:active,
	a:focus,
	a:hover { color: #1B77BD; transition: all 300ms ease; }

em { font-style: italic; }
sup { font-size: 0.8em; }

hr { border: none; margin: 48px 0; border-top: solid 1px #666; background: none; color: none; font-size: 0; height: 1px; }

input,
select,
textarea { font-size: 100%; }

	input:disabled,
	select:disabled,
	textarea:disabled { color: #999; cursor: not-allowed; }

	input::placeholder { color:#999; font-weight:300; }

	input[type=text],
	input[type=number],
	input[type=password],
	input[type=search],
	input[type=email],
	input[type=tel],
	select,
	textarea { box-sizing:border-box; border:none; height:42px; line-height:42px; padding:0 0.5rem; color:#22272d; border-radius:3px; font-size:1rem; font-weight:500; }

	select option { box-sizing:border-box; border:none; padding:0 0.5rem; height:36px; line-height:36px; color:#666; }
	select.no-minwidth { min-width:initial; }

	textarea { height:160px; }

	input[type=number]::-webkit-inner-spin-button,
	input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

	.input-validation-error { background-color:#fc9; }

a.button,
button { display: inline-block; box-sizing: border-box; border: none; border-radius: 3px; outline: none; padding: 0.7em 2em; line-height: 24px; color: #fff; background: #1B77BD; cursor: pointer; transition: 400ms all ease; }
	a.button:hover,
	button:hover,
	button:focus { background: #0B376D; color: #fff; transition: 400ms all ease; }

.button { display: inline-block; box-sizing: border-box; border: none; border-radius: 3px; outline: none; padding: 0.6em 1em; line-height: 24px; color: #fff; background: #1B77BD; cursor: pointer; transition: 400ms all ease; box-shadow: 0 2px 2px 1px rgba(0,0,0,0.1); }
	.button:hover,
	.button:focus { background: #00a7f6; color: #fff; transition: 400ms all ease; }
	.button > svg { display: inline-block; vertical-align: top; width: 24px; height: 24px; }
		.button > svg > * { fill: #22272d; }

	.button.button-secondary { background: #505c71; color: #fff; }
		.button.button-secondary > svg > * { fill: #fff; }
		.button.button-secondary:hover,
		.button.button-secondary:focus { background: #495364; }

	.button.button-minimal { background: transparent; color: #22272d; box-shadow: none; }
		.button.button-minimal > svg > * { fill: #22272d; }
		.button.button-minimal:hover,
		.button.button-minimal:focus { background-color:transparent; }

button.icon { position: relative; font-size: 0; border-radius: 0; padding: 0; margin: 0; width: 32px; height: 32px; }
	button.icon::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ''; display: block; opacity: 0; transition: opacity 300ms ease; }
	button.icon,
	button.icon::before { background: none; background-repeat: no-repeat; background-size: contain; background-position: center; }
		button.icon:hover { }
			button.icon:hover::before { opacity: 1; transition: opacity 150ms ease; }

		button.icon.view { background-image: url('../img/button-view.svg'); }
			button.icon.view::before { background-image: url('../img/button-view.svg'); }
		button.icon.expand { background-image: url('../img/button-collapse.svg'); }
			button.icon.expand::before { background-image: url('../img/button-collapse-hover.svg'); }
		button.icon.action { background-image: url('../img/button-action.svg'); }
			button.icon.action::before { background-image: url('../img/button-action-hover.svg'); }
		button.icon.status { background-image: url('../img/status-action.svg'); }
			button.icon.status::before { background-image: url('../img/status-action-hover.svg'); }

input:focus,
select:focus,
textarea:focus { outline:none; border-color:#1B77BD; transition:400ms all ease; }

label { cursor: pointer; }

form { margin:0; padding:0; }
	form .field { margin-bottom: 0.25rem; }
		form .field > * { /*display: inline-block;*/ }
		form .field > input,
		form .field > select,
		form .field > textarea { width: 100%; display: inline-block; }
		form .warning,
		form .validation { color:#f60; }

fieldset { position:relative; padding:64px 0; }
	fieldset fieldset { padding:0; }
	fieldset legend { position:absolute; display:block; box-sizing:border-box; width:100%; height: 48px; line-height: 48px; margin: 0; padding: 0; top: 0; left: 0; background: #fff; border-radius: 4px 4px 0 0; border-bottom:solid 1px #efefef; text-transform:uppercase; font-size:1.25rem; }
	fieldset label { display:block; }
	fieldset label input ~ span,
	fieldset label input ~ strong { margin-left:8px; }
	fieldset .group { vertical-align:top; }
	fieldset .field { width:auto; margin-right:16px; }

	fieldset .field.date > div { position:relative; }
	fieldset .field.date .mat-datepicker-toggle { position:absolute; top:0; right:0;  }

	fieldset hr { background:none; border:none; border-top:solid 1px #efefef; color:none; height:1px; margin:16px 0; overflow:hidden; }
	fieldset input,
	fieldset select,
	fieldset textarea { min-width:240px; width:100%; display:inline-block; }
	fieldset input.short { min-width: 60px; width: 60px; }
	fieldset textarea { min-height: 6rem; resize: vertical; }


#content, #forms { position:fixed; top:0; bottom:0; }
.default#content { left:0; right:0; padding-right:380px; background:url('../img/login-bg.jpg') no-repeat right center; background-size:cover; }
.animals#content {
	left: 0;
	right: 0;
	padding-right: 380px;
	background: url('../img/login-animals-bg.jpg') no-repeat right center;
	background-size: cover;
}

#forms { right:0; width:380px; }
#forms > form, #forms::before, #forms::after { position:absolute; left:0; right:0; top:0; bottom:0; }
#forms > form { z-index:10; box-sizing:border-box; overflow-y:auto; padding:32px; color:#fff; background:linear-gradient(to bottom right, rgba(0,0,0,1), rgba(0,0,0,0.5), rgba(0,0,0,1)); box-shadow:-4px -4px 8px rgba(0,0,0,0.2); }
.default#forms::before { content:''; z-index:8; background:url('../img/login-bg.jpg') no-repeat right center; filter:blur(10px); background-size:cover; }
	.animals#forms::before {
		content: '';
		z-index: 8;
		background: url('../img/login-animals-bg.jpg') no-repeat right center;
		filter: blur(10px);
		background-size: cover;
	}
#forms::after  { content:''; z-index:9; background-image:url('../img/bg-noise.png'); opacity:0.5; }

#forms .group { margin-bottom:32px; }

#forms h1 { height:40px; font-size:0; background:url('../img/login-logo.svg') no-repeat 0 0; background-size:contain; margin-bottom:32px; }
#animal-logo {
	height: 80px;
	font-size: 0;
	background: url('../img/logo-animal-white.PNG') no-repeat 0 0;
	background-size: contain;
	background-position:center;
	margin-bottom: 32px;
}
#forms h2 { font-size:1rem; margin-bottom:2em; line-height:1.25em; margin-bottom:32px; }

#forms .buttons {  }

#forms.login .buttons { background:rgba(255,255,255,0.15); border-radius:3px; font-size:0; }
#forms.login .buttons > * { font-size:1rem; display:inline-block; text-align:center; line-height:42px; color:#fff; margin:0; padding:0; }
#forms.login .buttons button { width:40%; font-weight:500; text-transform:uppercase; }
#forms.login .recover { width:60%; font-weight:300; }
#forms.login .field { margin-bottom:16px; }
#forms.login .field.username input,
#forms.login .field.password input { padding-left:56px; padding-right:12px; background-repeat:no-repeat; background-size:contain; background-position:0 50%; }
#forms.login .field.username input { background-image:url('../img/icon-username.svg'); }
#forms.login .field.password input { background-image:url('../img/icon-password.svg'); }
#forms.login header { margin-bottom:32px; }
#forms.login footer { font-size:0.65rem; color:#aaa; position:absolute; bottom:16px; left:32px; right:32px; }


/******************************/
/* SMALL SCREENS
/******************************/

/* Define mobile styles */
@media only screen { }

@media only screen and (orientation:portrait) { }

@media only screen and (orientation:landscape) { }

/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 40em) { }



/******************************/
/* MEDIUM SCREENS
/******************************/

/* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) { }

@media only screen and (min-width: 40.063em) and (orientation:portrait) { }

@media only screen and (min-width: 40.063em) and (orientation:landscape) { }

/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { }



/******************************/
/* LARGE SCREENS
/******************************/

/* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) { }

@media only screen and (min-width: 64.063em) and (orientation:portrait) { }

@media only screen and (min-width: 64.063em) and (orientation:landscape) { }

/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width: 64.063em) and (max-width: 90em) { }



/******************************/
/* XLARGE SCREENS
/******************************/

/* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) { }

@media only screen and (min-width: 90.063em) and (orientation:portrait) { }

@media only screen and (min-width: 90.063em) and (orientation:landscape) { }

/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { }



/******************************/
/* XXLARGE SCREENS
/******************************/

/* min-width 1921px, xxlarge screens */
@media only screen and (min-width: 120.063em) { }