@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
@import url('https://use.fontawesome.com/releases/v5.8.2/css/all.css');
@import url('bootstrap_overrides.css.jsp');
@import url('style-imcms-override.css');
@import url('spaces.css.jsp');


html {
	min-height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
}
html.fancybox-html {
	overflow-y: auto;
}
body {
	min-height: 100%;
	margin: 0;
	background: rgb(40, 103, 158) no-repeat;
	background: linear-gradient(180deg, rgba(121, 194, 227, 1) 0%, rgba(40, 103, 158,1) 100%);
	-webkit-text-size-adjust: none;
	font-size: 20px;
}

body, td {
	font: 400 20px/1.5em 'Open Sans', Verdana, Geneva, sans-serif;
	color: #333;
}
.xs body, .xs td {
	font-size: 18px;
	line-height: 1.5em;
}

h1 {
	font-size: 36px;
	line-height: 1.0em;
}
h1 > span {
	display: block;
	font-size: 27px;
	line-height: 1.0em;
}
h2 {
	font-size: 25px;
	line-height: 1.1em;
}
h3 {
	font-size: 23px;
	line-height: 1.1em;
}

h4,
h5,
h6 {
	font-size: 21px;
	line-height: 1.2em;
}

.xs h1 {
	font-size: 28px;
	line-height: 1.0em;
}
.xs h1 > span {
	font-size: 24px;
	line-height: 1.0em;
}
.xs h2 {
	font-size: 23px;
	line-height: 1.1em;
}
.xs h3 {
	font-size: 21px;
	line-height: 1.1em;
}
.xs h4,
.xs h5,
.xs h6 {
	font-size: 19px;
	line-height: 1.2em;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	margin: 0 0 0.7em 0;
	font-family: 'Open Sans', Verdana, Geneva, sans-serif;
	font-weight: 700;
	color: #333;
}
h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6,
.h1 + .h2,
.h2 + .h3,
.h3 + .h4,
.h4 + .h5,
.h5 + .h6,
p + .h2,
p + .h3,
p + .h4,
p + .h5,
p + .h6 {
	margin-top: 1.2em;
}

.ingress {
	font-size: 21px;
	font-weight: 600;
}

fieldset, .fieldset {
	font: 400 20px/1.5em 'Open Sans', Verdana, Geneva, sans-serif;
	color: #333;
}

fieldset legend, .fieldset {
	margin-top: 2rem;
	padding: 2rem 0 1rem 0;
	border-top: 1px solid #ccc;
	font: 600 22px/1.5em 'Open Sans', Verdana, Geneva, sans-serif;
	color: #333;
}

fieldset .quiz-text {
	margin-top: 1rem;
	font: 600 22px/1.5em 'Open Sans', Verdana, Geneva, sans-serif;
	color: #333;
}
fieldset .quiz-text:first-child {
	margin-top: 2rem;
	padding: 2rem 0 1rem 0;
	border-top: 1px solid #ccc;
}

.quiz-number {
	display: inline;
	float: left;
	margin-right: 10px;
}

.res-question {
	margin-top: 1em;
}
.res-question .nbr {
	display: block;
	float: left;
	margin-right: 25px;
	font: 600 17x/1.5em 'Open Sans', Verdana, Geneva, sans-serif;
	color: #333;
}
.res-question .res-table .label {
	font-weight: 600;
	padding-right: 20px;
	width: 20%;
}

/* *******************************************************************************************
 *         Links                                                                             *
 ******************************************************************************************* */

A:link,
A:visited {
	position: relative;
	position: relative;
	color: #2079e6;
	text-decoration: none;
}

A:visited {
	color: #b523a2;
}

A:active,
A:focus {
	color: #2488df;
	text-decoration: none;
	-webkit-box-shadow: 0 0 0 0.2rem #2488df !important;
	-moz-box-shadow: 0 0 0 0.2rem #2488df !important;
	-o-box-shadow: 0 0 0 0.2rem #2488df !important;
	-ms-box-shadow: 0 0 0 0.2rem #2488df !important;
	box-shadow: 0 0 0 0.2rem #2488df !important;
}


/* *******************************************************************************************
 *         Content                                                                           *
 ******************************************************************************************* */

#pageWrapper {
	max-width: 1280px;
	min-height: 100%;
	margin: 0 auto;
	background-color: rgba(255, 255, 255, .8);
	padding: 0;
}
@media (max-width: 1285px) {
	body,
	#pageWrapper {
		background: #deecf4 none !important;
	}
}

#header,
#main {
	padding-left: 20px;
	padding-right: 20px;
}

