@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

*:root {
}

.btn {
	border-radius: 3px 3px;
	/* margin: .1rem; */
	margin-top: 4px;
	margin-bottom: 4px; /* was 6px */
	background-color: var(--btn-blue-default);
}

.btn.typeahead {
	height: 42px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0.5rem;
}

.btn.records-view {
	width: 2.0rem;
	height: 2.0rem;
	position: relative;
	padding: unset;
}

.records-view:focus {
	outline: unset;	/*does not hide the focus*/
}
/*.space {
	margin-left: 2px;
}
*/
.btn.icon { /* Both btn and icon. */
	height: 26px; /*31px;*/
	width: 26px; /*27px;*/
	margin-top: 0px; /*5px;*/
	margin-bottom: 0px;
	margin-left: 0.5rem;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0.05rem;
	padding-right: 0.05rem;
	border: 1px solid lightgrey;
	border-radius: 3px 3px;
	background-color: var(--btn-icon-tbl);
}

.btn.icon.scroll-to-top {
	height: 50px;
	width: 50px; 
	border-radius: 25px 25px;
	opacity: 0.75;
}

.btn.icon.hide {
	background-color: unset;
}

.btn.icon.centre {
	margin: 0;
	position: absolute;
	left: 50%; 
	-ms-transform: translate(-50%, 0%); 
	transform: translate(-50%, 0%);
}

.btn.icon.tbl {
	height: 26px;
	margin-top: 0px;
	margin-left: 0px;
	float: right;
	background-color: var(--btn-icon-tbl);
	border: 1px solid lightgrey;
}

.btn .icon { /*  When icon is a decendant of btn. */
	background-color: none;
}

.btn .svg { /* When svg is a decendant of btn. */
	fill: currentColor;
	margin: auto;
	width: var(--btn-icon-size);
	height: var(--btn-icon-size);
}

.img .svg {
	background-color: red;
	width: var(--btn-icon-size);
	height: var(--btn-icon-size);
}

.btn.list-remove
{
	height: 38px;
	width: 84px;
}

.btn:disabled {
	background-color: var(--btn-disabled);
}

.btn.fb-comment {
	font-size: 13px;
	height: 20px;
	margin-top: 3px;
	margin-bottom: 3px;
	padding-top: 0px;
	padding-bottom: 0px;
	background-color: rgb(221, 233, 255);
	border: 1px solid lightgray;
}

.attach-btn {
	display: flex;
	padding-left: 0px;
	padding-right: 0px;
}

.attach-control {
	display: flex;
	padding-left: 0px;
	padding-right: 0px;
}

.edt-controls {
	padding-left: 0px;
}

.edt-controls-group {
	padding-right: 0px;
}

.current {
	background-color: #20bdf0;
}

.page-button {
	width: 41px;
	height: 32px;
	margin-left: 1px;
	margin-right: 1px;
}

.frozen-hdr {
	background-color: #7b99ce;
	border-radius: 3px 3px;
	position: sticky;
	top: 40px;
}

.page-buttons-container {
	position: sticky;
	top: 0px; /* sticky requires a top value */
	display: inline-block;
}

button:focus {
	outline: none;
}

button:hover {
	color: red;
}

.search-button {
	background-color: transparent;
	stroke: var(--btn-blue-default);
	fill: var(--btn-blue-default);
	width: 2.35rem;
	height: 2.35rem;
	stroke-width: 10;
	border: solid 1px #ced4da;
	border-radius: 4px 4px;
	position: relative;
	-webkit-transform: translate(0px, -1px); /* Safari, Chrome and Edge */
	-moz-transform: translate(0px, -1px); /* Firefox */
	-o-transform: translate(0px, -1px); /* Opera */
	display: inline-block;
}

.search-button.reset {
	transform: translate(-40px);
}

#category_id {
	margin-right: 4px;
}

#page-buttons-container_id {
	margin-right: 4px;
}

#list-view-mobile_id {
	margin-right: 1px;
}

#list-view_id {
	margin-right: 1px;
}

.function-button {
	background-color: transparent;
	width: 2.5rem;
	height: 2.5rem;
	stroke-width: 10;
	border: solid 1px #ced4da;
	border-radius: 4px 4px;
	position: relative;
	display: inline-block;
}

