/* phoqus CSS */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
	box-sizing: border-box;
}

html, body {
	position: relative;
	width: 100%;
	height: 100%;
	font-family: 'Lato', sans-serif;
	margin: auto;
	max-width: var(--body-max-width);
}

button {
	font-family: 'Lato', sans-serif;
}

body {
	color: var(--text-color);
	margin: 0;
	padding: 0;
	background: var(--global-background);
}

:root {
	--text-color: #333;
	--text-color-action: #333;
	--branding-text-color: #333;
	--control-text-color: #333;
	--theme-color: #019e30;
	--accent-color: #e69619;
	--background-container: #f4f4f4;
	/* --background-active: #e6ebfa; */
	--background-active: rgb(214 227 237);
	--background-header: #0a145a;
	--background-passive: #89919a;
	--background-select: #c5d2f6;
	--background-selected: #a8bcf7;
	/* --background-action: #0a145a; */
	--background-action: rgb(214 227 237);
	--background-list: transparent;
	--global-background: #f7f7f7;
	--app-background: #fff;
	--item-selected: rgb(239 239 239);
	--badge-color: #0077b7;
	--badge-has-color: #2D2D2D;
	--carer0-color: chocolate;
	--carer1-color: blue;
	--carer2-color: red;
	--carer3-color: darkmagenta;
	--carer4-color: darkgreen;
	--carer5-color: crimson;
	--carer6-color: darkslateblue;
	--carer7-color: darkred;
	--carer8-color: darkorchid;
	--carer9-color: green;
	--carer10-color: #707070;
	--th-text-align: left;
	--body-max-width: 1500px;
	--branding-image: url("./api/locale/image/branding_head");
	--branding-background: #0a145a;
	--branding-height: 150px;
	--branding-image-position: left top;
	--branding-image-width: auto;
	--footer-height: 50px;
	--footer-image: url("./api/locale/image/branding_foot");
	--footer-image-position: right 10px center;
	--footer-image-width: auto;
	--footer-background: var(--branding-background);
	--message-strip-background: #fbfbc6;
	--box-shadow: 0 0 0 0.0625rem rgb(0 0 0 / 10%), 0 0.125rem 0.5rem 0 rgb(0 0 0 / 10%);
	--prysma-radius: 15px;
}

.branding-header {
	width: 100%;
	height: var(--branding-height);
	background-image: var(--branding-image);
	background-repeat: no-repeat;
	background-size: var(--branding-image-width);
	background-position: var(--branding-image-position);
	background-color: var(--background-header);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.action-highlight {
	background: var(--accent-color);
	border: initial;

}

.action-highlight-color {
	color: white;
}

.action-highlight-color .action-title {
	color: var(--text-color-action)
}

.action-default-color .action-title {
	color: var(--text-color-action)
}

.action-negative {
	background: red;
	border: initial;
}

.action-negative-color {
	color: white;
}

.action-selected {
	border: 2px solid !important;
}

.action-warning {
	background: var(--theme-color);
	border: solid var(--theme-color) 1px;

}

.action-warning-color {
	color: var(--accent-color);
}

.action-default {
	background: var(--theme-color);
	border: solid var(--theme-color) 1px;

}

.action-default-color {
	color: white;
}

.action-light {
	background: var(--background-active);
	border: solid var(--theme-color) 1px;
	color: var(--text-color);
}

a:link {
	color: var(--theme-color);
}

a:visited {
	color: var(--theme-color);
}

a:hover {
	color: var(--theme-color);
}

a:active {
	color: var(--theme-color);
}

.form-header {
	margin-top: 1rem;
	font-weight: bold;
}

.form-paragraph {
	margin-top: 0.5rem;
}

.form-block {
	border: solid 1px gray;
	padding: 0.5rem;
	margin: 0.5rem 1rem 0 0.5rem;
}

.form-block-small {
	border: solid 1px gray;
	padding: 0.5rem;
	margin: 0.5rem 1rem 0 0.5rem;
	font-size: small;
}

.form-section-head1 {
    border-bottom: 1.5px solid gray;
    margin: 1.5rem 0.5rem 0.5rem 0.5rem;
    font-size: larger;
}
 
.form-section1 {
    margin-left: 0.5rem;
}
 
.form-section-head2 {
    margin: 1.5rem 0.5rem 0.5rem 0.5rem;
    font-weight: bold;
}
 
.form-section2 {
    margin-left: 0.5rem;
    border-left: solid 1px lightgray;
}
 
 
.form-section-head3 {
    margin: 1.5rem 0.5rem 0.5rem 0.5rem;
    padding-left: 0.5rem;
 
}
 
.form-section3 {
    margin-left: 0.5rem;
}
 
.form-section-head4 {
    margin: 1.5rem 0.5rem 0.5rem 0.5rem;
    padding-left: 0.5rem;
 
}
 
.form-section5 {
    margin-left: 0.5rem;
}
 
.form-section-head5 {
    margin: 1.5rem 0.5rem 0.5rem 0.5rem;
    padding-left: 0.5rem;
 
}
 
.form-section4 {
    margin-left: 0.5rem;
}
/* @media (prefers-color-scheme: dark) {

	:root {
		--text-color: #e8eaed;
		--text-color-action: #333;
		--background-active: #303134;
		--background-select: #5b5c60;
		--background-selected: #646464;
		--global-background: #303134;
		--app-background: #303134;
		--item-selected: #646464;
		--badge-color: #0077b7;
		--badge-has-color: #2D2D2D;
		--carer0-color: chocolate;
		--carer1-color: blue;
		--carer2-color: red;
		--carer3-color: darkmagenta;
		--carer4-color: darkgreen;
		--carer5-color: crimson;
		--carer6-color: darkslateblue;
		--carer7-color: darkred;
		--carer8-color: darkorchid;
		--carer9-color: green;
		--carer10-color: #707070;
		--th-text-align: left;
		--body-max-width: 1500px;
		--branding-image: url("./api/locale/image/branding_head");
		--branding-height: 150px;
		--branding-image-position: left top;
		--branding-image-width: auto;
		--footer-height: 50px;
		--footer-image: url("./api/locale/image/branding_foot");
		--footer-image-position: right 10px center;
		--footer-image-width: auto;
		--footer-background: var(--branding-background);
		--message-strip-background: #67674c;
		--box-shadow: 0 0 0 0.0625rem rgb(0 0 0 / 20%), 0 0.125rem 0.5rem 0 rgb(0 0 0 / 20%);
	}
} */

@media screen and (max-height: 900px) {
	:root {
		--branding-height: 50px;
		--branding-image: url("./api/locale/image/branding_head_small");
	}

}

@media screen and (max-width: 700px) {
	:root {
		--branding-image: initial;
	}

}