/* 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, button.btn-link, button.btn-link:hover{
	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-rgb: var(--bs-primary-rgb);
	--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-rgb: 32,77,116;
	--bs-primary-active-hover: rgba(var(--bs-primary-active-hover-rgb), 1); /* primary buttons hover bg */
	--bs-link-hover-color-rgb: 57,154,219; /* var(--bs-primary-active-hover-rgb);*/  /* primary anchors and btn link hover */
	--bs-border-color: rgb(179, 186, 193);  /* color of .border* classes in bootstrap5 */
	--bs-border-style: solid;  /* style of .border* classes in bootstrap5 */
	--bs-border-width: 1px; /* width of .border* classes in bootstrap5 */
	--bs-border-radius: 0.375rem; /* radius of the .rounded class in bootstrap5 */
	--v-arrows-img: 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%2015%3Bstroke%3A%20DimGray%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%2015%3Bstroke%3A%20DimGray%3B%22%20d%3D%22M%2010%2C100%2050%2C140%2090%2C100%22%2F%3E%3C%2Fsvg%3E');
}

/* anchors and btn-link hover must match primary button active color*/
.btn-link:hover {
	color: rgba(var(--bs-link-hover-color-rgb), 1)
}
a:hover {
	--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
}
/* btn sets a font size 1rem, but when btn-link we want it to inherit, as normal anchors do */
button.btn.btn-link{
	font-size: inherit !important;
}

/* navbar */
nav .nav-link, nav .dropdown-item{
	color: lightgray !important;
	background-color: transparent;
}
nav .nav-link:hover, nav .dropdown-item:hover{
	color: white;
	background-color: rgba(var(--bs-primary-rgb), .66);
}

/* restyle bootstrap .btn-primary colors */
.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--bs-primary-active-hover);
	--bs-btn-hover-border-color: var(--bs-primary-active-hover);
	--bs-btn-focus-shadow-rgb: 49,132,253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--bs-primary-active-hover);
	--bs-btn-active-border-color: var(--bs-primary-active-hover);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--bs-primary);
	--bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-outline-primary{
	--bs-btn-color: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--bs-primary);
	--bs-btn-hover-border-color: var(--bs-primary);
	--bs-btn-focus-shadow-rgb: 13,110,253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--bs-primary);
	--bs-btn-active-border-color: var(--bs-primary);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: var(--bs-primary);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--bs-primary);
	--bs-gradient: none;
}
.nav-pills {
	--bs-nav-pills-link-active-bg: 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;
}

/* bring focus border to front, avoiding clipping (bootstrap does this only within an
.input-group, so we copied the css by removing each ".input-group > " prefix  */
.form-control:focus, .form-floating:focus-within, .form-select:focus{
	z-index: 5;
}

/* harmonize border colors (.border is already set by bootstrap, here for clarity) */
.form-control:not([style*="-color"]):not([class*="border-"]),
.input-group-text:not([style*="-color"]):not([class*="border-"]),
.border {
	border-color: var(--bs-border-color) !important;
}

/* harmonize borders edges (.rounded is already set by bootstrap, here for clarity */
*:not(.input-group) > *.form-control:not([style*="-radius"]):not([class*="rounded-"]), .rounded{
	border-radius: var(--bs-border-radius) !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: var(--v-arrows-img);
	background-repeat: no-repeat;
	background-position: right .3em top 50%;
	background-size: .65em auto;
	padding-right: 1.2rem;
	padding-left: 0.3rem;
}

/* style form panels/containers */
div.form-control{
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}