:root {
	--osug-blue: #3a7bc8;
	--forms-background: #e6f2ff;
	height: 100%;
}

/**************************************************************************************************
 *
 * headers
 *
 */

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	height: calc(100% - 10px);
	display: flex;
	flex-direction: column;
}

.header {
	flex: initial;
}

.logos { display : flex;
    flex-direction : row;
    align-items : center;
    width : 100%;
}
.logos img {
    height: 40pt;        
}
#login {
	position: absolute;
	top: 5pt;
	right: 5pt;
	color: black;
	text-decoration: none;
}

/**************************************************************************************************
 *
 * breadcrumbs and app version display
 *
 */

 .breadcrumbs {
	font-size: 12pt;
	margin-left: 5pt;
}
.breadcrumbs > .home,
.breadcrumbs > a > .home {
	height: 16pt;
	width: 16pt;
}
.version
{
    font-size : 0.55em;
    text-align: right;
}	
#fBandeau {
	margin-bottom: 5px;
	height: 8vh;
	overflow: clip;
}

/**************************************************************************************************
 *
 * search form stuff
 *
 */

 form {
	margin-left: 10px;
	margin-right: 10px;
	width: calc(100% - 20px);
	flex: initial;
	display: flex;
	flex-direction: row;
}

#form-sections-mode {
	flex: auto;
	width: 40pt;
	background-color: var(--forms-background);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 4pt;
}
#form-mode-control {
	flex: none;
	width: 30pt;
	height: 30pt;
	border: 1px solid gray;
	background-color: whitesmoke;
	border-radius: 3pt;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26pt;
	user-select: none;
	cursor: default;
}
#form-mode-control:hover {
	background-color: lightgray;
}
#form-sections {
	flex: auto;
}

.form-part {
	display : flex;
	flex-direction: row;
	width : calc(100% - 20px);
	background-color : var(--forms-background); 
}
.text-form {
	flex-wrap : wrap;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	align-items : center;
	border-bottom: 1px dashed black;
	line-height: 3em;
}
.field-box
{   
	display : flex;
	flex-direction: row;
	padding-right : 5px;
	align-items : center;
}

label
{
	color : var(--osug-blue);
	text-align :right;
	margin-right : 5pt;
}

.field_s {
	margin-right: 5pt;
}

#map-control {
	flex: auto;
	background-color : var(--forms-background);
	/* outline: 1px solid red; */
	display: flex;
	flex-direction: row;
	column-gap: 10px;
}
#searchmap {
	flex: auto;
	height: 100%;
	outline: 1px solid red;
}
#searchmap-buttons {
	flex: none;
	outline: 1px solid lightgreen;
	padding: 0;
	display: flex;
	flex-direction: column;
}
button {
	width: 24px;
	height: 24px;
}
#search-button {
	flex: 1;
	align-items: flex-start;
}
#grow-button {
	flex: 1;
	display: flex;
	align-items: flex-end;
}

.map-search-button {
	background-image: url("/static/img/icons/magnifying-glass.svg");
}
/**************************************************************************************************
 *
 * results box stuff
 *
 */

#results-box {
	padding-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	width: calc(100% - 20px);
	display: flex;
	flex: auto;
	overflow:hidden;
}

#results {
	flex: 50%;
	/* outline: 1px solid lightcoral; */
	overflow-y: scroll;
}

.no-results {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 16pt;
	font-weight: bold;
	color: lightgray;
	height: 100%;	
}

.search-item{
	display: flex;
	text-decoration: none;
	color: black;
	margin-bottom: 5px;
}

.photo {
	flex: none;
	height: 128px;
	width: 128px;
	display: flex;
    align-items: center;
    justify-content: center;
    color: lightgray;
    text-align: center;
	font-size: 8pt;
	font-weight: bold;
}
.text-data {
	flex: auto;
	/* outline: 1px solid lightpink; */
}

#map {
	flex: 50%;
	/* outline: 1px solid lightskyblue; */
}