html, body{
	font-size: 16px;
  display: inline;  
}
.bg-lightgray{
	background-color: #dedede;
}
.white{
	color: #ffffff;
}
.gray{
	color: #343434;
}
.bg-lightblue {
	background-color: #518ec1;
}
.lightblue {
	color: #518ec1;
}
/* .bg-lightblue-highlight{
	background-color: rgba(81,142,193,0.2)
} */
.bg-lightblue-highlight{
	background-color: rgba(81,142,193,0.1)
}
.bg-darkblue {
	background-color: #1a4073;
}
.darkblue {
	color: #1a4073;
}
.bg-yellow {
	background-color: #fbba2a;
}
.yellow {
	color: #fbba2a;
}
.bg-yellow-highlight{
	background-color: rgba(251,186,42,0.2);
}
h1, h2{
  font-weight: bold !important;
}


/*NAV MENU */
#navbtn{
	text-align: right;
}
#logo{
	width: 100%;
	height: auto;
	max-width: 200px;
}

.dropdown-menu{
  background-color: #1a4073;
}

.dropdown-menu li .dropdown-item{
  color: #ffffff;
}

.dropdown-menu li .dropdown-item:hover{
  background-color: rgba(251,186,42,0.2);
  font-weight: 500;
  -webkit-transition: all 200ms smooth;
  -o-transition: all 200ms smooth;
  transition: all 200ms smooth;
}

/*BUTTONS*/
.btn:disabled {
  opacity: 1;
}
.btn-primary{
  color: #fff;
  background-color: #1a4073;
  border-color: #1a4073;
  -webkit-transition: all 200ms smooth;
  -o-transition: all 200ms smooth;
  transition: all 200ms smooth;
}
.btn-primary:hover {
  color: #fff;
  background-color: #0c2d57 !important;
  border-color: #173967 !important;
}
.btn-check:focus + .btn-primary, .btn-primary:focus {
  color: #fff;
  background-color: #0c2d57;
  border-color: #173967;
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #173967;
  border-color: #1a4073;
}
.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-primary:disabled, .btn-primary.disabled {
  color: #fff;
  background-color: #1a4073;
  border-color: #1a4073;
}

.btn-light {
  color: #000;
  background-color: #cdcdcd;
  border-color: #cdcdcd;
  -webkit-transition: all 200ms smooth;
  -o-transition: all 200ms smooth;
  transition: all 200ms smooth;
}
.btn-light:hover {
  color: #000;
  background-color: #a4a4a4 !important;
  border-color: #a4a4a4 !important;
}
.btn-check:focus + .btn-light, .btn-light:focus {
  color: #000;
  background-color: #a4a4a4;
  border-color: #a4a4a4;
  box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}
.btn-check:checked + .btn-light, .btn-check:active + .btn-light, .btn-light:active, .btn-light.active, .show > .btn-light.dropdown-toggle {
  color: #000;
  background-color: #a4a4a4;
  border-color: #a4a4a4;
}
.btn-check:checked + .btn-light:focus, .btn-check:active + .btn-light:focus, .btn-light:active:focus, .btn-light.active:focus, .show > .btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}
.btn-light:disabled, .btn-light.disabled {
  color: #000;
  background-color: #cdcdcd;
  border-color: #cdcdcd;
}

.btn-warning {
  color: #000;
  background-color: #fbba2a;
  border-color: #fbba2a;
  -webkit-transition: all 200ms smooth;
  -o-transition: all 200ms smooth;
  transition: all 200ms smooth;
}
.btn-warning:hover {
  color: #000;
  background-color: #fbc03f;
  border-color: #fbc03f;
}
.btn-check:focus + .btn-warning, .btn-warning:focus {
  color: #000;
  background-color: #fbc03f;
  border-color: #fbc03f;
  box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
}
.btn-check:checked + .btn-warning, .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle {
  color: #000;
  background-color: #ffcd39;
  border-color: #fbc03f;
}
.btn-check:checked + .btn-warning:focus, .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus, .show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
}
.btn-warning:disabled, .btn-warning.disabled {
  color: #000;
  background-color: #fbba2a;
  border-color: #fbba2a;
}
/*CARDS*/
.card-header{
  background-color: rgba(251,186,42,0.4);
}
/* ACCORDION */
.accordion-button{
  transition: all 400ms;
}
.accordion-header.bg-lightblue-highlight > .accordion-button, .accordion-header.bg-lightblue-highlight > .accordion-button.collapsed, .bg-lightblue-highlight.accordion-collapse{
	background-color: rgba(81,142,193,0.1) !important;
	color: #000000;
}
.accordion-button > span.instructions, .accordion-button.collapsed > span.instructions {
  font-size: 0.8rem;
  color: transparent;
  flex: 1 1 5%;
  order: 2;
}
.accordion-button span.fw-bold, .accordion-button.collapsed span.fw-bold {
  flex: 1 1 80%;
  order: 1;
}
.accordion-button::after, .accordion-button.collapsed::after {
  flex: 1 1 10%;
  order: 3;
}
.collapse.show{
  margin: .0 -2px;
  border-bottom: 2px solid #518EC1;
  border-left: 2px solid #518EC1;
  border-right: 2px solid #518EC1;
}

.borderedTable td, .borderedTable th {
  border:1px solid gray;
}
#quesform td, #quesform th {
  padding:0;
}
@media screen and (max-width: 767px){
	.btn.w-25{
		width: 45% !important;
	}
}
@media screen and (min-width: 768px){
	.btn.w-25{
		width: 25% !important;
	}
	#intro > h2{
		padding: 0 1rem;
	}
  .accordion-button::after, .accordion-button.collapsed::after {
    flex: 0 1 4%;
  }
}
@media screen and (min-width: 992px){
	.instruct-arrows{
		max-width: 70%;
	}
	#first > .customTable > .col-md > small{
		font-size: 1rem;
	}
	.card-body h1{
    margin: 0.5rem 0;
  }
}
@media screen and (min-width: 1280px){
	#intro.card-body > h2 > *{
		font-size: 2rem;
	}
}
@media screen and (min-width: 1280px){
	.instruct-arrows{
		max-width: 50%;
	}
}