/* Custom css. Requires bootstrap5 */

html{ font-size: 1.75vmin; } /* computed from a font-size=16px and a vheight=vmin=982px*/

/* no fancy, browser-decorated anchors and iframes: */
a, a:hover, a:visited, a:link, a:active{
	text-decoration: none !important;
}
iframe{ border:0; margin:0; }

/* redefine bootstrap (bs) global colors */
:root {
	--bs-primary-rgb: 7,104,159;  /* overrides .text-primary */
	--bs-link-color: rgba(var(--bs-primary-rgb), 1);  /* overrides <a> text color */
	--bs-body-bg-rgb: 248,249,250;  /* overrides color of class .bg_body */
	--bs-light-rgb: 202,214,222;  /* overrides color of class .bg-light */
	--bs-primary: rgba(var(--bs-primary-rgb), 1); /* primary buttons bg, see below */
	--bs-primary-active-hover: rgba(32, 77, 116, 1); /* primary buttons hover bg */
	--bs-border-color: rgb(179, 186, 193);  /* color of .border* classes and (see below) form-control border */
	--bs-border-width: 1px; /* same as above but controls the width */
}

/* redefine bootstrap .btn-primary colors */
.btn-primary {
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-bg: var(--bs-primary-active-hover);
	--bs-btn-hover-border-color: var(--bs-primary-active-hover);
	--bs-btn-active-bg: var(--bs-primary-active-hover);
	--bs-btn-active-border-color: var(--bs-primary-active-hover);
	--bs-btn-disabled-bg: var(--bs-primary);
	--bs-btn-disabled-border-color: var(--bs-primary);
}

/* make option padding as firefox (chrome <option>s are very narrow) */
option {
	padding: 2px 4px;  /* ver hor */
}
/* set checkboxes and radio background equal to .btn-primary colors (for browsers
released roughly < 2021 doesn't work, but we don't care) */
input[type=checkbox], input[type=radio]{
	accent-color: var(--bs-primary) !important;
}
input[type=checkbox]:hover, input[type=radio]:hover{
	accent-color: var(--bs-primary-active-hover) !important;
}

/* change focus border. set outline none and make a shadow instead but not too spread out */
select:focus, a:focus, button:focus, input:focus, *[tabindex]:not([tabindex^="-"]):focus {
	box-shadow: 0px 0px 2px 2px rgba(128,198,237,1) !important;
	outline: none;
}

/* harmonize borders color and width */
*.form-control:not([style*="border-color"]):not(.border-danger), .leaflet-control-layers {
	border-color: var(--bs-border-color) !important; /*#bec4ca !important;*/
	border-width: var(--bs-border-width) !important;
}

/* remove background and foregrounds added by Chrome when autocompleting <input> values  */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active  {
	-webkit-box-shadow: 0 0 0 30px white inset !important;  /* https://stackoverflow.com/a/14205976 */
}

/* style single <select> (combo-box like) */
select:not([multiple]):not([size]).form-control{
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	/* config <select> arrow via inline coded image (svg) */
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20style%3D%22background-color%3Atransparent%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22160%22%3E%3Cpath%20stroke-linejoin%3D%22round%22%20style%3D%22fill%3A%20none%3Bstroke-width%3A%2020%3Bstroke%3A%20black%3B%22%20d%3D%22M%2010%2C60%2050%2C20%2090%2C60%22%2F%3E%3Cpath%20stroke-linejoin%3D%22round%22%20style%3D%22fill%3A%20none%3Bstroke-width%3A%2020%3Bstroke%3A%20black%3B%22%20d%3D%22M%2010%2C100%2050%2C140%2090%2C100%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: right .3em top 50%;
	background-size: .65em auto;
	padding-right: 1.2rem;
	padding-left: 0.3rem;
}

/* style disabled */
*[disabled:not([disabled="false"])], .disabled{ opacity: 0.65 !important;}
/* style disabled for <option>s (in safari, `disabled` above does not work) */
option[disabled:not([disabled="false"])], option.disabled{ color: #bbb !important; }