.function-button.space {
	margin-right: 5px;
}

.function-button.space-big {
	margin-right: 10px;
}

.function-button .blue {
	filter: var(--btn-blue-default-filter);
}

.function-button .grey {
	filter: var(--btn-grey-default-filter);
}

.function-button.white {
	background-color: aliceblue;
	opacity: 60%;
}

.function-button .previous {
	transform: rotate(180deg);
}

.reset-button {
	width: 35px;
	height: 35px;
}

.close-button {
	top: 10px;
	background-color: white;
	width: 2.5rem;
	height: 2.5rem;
	border: solid 1px #ced4da;
	border-radius: 4px 4px;
}

.close-button.side-panel{
	position: absolute;
	width: 2rem;
	height: 2rem;
}

.close-button.side-panel.left{
	margin-left: 10px;
}

.radio-button {
	padding-left: 5px;
}

.frozen {
	position: sticky;
	top: 1px;
}

.ol-control {
	background-color: antiquewhite;
}

.map-marker-pin {
	top: 65px;
	left: .5em;
}

.ol-touch .map-marker-pin {
	top: 80px;
}

.map-polygon {
	top: 65px;
	left: 2em;
}

.map-polygon-on {
	top: 65px;
	left: 2em;
}

.ol-touch .map-polygon {
	top: 80px;
}

.map-clear-vectors {
	top: 65px;
	left: 3.5em;
}

.ol-touch.map-clear-vectors {
	top: 80px;
}

.map-zoom-extents {
	top: 0.5em;
	left: 2.2em;
}

.ol-touch.map-zoom-extents {
	top: 80px;
}

.map-zoom-street-level {
	top: 0.5em;
	left: 3.7em;
}

.ol-touch.map-zoom-street-level {
	top: 80px;
}

.map-zoom-detail-level {
	top: 0.5em;
	left: 5.2em;
}

.ol-touch.map-zoom-detail-level {
	top: 80px;
}

.map-zoom-box {
	top: 0.5em;
	left: 6.7em;
}

.ol-touch.map-zoom-box {
	top: 80px;
}

.map-zoom-level {
}

.map-slider {
	top: 0;
	left: 7.75em;
	-webkit-appearance: none;
	-webkit-transition: 0.2s;
	width: 80px;
	height: 5px;
	border: 1px solid lightgrey;
	border-radius: 1px;
	background: #a0bdf0;
	opacity: 1;
	transition: opacity 0.2s;
	appearance: none;
	cursor: pointer;
	margin-top: 17px;
	margin-left: 15px;
}

.map-slider.opacity{
	left: 13.25em;
}

.map-slider:hover {
	opacity: 1;
}

.map-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	background: #FFFFFF;
	background-image: url(png/Map.png);
	border: 1px solid lightgrey;
	border-radius: 2px;
	cursor: pointer;
}

.map-slider.opacity::-webkit-slider-thumb {
	background: #FFFFFF;
	background-image: url(png/Opacity.png);
}

.map-slider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	background: #FFFFFF;
	background-image: url(png/Map.png);
	border: 1px solid lightgrey;
	border-radius: 2px;
	cursor: pointer;
}

.map-slider.opacity::-moz-range-thumb {
	background: #FFFFFF;
	background-image: url(png/Opacity.png);
}

.map-horizontal-line {
	border-top: 1px dotted black;
	width: 97%;
	position: absolute;
	left: 15px;
	top: 50%;
}

.map-vertical-line {
	border-left: 1px dotted black;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 0px;
}

.ol-touch.map-slider {
	top: 80px;
}

#records-view-container_id {
	display: inline-block;
}

#records-view-container-mobile_id {
	display: none;
}

@media only screen and (max-width: 640px) { /* was 641px */
	.frozen {
		/*background-color: green;*/
	}

	.frozen {
		position: unset;
	}

/*	#harbury_id {
		display: none;
	}
*/
	#page-first_id {
		display: none;
	}

	#page-last_id {
		display: none;
	}

	#rows_id {
		display: none;
	}

	#records-view-container_id {
		display: none;
	}

	#records-view-container-mobile_id {
		display: inline-block;
	}

	#order_id {
		display: none;
	}
}
	/*div.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;*/