#main {
	padding-top: 2em;
	padding-bottom: 2em;
}


[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
  cursor: pointer;
}

.table-primary tbody + tbody, .table-primary td, .table-primary th, .table-primary thead th {
    border-color: #69B0D5;
}
.table-primary, .table-primary > td, .table-primary > th {
    background-color: #69B0D5;
}
.table-active, .table-active > td, .table-active > th {
	background-color: #C3D8E8;
	font-weight: 400;
}



/* *******************************************************************************************
 *         Outcome                                                                           *
 ******************************************************************************************* */

#outcomeDiv {
	display: none;
}
#outcomeDiv.edit-mode {
	display: block;
}

.fa-top.bs-callout-fa {
	top: 3px !important;
	left: -10px !important;
	margin-top: 0 !important;
}
.bs-callout > .fa-top.bs-callout-fa + div {
	padding: 13px 0 0 6px;
}
.bs-callout > .fa-top.bs-callout-fa + div h1:first-child,
.bs-callout > .fa-top.bs-callout-fa + div h2:first-child,
.bs-callout > .fa-top.bs-callout-fa + div h3:first-child,
.bs-callout > .fa-top.bs-callout-fa + div h4:first-child {
	text-indent: 20px;
}


/* *******************************************************************************************
 *         Cases                                                                             *
 ******************************************************************************************* */

.case-list {
	margin: 2em 0;
}
.case-ul {
	margin-top: 0;
	margin-bottom: 0;
}
.case-list-heading {
	margin-top: 1em;
	padding-left: 1em;
	font-size: 90%;
}
.case-list-space {
	min-height: 1em;
}

#aboutYourChoice.bs-callout > #boxContent {
	max-height: 180px;
	overflow: hidden;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

#aboutYourChoice.bs-callout.vis > #boxContent {
	max-height: 100000px;
}

#aboutYourChoice.bs-callout > #boxContent::after {
	content: '↓↓↓';
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	left : 0;
	height: 70px;
	background: rgb(208, 230, 241);
	background: linear-gradient(180deg, rgba(208, 230, 241,0) 0%, rgba(208, 230, 241,1) 100%);
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	line-height: 22px;
	padding-top: 38px;
	color: rgba(0, 0, 0, 0.7) ;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

#aboutYourChoice.bs-callout.vis > #boxContent::after {
	height: 0;
	background: transparent;
}

#aboutYourChoice.bs-callout > #boxContent:hover::after,
#aboutYourChoice.bs-callout > #boxContent:focus::after {
	color: #2488df !important;
}

/* *******************************************************************************************
 *         Header                                                                            *
 ******************************************************************************************* */

#header {
	background-color: #fff;
	border-bottom: 6px solid rgb(40, 103, 158);
}

.navbar {
	padding: 8px 0 8px 16px !important;
}

.navbar-brand {
	max-width: 70%;
}
.navbar-brand img {
	max-width: 250px !important;
	margin-top: -0.6rem;
}

.navbar-toggler {
  padding: .25rem .75rem;
  font-size: 1.25rem;
  line-height: 1;
  color: rgb(40, 103, 158);
  background-color: transparent;
  border: 1px solid rgb(40, 103, 158);
  border-radius: .25rem;
}

.navbar-nav {
	margin-top: 8px;
}
.navbar-nav .nav-item {
	font-size: 19px;
	line-height: 1em;
	font-weight: 700;
	text-align: center;
	border-left: 1px solid #d7d7d7;
	-webkit-transition: font-size .2s ease-in-out;
	-moz-transition: font-size .2s ease-in-out;
	-o-transition: font-size .2s ease-in-out;
	-ms-transition: font-size .2s ease-in-out;
	transition: font-size .2s ease-in-out;
}
.navbar-nav .nav-item:first-child {
	border-left: 0;
}
.nav-item a.nav-link {
	color: #28679e;
	padding: .2rem 1rem !important;
	-webkit-transition: padding .2s ease-in-out;
	-moz-transition: padding .2s ease-in-out;
	-o-transition: padding .2s ease-in-out;
	-ms-transition: padding .2s ease-in-out;
	transition: padding .2s ease-in-out;
}

@media screen and (max-width: 1330px) {
	.navbar-nav .nav-item {
		font-size: 19px;
	}
	.nav-item a.nav-link {
		padding: .2rem .5rem !important;
	}
}

@media screen and (max-width: 1050px) {
	.navbar-nav .nav-item {
		font-size: 18px;
	}
	.nav-item a.nav-link {
		padding: .2rem .4rem !important;
	}
}
.navbar-nav + .navbar-nav .nav-item a.nav-link {
	padding: .2rem 0 !important;
}

