@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
body {
		font-size: 100%;
	}

	.title {
    font-family : 'Montserrat', Arial, "sans-serif";
    font-weight : 900;
    /*font-size: 250%;*/
    color : #FFFFFF;
}
	h1 {
    font-family : 'Montserrat', Arial, "sans-serif";
    font-weight : 500;
    font-size: 32pt;
    color : rgba(29,28,28,1.00);
	line-height: 1;

}

	h2 {
    font-family : 'Montserrat', Arial, "sans-serif";
    font-weight : 500;
    font-size: 26pt;
    color : #221f1f;
	line-height: 1;
}


	h3 {
    font-family : 'Montserrat', Arial, "sans-serif";
    font-weight : 500;
    font-size: 20pt;
    color : #221f1f;
	line-height: 1;
}

	h4 {
    font-family : 'Montserrat', Arial, "sans-serif";
    font-weight : 200;
    font-size: 110%;
    color : #221f1f;
	line-height: 1;
}

	p, ol, ul {
    font-family: 'Roboto', Arial, "sans-serif";
    font-weight : 300;
    font-size: 16pt;
    color : #221f1f;
	line-height: 1.4;
}
	/*a:link {
		font-weight : 900;
		font-style: normal;
		color : rgba(3,155,229,1.00);
		text-decoration: none;

	}
	a:visited, a:hover, a:active {
		font-weight : 900;
		font-style: normal;
		color : rgba(3,155,229,1.00);
		text-decoration: none;

	}*/

	strong, b {
		font-weight: 900;
	}


	.instructions {
    font-family : Roboto, Arial, "sans-serif";
    font-weight : 300;
    font-size: 1.8em;
		font-style: italic;
    color : rgba(29,28,28,1.00);
	line-height: 1;
}

	.feedback {
    font-family : Roboto, Arial, "sans-serif";
    font-weight : 300;
    font-size: 90%;
    color : #24779b;
}

	a.button {
  	background-color:#24779b;
  	border: none;
  	color:#FFFFFF;
	font-family : 'Montserrat', Arial, "sans-serif";
  	font-weight : 500;
	font-size: 20pt;
  	padding: 6px 24px 6px 24px;
  	text-align: left;
  	text-decoration: none;
  	display: inline-block;
	border-radius: 10px;
}

	.button:hover {
  background-color: #24779b;
  color: white;
}


	.disabled {
  	opacity: 0.6;
  	cursor: not-allowed;
}
	.button {
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

div.card-section {
	border-top: 1px solid rgba(160, 160, 160, 0.2);
    padding: 28px; 
    border-radius: 5px;
	cursor: pointer;
}

div.custom-card-color {
	background-color:#f7f7f7
}

span.custom-card-title-1 {
	color: #221f1f;
	font-size: 32pt;
	font-family: 'Montserrat', Arial, "sans-serif";
	font-weight: 500;
}

span.custom-card-title-2 {
	color: #221f1f;
	font-size:26pt;
	font-family: 'Montserrat', Arial, "sans-serif";
	font-weight: 500;
	text-align:center;
}

span.custom-card-title-3 {
	color: #221f1f;
	font-size:20pt;
	font-family: 'Montserrat', Arial, "sans-serif";
	font-weight: 500;
}

div.custom-card-title-3 {
	color: #221f1f;
	font-size:20pt;
	font-family: 'Montserrat', Arial, "sans-serif";
	font-weight: 500;
}

a.button-title {
	background-color:#24779b;
  	border: none;
  	color:#FFFFFF;
	font-family : 'Montserrat', Arial, "sans-serif";
	font-size:20pt;
}

p.more-less {
	color: #24779b;
	font-size:15pt;
	font-weight:500;
	text-align:right;
}

div.situation-grid {
	display: grid;
  grid-template-columns: 3fr 1fr;
	grid-template-rows: 2fr;
	align-items:center;
	padding-top:2%;
	padding-left:5%;
	padding-bottom:2%;
	border-radius:5px;
}

.custom-green-chip {
	background-color: #1c7c54;
	color:#FFFFFF;
	font-size: 1.8rem;
	width: 50%;
	text-align:center;
}

.custom-red-chip {
	background-color: #d62246;
	color:#FFFFFF;
	font-size: 1.8rem;
	width: 50%;
	text-align:center;
}

.icons-custom {
	color:#221f1f;
	font-size: 12pt;
}

.custom-title-padding {
	padding-top: 30px;
}

.custom-scroll-margin {
	scroll-margin-top:64px;
}

.situation-title-margin {
	margin-bottom: 20px;
}

input[type=range] + .thumb {
    visibility: hidden;
}
input[type=range] + .thumb.active .value {
    visibility: hidden;
}

.breadcrumb-menu{
	font-size: 12pt;
	a {
		color:#221f1f;
	}
	span {
		color:#24779b;
	}
}

.center-fit-image {
	width:100vw;
	justify-content: center;
}

.feedback-card {
	padding: 1.0em 3.0em 2.0em 3.0em;
	margin-bottom: 2.5em;
}
.expert-comp {
	background-color: white;
	padding: 1.0em 2.0em 2.0em 2.0em; 
}