/* CSS Document */
html {
	font-size:14px;

}
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }
.page-footer{
	background:white;
	webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 2px rgb(0 0 0 / 30%);
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 2px rgb(0 0 0 / 30%);
}
.btn i {
	font-size:1em;
}
strong {
    font-weight: bold;
}

/* NAV */
nav {
	-webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 30%);
	box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 30%);
}
.sidebar {
	background: #ffffff;
	text-align: left;
}
.button-font-size{
	position: absolute;
    right: 10px;
    top: 16px;
    padding: 6px;
    height: 27px;
    line-height: 14px;
	    user-select: none;
}
.button-font-size i {
	font-size:0.7em;
}
#button-font-down{
	right: 50px;
}
.app-title, .app-title-main{
	font-family: 'Raleway';
    color: #5d5d5d;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    margin-left: 60px;
}
.app-title-main{
	margin:0;
	text-align: center;
}
.app-title-bar, .app-title-bar-main {
	margin-top: -56px;
    margin-left: 60px;
}
.app-title-bar-main{
	margin:-17px 0 0 0;
}
#logo-title{
	text-align: center;
}
@media (max-width: 600px){
	.app-title{
		font-size: 1.5rem;
	}
	.app-title-bar {
		margin-top:-46px;
	}
}

.ui-progressbar {
	margin: 20px;
	height: 1em;
	border: 1px solid #e0e0e0 !important;
	background: #e3e3e3;
}
.ui-progressbar .ui-progressbar-value {
    margin:0px; 
	border:none;
	background:#7893bf;
	border-bottom-left-radius: 1px;
	border-top-left-radius:1px;
	
}
.logo {
	background: url(../images/logo.png) no-repeat center center;
    background-size: contain;
	width:100%;
	height: 220px;
}
.logo-medium{
	background: url(../images/ohsu-small.png) no-repeat center center;
    background-size: auto 45px;
    width: 45px;
    height: 77px;
    position: absolute;
    right: 21px;
    top: 8px;

}
.logo-small{
	background: url(../images/ohsu-small.png) no-repeat center center;
    background-size: auto 45px;
    width: 60px;
    height: 59px;
    position: absolute;
    left: 0px;
    top: 0px;

}

/* PAGE */
.page-card{
	position:relative;
	margin: 20px;
    background: white;
    border-radius: 3px;
	padding: 20px;
	font-size:1rem;
	font-family: "Arial";
	-webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 30%);
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 30%);
}
.button-container{
	
	text-align: right;
	padding: 0px 20px 0px 20px;
    position: relative;
}

.btn {
	background-color:#7893bf;
}
.btn:hover{
	 background-color:#f2dd9e;
	color: #5d5d5d;
}
.btn:focus, .btn-large:focus, .btn-small:focus, .btn-floating:focus {
    background-color: #f2dd9e;
	color: #5d5d5d;
}
.button-login{
	
	width:200px;
	
	
	
}
.button-signup{
	background-color:white;
	color:#616365;
	margin-right: 20px;
}
@media (max-width: 600px){
	.button-signup{
		margin-right: 0px;
		margin-bottom:20px;
	}
}
/*  QUESTION CONTROLS */

.question-block{
	
	border-radius: 5px;
	position:relative;
	
	padding: 20px;
}
.question-block .btn {
	background-color: #f2f2f2;
}
.question-label label{
	font-size:1rem;
	color: #616365;
	
}
.question-label label ul li {
	margin-left:20px;
	list-style: disc;
}
.question-response {
	margin-top:10px;
}
.question-label-only {
	background:none;
}
.question-input {
	height: auto;
	text-align: left;
	margin-bottom: 5px;
	margin-right:5px;
	
}
.question-input label{
	font-size:1rem;
	color: #616365;
	text-transform: none;
}
.question-block .btn.question-checked {
	background-color:#f2dd9e;
}
.question-vertical .question-input {
	display: block;
    text-align: left;
    margin-bottom: 7px;
	height:auto;
}
.question-subblock {
	display: none;
	margin-left: 30px;
}
input:not([type]) {
	height: 2rem;
	font-size:1em;
}
.intro-header{
	justify-content: start;
    align-items: center;
    display: flex;
	font-size:1.7rem;
	text-align:left;
	font-family: 'Amatic SC', cursive;
	color: #5d5d5d;
	font-weight:600;
	border-radius: 3px;
	background: #b8c7cc54;
	padding: 10px;
}
.intro-subheader{
	 margin: 0px 0 20px 0;
}
.intro-subheader ul li{
	list-style: disc !important;
	margin-left: 20px;
}
.required{
	background: #d86666;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    color: white;
}
img {
	max-height:100%; 
	max-width:100%;
}
textarea {
	height:6rem;
	padding: 10px;
	font-size: 1rem;
}