@media (max-width: 991.98px) {
	.navbar {
		padding: 0;
	}
	.navbar-nav {
		margin-bottom: 1em;
	}
	.navbar-collapse.collapsing,
	.navbar-collapse.collapse.show {
		margin: 0 -20px;
		-moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.5);
	-webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.5);
	box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.5);
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc');
	}
	.navbar-collapse.collapsing .navbar-nav .nav-item,
	.navbar-collapse.collapse.show .navbar-nav .nav-item {
		display: block;
		margin: 0 auto;
		border-left: 0;
		border-top: 1px solid #d7d7d7;
		font-size: 21px;
		width: 70%;
		max-width: 300px;
		min-width: 250px;
		text-align: center;
	}
	.navbar-collapse.collapsing .navbar-nav .nav-item:first-child,
	.navbar-collapse.collapse.show .navbar-nav .nav-item:first-child {
		border-top: 0;
	}
	.navbar-collapse.collapsing .navbar-nav .nav-item a.nav-link,
	.navbar-collapse.collapse.show .navbar-nav .nav-item a.nav-link {
		padding: .8rem 1rem !important;
	}
}



/* Temp templates */

#topMenu ul.top-menu {
	list-style-type: none;
	margin: 7px 0 0 0;
	padding: 0;
}
#topMenu ul.top-menu > li {
	display: inline-block;
	margin: 0;
	padding: 0;
	border-left: 1px solid #ccc;
}
#topMenu ul.top-menu > li:first-child {
	border-left: 0;
}
#topMenu ul.top-menu > li > a {
	display: inline-block;
	padding: 0 15px;
	font-size: 16px;
	line-height: 25px;
	font-weight: 600;
	color: rgb(40, 103, 158);
}

.mockup-container > .row {
	padding: 30px 0;
}

/* *******************************************************************************************
 *         Footer                                                                            *
 ******************************************************************************************* */

#footer {
	background-color: #fff;
	border-top: 3px solid rgb(40, 103, 158);
	padding: 10px 38px;
}

#identity {
	font-size: 13px;
}
#identity .label {
	font-weight: 700;
}
#identity .page {
	font-weight: 600;
}

/* *******************************************************************************************
 *         Buttons                                                                           *
 ******************************************************************************************* */

.btn-site {
	padding: .9rem 1.5rem;
	color: #fff;
	font-size: 21px;
	font-weight: 700;
	background-color: #28679e;
	color: #fff !important;
	border: 4px solid #fff;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	-o-border-radius: 6px;
	border-radius: 6px;
}

.xs .btn-site {
	font-size: 17px;
	-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.15);
          box-shadow: inset 0 0 10px rgba(0,0,0,.15);
}

.btn-site.btn-sm {
	padding: .4rem .7rem;
	font-size: 15px !important;
}
.btn-site.btn-xs {
	padding: .15rem .25rem;
	font-size: 12px !important;
}

.btn-site.btn-site-light {
	color: #5bc0de !important;
	background-color: rgba(91,192,222,0.1);
	border-color: rgba(91,192,222,0.4);
}

.btn-site:hover,
.btn-site:focus,
.btn-site:active {
	color: #fff !important;
	background-color: #08477E;
	border-color: rgba(255, 255, 255, 1);
}


.btn-site.btn-block {
	margin-bottom: 1em;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

#leftCol form .btn-site.btn-block,
#rightCol form .btn-site.btn-block,
.left-col form .btn-site.btn-block,
.right-col form .btn-site.btn-block {
	margin-top: 2em;
}
#leftCol form + form .btn-site.btn-block,
#rightCol form + form .btn-site.btn-block,
.left-col form + form .btn-site.btn-block,
.right-col form + form .btn-site.btn-block {
	margin-top: 0;
}

#goToQuizBtn,
#activateCasesBtn {
	margin-bottom: -1em !important;
}

/* *******************************************************************************************
 *         Cards                                                                             *
 ******************************************************************************************* */

.card-wrapper {
	margin-top: 2rem;
	border: 4px solid rgb(40, 103, 158);
}
.card {
	font-size: 21px;
	background: linear-gradient(180deg, rgba(103, 173, 211, 1) 0%, rgba(40, 103, 158,1) 100%);
	border: 4px solid #fff;
	color: #fff !important;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	-khtml-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
}
.card .card-body {
	padding-bottom: 0.75rem;
}
.card .card-title {
	font-weight: 700;
	margin-bottom: .5rem;
}
.card a {
	color: #fff !important;
	text-decoration: underline !important;
}

