table{width: 100%;}
 /*TRBL*/
.admin table thead tr td,
.admin table tbody tr td{
  padding: 10px 15px 10px 15px;
  font-size: 11pt;
}
.elevate tbody tr td{
	font-size: 11pt;
}
section .elevate{
	padding: 20px 25px 20px 25px;
}
.py-1 .elevate tbody tr td{
	padding: 10px 10px 10px 10px;
}

.py-1 .elevate textarea{
	font-family: Overpass,sans-serif;
	line-height: 1.2;
}
	
.admin table thead tr td{
  color: grey;
  font-size: 10pt;
}
.admin table thead tr td:first-child,
.admin table tbody tr td:first-child{
	/*
  padding: 10px 10px 10px 10px;
	*/
}
body{
	display: flex;
  flex-direction: column;
}
body{ /*removed p and li so that we can override the header color in a single css directive, and body covers everything by default anyway */
  font: normal normal normal 16px/24px Red Hat Text, RedHatText, Overpass,"Helvetica Neue",Arial,sans-serif;
  font-family: Red Hat Text, RedHatText, Overpass,"Helvetica Neue",Arial,sans-serif;
  text-align: left;
  letter-spacing: 0px;
  color: #151515;
  opacity: 1;
}
h1{   font: normal normal normal 36px/47px Red Hat Display,RedHatDisplay,Overpass,"Helvetica Neue",Arial,sans-serif; }
h2{   font: normal normal normal 28px/40px Red Hat Display,RedHatDisplay,Overpass,"Helvetica Neue",Arial,sans-serif; } /* results only */
h3{   font: normal normal normal 26px/30px Red Hat Display,RedHatDisplay,Overpass,"Helvetica Neue",Arial,sans-serif; } /* admin pages only */
h4{   font: normal normal normal 20px/30px Red Hat Display,RedHatDisplay,Overpass,"Helvetica Neue",Arial,sans-serif; } /* results only */
h5{   font: normal normal 500    18px/24px Red Hat Display,RedHatDisplay,Overpass,"Helvetica Neue",Arial,sans-serif; } /* surveyjs question titles */
h5{ margin: 5px 0px !important; }
.hdr{ font-family: Red Hat Display,RedHatDisplay,Overpass,"Helvetica Neue",Arial,sans-serif; }

h4{
	margin-top: 10px;
  margin-bottom: 5px;
}


.py-0{
	margin-bottom: auto;
}

.btn:disabled { opacity: 0.35; }
.py-1{
	margin-top: 30px;
}
.elevate{
  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
  background-color: #fff;
}
	
.menu_horizontal{
   display: block;
   list-style: none;
}
.menu_horizontal li {
   display: inline;
}
.menu li{
   padding: 1px 15px 5px 15px;
   margin: 1px;
   color: #3f3f3f;
   font-size: 12pt;
   text-decoration: none !important;
   line-height: 1.5 !important;
   font-family: inherit !important;
   /*
   position: relative;
   top: 0px;
   border-radius: 0px 0px 5px 5px;
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
   */
}
div.elevate li.noColor{
	background-color: transparent;
}
.menu li:hover,
.menu li.current{
	background-color: #3f3f3f;
}
.menu li > *{
	color: #3f3f3f;
}
.menu li:hover > *,
.menu li.current a{
	color: #fff;
	text-decoration: none !important;
}
.menu li.divider{
	padding-left: 0px;
	padding-right: 0px;
}


#feedback-alert{
	position: absolute;
	width: 100%;
}
#feedback-alert-text{
	text-align: center;
}


