:root {
  --color-main: #af4e54;
  --color-main-med: #d99694;
  --color-main-light: #f2dcdb;
  --color-second: #9fe300;
  --color-text: #3a3a39;
  --color-text-invert: #fff;
  
  --color-mid-1: #e7e6df;
  --color-mid-2: #bbb;

  --color-red: #af4e54;
  --color-orange: #ffa700;
  --color-blue: #0071bc;
  --color-green: #22b573;
  --color-pink: #ed1e79;
  --color-gray: #999;

  --color-error: var(--color-pink);
  --color-yes: var(--color-green);
  --color-no: var(--color-red);

  --color-back: #faf8f1;
  --color-back-element: #fff;
  --color-bgHighlight: #f99;
  --color-back-filter: #e7e6df;

  --color-filter1: var(--color-orange);
  --color-filter2: var(--color-blue);
  --color-filter3: var(--color-red);
  --color-filter4: var(--color-green);
  --color-filter5: var(--color-pink);
  --color-filter6: #0ff;

  --fontfamily-default: 'RethinkSans', Sans-Serif;

  --fontsize-small: 9px;
  --fontsize-smaller: 16px;
  --fontsize-default: 18px;
  --fontsize-navi: 20px;
  --fontsize-bigger: 21px;
  --fontsize-subtitle: 24px;
  --fontsize-title: 36px;

  --size-default: 40px;
  --size-default-negative: -40px;
  --size-bigger: 60px;
  --size-half: 20px;
  --size-quarter: 10px;
  --size-eighth: 5px;
  --size-small: 3px;
}

* {
  font-family: inherit;
  font-size: inherit;
}
*:focus {
  outline: 2px solid var(--color-main);
}

body {
	padding:0;
	margin:0;
	font-family: var(--fontfamily-default);
	font-size: var(--fontsize-default);
  /*background-image: url(../img/bgTexture3.png);*/
  background-color: var(--color-back);
  background-position: center;
	background-repeat: repeat;
  text-align: center;
}
body.exportPdf {
  background-color: transparent;
}
.headerDiv {
  background-color: var(--color-back-element);
}
.bodydiv {
  display: inline-block;
	position:relative;
	color: var(--color-text);
  width: 1200px;
  max-width: 100%;
}

h1 {
  font-weight: bold;
  letter-spacing: 1px;
  font-size: var(--fontsize-title);
  color: var(--color-main);
	margin-bottom: var(--size-half);
  text-transform: uppercase;
}
a {
	text-decoration:none;
	color: inherit;
}
a.link {
  text-decoration: underline;
}
a.bluelink {
  color: var(--color-blue);
}
a:hover {
  text-decoration: underline;
}
ol {
  padding-left: 1em;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}
ul li {
	display: block;
}
ul.lineList li {
  display: inline-block;
  margin-right: var(--size-quarter);
}
ul.lineList li:last-child {
  margin-right: 0;
}
ul.bullet {
  list-style-type: disc;
  padding-left: 1em;
  text-align: left;
  display: inline-block;
}
ul.bullet li {
  display: list-item;
}


input, textarea, button, select {
	border: none;
	background-color: var(--color-back);
	color: var(--color-text);
	padding: var(--size-eighth) var(--size-quarter);
  border-radius: var(--size-eighth);
  background-color: var(--color-back-element);
}
input, select, button {
	height: 1.3em;
  line-height: 1.1em;
  box-sizing: content-box;
  vertical-align: middle;
}
input[type="submit"]:not(.simple), button:not(.simple) {
	color: var(--color-text-invert);
	background-color:var(--color-main);
  border-color:var(--color-main);
  border-radius: var(--size-eighth);
  cursor: pointer;
}
input[type="submit"].simple {
  border: none;
  background-color: transparent;
}
input:disabled {
  opacity: 0.5;
}
button.multiline {
  height: auto;
}
button.big {
  letter-spacing: 1px;
  font-weight: bold;
  font-size: var(--fontsize-subtitle);
  padding: 9px var(--size-default) var(--size-eighth);
  background-color: var(--color-main);
  border-radius: var(--size-eighth);
}
button.light {
    color: var(--color-main);
    background-color: var(--color-back);
}
button.smaller {
  font-size: 0.8em;
  height: auto;
  line-height: 1em;
}
button.round {
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  padding: 0;
  line-height: 0;
}
button.round.info {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  padding: 0;
  line-height: 0;
  font-size: 0.8em;
  vertical-align: middle;
  background-color: var(--color-text);
  color: var(--color-text-invert);
}
button.delete {
  background-color: var(--color-error);
}

