*, *:before, *:after {
  box-sizing: border-box;
}

.btn-primary {
    --bs-btn-bg: #3b5b6f;
    --bs-btn-border-color: #3b5b6f;
    --bs-btn-hover-bg: #355264;
    --bs-btn-hover-border-color: #355264;
    --bs-btn-active-bg: #355264;
    --bs-btn-active-border-color: #355264;
    --bs-btn-disabled-bg: #3b5b6f;
    --bs-btn-disabled-border-color: #3b5b6f;
}

body {
  margin: 0px;
  color: #444;
  background-color: rgb(250, 250, 250);
}

h1, p {
  margin: 0 0 1em 0;
}

@media screen and (min-width: 200px) {

  .content {
    float: right;
    width: 79.7872%;
	display: grid;
	grid-template-columns: 1fr auto;
	
  }

.wrapper {
    margin: 0 auto;
  }

 .wrapper > * {
	color: #444;
	border-radius: 0;
	padding: 10px;
	font-size: 105%; 
	/* needed for the floated layout*/
	margin-bottom: 10px;
 }
}

@media screen and (min-width: 1200px) {

	.wrapper {
    margin: 0 auto;
  }
  .wrapper > * {
	color: #444;
	border-radius: 0px;
	padding: 10px;
	font-size: 105%;
	/* needed for the floated layout*/
	margin-bottom: 10px;
}
  
  
}

/* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */
@supports (display: grid) {
	
  .wrapper > * {
    width: auto;
    margin: 0;
	
  }
}
h6 {
	color: navy;
	font-size: 110%;
	vertical-align: top;
}
 h5 {
	vertical-align: bottom;
 }
 
 h2 {
	padding-bottom: 5px;
	padding-top: 10px;
 }
 h5 {
	padding-bottom: 25px; 
 }
 
h2.accordion-header {
	padding-bottom: 0;
	padding-top: 0;
 }

.small-tab {
	padding: .2rem 1rem;
	font-size: 1rem;
}