/***************** styles for the horizontal menu\ *****************/
body {
  margin: 0;
  padding: 0;
}

.horizontally_menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
/*  background-color: white; */
  /* border: 1px groove #7A00E6; */
}

.horizontally_menu li {
  float: left;
  font-weight: bold;
  /* border: 1px groove #7A00E6; */
}

.horizontally_menu li a {				/**** Menu items appearance ****/
  display: block;
  background-color: white;
  color: #7A00E6;
  text-align: center;
  padding: 8px 16px;
  text-decoration: none;
  text-decoration-style: bold;
}

.horizontally_menu li a:hover {		/**** Menu item appearance when mouse is over it ****/
  background-color: #7A00E6;
  color: white;
}

/***************** /styles for the horizontal menu *****************/

/***************** \styles for tables *****************/
table {
	margin-top: 4px;
	margin-bottom: 4px;
	border-spacing: 1px;
	border: 1.5px ridge #888888;
	box-shadow: 2px 2px 2px #838383;
}

th { padding-left: 8px; padding-right: 8px; padding-top: 8px; padding-bottom: 8px; border: 1.5px ridge #888888; color: #7A00E6; font-weight: bold; }
td { padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; border: 1.5px ridge #888888; text-align: center; }

.small_header { border-style: none; text-align: center; padding-top: 8px; padding-bottom: 4px; color: #7A00E6; font-weight: normal; }
.left_aligned { border-style: none; text-align: left; padding-left: 4px; }
.right_aligned { border-style: none; text-align: right; padding-right: 4px; }
.center_aligned { border-style: none; text-align: center; }
/***************** /styles for tables *****************/


/***************** \styles for forms *****************/
input[type="radio"] {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	accent-color: #7A00E6;
}

input[type="text"] {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

input[type="submit"] {
	padding: 4px 8px;
	border: none;
	background-color: #7A00E6;
	border-radius: 8px;
	color: white;
	font-size: 0.8em;
	font-weight: bold;
	box-shadow: 2px 2px 2px #838383;
	margin-right: 8px;
	margin-top: 4px;
	margin-bottom: 6px;
}

.form_some_padding_important_left_margin {
	border: 1.5px ridge #888888;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 8px;
	padding-right: 8px;
	margin-top: 12px;
	margin-bottom: 4px;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
	box-shadow: 2px 2px 2px #838383;
}

.form_zero_padding_margin_no_border {
	border-style: none;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

.form_some_padding_margin {
	border-style: groove;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 16px;
	padding-right: 16px;
	margin-top: 12px;
	margin-bottom: 4px;
	margin-left: auto;
	margin-right: auto;
}

.form_some_padding_margin_no_border {
	border-style: none;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 16px;
	padding-right: 16px;
	margin-top: 12px;
	margin-bottom: 4px;
	margin-left: auto;
	margin-right: auto;
}

/***************** /styles for forms *****************/




OLD_form { border-style: groove; padding-top: 4px; padding-bottom: 4px; padding-left: 16px; padding-right: 16px; margin-top: 12px; margin-bottom: 4px; margin-left: auto; margin-right: auto; }


p { margin-top: 8px; margin-bottom: 8px; margin-left: 8px; margin-right: 8px; }

h1 { font-size: 1.60em; color: #7A00E6; margin-left: 10px; padding: 2px; margin-bottom: 8px; margin-top: 24px }
h2 { font-size: 1.45em; color: #7A00E6; margin-left: 20px; padding: 2px; margin-bottom: 8px; margin-top: 16px }
h3 { font-size: 1.30em; color: #7A00E6; margin-left: 30px; padding: 2px; margin-bottom: 8px; margin-top: 16px }
h4 { font-size: 1.15em; color: #7A00E6; margin-left: 40px; padding: 2px; margin-bottom: 8px; margin-top: 16px }
h5 { font-size: 1.00em; color: #7A00E6; margin-left: 50px; padding: 2px; margin-bottom: 8px; margin-top: 8px }
h6 { font-size: 1.00em; color: #7A00E6; margin-left: 60px; padding: 2px; margin-bottom: 8px; margin-top: 8px }





deactivated_input { margin-left: 8px; margin-top: 4px; margin-bottom: 4px; border-spacing: 3px; border: 1px groove #000000; }


.question { color: #23004C; padding-top: 4px; padding-bottom: 3px; padding-left: 8px; font-weight: bold;}
.answer { list-style-type: none;  color: #7A00E6; padding-top: 6px; padding-bottom: 8px; padding-left: 8px; }


.highlighted { color: #7A00E6; }


.comment { font-style: italic; font-size: 1.0em; color: #a0a0a0; margin-left: 24px; padding: 2px; margin-bottom: 8px; margin-top: 8px; }

.no_border { padding: 1px; border: 0px solid #ffffff; }

.no_border_right_aligned { padding: 1px; border: 0px solid #ffffff; text-align: right; }

.button {
  background-color: #7A00E6;
  color: white;
  padding: 5px 10px;
  text-align: center;
  font-weight: bold
}

.button_filled {
  background-color: #7A00E6;
  color: white;
  padding: 6px 8px;
  text-align: center;
  font-weight: bold
}

.button_inverted {
  background-color: white;
  color: #7A00E6;
  padding: 5px 10px;
  text-align: center;
  font-weight: bold;
  border: 1px groove #7A00E6;
}


.span_inverted {
  background-color: white;
  color: #7A00E6;
  padding: 4px 6px;
  text-align: center;
  font-weight: bold;
  /* border: 1px groove black; */
  border-style: none;
  font-size: 13px;
}


ol { margin-left: 50px; }

.bold_purple { color: #7A00E6; font-weight: bold }
.purple { color: #7A00E6 }

/***************** styles for the progress circle graph\ *****************/

.chart_area {
	display: flex;
	justify-content: center;			/* centers horizontally */
	align-items: center;					/* centers vertically */
	background-color: #7A00E688;
	padding: 1px 1px;
	position: relative;
	width: 80px;
	height: 80px;
	margin: 12px 12px;

}

svg {
	background-color: white;
	width: 100%;
	height: 100%;
}

svg circle {
	fill: none;
	stroke:#7A00E6;
	stroke-width: 9px;
	stroke-dasharray: 350;
	stroke-linecap: round;
}

svg circle:nth-child(1) {
	stroke:#7A00E630;
	stroke-dashoffset: 0;
}

svg circle:nth-child(2) {
/* ****	stroke-dashoffset: 200; **** */
}


.totot {
	background-color: white;
	width: 100%;
	height: 100%;
}

.totot circle {
	fill: none;
	stroke: blue;
	stroke-width: 9px;
	stroke-dasharray: 350;
	stroke-linecap: round;
}


.totot circle:nth-child(1) {
	stroke:#7A00E630;
/*	stroke-dashoffset: 0;*/
}

.totot circle:nth-child(2) {
/*	stroke-dashoffset: 200;*/
}

.absolute_position {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-46%, -50%);
	color: #7A00E6;
	font-size: 1.20em;
	font-weight: bold;

}

/***************** /styles for the progress circle graph *****************/

/***************** styles for the horizontal progress bar graph\ *****************/

.column {
	display: flex;
	flex-direction: column;
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 3px;
	gap: 3px;
}

.horizontally_spread {
	display: flex;
	justify-content: space-between;
	color: #202124;
	margin-left: 8px;
	margin-right: 8px;
}

.progress-bar {
	height: 10px;
	background: #7A00E630;
	border-radius: 4px;
	overflow: hidden;
}

.progress-bar .progress {
	height: 100%;
	background: #7A00E6;
	border-radius: 5px;
}

/***************** /styles for the horizontal progress bar graph *****************/