button.symbolbutton {
  background-color: transparent;
  border: none;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
  text-indent: -999px;
  overflow: hidden;
  padding: 0;
}
button.symbolbutton.smaller {
  width: 20px;
  height: 20px;
}
button.symbolbutton.delete {
  background-image: url('../img/icons/close-01.svg');
}
button.symbolbutton.edit {
  background-image: url('../img/icons/edit-01.svg');
}
button.symbolbutton.add {
  background-image: url('../img/icons/add-01.svg');
}

button.symbolbutton img {
  width: 25px;
}
button.button.search {
  height: 1.3em;
  width: 1.3em;
  background-image: url('../img/icons/glas-01.svg');
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -999px;
  overflow: hidden;
  padding: var(--size-eighth);
}
button.actionbutton {
  padding: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 0;
}

.beautySelect {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-back-element);
  height: 30px;
}
.beautySelect .content {
  padding: 0 var(--size-quarter);
}
.beautySelect .fakeButton {
  display: inline-block;
  height: 30px;
  width: 30px;
  background-color: var(--color-main);
  background-image: url('../img/icons/drop_down-01.svg');
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}

.editrow {
  background-color: var(--color-back-filter);
  padding: var(--size-quarter);
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■vv */

.translationBlock {
  display: none;
}

.mobile {
  display: none;
}

.fakeCheckboxContainer {
  display: inline-block;
	vertical-align: middle;
	margin-right: var(--size-half);
}

.fakeCheckbox {
  display: inline-block;
  border: solid 1px var(--color-text);
  width: var(--size-half);
  height: var(--size-half);
  cursor: pointer;
}
.fakeCheckbox.radio {
	border-radius: 50%;
}
.fakeCheckbox.checked {
  background-color: var(--color-text);
}


.overlay-main {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.overlay-back {
	background: #000;
}
.overlay-content {
  background-color: var(--color-back);
  border-radius: var(--size-eighth);
	color: var(--color-text);
  max-height: 80%;
  overflow: auto;
  text-align: center;
}
.overlay-content-inner {
	margin: var(--size-half);
}
.overlaycontentdiv {
  padding: var(--size-default);
}
.DONOTUSEoverlay-close {
  padding: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: solid 1px;
  line-height: 1em;
  background-color: var(--color-text);
  color: var(--color-back);
}
.overlay-close {
  padding: 0;
  width: 25px;
  height: 25px;
  background-image: url('../img/icons/close-01.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  text-indent: -999px;
  overflow: hidden;
}
.overlayTextContent {
  max-width: 400px;
  padding: var(--size-half);
}

.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
.smaller {
  font-size: var(--fontsize-smaller);
}

.siteSection, .section {
  margin: var(--size-default) 0; 
}
.section.filterSection {
  background-color: var(--color-back-filter);
  padding: var(--size-half) var(--size-quarter);
}
.sectionTitle {
  letter-spacing: 1px;
  font-size: var(--fontsize-title);
  font-weight: bold;
  margin-bottom: var(--size-half);
}
.sectionTitle .hint {
  margin-top: var(--size-quarter);
  font-weight: normal;
  font-size: var(--fontsize-default);
}
.subTitle {
  font-size: 1.2em;
  font-weight: bold;
}
.subSection {
  margin: var(--size-half) 0;
}
.subSectionTitle {
  font-weight: bold;
  margin-bottom: var(--size-quarter);
}
.exportPdf {
  .subSection {
    text-align: left;
  }
  .subSectionTitle {
    text-align: center;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.row.full {
  justify-content: space-between;
}
.row.left {
  justify-content: start;
}
.row.right {
  justify-content: end;
}

.column {
  margin-right: var(--size-default);
}
.column:last-child {
  margin-right: 0;
}

.row label {
  display: block;
}
.formgrid {
  max-width: 500px;
  display: inline-block;
  background-color: var(--color-back-filter);
}
label {
  display: block;
}
.formRow {
  box-sizing: border-box;
  width: 100%;
  margin: var(--size-half) 0;
  text-align: center;
  padding: var(--size-quarter);
  background-color: var(--color-back-filter);
}
.formRow.noBack {
  background-color: transparent;
}

.formRow input:not([type="checkbox"], [type="radio"]), .formRow select, .formRow textarea {
  min-width: 280px;
}
.formRow > * {
  margin-right: var(--size-quarter);
}
.leftForm .formRow {
  text-align: left;
}
.row.formRow {
  justify-content: left;
}

.block {
	color: var(--color-text);
	background-color:var(--color-main);
  border-radius: var(--size-eighth);
  padding: var(--size-eighth) var(--size-quarter);
}

ul.tablinks {
  text-align: left;
}
ul.tablinks li {
  display: inline-block;
  margin-right: var(--size-half);
}
a.tablink.active {
  font-weight: bold;
  font-size: 1.05em;
}

table.defTable {
  display: inline-table;
  width: 100%;
  border-collapse: collapse;
}
table.defTable th, table.defTable td {
  text-align: left;
  vertical-align: top;
  border: solid 5px;
  border-color: var(--color-back) transparent;
}
table.defTable th {
  padding-right: var(--size-half);
}
table.defTable td {
  background-color: var(--color-back-element);
  padding: var(--size-eighth) var(--size-quarter) var(--size-eighth) var(--size-quarter);
}
table.defTable td.noBack {
  background-color: transparent;
}
table.defTable th.right, table.defTable td.right {
  text-align: right;
}

table.defTable td.td_x_edit, table.defTable td.td_x_delete {
  background-color: transparent;
  text-align: right;
}
table.defTable td.vCenter {
  vertical-align: middle;
}
table.defTable tfoot td {
  font-weight: bold;
}
table.defTable tr.grayed td {
  opacity: 0.6;
}

.yes {
  color: var(--color-yes);
}
.no {
  color: var(--color-no);
}
button.yes {
  background-color: var(--color-yes);
  color: var(--color-text-invert);
}
button.no {
  background-color: var(--color-no);
  color: var(--color-text-invert);
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■vv */
/* TOPDIV */

.topDiv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--size-default);
}

.logoDiv img {
  width: 200px;
}
#topMenu {
  text-align: right;
}
.topMenu > ul {
  padding: var(--size-half) 0 var(--size-eighth);
}
.topMenu > ul > li, .subMenu ul li, .subMenu ul li input[type="submit"] {
  display: inline-block;
  margin-left: var(--size-half);
  font-size: var(--fontsize-navi);
  font-weight: bold;
  text-transform: uppercase;
  color: var(--color-text);
  vertical-align: top;
  text-align: left;
}
.topFormLink {
  display: inline-block;
  text-align: center;
  width: 180px;
  height: 35px;
  line-height: 38px;
  border-radius: var(--size-eighth);
  background-color: var(--color-blue);
}
.topMenu a:focus {
  outline: none;
}
.topMenu > ul > li a[data-active="1"] {
  opacity: 0.5;
}

ul.secondlevelMenu {
  display: none;
}
ul.secondlevelMenu li {
  display:block;
}
.subMenu {
  margin: var(--size-eighth) 0;
  display: flex;
  justify-content: right;
}
.subMenu ul li {
  font-size: var(--fontsize-default);
  text-transform: none;
}
.subMenu ul li input[type="submit"] {
  font-size: var(--fontsize-default);
  text-transform: none;
  margin-left: 0;
  padding: 0;
  cursor: pointer;
}
.subMenu ul li .light {
  opacity: 0.5;
}

.menuLink img {
  width: 25px;
}

.languageSwitch ul li {
  display: block;
  margin: var(--size-half) 0;
}
.languageSwitch ul li input[type="submit"] {
  border: solid 1px;
  border-radius:  0;
  padding: var(--size-quarter) var(--size-half);
  color: var(--color-text);
  background-color: transparent;
}

.colorBlock {
  width: 100%;
  height: var(--size-eighth);
  margin: var(--size-eighth) 0;
  background-color: var(--color-main);
  position: relative;
  z-index: 10;
}

.colorBlockGradient {
  width: 100%;
  height: var(--size-eighth);
  background-image: linear-gradient(to right, var(--color-main) 0%, var(--color-back) 100%);
  box-shadow: 0 3px 3px #333;
  position: relative;
  z-index: 10;
}
.colorBlockGradient.bottom {
  margin-top: var(--size-bigger);
  box-shadow: 0 -3px 3px #333;
  margin-bottom: var(--size-bigger);
  background-image: linear-gradient(to right, var(--color-back) 0%, var(--color-main) 100%);
}

#contentMain {
  padding: var(--size-default) 0;
}

.arrow {
  display: inline-block;
  width: 1em;
  background-repeat: no-repeat;
  background-size: auto 80%;
  height: 1em;
  background-position: center bottom;
}
.arrow.right {
  background-image: url('../img/icons/arrows-01-black.svg');
}
.arrow.left {
  background-image: url('../img/icons/arrows-02-black.svg');
}
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■vv */

.listDiv table {
  display: inline-table;
}
.listDiv table th, .listDiv table td {
  text-align: left;
  vertical-align: top;
  padding-right: var(--size-half);
}

.filtersDiv {
  margin: var(--size-default) 0;
}
.listFilter {
  margin: var(--size-quarter) var(--size-half);
  input[type="text"], select {
    max-width: 150px;
  }
}
.listFilter .fakeCheckboxContainer {
  margin-right: var(--size-eighth);
}
.listFilter .fakeCheckbox {
  width: var(--size-half);
  height: var(--size-half);
}
.resetFilterButtonDiv {
  flex-basis: 100%;
}

.section.filterSection.oneLine {
  display: flex;
  padding: var(--size-half);
}
.filterCol {
  margin-right: var(--size-half);
}
.filterCol:last-child {
  margin-right: 0;
}
.oneLine {
  display: flex;
  justify-content: space-between;
  align-items: center;

    .listFilter {
      white-space: nowrap;
      margin: var(--size-quarter);
    }
    .resetFilterButtonDiv {
      flex-basis: unset;

      button {
        height: auto;
        min-height: 1.3em;
      }
    }
}

ul.filterTagsList li {
  display: inline-block;
  margin: var(--size-eighth);
}
ul.filterTagsList li a {
  display: inline-block;
  padding: 2px 5px;
  border: solid 1px;
  border-radius: 5px;
  font-size: 0.8em;
}
ul.filterTagsList li a.active {
  color: var(--color-text-invert);
  background-color: var(--color-text);
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■vv */

.userRow {
  display: flex;
  border-bottom: solid 1px;
  align-items: center;
}
.userRow .column {
  width: auto;
}
.userRow .column.username {
  width: 250px;
}

.userRow .column button {
  margin: 10px 0;
}

.userRow .fakeCheckbox {
  width: var(--size-half);
  height: var(--size-half);
}
.userRow .fakeCheckboxContainer {
  margin-right: var(--size-quarter);
}
.userRow .column.section .fakeCheckbox {
  border-color: var(--color-second);
}
.userRow .column.section .fakeCheckbox.checked {
  background-color: var(--color-second);
}

#loginsTable {
  margin: var(--size-default) 0;
}
#loginsTable .editlist {
  overflow-x: scroll;
}
#loginsTable table {
  display: inline-block;
  margin: var(--size-default) 0;
  border-collapse: collapse;
}
#loginsTable table th, #loginsTable table td {
  padding: 5px 20px 5px 0;
  vertical-align: top;
  text-align: left;
  border-bottom: solid 1px;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* Account */