/* Language Selector */
@media (min-width: 1200px)
.LanguageSelectorContainer {
    max-width: 1170px;
}
@media (min-width: 992px)
.LanguageSelectorContainer {
    max-width: 970px;
}
@media (min-width: 768px)
.LanguageSelectorContainer {
    max-width: 750px;
}
@media (min-width: 576px)
.LanguageSelectorContainer {
    max-width: 540px;
}
.LanguageSelectorContainer {
	margin-top: 15px;
}
.LanguageSelectorContainer select {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    cursor: pointer;
    border-radius: 0;
    background-color: #050505;
    border: 1px solid #FFFFFF;
    padding: 6px 24px 6px 12px;
    color: #FFFFFF;
    background-image: linear-gradient(45deg, transparent 50%, #FFFFFF 50%), linear-gradient(135deg, #FFFFFF 50%, transparent 50%);
    background-position: calc(100% - 16px) calc(1em + 0px), calc(100% - 10px) calc(1em + 0px), calc(100% - 2.5em) 0.5em;
    background-size: 6px 6px, 6px 6px, 1px 1.5em;
    background-repeat: no-repeat;
/*
    display: block;
    position: relative;
    top: 30px;
    margin-left: auto;
*/
}
.LanguageSelectorContainer select:hover {
    background-color: #FFFFFF;
    border-color: #FFFFFF ;
    color: #050505;
    background-image: linear-gradient(45deg, transparent 50%, #050505 50%), linear-gradient(135deg, #050505 50%, transparent 50%);
    /*
        display: block;
        position: relative;
        top: 30px;
        margin-left: auto;
    */
}


.sv_p_root, .sv_row, .sv_nav, #survey-wrapper{
	background-color: #f0f0f0;
}
.sv_main.sv_default_css{
    background-color: #f0f0f0;
}
.sv_page_title{
	font-size: 32px;
  margin-bottom: 7px;
  text-align: center;
}
.sv_page_description{
	font-size: 12pt;
	font-weight: normal;
  margin-bottom: 20px;
  text-align: center;
  padding: 0px 30px 0px 30px;
}
.sv_qstn {
/*
  border: 1px solid grey; 
*/
  /* border around questions */
  /*
  padding: 0 10 0 10; 
  margin: 10px;
  */
  
  /*TRBL*/
  
}

/*added for matrix rating questions */
.sv_matrix_cell fieldset.sv_qcbc {
    display: inline-flex;
}
/*added for matrix rating questions */
.sv_main.sv_default_css .sv_q_rating_item .sv_q_rating_item_text {
    border-radius: 50%;
    border: 1px solid silver;
    padding: 2px 5px;
}

.sv_q_num{ /* hide the question numbers */
	display: none;
}
.sv_nav{
	text-align: center; /* center the prev/next buttons */
	padding: 30px;
}


.sv_q_title{
	margin-bottom: 0;
	text-indent: -8px;
}
.sv_q_title span{
	/*
	font-weight: bold;
	font-size: 11pt;
	*/
}
.sv_q_dropdown_control, .sv_q_text_root{
	width: 80%;
	line-height: 1.25em;
}


/* Altering image selects */
.sv_q_imgsel_label{
	text-align: center;
}
.sv_q_imgsel_title{
	font-size: 18pt;
	margin-bottom: 15px;
}
.sv_q_imgsel_description{
	font-size: 12pt;
	line-height: 24px;
}



.sv_q_imgsel_text{
	/*
	position: relative;
  top: -140px;
	*/
}
.sv_qstn .sv_q_imgsel label > div{
	padding: 0px !important;
	border-radius: 5px !important;
}

/* contact form panel elements need to be side-by-side. There's no class associated so i chose a class associated with panels and moved that to a grid structure */
.sv_page_contact_form .sv_p_container>div:nth-of-type(2){
	display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(2,1fr);
}


.sv_main.sv_default_css .sv_p_root > .sv_row:nth-child(2n){
	background-color: initial !important;
}

/*
.sv_main.sv_default_css .sv_p_root > .sv_row{
	border: 1px solid #cdcdcd !important;
}
*/
/*
.sv_page_select_interests sv_qstn->div{
	background-color: initial;
}
*/




.sv_imgpicker_outer{
	/*
	width: 300px;
    height: 300px;
	*/
}
.sv_imgpicker_inner{
		max-width: 326px;
    height: 294px;
    background-color: white;
    margin: 1px;
    padding: 0px 15px;
    border-radius: 4px;
}
.sv_imgpicker_inner img{
		display: block;
    margin: 0 auto;
		position: relative;
    top: 30px;
		opacity: 0.5;
    filter: alpha(opacity=40);
}
.sv_q_imgsel_questioncount{
		top: 20px !important;
		height: 15px;
}
.sv_imgpicker_inner div{
		position: relative;
    top: 40px;
    white-space: normal;
    padding: 0 5px;
}

/* if errors produce a red gloaw but the bottom is cut off then enable this css to fix it */
input{margin: 3px 0px !important;}

.sv_row{
/*
	border: 1px solid #ccc;  TODO: border around questions, but there seems to be a double border so removing this temporarily to see how it goes
*/
    margin: 30px;
    background-color: transparent !important;
}
.sv_row:last-child{
	margin-bottom: 0;
}

.sv_main.sv_default_css .sv_p_root > .sv_row:nth-child(2n) {
	border-color: #f0f0f0;
}

span.sv_q_required_text{
	color: #E00;
}




/* spacing out each question with margins and borders on a white background */
.sv_qstn>div:nth-child(1){
	padding: 10px 20px;
  border: 1px solid #ccc;
	background-color: white;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
.sv_qstn>div:nth-child(2){
	padding: 13px 20px;
  border: 1px solid #ccc;
  border-top: 0px;
  background-color: white;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.loginForm{
  width: 50%;
  margin: 0 auto;
}


.navigationProgressbar div.pageNotVisible{
	color: #ddd;
}

.navigationProgressbar div.pageVisible{
	color: #ddd;
}
/*
.navigationProgressbar li:has(+ next) {
	color: pink;
}
.navigationProgressbar li.visible{
	color:blue;
}
*/
.sv-boolean{
	display: inline-block !important;
	padding-top: 10px;
}


/* Mat - this should be in the theme, but is used on the results page which doesnt have theme specific css yet */
.row-asset-links{
	border-bottom: 1px solid #eee;
}
.asset-title{font-weight:500;}

/* Red Hat Buttons */
.rhbtn{
  display: inline-block;
  border: 1px solid #06C;
  border-radius: 3px;
  font-size: 16px;
  font-weight: 400;
  padding: 2px 16px 2px 16px;
  opacity: 1;
  text-decoration: none;
  text-transform: none;
  transition: background .2s ease-in 0s;
  cursor: pointer;
  margin: 0 8px;
}

.rhbtn-primary:hover,
.rhbtn-secondary:hover {
  background-color: #0057ad !important;
  color: #fff !important;
  text-decoration: none;
  cursor: pointer;
  border-color: #0057ad;
}
.rhbtn-primary{
  background: #06C 0% 0% no-repeat padding-box !important;
  color: #FFF;
}
.rhbtn-secondary{
  background-color: Transparent !important;
  color: #0066CC !important;
}
.rhbtn-red, .rhbtn-red:visited{
  margin: 20px 0 20px 0;
  background: #EE0000 0% 0% no-repeat padding-box;
  border: 1px solid #EE0000;
  color: #FFFFFF;
}
.rhbtn-large{
  width: 230px;
  height: 56px;
  padding-top: 17px;
  padding-bottom: 17px;
}
.rhbtn-red:hover{
  background-color: #D40000;
  color: #FFF;
  border-color: #D40000;
  text-decoration: none;
}
.sv_imgsel div label{
	margin-bottom: initial !important;
}

fieldset div label {
  margin-bottom: 0.6rem !important;
}

.sv_q_radiogroup>label {
display: block;
padding-left: 25px;
/*
text-indent: -18px;
margin-left: -8px;
*/
text-indent: -18px;
}
.sv_q_radiogroup_label > [type=radio] {
vertical-align: middle;
position: relative;
top: -2px;
margin-right:5px;
}
.sv_q_checkbox>label{
display: block;
padding-left: 26px;
/*
text-indent: -22px;
margin-left: 2px;
*/
text-indent: -22px;
}
.sv_q_checkbox_label> [type=checkbox] {
vertical-align: middle;
position: relative;
top: -2px;
}
.txt{
	padding-bottom: 15px;
}
input,button{
  padding: 0 4px;
}



/* REVERSING THE COLOR SCHEME FOR THE CONTACT PAGE */
.sv_page_contact_form>.sv_row {
    background-color: #f0f0f0 !important;
    border: 0px;
}
.sv_page_contact_form .sv_qstn>div:nth-child(1) {
    padding: 0 10px 0 10px;
    border: 0px solid #ccc;
    background-color: white !important;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.sv_page_contact_form .sv_qstn>div:nth-child(2) {
    padding: 0 10px 0 10px;
    border: 0px solid #ccc;
    border-top: 0px;
    background-color: white !important;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.sv_wrapper_contact_form,
.sv_page_contact_form,
.sv_page_contact_form .sv_p_root, 
.sv_page_contact_form .sv_row,
.sv_wrapper_contact_form .sv_nav {
    background-color: white !important;
    border: 0px;
    margin: 10px 0 10px 0;
}

/*
.sv_body.sv_completed_page h2 {
    background-color: #eee;
}
*/

.sv_imgsel{
    width: 90%;
    margin: auto !important;
}

.sv_imgsel_grid{
    display: grid;
    grid-gap: 10px 10px;
    grid-template-columns: repeat(2,1fr);
    max-width: 675px;
    margin: auto;
}

.sv_qstn fieldset .sv-q-col-2{
	padding-right: 0em;
	width: 100%;
}

.py-0{min-height: calc(100vh - 130px);}

/* Scale fonts for various screen sizes */
@media (max-width: 1200px){
	.sv_imgpicker_inner     { padding: 5px; }
	.sv_imgpicker_inner img { top: 15px; height: 90px; }
}
@media (max-width: 992px){
	.sv_page_title          { font-size: 22pt; }
	table td,ul>li,p,.sv_page_description,.sv_rh_btn,fieldset div label{ font-size: 10pt; }
	.navigationContainer div,.navigationContainer h5{ font-size: 11pt; }
	.sv_q_imgsel_title      { font-size: 16pt; }
	.sv_q_imgsel_description{ font-size: 10pt; line-height: 20px; }
	.sv_q_image img { width: 100%; }
	.py-0{min-height: calc(100vh - 152px);}
}
@media (max-width: 768px){
	.sv_q_imgsel_title      { font-size: 14pt; }
	.sv_q_imgsel_description{ font-size: 10pt; }
	.py-0{min-height: calc(100vh - 198px);}
}
@media (max-width: 650px){
	.sv_page_title          { font-size: 20pt; }
	.sv_q_imgsel_title      { font-size: 16pt; line-height: 24px; }
	.sv_page_description    { line-height: 14pt; }
	.sv_q_imgsel_description{ font-size: 10pt; line-height: 18px; }
	.sv_page_contact_form .sv_qstn>div:nth-child(1) div { font-size: 10pt; }
}


/* Override the default RH container sizing jumps */
@media (min-width: 576px){
	.sv_page_select_interests .sv_row{
	    margin-left:  0px;
	    margin-right: 0px;
	}
	.container { max-width: 576px; }
}
@media (min-width: 768px){
	.container { max-width: 750px; }
}	
@media (min-width: 992px){
	.container { max-width: 970px; }
}
@media (min-width: 1200px){
	.container { max-width: 1170px; }
}

/* Screen changes for mobile phone devices */
@media only screen and (max-width: 650px) {
		.sv_p_container>div:nth-of-type(3){ /* contact page*/
			display: block;
		}
    .surveyStyle{
    	padding-left: 0px;
    	padding-right: 0px;
    }
    .sv_imgpicker_inner{
	    height: 210px;
    }
    h5{
    	font-size: 1.1em;
    }
    .sv_q_imgsel_title{
    	top: 10px !important;
 	    margin-top: 5px;
    	margin-bottom: 10px;
    }
    .sv_q_imgsel_description{
    	top: 10px !important;
    }
    .sv_imgpicker_inner img{
    	width:  50px;
    	height: 50px;
    	top: 10px;
    }
		.sv_q_imgsel_questioncount{
				top: 0px !important;
				height: 8px;
		}
    .sv_qstn>div:nth-child(2){
    	padding: 0px;
    }
    .surveyStyle{
    	margin: 30px auto auto auto;
    }
    .sv_row{
    	margin: 15px 0px;
    }
    .
    .sv_q_title{
    	font-size: 1em;
    }
    fieldset div label{
    	margin: 0px;
    }
    .sv_qstn .sv_imgsel{
	    padding: 0px 0px !important;
    }
    .sv_qstn fieldset{
	    padding: 10px 17px !important;
    }
		#survey-wrapper{
			min-width: 375px;
		}
		fieldset div label {
		  margin-bottom: initial !important;
		}
		/* hide the contact form image and text for mobile */
		.sv_page_contact_form .sv_q_image img{
			display:none;
		}
		.sv_page_contact_form>div:nth-of-type(2){
			display:none;
		}
		.sv_page_contact_form>div:nth-of-type(3){
			display:none;
		}
		.sv_page_contact_form .sv_p_container>div:nth-of-type(2) {
			grid-template-columns: repeat(1,1fr);
		}

}

@media (max-width: 450px){
	.sv_imgpicker_inner img { top: 0px; }
	.sv_q_imgsel_title      { font-size: 13pt; line-height: 20px; top: 0px !important;}
	.sv_q_imgsel_description{ font-size: 9pt; line-height: 16px; top: 0px !important;}
	.sv_q_imgsel_title      { margin-top: 0px; }
	.py-0{min-height: inherit;}
	
}

/* this appears to do nothing - there is no 3rd child on sv_p_container (on the contact form page) */
@media only screen and (device-width: 768px) {
    .sv_p_container>div:nth-of-type(3) {
        display: block;
        grid-gap: 15px;
        grid-template-columns: repeat(1,1fr);
    }
}

/* ERRORS - highlight mandatory boxes with a red shadows border */

/*
input.sv_q_text_root.undefined,
.sv_q_dropdown_control.undefined
{
		box-shadow: 0px 0px 5px #CC0000;
}
select.sv_q_text_root.undefined,
.sv_q_dropdown_control.undefined
{
		box-shadow: 0px 0px 5px #CC0000;
}
.has-error > div{
	border-color: #ee0000 !important;
}
*/
.has-error {
    box-shadow: 0px 0px 5px #CC0000;
}
/*
.sv_main.sv_default_css input:not([class="has-error"]):focus {
.has-error > input:focus{
*/

/*
.sv_main.sv_default_css div:not([class="has-error"])>input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):focus {
    border: 1px solid rgb(238, 0, 0) !important;
}
@keyframes error-highlight {
    0% {
        box-shadow: 0px 0px 5px #CC0000;
    }
    80% {
        box-shadow: 0px 0px 5px #CC0000;
    }
    100% {
        box-shadow: 0px 0px 5px transparent;
    }
}
*/

	/*
.has-error{
    animation: error-highlight 5s;
}
	*/


/*
.has-error > div:nth-child(2){
    box-shadow: 0px 0px 5px #CC0000;
}
*/





/**/
.sv_q_erbox.sv_qstn_error_top{
		display: none;
		/*
		*/
		/*
		TODO: may want to activate this css so we can display the error text at some points
		color: red;
    margin-bottom: 20px;
    */
}
.sv_q.sv_qstn{
		min-height: 43px;
}

.sv_main.sv_default_css .sv_body {
	background-color: transparent !important;
}
.sv_container{
	background-color: #FFF;
}

[type=search]{
	margin: 3px 10px !important;
}
.py-1 .elevate tbody tr td{
  padding: 4px 10px 4px 10px !important;
}
.headerRow th{
  padding: 0px 10px !important;
}

.truste-description{
	color: white;
}

/* /ERRORS */



/* Feedback alerts (borrowed from bootstrap) */
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}


.transparent-background{
	background-color: transparent !important;
	border:0px !important;
	overflow: hidden;
}