/*  OTHER */
.footer-color-block{
	display: inline-block;
    width: 17px;
    height: 2px;
    margin-right: 1px;
}
.footer-block-1,.breast_cancer_block {background:#D7C8DF;}
.footer-block-2,.mammograms_block {background:#DDCDCE;}
.footer-block-3,.decision_aid_block  {background:#F2DD9E;}
.footer-block-4 {background:#DCD79F;}
.footer-block-5,.personal_history_block {background:#C1D3A3;}
.footer-block-6, .family_history_o_block {background:#B8C7CC;}
.footer-block-7,.family_history_b_block  {background:#B2C2DC;}

/*
.welcome_line, .intro_decision_line { border-bottom: 2px solid #b3b3b3;}
.personal_history_line { border-bottom: 2px solid #C1D3A3;}
.family_history_o_line { border-bottom: 2px solid #B8C7CC;}
.family_history_b_line { border-bottom: 2px solid #B2C2DC;}

.breast_cancer_line { border-bottom: 2px solid #D7C8DF;}
.mammograms_line { border-bottom: 2px solid #DDCDCE;}
.decision_aid_line { border-bottom: 2px solid #F2DD9E;}
*/
.section-header{
	display: inline-block;
    width:25px;
	height:25px;
	border-radius: 20px;
	vertical-align: middle;
	margin-right:10px;
}

.welcome_dot, .intro_decision_dot { background: rgb(215 200 223);} .welcome_back, .intro_decision_back { background: rgb(215 200 223 / 20%);}
.personal_history_dot { background: rgb(193 211 163);} .personal_history_back { background: rgb(193 211 163 / 20%);}
.family_history_o_dot { background: rgb(184 199 204);} .family_history_o_back { background: rgb(184 199 204 / 20%);}
.family_history_b_dot { background: rgb(178 194 220);} .family_history_b_back { background: rgb(178 194 220 / 20%);}

.breast_cancer_dot { background: rgb(215 200 223);} .breast_cancer_back { background: rgb(215 200 223 / 20%);}
.mammograms_dot { background: rgb(221 205 206);} .mammograms_back { background: rgb(221 205 206 /20%);}
.decision_aid_dot { background: rgb(242 221 158);} .decision_aid_back { background: rgb(242 221 158 / 20%);}


/* FONT */
.font-color-1{color: #767676;} /* grey */
.font-color-2{color: #ACACAC;} /* light grey */
.font-color-3{color: #90FFFF;} /* light green */
.font-color-4{color: #FFFFFF;} /* white*/
.font-color-5{color: #059191;} /* primary dark green*/
.font-color-6{color: #f9f6f6;} /* cream*/
.font-color-7{color:#20D1D1;} /*primary green */
.font-color-8{color:#555555;} /*dark grey */
.font-color-9 {color:#5C9FBD;} /* blue */
.font-color-10 {color:#919191;} 
.font-color-11{color: #464646;}
.font-caps {
	text-transform: uppercase;
}
.font-xxsmall {font-size:0.7em;}
.font-xsmall {font-size:0.8em;}
.font-small {font-size:10px;}
.font-normal {font-size:1em;}
.font-large {font-size:1.1em;}
.font-xlarge {font-size:1.2em;}
.font-xxlarge {font-size:1.3em;}
.font-xxlarge1-4 {font-size:1.4em;}
.font-xxlarge2 {font-size:1.8em;}
.font-xxxlarge {font-size:2.5em;}




.font-400{font-weight: 400;}
.font-600{font-weight: 600;}
.font-700{font-weight: 700;}
.font-800{font-weight: 800;}
.font-900{font-weight: 900;}

.font-size-10{font-size:10px;}
.font-size-12{font-size:12px;}
.font-size-14{font-size:14px;}
.font-size-16{font-size:16px;}
.font-size-20 {	font-size:20px;}
.font-size-24 {	font-size:24px;}
.font-size-26 {	font-size:26px;}
.font-size-26 {	font-size:26px;}


@media screen and (max-width: 500px){
	
	.font-xxsmall {font-size:0.7em;}
	.font-xsmall {font-size:0.8em;}
	.font-small {font-size:10px;}
	.font-normal {font-size:1em;}
	.font-large {font-size:1.1em;}
	.font-xlarge {font-size:1.2em;}
	.font-xxlarge {font-size:1.3em;}
	.font-xxlarge1-4 {font-size:1.4em;}
	.font-xxlarge2 {font-size:1.5em;}
	.font-xxxlarge {font-size:1.6em;}
	
	
	
	.font-800{font-weight: 700;}
	.font-900{font-weight: 700;}
}



/* REPORT */

.report-container {
	padding:20px;
	position: relative;
	background: white;
    margin: 20px;
    border-radius: 10px;
}
.red-flags-container{
	border: 1px solid #f9b0b0;
    background: #fff3f3;
}
.red-flags-container h2{
	 font-size: 1rem;
    color: #e76060;
}