:root{
	--ca-blue: #1f417d;
	--ca-blue-rgb: 31,65,125;
	--ca-white: white;
	--ca-gray: #dedede;
	--ca-dark-gray: #555;
	--ca-light-gray: var(--bs-tertiary-bg);
	--ca-green: green;
	
	--bs-font-sans-serif: Arial, sans-serif;
	
	--bs-primary-rgb: var(--ca-blue-rgb); /*#1f417d*/
	
	/*
	
	--bs-secondary-color:var(--bs-body-color);
	
	--bs-font-sans-serif: Arial, sans-serif;
	
	--bs-emphasis-color-rgb: var(--bs-body-color);
	
	--bs-btn-bg: var(--bs-body-color);
	--bs-btn-hover-bg: var(--bs-body-color);
	--bs-btn-active-bg: var(--bs-body-color);
	
	--input-color: #555;
	--navbar-color: white;
	*/
}

.navbar {
	--bs-navbar-color: var(--ca-white);
	--bs-navbar-hover-color: var(--ca-blue);
	
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255, 255, 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	--bs-navbar-toggler-border-color: var(--ca-white);
	
	/* I could not find a built-in bootstrap selector for changing the nav item background on hover. */
	a:hover, a:focus {
		background-color: var(--ca-white);
	}
}

.btn-primary {
	--bs-btn-border-color: var(--ca-blue);
	--bs-btn-bg: var(--ca-blue);
}

.form-check-input:checked {
	background-color: var(--ca-blue);
	border-color: var(--ca-blue);
}

.form-select {
	background-color: var(--ca-light-gray);
}

.form-control {
	background-color: var(--ca-light-gray);
}

.form-control:focus {
	background-color: var(--ca-light-gray);
}



.form-label {
	color: var(--ca-dark-gray);
	margin-bottom: 0;
}

.btn-outline-primary {
	--bs-btn-color: var(--ca-blue);
	--bs-btn-border-color: var(--ca-blue);
}

.ca-form-card-body {
	padding: 3em;
}

.pre {
	white-space: pre;
}

.pre-line {
	white-space: pre-line;
}

.cursor-not-allowed {
  cursor: not-allowed;
}