:root { 
--shade1Dark: #32363B; --shade2Dark: #43484E; --shade3Dark: #54585F;
--colorGreen: #47BA23; --colorBlue22: #11b4e4; --colorLtBlue: #CCF7FF; --colorOrange: #FB8E2F;
--colorYellow: #FBF9AD; --colorRed: #DD0000; --colorDarkBlue: #02529D; 
--colorBlueLink: #1F9BDE; --colorLtBlueLink: #99DAFF; --colorBlueLinkOnWhite: #007CBF;
--colorLtBlueBG: #E8F7FF; --colorBlueListHover: #E4F7FF; --colorBluePointOver:#6AC4F7;
--form-control-color: #0177CB; /* Radio Button Color */
}

body {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 12pt;
}

font { font-family: 'Open Sans', arial, helvetica, sans-serif; }

td { font-family: Arial, Helvetica, sans-serif; font-size: 11pt; }

.icon6 { font-size: 16px; color: #777879; }
.icon6:hover { cursor: pointer; color:#1E5EB0; }

.mainContent { border: 1px solid #ccc; border-radius: 3px; padding: 15px 20px; background: #fff; }
.mainContentMob { width: 98%; max-width: 800px; padding-top: 15px; padding-left: 5px; padding-right: 5px; padding-bottom: 15px; }

/* for test-drive survey - warning */
.striped-border {
position: relative;
padding: 0px;
background: white;
z-index: 1;
}
.striped-border::before {
content: '';
position: absolute;
top: -4px;
left: 0px;
right: 0px;
bottom: -4px;
background: repeating-linear-gradient(45deg, yellow, yellow 6px, black 6px, black 12px);
z-index: -1;
}

.form-control {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.1;
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;
}

.form-control + .form-control {
  margin-top: 1em;
}

.form-control:focus-within {
  color: var(--form-control-color);
}

textarea {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 11.5pt;
}

input.radioLK {
  -webkit-appearance: none;
  appearance: none;
  background-color: inherit;
  margin: 0;
  font: inherit;
  color: #AAABAC;
  width: 1.5em;
  height: 1.5em;
  border: 0.1em solid currentColor;
  border-radius: 50%;
/*  transform: translateY(-0.075em); */
  display: grid;
  place-content: center;
}


input.radioLK::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
  /* check mark instrad of circle
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); */
}

input.radioLK:checked::before {
  transform: scale(1);
}

input.radioLK:focus {
  outline: 0.1em solid var(--form-control-color);
  outline-offset: max(2px, 0.15em);
}


input.radioURsm {
  width: 1.0em;
  height: 1.0em;
}

input.radioURsm:checked::before {
  transform: scale(0.7);
}

input.radioUR:focus {
  outline: 0.1em solid #666768;
}
input.radioUR::before {
  box-shadow: inset 1em 1em #666768;
}


input.radioMC {
  -webkit-appearance: none;
  appearance: none;
  background-color: inherit;
  margin: 0;
  font: inherit;
  color: #656667;
  width: 1.2em;
  height: 1.2em;
  border: 0.1em solid currentColor;
  border-radius: 50%;
/*  transform: translateY(-0.075em); */
  display: grid;
  place-content: center;
}

input.checkMC {
  -webkit-appearance: none;
  appearance: none;
  background-color: inherit;
  margin: 0;
  font: inherit;
  color: #656667;
  width: 1.2em;
  height: 1.2em;
  border: 0.1em solid currentColor;
  border-radius: 10%;
/*  transform: translateY(-0.075em); */
  display: grid;
  place-content: center;
}


input.radioMC::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  background-color: CanvasText; /* Windows High Contrast Mode */
}


input.checkMC::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  border-radius: 0%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  background-color: CanvasText; /* Windows High Contrast Mode */
  /* check mark instrad of circle */
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}


input.radioMC:checked::before, input.checkMC:checked::before {
  transform: scale(1);
}

input.radioMC:focus, input.checkMC:focus {
  outline: 0.1em solid var(--form-control-color);
  outline-offset: max(2px, 0.15em);
}




.commentPop {
    position: fixed;
    top: 30%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0px;
    overflow: visible;
}

td.tdLikertXUR {
	border-width: 0px;
	border-left: 2px;
	border-style: solid;
	border-color: #666666;
}
	

table.tableRatingCombo {
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	border-collapse: separate;
}

td.tdRatingCombo {
	border-width: 0px;
	border-left: 1px;
	border-style: solid;
	border-color: #000000;
}
	

table.box {
	border-width: 2px;
	border-spacing: normal;
	border-style: solid;
	border-color: #000000;
	border-collapse: separate;
}

table.box1 {
	border-width: 2px;
	border-style: solid;
	border-color: #000000;
	border-collapse: separate;
}

	
div.warningBox {
	border: 1px solid #BBB;
	border-radius: 3px;
	padding: 8px 10px
}
	
table.warningBox {
	border: 1px solid #CCC;
	border-collapse: separate;
}
		
td.listTop {
border: solid 0 #000000;
border-bottom-width:2px
}

	
font.ratingLabel {
	font-family: arial,helvetica,sans-serif;
	font-size:10pt;
	color: #000000;
}
	