.accountInfo {
  display: inline-block;
  text-align: left;
}
.accountInfo .infoLine {
  margin: var(--size-quarter) 0;
  display: flex;
  justify-content: space-between;
}
.accountInfo .infoLine .content {
  display: inline-block;
  margin-right: 2em;
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■vv */
/* COMPANY ADMIN */

.breadCrumbs {
  text-align: left;
}
.breadCrumbs ul li {
  display: inline-block;
  margin-right: var(--size-half);
}

.companySection {
  max-height: 400px;
  overflow: auto;
  padding: var(--size-default) 0;  
}

button.toggleLeadButton.inactive {
  opacity: 0.5;
}

ul.boxList {
  margin-top: var(--size-default);
}
ul.boxList li.box {
  display: inline-block;
  margin: var(--size-half);
  border-radius: 5px;
  overflow: hidden;
  min-width: 150px;
  position: relative;
}
li.box.NOTUSED {
  border: solid 1px;
  box-shadow: 1px 2px var(--color-text);
}

.boxButtons {
  position: absolute;
  top: var(--size-eighth);
  right: var(--size-eighth);
  text-align: right;
}

.boxTitle {
  padding: var(--size-quarter) var(--size-half);
  background-color: var(--color-back-filter);
}
ul.boxList li.box.admin .boxTitle {
  padding-top: calc(var(--size-half) + var(--size-quarter));
}
.boxContent {
  padding: var(--size-quarter) var(--size-half);
  background-color: var(--color-back-element);
}
.boxContentInner {
  display: inline-block;
  text-align: left;
}

ul.personList > li {
  margin: var(--size-eighth) 0;
}

.surveyLink {
  display: inline-block;
  padding: 0 var(--size-eighth);
  width: calc(100% - var(--size-quarter));
  text-align: center;
  font-size: 0.8em;
  white-space: nowrap;
}
.surveyLink.finished {
  background-color: var(--color-green);
  color: var(--color-text-invert);
}
.surveyLink.inProgress {
  background-color: var(--color-orange);
  color: var(--color-text-invert);
}
.surveyLink.open {
  background-color: var(--color-red);
  color: var(--color-text-invert);
}
.surveyLink.early {
  background-color: var(--color-gray);
  color: var(--color-text-invert);
}


ul.divisionSelect {
  text-align: left;
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■vv */
/* YEAR/SURVEY */

.sectionTypeDiv {
  margin: var(--size-default) 0;
  border: solid 1px;
  padding-bottom: var(--size-quarter);
}
.sectionTypeDiv > .title {
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: solid 1px;
  margin-bottom: var(--size-quarter);
  color: var(--color-back);
  background-color: var(--color-text);
}

.sectionDiv {
  margin: var(--size-half) 0;
  padding: var(--size-quarter) 0;
  border-bottom: solid 1px;
}
.sectionDiv > .title {
  font-weight: bold;
  margin-bottom: var(--size-half);
  border-bottom: dashed 1px;
  padding-bottom: var(--size-half);
}
.questionDiv {
  margin: var(--size-quarter) 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.questionDiv > * {
  margin-right: var(--size-quarter);
}
.surveyQuestionSection {
  background-color: var(--color-back-filter);
  margin: var(--size-half) 0;
  padding: var(--size-half);
}
.surveyQuestionSection textarea {
  width: 100%;
  height: 120px;
  box-sizing: border-box;
}
.surveyQuestionSection textarea.half {
  height: 60px;
}

ul.dots li {
  display: inline-block;
  margin: var(--size-quarter);
}
ul.dots li.separator {
  display: none;
}

ul.dots li a {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: transparent;
  border: solid 1px var(--color-mid-2);
}
ul.dots li a.answered {
  background-color: var(--color-mid-2);
}
ul.dots li a.current {
  background-color: var(--color-main);
  border-color: var(--color-main);
}
ul.answerValuesList {
  display: inline-block;
}
ul.answerValuesList li {
  text-align: left;
}
.questionText ul {
  list-style-type: disc;
  padding-left: 1em;
  display: inline-block;
}
.questionText ul li {
  display: list-item;
  text-align: left;
  padding-left: 0.5em;
}


.surveyQuestionTitle {
  background-color: var(--color-back-filter);
  font-weight: bold;
  font-size: 1.2em;
  padding: var(--size-eighth);
}

.surveyContainer {
  width: 1200px;
  text-align: center;
}

.surveyContainer .section.dotsDiv {
  width: 100%;
  text-align: center;
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■vv */
/* Team */

.yearSection {
  margin-bottom: var(--size-default);
  text-align: left;
}

.matrixDiv {
  position: relative;
  display: inline-block;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  width: 500px;
  height: 500px;
}

.matrixBlock {
  display: flex;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  margin: 1.5px;
  position: absolute;
  z-index: 1;
}
.matrixBlock.verti {
  writing-mode: vertical-rl;
}
.matrixBlock.low {
  background-color: #fbec7c;
  color: #f5a70b;
}
.matrixBlock.mid {
  background-color: #a5d4c0;
  color: #fff;
}
.matrixBlock.high {
  background-color: #9eabff;
  color: #fff;
}
.matrixBlockTitle {
  font-size: 0.8em;
  font-weight: bold;
}
#matrixContent {
  position:absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.performanceTableDiv {
  max-height: 500px;
  overflow: auto;
}
table.performanceTable tr.clicked td {
  background-color: var(--color-back-filter);
}
table.performanceTable tbody tr {
  cursor: pointer;
}

table.performanceTable tbody tr.risk_3_3 td {
  color: var(--color-red);
}

/*
table.performanceTable tbody tr.risk_3_3.clicked td {
  background: repeating-linear-gradient(
	  45deg,
	  var(--color-error),
	  var(--color-error) 30px,
	  var(--color-text) 30px,
	  var(--color-text) 40px
  );
}*/

.performanceDot {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.5);
  width: 34px;
  height: 34px;
  line-height: 34px;;
  margin: -17px 0 0 -17px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
  cursor: pointer;
}
.legendDot[data-group="female"],
.performanceDot[data-filter="gender"][data-gender="female"] {
  background-color: var(--color-filter1);
  opacity: 1;
}
.legendDot[data-group="male"],
.performanceDot[data-filter="gender"][data-gender="male"] {
  background-color: var(--color-filter2);
  opacity: 1;
}
.legendDot[data-group="diverse"],
.performanceDot[data-filter="gender"][data-gender="diverse"] {
  background-color: var(--color-filter3);
  opacity: 1;
}
.legendDot[data-group="g1"],
.performanceDot[data-filter="age"][data-age="g1"] {
  background-color: var(--color-filter1);
  opacity: 1;
}
.legendDot[data-group="g2"],
.performanceDot[data-filter="age"][data-age="g2"] {
  background-color: var(--color-filter2);
  opacity: 1;
}
.legendDot[data-group="g3"],
.performanceDot[data-filter="age"][data-age="g3"] {
  background-color: var(--color-filter3);
  opacity: 1;
}
.legendDot[data-group="g4"],
.performanceDot[data-filter="age"][data-age="g4"] {
  background-color: var(--color-filter4);
  opacity: 1;
}
.legendDot[data-group="g5"],
.performanceDot[data-filter="age"][data-age="g5"] {
  background-color: var(--color-filter5);
  opacity: 1;
}
.legendDot[data-group="g6"],
.performanceDot[data-filter="age"][data-age="g6"] {
  background-color: var(--color-filter6);
  opacity: 1;
}

.performanceDot.label {
  opacity: 0.4;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-back-element);
}
.performanceDot a {
  display: inline-block;
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.legendDot {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: var(--size-quarter);
}

.specialFilters ul li {
  display: inline-block;
  margin: var(--size-half);
}

.performanceInfo {
  min-width: 300px;
  margin: var(--size-half) 0;
}
.performanceInfo .name {
  padding-bottom: var(--size-eighth);
  border-bottom: solid 1px;
  margin-bottom: var(--size-quarter);
}
.infoRow {
  display: flex;
  justify-content: space-between;
}


/* ■■■■■ MEMBER RESULTS ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.memberView {
  display: flex;
}
.export .memberView {
  display: block;
}
.export .leftCol {
  text-align: center;
}
.pagebreak {
  break-before: page;
}
.section.memberView.export {
  margin-top: 0;
}
.personSection {
  margin-bottom: var(--size-default);
  background-color: var(--color-back-element);
  padding: var(--size-quarter) var(--size-half);
  width: 500px;
  box-sizing: border-box;
  font-size: 0.8em;
}
.export .personSection {
  display: inline-block;
}
.ownerInfo {
  text-align: left;
}

.personInfo {
  margin-top: 1em;
  text-align: left;
}
.personInfo table td {
  vertical-align: top;
}
.personInfo table td.label {
  font-weight: bold;
  padding-right: 2em;
}

.memberView.export .personSection {
  margin-bottom: var(--size-half);
}
.memberView.export .personSection .sectionTitle {
  font-size: 1.5em;
  margin-bottom: var(--size-quarter);
}
#surveySection {
  margin-left: var(--size-default);
}
#surveySection .results {
  margin-top: var(--size-default);
}
#surveySection .results:first-child {
  margin-top: 0;
}

.resultSection {
  margin: var(--size-half) 0;
  text-align: left;
  font-size: 0.8em;
  background-color: var(--color-back-element);
  padding: var(--size-quarter) var(--size-half);
}
.resultSection:first-child {
  margin-top: 0;
}
.resultsQuestionsTable {
  table-layout: fixed;
  width: 100%;
}

.questionSection {
  margin-right: var(--size-half);
  margin-bottom: calc(var(--size-half) + var(--size-quarter));
  flex-basis: 45%;
  display: inline-flex;
  flex-direction: column;
  justify-content: end;
  align-items: start;
}
.resultSubSection {
  margin-bottom: var(--size-half);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.resultSectionTitle {
  font-weight: bold;
}
.resultSectionTitle.loss {
  color: var(--color-main);
}
ul.resultSectionScale {
  margin: var(--size-quarter);
}
ul.resultSectionScale li {
  display: block;
}

.resultSubSectionTitle {
  font-weight: bold;
  flex-basis: 100%;
  margin-bottom: 0.5em;
}
.sectionComment {
  margin-top: var(--size-half);
  flex-basis: 100%;
}
.sectionComment:first-child {
  margin-top: 0;
}

.scoreCircle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: url('../img/icons/circle0.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.scoreCircle.score1 {
  background-image: url('../img/icons/circle33.svg');
}
.scoreCircle.score2 {
  background-image: url('../img/icons/circle67.svg');
}
.scoreCircle.score3, .scoreCircle.score100 {
  background-image: url('../img/icons/circle100.svg');
}
.scoreCircle.score4 {
  background-image: url('../img/icons/circle100full.svg');
  color: var(--color-text-invert);
}
.scoreCircle.score50 {
  background-image: url('../img/icons/circle50.svg');
}

.circle {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background-color: #aaa;
}
.questionResultCircle  {
  margin: var(--size-quarter) 0;
  display: inline-block;
}
.questionResultCircle .circle {
  width: 40px;
  height: 40px;
  display: inline-block;
}
.questionResultCircle.center {
  text-align: center;
}
.innerCircle {
  background-color: #aaa;
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  line-height: 30px;
  border-radius: 50%;
  z-index: 10;
  text-align: center;
}
.part {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #aaa;
}
.third1 {
  clip-path: polygon(50% 0%, 100% 0%, 100% 79%, 50% 50%);
}
.third2 {
  clip-path: polygon(50% 50%, 100% 79%, 100% 100%, 0% 100%, 0% 79%);
}
.third3 {
  clip-path: polygon(50% 0%, 50% 50%, 0% 79%, 0% 0%);
}

.quarter1 {
  clip-path: polygon(50% 0%, 100% 0%, 100% 50%, 50% 50%);
}
.quarter2 {
  clip-path: polygon(50% 100%, 100% 100%, 100% 50%, 50% 50%);
}
.quarter3 {
  clip-path: polygon(50% 100%, 0% 100%, 0% 50%, 50% 50%);
}
.quarter4 {
  clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 50% 50%);
}

.memberView.export .quarter1 {
  clip-path: none;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 50%;
}
.memberView.export .quarter2 {
  clip-path: none;
  top: 50%;
  left: 50%;
  right: 0;
  bottom: 0;
}
.memberView.export .quarter3 {
  clip-path: none;
  top: 50%;
  left: 0;
  right: 50%;
  bottom: 0;
}
.memberView.export .quarter4 {
  clip-path: none;
  top: 0%;
  left: 0;
  right: 50%;
  bottom: 50%;
}

.circle.score1 .quarter1, .circle.score1 .third1 {
  background-color: #000;
}
.circle.score2 .quarter1, .circle.score2 .quarter2,
.circle.score2 .third1, .circle.score2 .third2 {
  background-color: #000;
}
.circle.score3 .quarter1, .circle.score3 .quarter2, .circle.score3 .quarter3,
.circle.score3 .third1, .circle.score3 .third2, .circle.score3 .third3 {
  background-color: #000;
}
.circle.score4 .quarter1, .circle.score4 .quarter2, .circle.score4 .quarter3, .circle.score4 .quarter4 {
  background-color: #000;
}

.circle.loss, .circle.loss .innerCircle {
  background-color: var(--color-main-light);
  color: var(--color-main);
}
.circle.loss .part {
  background-color: var(--color-main);
}

.questionResult {
  display: flex;
  align-items: center;
}
.questionResult .score {
  width: 50px;
  text-align: center;
}
.questionResult .graphContainer {
  flex-grow: 1;
}
.questionResult .graphContainer .graph {
  background-color: var(--color-blue);
  height: 0.5em;
}
.questionResult .graphContainer .graph.loss {
  background-color: var(--color-error);
}
#documentLink {
  display: inline-block;
  margin: var(--size-quarter) 0;
}

/* ■■■■■ DEV PLAN ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.personInfo {
  text-align: center;
}
.exportPdf .section {
  margin: var(--size-half) 0;
}
table.resultsTable {
  border-collapse: collapse;
}
.resultsSectionTitle {
  display: inline-block;
  margin-top: var(--size-default);
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: underline;
}
.resultsSubSectionTitle {
  display: inline-block;
  margin-top: var(--size-quarter);
  font-weight: bold;
}
tr.questionBlock {
  border: solid 1px;
}

table.resultsTable td {
  vertical-align: top;
  text-align: left;
  padding: 0 var(--size-quarter) var(--size-half) var(--size-quarter);
}
table.resultsTable td .score {
  text-align: center;
}
table.resultsTable td .score .questionResultCircle {
  display: inline-block;
  margin: 0;
}

table.resultsTable tr.questionBlock td {
  padding-top: var(--size-quarter);
}

.assessment {
  padding: var(--size-quarter) var(--size-half);
  background-color: var(--color-main-med);
}
table.devPlanTable {
  width: 100%;
  margin-top: 0.5em;
  table-layout: fixed;
}
.section.infoText {
  text-align: left;
}

.devPlanTableDiv.export table.devPlanTable {
  display: table;
}

table.devPlanTable th, table.devPlanTable td {
  border: solid 1px var(--color-back) !important;
  padding: var(--size-eighth) var(--size-quarter);
}

table.devPlanTable th {
  background-color: var(--color-main-med);
}
table.devPlanTable td {
  background-color: var(--color-main-light);
}
button.actionbutton.devPlanButton {
  background-color: transparent;
  border: solid 2px var(--color-text);
  color: var(--color-text);
}
table.devPlanTable td .text {
  display: block;
}

ul.devPlanItems li {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--size-half);
}
ul.devPlanItems li .itemContent {
  margin-right: var(--size-quarter);
}

button.actionbutton.devPlanButton.smaller {
  width: 15px;
  height: 15px;
  border-width: 1px;
}

.cellContentTable {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
}

.cellContentColumn.contentMember {
  color: var(--color-blue);
}

.preparationSection textarea {
  width: 100%;
  height: 120px;
  box-sizing: border-box;
}

.preparationSection button.undo {
  display: none;
}