@font-face {
  font-family: CiscoSansTT;
  src: url(../img/CiscoSans_TTF/CiscoSansTTRegular.ttf);
  font-display: swap;
}

* {
  font-family: CiscoSansTT;
}

.gdprFloatingIcon, .gdprBottom {
  display: none !important;
}

.console-menu {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

body {
  padding: 0;
  background-color: #F7F7F7;
}

img {
  padding: 0;
  margin: 0;
}

.navWrapper {
  display: flex;
  justify-content: end;
}

.ciscoLogo {
  height: 60px;
}

.previousBtnArrow {
  display: block;
  padding: 12px;
  background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 18L9 12L15 6" stroke="%23014468" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.nextBtn, .restartBtn, .previousBtn, .getStartedBtn {
  display: flex;
  justify-content: center;
  border-radius: 57px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 3%;
}

.nextBtn {
  padding-top: 19px !important;
}

.restartBtn {
  align-items: center;
}

.nextBtn, .restartBtn, .getStartedBtn {
  background: #014468;
  color: white;
  padding: 17px 20px 15px 30px;
  border: none;
  min-width: 149px;
}

.previousBtn {
  background: #F7F7F7;
  color: #014468;
  border: 2px solid #014468;
  padding: 17px 30px 15px 20px;
  margin-right: 1vw;
}

.nextBtnArrow {
  display: block;
  padding: 12px;
  background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="chevron-right/large"><path id="Vector" d="M9 18L15 12L9 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></g></svg>');
}

.restartArrow {
  display: block;
  padding: 15px;
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="29px" height="30px" viewBox="0 0 29 30" version="1.1"><g id="surface1"><path style=" stroke:none;fill-rule:evenodd;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 14.5 9.667969 C 13.0625 9.671875 11.664062 10.132812 10.511719 10.988281 C 9.363281 11.847656 8.523438 13.050781 8.117188 14.417969 C 7.714844 15.789062 7.769531 17.253906 8.269531 18.589844 C 8.773438 19.925781 9.703125 21.066406 10.910156 21.835938 C 12.121094 22.605469 13.550781 22.964844 14.984375 22.863281 C 16.417969 22.757812 17.777344 22.195312 18.863281 21.261719 C 19.949219 20.324219 20.699219 19.0625 21.003906 17.667969 C 21.304688 16.273438 21.144531 14.816406 20.546875 13.519531 C 20.480469 13.363281 20.480469 13.183594 20.542969 13.027344 C 20.605469 12.867188 20.726562 12.738281 20.882812 12.667969 C 21.039062 12.597656 21.214844 12.589844 21.378906 12.644531 C 21.542969 12.699219 21.675781 12.816406 21.753906 12.96875 C 22.472656 14.527344 22.664062 16.273438 22.300781 17.945312 C 21.9375 19.621094 21.035156 21.132812 19.734375 22.257812 C 18.433594 23.382812 16.800781 24.054688 15.078125 24.179688 C 13.359375 24.304688 11.644531 23.871094 10.191406 22.949219 C 8.738281 22.023438 7.628906 20.65625 7.023438 19.050781 C 6.417969 17.445312 6.355469 15.691406 6.839844 14.046875 C 7.324219 12.402344 8.332031 10.957031 9.714844 9.929688 C 11.09375 8.90625 12.773438 8.347656 14.5 8.347656 Z M 14.5 9.667969 "/><path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 14.496094 11.605469 L 14.496094 6.410156 C 14.496094 6.347656 14.515625 6.289062 14.550781 6.234375 C 14.582031 6.183594 14.632812 6.140625 14.6875 6.113281 C 14.746094 6.085938 14.808594 6.078125 14.871094 6.085938 C 14.933594 6.09375 14.996094 6.117188 15.042969 6.160156 L 18.183594 8.753906 C 18.34375 8.886719 18.34375 9.128906 18.183594 9.261719 L 15.042969 11.859375 C 14.996094 11.898438 14.933594 11.925781 14.871094 11.933594 C 14.808594 11.941406 14.746094 11.933594 14.6875 11.90625 C 14.632812 11.878906 14.582031 11.835938 14.550781 11.785156 C 14.515625 11.730469 14.496094 11.667969 14.496094 11.605469 Z M 14.496094 11.605469 "/></g></svg>')
}

.panel {
  padding: 3.9vh 2.9vw;
  height: 100vh;
  margin: auto;
  max-width: 1600px;
  background-color: #F7F7F7;
}

.panelHeaderContainer {
  display: flex;
  margin-bottom: 7vh;
}

.panelHeaderText {
  margin-left: auto;
  text-align: end;
  color: #222;
  font-size: 28px;
  font-weight: 350;
  line-height: 120%; /* 33.6px */
}

.panelTitle {
  color: #014468;
  font-size: 40px;
  font-weight: 350;
  line-height: 120%; /* 57.6px */
}

.panelTitleImage {
  margin-bottom: 4%;
}

.panelSubtitle {
  color: #777;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%; /* 27px */
}

.contentContainer {
  display: flex;
  justify-content: center;
}

.column1 {
  width: 27.8vw;
  margin-right: 3vw;
}

.column2 {
  width: 57.1vw;
  display: flex;
  flex-direction: column;
}

.panelFooterContainer {
  position: absolute;
  bottom: 20px;
}

.FooterText {
  color: #777;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%; /* 21px */
}

/**************** Welcome Page ****************/

.welcomePanel {
  padding: 7.8vh 5.8vw;
  height: 100vh;
  background-color: #F7F7F7
}

.welcomeLogoContainer {
  margin-bottom: 4vh;
  display: flex;
  justify-content: center;
}

.welcomeTitleWrapper,.welcomeImageWrapper, .resultsImageWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.welcomeImageWrapper {
  margin-bottom: 2vh;
}

.welcomeImage {
  /* height: 44vh;
  min-height: 250px; */
  max-width: 88.4vw;
}

.welcomeHeaderText {
  color: #014468;
  text-align: center;
  font-size: 56px;
  font-weight: 350;
  line-height: 120%;
}

.welcomeSubheader {
  color: #222;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%; 
  margin-bottom: 2.5vh;
  text-align: center;
}

.welcomeContentWrapper {
  display: flex;
  justify-content: space-evenly;
  margin: 0 5%;
}

.welcomeContentText{
  color: #014468;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 120%; /* 33.6px */
}

.welcomeNavWrapper {
  display: flex;
  justify-content: center;
}

.getStartedBtn {
  margin: 4vh 4vh 2vh;
}

/************ Question One Page ****************/


.fullWidthQuestionWrapper {
  margin-bottom: 3.9vh;
}

.halfWidthQuestionWrapper {
  margin-bottom: 3.9vh;
  width: 47%;
}

.questionText {
  display: block;
  color: #333;
  font-size: 28px;
  font-weight: 400;
  line-height: 140%; /* 39.2px */
  margin-bottom: .7vh;
}

.textInput {
  display: block;
  width: 100%;
  border: 1px solid #ced4da;
  padding: 12px;
  color: #000;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%; /* 27px */
}

.horizontalQuestion2 {
  margin-left: auto;
}

.horizontalQuestionText {
  color: #333;
  font-size: 28px;
  font-weight: 400;
  line-height: 140%; /* 39.2px */
}

.dropdownInput {
  display: block;
  width: 100%;
  padding: 14.5px 12px;
  color: #000;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none"><path d="M11.998 17.5L18.998 9.5H4.99805L11.998 17.5Z" fill="black"/></svg>');
  background-repeat: no-repeat;
  background-position-x: 95%;
  background-position-y: 15px;
}

.dropdownInput > option {
  width: 47%;
}

/* Radio Question Page */

.radioQuestionText {
  display: block;
  color: #333;
  font-size: 28px;
  font-weight: 400;
  line-height: 140%; /* 39.2px */
  margin-bottom: 2vh;
}

.radioAnswerLabel {
  color: #000;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
}

.mb-2vh {
  margin-bottom: 2vh;
}

.mr-2vw {
  margin-right: 2vw;
}

.radioInput {
  display: block;
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  max-height: 22px;
}

.verticalAnswerContainer {
  margin-bottom: 2vh;
}

.horizontalAnswerContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

/************* Panel 4 ***************/

.listTitle {
  color: #3A3A3A;
  font-size: 18px; 
  font-weight: 700;
  line-height: 150%; /* 27px */
}

.subtitleList > li {
  color: #3A3A3A;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
}

/************* Results Page ***************/
.resultsHeaderContainer {
  display: flex;
  justify-content: space-between;
}

.resultsTitleWrapper {
 padding-right: 21px;
 margin: 0 5px;
}

.resultsHeaderText {
  color: #222;
  font-size: 28px;
  font-weight: 350;
  line-height: 120%;
}

.resultsTitle {
  color: #014468;
  font-size: 50px;
  text-align: center;
}

.resultsImageWrapper {
  margin-bottom: 3vh;
}

.resultsImage {
  height: 22vh;
  min-height: 180px;
  max-width: 88.4vw;
}

.resultsHeader {
  color: #014468;
  text-align: center;
  font-size: 40px;
  font-weight: 350;
  line-height: 120%; 
  margin-bottom: 2%;
}

.resultsDataContainer {
  display: flex;
  justify-content: space-evenly;
}

.resultsDataWrapper {
  display: flex;
  flex-direction: column;
}

.resultsData {
  color: #0070D2;
  text-align: center;
  font-size: 35px;
  font-weight: 700;
  line-height: 100%;
}

.resultsDataLabel {
  color: #222;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}

.resultsNavWrapper {
  display: flex;
  justify-content: center;
}

.restartBtn {
  line-height: 10%;
  margin-left: 1%;
}

.chartCenterText {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*********** Custom Radio Button ***********/

.radioContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radioContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.customRadio {
  position: absolute;
  top: 0;
  left: 0;
  height: 26px;
  width: 26px;
  background-color: #fff;
  border: 1px solid #BABABA;
  border-radius: 70%;
}

/* When the checkbox is checked, add a blue background */
.radioContainer input:checked ~ .customRadio {
  background-color: #014468;
}

/* Create the checkmark/indicator (hidden when not checked) */
.customRadio:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.radioContainer input:checked ~ .customRadio:after {
  display: block;
}

/* Style the checkmark/indicator */
.radioContainer .customRadio:after {
  top: 7px;
  left: 7px;
  width: 10px;
  height: 10px;
  border-radius: 70%;
  background: white;
}