font.ratingLabelEE {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size:8pt;
	font-weight: 600;
}
	

	font.pageTitleEE
	{
		font-family: 'Open Sans', Arial, Helvetica, sans-serif;
		letter-spacing: 1px;
		font-size:20pt;
		font-weight: 300;
	}	
	
	font.pageTitleEE2
	{
		font-family: 'Open Sans', Arial, Helvetica, sans-serif;
		letter-spacing: 1px;
		font-size:16pt;
		font-weight: 400;
	}	

	font.basic
	{
		font-family: arial,helvetica,sans-serif;
		font-size:10pt;
		color: #000000;
	}

	font.basic9
	{
		font-family: 'Open Sans',Arial,helvetica,sans-serif;
		font-size:9pt;
		font-weight: 400;
	}	
	
	font.basic10
	{
		font-family: 'Open Sans',Arial,helvetica,sans-serif;
		font-size:10pt;
		font-weight: 400;
	}	

	font.basic11
	{
		font-family: 'Open Sans',Arial,helvetica,sans-serif;
		font-size:11pt;
		font-weight: 400;
	}	

	font.basic12
	{
		font-family: 'Open Sans',Arial,helvetica,sans-serif;
		font-size:12pt;
		font-weight: 400;
	}	

	font.basic13
	{
		font-family: 'Open Sans',Arial,helvetica,sans-serif;
		font-size:13pt;
		font-weight: 400;
	}	

	font.basic14
	{
		font-family: 'Open Sans',Arial,helvetica,sans-serif;
		font-size:14pt;
		font-weight: 300;
	}	

	font.basic15
	{
		font-family: 'Open Sans',Arial,helvetica,sans-serif;
		font-size:15pt;
		font-weight: 300;
	}	

	
	font.larger
	{
		font-family: 'Open Sans',arial,helvetica,sans-serif;
		font-size: 14pt;
		color: #000000;
	}




	font.bolder
	{
		font-family: arial,helvetica,sans-serif;
		font-size: 14pt;
		font-weight:bold;
		color: #bb2244;
	}	
	
	
	font.sectionTitle
	{
		font-family: arial,helvetica,sans-serif;
		font-size:12pt;
		font-weight:bold;
	}

	
	
input.otherSpecifyText {
	font-size: 12pt;
	height: 29px;
	border: 1px solid #AAA;
	border-radius: 2px;
	width: 250px;
	padding-left: 3px;
}

select {
	font-size: 12pt;
	height: 29px;
	border: 1px solid #AAA;
	border-radius: 2px;
	padding-left: 2px;
	padding-right: 2px;
}	
	
input.formMatrixTextSoros   {
	font-size: 8pt;
	height: 20px;
	width: 22px;
	}


.form12pt   {
	font-size: 12pt;
	height: 29px;
	border: 1px solid #AAA;
	border-radius: 2px;
	padding-left: 4px;
}


.form11pt   {
	font-size: 11pt;
	height: 25px;
	border: 1px solid #AAA;
	border-radius: 2px;
	padding-left: 4px;
	padding-right: 4px;
}
	

	input.RaterList   {
		font-size: 9pt;
		height: 20px;
		}

	select.RaterList   {
		font-size: 9pt;
		height: 20px;
		}
					
	input.CompactButton   {
		font-size: 8pt;
		height: 20px;
		}			
	
	LI {
		margin-left: -15pt;
		margin-bottom: 5pt;
		list-style-type: square;
	}	
	

/* Tooltip container */
.tooltip {
  position: relative;
  text-decoration: none;
  font-weight: inherit;
  color: inherit;
  border-bottom: 1px dotted black; /* dots under the hover text */
}

A.tooltip:link    { text-decoration: none; color:inherit; }
A.tooltip:visited { text-decoration: none; color:inherit; }
A.tooltip:active  { text-decoration: none; color:inherit; }
A.tooltip:hover { text-decoration: none; color:inherit; }

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  
  bottom: 120%;
  margin-left: 0px;

  background-color: #65666A;
  color: #FFF;
  text-align: center;
  padding: 5px 10px;
  border-radius: 5px;
 
  position: absolute;
  z-index: 1;
  
}

.tooltiptext {
	white-space: nowrap;
	font-family: inherit;
	font-size: 10pt;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 20%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #65666A transparent transparent transparent;
}




input.navButtonMob {
	-webkit-appearance:none;
	width: 110px;
	height: 31px;
	border: 0;
	border: none;

	overflow: hidden;
	cursor: pointer;

	font-size: 11pt;
	font-weight: 400;
	color: #FFF;
	letter-spacing: 1px;
	padding-top: 1px;
	padding-bottom: 1px;

	background-color: #009BDE;
	border-radius: 4px;
	border: 1px solid #009BDE;
	
}

input.navButtonMob:hover {
	background-color: #008BCE;
}

input.navButton90Mob {
	-webkit-appearance:none;
	width: 90px;
	height: 31px;
	border: 0;
	border: none;


	overflow: hidden;
	cursor: pointer; 

	font-size: 10pt;
	font-weight: 400;
	letter-spacing: 1px;
	padding-bottom: 2px;

	background-color: #FFF;
	border-radius: 4px;
	border: 1px solid #AAA;

}

input.navButton90Mob:hover {
	background-color: #F1F8FF;
}

.logoImg {max-width: 220px; max-height: 90px; }