/* *******************************************************************************************
 *         Images                                                                            *
 ******************************************************************************************* */

#pageWrapper img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

#pageWrapper .fix-w img,
#pageWrapper img.fix-w,
#pageWrapper img[src="/imcms/images/icon_missing_image.png"] {
	width: auto;
	max-width: none;
}

figure {
  border: 1px solid rgba(40, 103, 158, .5);
	margin: 1.5rem auto 1rem auto;
  padding: 4px;
}
figure img {
	width: 100%;
	height: auto;
	max-width: 100%;
}
figcaption {
  background-color: rgba(40, 103, 158, .15);
  color: #444;
	font-size: 12px;
  font-style: normal;
	font-weight: 300;
  padding: 5px 12px;
  text-align: left;
}

.container-fluid.no-gutters {
	width: calc(100% + 40px);
	margin: -2em -20px 0 -20px;
	padding: 0;
}

.container-fluid.no-gutters figure {
	margin-top: 0;
	margin-bottom: 2em;
	padding: 0;
	border: 0;
}

.box {
  border: 1px solid rgba(40, 103, 158, .5);
	margin: 1.5rem auto 1rem auto;
  padding: 4px;
}
.box .box-heading {
	font-size: 22px;
	line-height: 1.1em;
  background-color: rgba(40, 103, 158, .15);
  color: #444;
	margin: 0 !important;
  padding: 10px 12px !important;
}
.box .box-content {
  color: #444;
	font-size: 17px;
	line-height: 1.4em;
  padding: 10px 12px 0 12px;
  text-align: left;
}


/* *******************************************************************************************
 *         References                                                                        *
 ******************************************************************************************* */


body#referenceViewer {
	margin: 0;
	padding: 0;
}
#referenceViewer {
	min-height: 100%;
	background-color: #deecf4;
}
#referenceViewer header {
	padding-bottom: 20px;
	background-color: rgba(91,192,222,0.25);
}
#referenceViewer .bs-callout-fa {
	position: relative;
	top: auto;
	left: auto;
	margin-top: 0;
	color: #5bc0de;
}
#referenceViewer .description {
	margin: 20px;
	padding: 20px 0 !important;
}
#referenceViewer .description h1 {
	color: #5bc0de;
}
#referenceViewer .btn-outline-danger {
	background-color: rgba(220, 53, 69, .2)
}
#referenceViewer .btn-outline-danger:not(:disabled):not(.disabled):hover,
#referenceViewer .btn-outline-danger:not(:disabled):not(.disabled).active,
#referenceViewer .btn-outline-danger:not(:disabled):not(.disabled):active {
	color: #fff;
	background-color: #dc3545;
	border-color: #dc3545;
}

/* Reference word */

dfn {
	font-style: normal;
	border-bottom: 3px dotted #00bb00;
	cursor: help;
}
dfn:hover,
dfn:focus,
dfn:active {
	background-color: rgba(0, 187, 0, 0.2);
}

.reference-list {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgb(40, 103, 158);
}
.reference-list-left,
.reference-list-right {}

ul li .reference-link.active {
	font-weight: 700;
	background-color: rgba(0, 187, 0, 0.2);
}


.popover-body > h1,
.popover-body > h2,
.popover-body > h3,
.popover-body > h4,
.popover-body > h5,
.popover-body > h6 {
	margin-bottom: 0.5em;
}

/* *******************************************************************************************
 *         Misc                                                                              *
 ******************************************************************************************* */

.custom-radio-lg {
	cursor: pointer;
}
.custom-radio-lg:hover {
	background-color: rgba(121, 194, 227, .2);
}
.custom-radio-lg:hover .custom-control-label {
	color: #2488df;
}
.custom-radio-lg .custom-control-label {
	width: 100%;
}

main .bs-callout > div {
	max-width: 640px;
}

.fancybox-slide {
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
@media (max-width: 575.98px) {
	.fancybox-slide {
		padding: 0;
	}
}



.level-table .table-primary,
.level-table .table-primary > td,
.level-table .table-primary > th {
    background-color: #8bc4e2 !important;
}
.level-table .table-primary tbody + tbody,
.level-table .table-primary td, .table-primary th,
.level-table .table-primary thead th {
    border-color: #8bc4e2 !important;
}

.off-screen {
	position: absolute !important;
	top: -10000px !important;
	left: -10000px !important;
}

.al { text-align: left !important; }
.ac { text-align: center !important; }
.ar { text-align: right !important; }
.at { vertical-align: top !important; }
.am { vertical-align: middle !important; }
.ab { vertical-align: bottom !important; }