/* common styling elements */

.mrgn-lg {
  margin: 2em;
}
.mrgn-tp-bttm-lg {
  margin: 2em 0;
}
.mrgn-bttm-lg {
  margin-bottom: 2em;
}
.mrgn-tp-lg {
  margin-top: 2em;
}
.mrgn-tp-md {
  margin-top: 1.5em;
}
.mrgn-tp-sm {
  margin-top: 1em;
}
.mrgn-md {
  margin: 1.5em;
}
.mrgn-tp-bttm-md {
  margin: 1.5em 0;
}
.mrgn-sm {
  margin: 1em;
}
.mrgn-tp-bttm-sm {
  margin: 1em 0;
}
.mrgn-tp-bttm-xs {
  margin: .5em 0;
}
.mrgn-xs {
  margin:.5em;
}
.pddn-sm {
   padding: 1em;
}
.pddn-xs-1 {
   padding: .2em;
}
.pddn-sm-lft {
  padding-left: 1em;
}
.pddn-xs-lft {
  padding-left: .5em;
}
 .width95 {
   width:95%;
 }
 .width90 {
   width:90%;
 }
 .width80 {
   width:80%;
 }
 .width50 {
   width:50%;
 }
.brd-grey {
border: 1px #ccc solid;
}
.ccohs-round-brd {
  border-radius: .5em;
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
}


/* Making top navbar and logo static, not fixed  STARTS */

#ohcow-logo,
.navbar-fixed-top
 {
  position: static;
}

#outerframe-container { margin-top: 20px; }

/* Making top navbar and logo static, not fixed  ENDS */

#sa-profile-form a.btn:hover {
    background-color: #B4002A;
    color: #fff;
}



.participation-graph a.sa-lighter-green,
.participation-graph a.sa-lighter-green:link,
 .participation-graph a.sa-lighter-green:visited,
 .participation-graph a.sa-lighter-green:active,
.graphs-container a.sa-lighter-green,
.graphs-container a.sa-lighter-green:link,
 .graphs-container a.sa-lighter-green:visited,
 .graphs-container a.sa-lighter-green:active {
  color: #18D118;
}

.participation-graph a.sa-lighter-green:hover,
.graphs-container a.sa-lighter-green:hover {
  color: #18D118;
}

/* Reusable components */
 .responsive_iframe {
	width:100%;
	position:relative;

	}
.responsive_iframe iframe{
	border:none;
	width:100%;
	height:100%;
    position:absolute; left:0; top:0;
	}

/* Main navbars start*/
.main-nav-copsoq-container {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  -webkit-align-items: center;
  -webkit-justify-content: flex-start;
  justify-content:flex-start;
  flex-wrap: wrap;
  padding:0;
  margin:0;
}
.main-nav-copsoq-container-item {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  padding:.4em;
  margin:0;
 		}
 		.main-nav-copsoq-container-item:nth-child(1) {
	 		margin-left: .5em;
      margin-right: 1em;
	 	}

 		.main-nav-copsoq-container-item:nth-child(2) {
	 		margin-left: auto;
	 		margin-right: 1em;

 		}

 		.main-nav-copsoq-container-item:last-child {
	 		background-color: #000;
	 		padding:.4em .8em;
	 		margin:0 -15px 0 0;

 		}
@media screen and (max-width: 400px) {
 		  .navbar-default {
	 		 margin-bottom:2em;

 		  }
 		   .main-nav-copsoq-container-item:nth-child(1),
 		   .main-nav-copsoq-container-item:nth-child(2) {
	 		 margin-left: 0;
	 		 margin-right: .5em;
	 	    }
	 	    .main-nav-copsoq-container-item:last-child {
	 		margin-left: .5em;
	 		margin-right: .2em;
		    }
	 	}

.main-nav-copsoq-container > .main-nav-copsoq-container-item > a {
  border: none;
  padding:0;
  margin:0 auto;
  color: #fff;
  text-align:center;
}

/* Main navbars end*/

/*Secondary navbars start*/

.nav-copsoq-container
 {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-end;
  -webkit-align-items: flex-end;
  -webkit-justify-content: space-between;
  justify-content:space-between;
  flex-wrap: wrap;
  padding:0;
  margin:0 auto 2rem auto;
}
.nav-copsoq-container > li.active
 {
    border-top: none;

}

.nav-copsoq-container-item
 {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: inline-block;
  padding:0 .8em 0 .8em;
  text-transform: uppercase;
    }
 .nav-copsoq-container-item
 {
  margin:1em 0 .6em 0;
    }


.nav-copsoq-container > .nav-copsoq-container-item > a
 {
  border: none;
  border-radius: 0;
  padding:0;
  margin:15em auto;
  /*color: #9B9B9B;*/
  color: #666;/* Accessible bg-fg colour contrast */
  text-align:center;
}

.nav-copsoq-container .nav-copsoq-container-item.active
 {
color: #000;
font-weight:bold;
padding:0 .8em 0 .8em;
margin:0;
}

.nav-copsoq-container .nav-copsoq-container-item.active
 {
border-bottom: solid 0.6em #E10034;
}

.nav-copsoq-container > li.active:hover

 {
text-decoration:none;
}
.nav-copsoq-container > li a:hover

 {
/*border-top: solid 0.6em #E10034;*/
text-decoration:none;
color: #000000;
}

@media screen and (min-width: 409px) {

.nav-copsoq-container
 {
  margin:0 auto;
  width:100%;
}

}

@media screen and (min-width: 451px) {

.nav-copsoq-container
 {
  width:90%;
}
/*.nav-copsoq-container > li.active
 {
    border-top: none;

}*/

.nav-copsoq-container > .nav-copsoq-container-item > a
 {
  margin:0 auto;
}

}
/*Secondary navbars end*/

/* Secondary pages start */

.logged-out-and-icon-block {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: stretch;
  -webkit-align-items: stretch;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 0;
  margin: 1em 0 0 0;
  width:245px;
  font-size: 80%;
  }
.logged-out-and-icon-block :nth-child(1) {
  width: 60%;
  line-height: 1.3;
 }
.logged-out-and-icon-block :nth-child(1) > span {
  word-wrap: break-word;
}
.logged-out-and-icon-block :nth-child(2) > span {

  font-size: 80%;
}



.logged-out-and-icon-block .icon-and-text {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
  align-items: center;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  width:48px;
  text-transform: uppercase;
  }

  .logged-out-and-icon-block .title-icon-sm
  {
  background-image: url('../../stress_assess_survey/files/sa_img/your_account_sm.png');
  background-size: contain;
  background-repeat: no-repeat;
  padding: 0;
  width:34px;
  height:29px;
  }


#sa-profile-form a.btn-sm {
    padding: 6px 9px;
    font-size: 13px;
    border-width: 0;
    background-color: #E10034;
    border-radius: 0;
    color: #fff;
}
#sa-profile-form a.btn-sm:hover {
    background-color: #B4002A;
    color: #fff;
    text-decoration: none;
}

#sa-profile-form p.btn-logout {
margin-top: -5px;
}


.title-and-icon-block {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-end;
  -webkit-align-items: flex-end;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 1em;
  margin: 0;
  }

  .title-and-icon-block  .title-icon {
  background-image: url('../sa_img/your_account_sm@2x.png');
  background-size: contain;
  padding: 0 .2em 0 0;
  width:87px;
  height:77px;
  }


.sa-page-content,
.sa-forms-content
 {
  width:98%;
}

.sa-page-content header:not(.centered-narrow-content) {
    margin: 0 0 2em 0;
  }
 .sa-page-content header h2
  {
  font-size: 3em;
  padding-top: 0;
  margin-top: 3rem;
 }
 .sa-forms-content header h2
  {
  font-size: 3em;
  padding-top: 0;
  margin-top: 0;
 }

.title-breadcrumb {
font-size: .5em;
color: #E10034;
position: relative;
}




.sa-forms-content header {
    margin: 2em 0 0 0;
  }
  .sa-forms-content footer{
    margin: -16px 0 0 0;
    padding: 1em;
  }
.sa-forms-content footer {
  background-color: #ecf0f1;
  }



.content-box  {
 margin: 0 auto;
 width:80%;
}

.content-box > header {
 margin-top: 3em;
 margin-bottom: 2em;
}

.content-box h2 {
 font-size: 2.8em;
 padding:.2em;
}
.content-box p {
 margin: 1em 0 1em 0;
}

.content-box section h3 {
 font-size: 1.2em;
 margin: 1.2em 0 0 0;
 padding:0;
}

@media all and (max-width:50em) {

/*.main-nav-copsoq-container {
  font-size: 4vw;
}*/

.content-box  {
 padding:1em;
 width:100%;
}
.content-box h2,.content-box section h3  {
 font-size: 4rem;
}
.content-box p  {
 font-size: 2.5rem;
}

}

/* My Survey styles at the top*/
 .my-surveys-container-top {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  -webkit-justify-content: flex-end;
  -ms-justify-content: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
.my-surveys-container-top .my-surveys-label-item {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  flex-wrap: wrap;
  flex: 1 10em;
  margin:.6em 2em 0 0;
  min-width: 5em;
  max-width: 10em;
  text-align: center;
  padding: .5em;
  font-size: .9em;
  text-transform:none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
     }
.my-surveys-container-top .my-surveys-label-item span {
text-align: center;
}
.my-surveys-container-top .my-surveys-label-item a:link,
.my-surveys-container-top .my-surveys-label-item a:visited,
.my-surveys-container-top .my-surveys-label-item a:active,
.my-surveys-container-top .my-surveys-label-item a:focus
 {
text-decoration: none;
color:#fff;
font-weight: normal;
}
.my-surveys-container-top .my-surveys-label-item a:hover {
text-decoration: none;
}

/* Survey results view page STARTS */


.my-survey-results {
  padding: 1em;
  }

.my-surveys-label-container {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-end;
  -webkit-align-items: flex-end;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
.my-surveys-label-item {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  padding:0;
  margin:.6em 0 0 0;
  text-transform: uppercase;
     }
.my-surveys-label-item a:hover {
text-decoration: none;
}

/*.my-surveys-label-item:first-child {
  margin-left: 3.5em;
  text-align: center;
  padding: .8em;
  background: #E10034;
  color: #fff;
  max-height: 45px;
  }*/

/*.my-surveys-label-item:first-child span {
  font-size: 1em;
  font-weight: bold;
}*/

.my-surveys-label-item:nth-child(1) {
  margin-left:auto;
}
.my-surveys-label-item:nth-child(1),
.my-surveys-label-item:nth-child(3)
 {
  max-width: 15em;
  text-align: right;
  padding-right: 1em;
  align-self: center;
  font-size: 75%;
   }
   .my-surveys-label-item:nth-child(3)
 {
 width: 12em;
   }

  .my-surveys-label-item:last-child {
  margin-right: 3.5em;
  }

/* Survey and view results dropdowns  */

.my-survey-results > div {
  margin-left: 1.65em;
  margin-right: 0;
}
.my-survey-results > div > div:nth-child(1) {
  margin-right: 3.85em;
}
.select-survey-form .control-label {
    text-align: right;
    margin-bottom: 5px;
    padding:5px 0 0 5px;
}
/* Tip box */
.tip-box {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-end;
  -webkit-align-items: flex-end;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 1em;
  margin: 0 0 0 5.5em;
  width:70%;
  font-size: 75%;
}

  .tip-box span {
     align-self: flex-start;
  }
  .tip-box span:nth-child(1) {
  flex: 1;
  padding:0;
    }
   .tip-box span:nth-child(2) {
  flex: 4;
  padding:0;
    }
/* Survey results view block STARTS*/

.survey-results-data header > p {
 padding: 0 0 0 .5em;
}
.survey-results-data header h2 {
 font-size: 2.2em;
 padding: .2em 1.5em;
 margin: 0 0 .3em 0;
}

/* Collapsible bars for Survey Results STARTS */

.sa-survey-results-evaluate section {
  padding: .5em;
  margin-bottom: 1em;
}

.sa-main-site-content .sa-survey-results-evaluate .panel-heading {
  border-radius: 0;
  padding: 0;
  margin: 0;
  position: relative;
  height: 2.2em;
}

.sa-main-site-content .sa-survey-results-evaluate .panel-heading:first-of-type {
  margin: 0;
  padding:0;
}

.sa-main-site-content .sa-survey-results-evaluate .panel-collapse {
  background: transparent;
  padding-top: .2em;
}

.sa-main-site-content .sa-survey-results-evaluate .panel-heading a
{
  background-image: url('../../stress_assess_survey/files/sa_img/upArrow_green.png');
}

.sa-main-site-content .sa-survey-results-evaluate .panel-heading a {
  color: #000;
  text-align: left;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: inline-block;
  background-color:transparent;
  background-position: 98% 50%;
  background-repeat: no-repeat;
  background-size: 2em;
  padding:0;
  margin:0;
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  -webkit-align-items: center;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.sa-main-site-content .sa-survey-results-evaluate .panel-heading a.collapsed
{
  background-image: url('../../stress_assess_survey/files/sa_img/downArrow_green.png');
}


.sa-main-site-content .sa-survey-results-evaluate .panel-heading a:hover {
  text-decoration: none;
}

.sa-main-site-content .sa-survey-results-evaluate .panel-heading a h2 {
  font-size: 1.2em;
  text-align: left;
  padding: 0 0 0 .5em;
  margin:0;
  font-weight: bold;
}

/*.graphs-container > div figure
 {
 border: 1px #ccc solid;
}*/
.graphs-container > div figure {
 background-color: #fff;
}
.nested-graphs-block .panel-body {
margin-left:.5em;
margin-right:.5em;
}
.nested-graphs,
.graphs-container > div figure:not(.table-like-graph)

 {
 border: 1px #ccc solid;
}

.nested-graphs {
  padding-left: 0;
  padding-right: 0;
}

.nested-graphs > div figure {
border: none;
}

.graphs-container h3,
.graphs-container figcaption h3,
.nested-graphs h3,
.nested-graphs figcaption h3
 {
font-size: 1.2em;
margin: 0 0 1em 0;
padding: .5em;
}


.graphs-container figcaption h3 span,
.graphs-container h3 span,
.graphs-container #nested-box h3 span,
.nested-graphs figcaption h3 span
 {
display: inline-block;
padding: .5em;
width: 100%;
}

.graphs-container figcaption h4 {
font-size: .8em;
padding: 0 1em 0 1em;
margin-bottom: 2em;
text-align: center;
}

.graphs-container figure img,
.graphs-container > div figure img,
.nested-graphs figure img,
.nested-graphs > div figure img
 {
width:100%; /* for IE 11*/
padding:1em;
}

.graphs-container #nested-box {
padding: .6em;
width:100%;
border: 1px #ccc solid;
}

.graphs-container #nested-box h3
 {
font-size: 1.2em;
margin: 0 0 1em 0;
padding: 0;
}


/* Response rate table */
#survey-response-rate-evaluate .panel-body div.table-container {
  margin-bottom: 0.5em;
}

.panel-body div.table-container {
 border-top: 1px #ccc solid;
 padding: 1em 0 .020em 0;
 background-color: #eee;
}

.panel-body table.response-rate-table
 {
  padding: 1em;
 }

 .panel-body table.response-rate-table th,
 .panel-body table.response-rate-table td
 {
  width:20%;

 }

.panel-body table.response-rate-table th
 {
  padding: 0;
  font-weight:normal;
 }
.panel-body table.response-rate-table th:nth-child(1),
.panel-body table.response-rate-table th:nth-child(2)
 {
  padding-left: 1.5em;
 }

.panel-body table.response-rate-table td
 {
   padding: 0;
   font-size: 2em;
   font-weight: bold;
 }

.panel-body table.response-rate-table td:nth-child(1),
.panel-body table.response-rate-table td:nth-child(2)
 {
  padding-left: .7em;
 }

.panel-body table.response-rate-table td:nth-child(3) span,
.panel-body table.response-rate-table td:nth-child(4) span:not(.tooltip-box),
.panel-body table.response-rate-table td:nth-child(5) span
 {
  font-size: 1.5em;
  padding: 0;
  margin:-10px 0 0 0;
  display: inline-block;
  }

.panel-body table.response-rate-table th:not(th:last-child),
.panel-body table.response-rate-table td:not(td:last-child)
 {
  border-right: 1px #ccc solid;
 }

.panel-body table.response-rate-table .sa-why-declined .popover-content {
  padding: 5px;
}

.panel-body table.response-rate-table .sa-why-declined td, 
.panel-body table.response-rate-table .sa-why-declined th {
  width: auto;
  padding: 5px;
}

.panel-body table.response-rate-table .sa-why-declined td {
  font-size: 1em;
}

span.tooltip-box {
  font-size: 50%;
  text-transform: uppercase;
}
span.tooltip-box a {
 text-decoration: none !important;
 cursor:default;
}

span.tooltip-box a:hover {
  text-decoration: underline;
  cursor:default;
}

.circle-question-mark {
    background: #000;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    color:#fff;
}

span.tooltip-box a span:nth-child(2) {
font-size: 80% !important;
}

.response-rate-container {
  width:60%;
  margin: 0 auto;
}
.response-rate-container div div figure figcaption h3 {
font-size: 1.2em;
padding: 1em 1em 0 1em;
margin-bottom: .3em;
text-align: center;
}
.participation-graph {
  width:80%;
  margin: 0 auto;
}
/* Graphs flexbox */
.participation-graph > div {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

   .participation-graph > div figure {
     flex: 2;
     padding:0;
     margin:0;
     align-self: center;
   }
   .participation-graph > div figure img {
    width:100%; /* for IE 11*/
   }
   .participation-graph > div p {
     flex: 1;
     padding:0;
     margin:1em 0 0 0;
     text-align:left;
    }
    .participation-graph a,
    .participation-graph a:hover
     {
     cursor:default;
    }

.strength-of-association-boxes,
.strength-of-association-boxes-more
 {
         display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
         display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
         display: -ms-flexbox; /* TWEENER - IE 10 */
         display: -webkit-flex; /* NEW - Chrome */
         display-wrap: wrap;
        margin: 20px 10px 10px 0;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr) ) ;
    }


.strength-of-association-boxes a
 {
/*cursor:default;*/
text-decoration: underline;
}
.strength-of-association-boxes a:hover
 {
text-decoration: none;
}

.strength-of-association-boxes-more div
 {
 max-width: 100%;/* to keep boxes of equal width in IE*/
}
.strength-of-association-boxes h4,
.strength-of-association-boxes-more h4
 {
 font-size: 1.1em;
 text-align: center;
}

.strength-of-association-boxes h4,
.strength-of-association-boxes-more h4
{
  padding: .5em;
}

.strength-of-association-boxes p,
.strength-of-association-boxes-more p
 {
 padding: .5em;
 font-weight: normal!important;
}

.strength-of-association-boxes #outer-for-narrow-box {
  padding: 0 1em;
}
#outer-for-narrow-box p {
  margin: 0 auto;
  padding:0;
  width: 70%;
}

.strength-of-association-boxes #narrow-box span {
  font-size: 3em;
  display: block;
}
#what-does-green-mean {
  padding: 0 .5em 0 .5em;
  margin: -10px 0 0 0;
}
#what-does-green-mean .strength-of-association-boxes-more {
  padding-top: 0;
  margin:0;
}


.strength-of-association-boxes .grid-span-3 p {
  padding: 0 0 1em 0;
}

.strength-of-association-boxes .grid-span-3 a
 {
 color:#000;
}

@supports(display:grid) {
  .grid-span-3 {
  grid-column: auto / span 3;
 }
  .strength-of-association-boxes > *,
  .strength-of-association-boxes-more > *  {
    margin:0;
    width:auto;
  }

}


/* Learn more collapsible */
.sa-main-site-content .sa-survey-results-evaluate .learn-more-nested .panel-heading {
  border-radius: 0;
  padding: 0;
  margin: 0;
  position: relative;
  height: 2.2em;
}

.sa-main-site-content .sa-survey-results-evaluate .learn-more-nested .panel-heading:first-of-type {
  margin: 0;
  padding:0;
}

.sa-main-site-content .sa-survey-results-evaluate .learn-more-nested .panel-collapse {
  background: transparent;
  padding-top: .2em;
}

.sa-main-site-content .sa-survey-results-evaluate .learn-more-nested .panel-heading a
{
  background-image: url('../../stress_assess_survey/files/sa_img/upArrow_red.png');
}

.sa-main-site-content .sa-survey-results-evaluate .learn-more-nested .panel-heading a {
  color: #000;
  text-align: left;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: inline-block;
  background-color:transparent;
  background-position: 98% 50%;
  background-repeat: no-repeat;
  background-size: 2em;
  padding:0;
  margin:0;
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  -webkit-align-items: center;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.sa-main-site-content .sa-survey-results-evaluate .learn-more-nested .panel-heading a.collapsed
{
  background-image: url('../../stress_assess_survey/files/sa_img/downArrow_red.png');
}


.sa-main-site-content .sa-survey-results-evaluate .learn-more-nested .panel-heading a:hover {
  text-decoration: none;
}

.sa-main-site-content .sa-survey-results-evaluate .learn-more-nested .panel-heading a p {
  text-align: left;
  padding: 0 1em 0 .5em;
  margin:0 45px 0 0 ;
}

.symptom-score-related-issues div:last-of-type {
padding:1em;
width:25%;
margin-left: auto;
margin-right: auto;
font-size: 80%;
}
.symptom-score-related-issues div:last-of-type a,
.symptom-score-related-issues div:last-of-type a:hover
 {
color:#fff;
}
.symptom-score-related-issues div:last-of-type a:hover {
text-decoration: none;
color: #eee;
}
.symptom-score-related-issues h3 {
padding: .5em .5em .5em 0;
}
.symptom-score-related-issues p {
padding-bottom: .5em;
}

.symptom-score-related-issues dl {
     padding: 0;

}
.symptom-score-related-issues dt {
  font-weight: bold;
  text-align: left;
  padding: .5em 1em;
  margin: 1em 0 0 0;
}

.symptom-score-related-issues dd {
  padding: 1em;
  /*margin: 0 0 1em 0;*/
  background-color: #eee;
}
.symptom-score-related-issues dd ul li {
  font-weight:bold;
}
.symptom-score-related-issues dd ul li ul  {
  margin-top: .5em;
}
.symptom-score-related-issues dd ul li ul li  {
  font-weight:normal;
  margin-left: 5em;
}

.symptom-score-related-issues a.btn-look-like div {
background-color: #E10034;
color: #ffffff;
}

.symptom-score-related-issues a.btn-look-like:hover div {
background-color: #B4002A;
color: #ffffff;
}
/* Major Correlations styles*/
.major-correlations-box {
padding:0 1em;
margin:0;
}
.major-correlations-box h3 {
 font-size: 1.3em;
 margin: .5em 0 .3em 0;
 padding: 0;
 font-weight: bold;
}

.major-correlations-box .tip-box {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-end;
  -webkit-align-items: flex-end;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 1em;
  margin: 0;
  width:90%;
  font-size: 75%;
  background-color: #fde3e3;
  color: #000;
}

  .major-correlations-box .tip-box span {
     align-self: flex-start;
  }
  .major-correlations-box .tip-box span:nth-child(1) {
  flex: 1;
  padding:0;
    }
   .major-correlations-box .tip-box span:nth-child(2) {
  flex: 4;
  padding:0;
    }

 /*Flexbox fort major correlations*/
.correlations-icons-wrapper {
margin: 0 auto;
text-align: center;
padding:0;
width: 100%;
}
.correlations-icons-wrapper header {
padding: 0;
margin: 0 0 .5em 0;
}

.correlations-icons-wrapper header h4 {
font-size: 1.2em;
color: #fff;
padding: .2em;
margin: 0;
}
.correlations-icons-wrapper header h4 span {
font-size: 1em;
}


.correlations-icons-container {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  -webkit-justify-content: center;
  -webkit-align-items: stretch;
  padding:0;
  margin:0;

}
.correlations-icons-container .icons-row {
  padding: .5em .2em;
  margin: 0 .1em;
  background-color: black;
}
.correlations-icons-container .icons-row figcaption span {
width: 130px;
padding:.2em;
font-size: .9em;
}
  .correlations-icons-container .icons-row figure {
background-color: black;
color: #fff;
border:none !important;
padding:0;

  }

.correlations-icons-container .icons-row figure .multi-bg-green,
.correlations-icons-container .icons-row figure .multi-bg-red
 {
 text-align: center;
 margin: .2em auto;

}
.correlations-icons-container .icons-row span{
 display: block;
}

.correlations-icons-container .icons-row a,
.correlations-icons-container .icons-row a:hover
 {
cursor:default;
}



.correlations-icons-container .icons-row .red-tooltip + .tooltip > .tooltip-inner {
  background-color: #f00;
  color: #fff;
}
.correlations-icons-container .icons-row .red-tooltip + .tooltip > .tooltip-arrow {
  border-bottom-color:#f00;
  color: #fff;
   }
  .correlations-icons-container .icons-row .lighter-green-tooltip + .tooltip > .tooltip-inner {
  background-color: #18D118;
  /*background-color: rgba(0, 211, 0, 100);*/
  color: #fff;
}
.correlations-icons-container .icons-row .lighter-green-tooltip + .tooltip > .tooltip-arrow {
  border-bottom-color: #18D118;
  color: #fff;
   }
.correlations-icons-container .icons-row .tooltip.in {
  filter: alpha(opacity=100);/*in Bootstrap it was 90*/
  opacity: 1;/*in Bootstrap it was .9*/
}

/* Collapsible bars block for Survey Results ENDS */

.download-pdf-container {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-end;
  -webkit-align-items: flex-end;
  -webkit-justify-content: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
.download-pdf-item {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  padding:.5em;
  margin:.6em 0 0 0;
  text-transform: uppercase;
  align-self: center;
  font-size: 75%;
     }


/* Survey results view block ENDS*/

.note-survey-results {
padding:1em;
}
.note-survey-results p {
width:55%;
text-align: center;
margin: 0 auto;
font-weight: normal;
}
.note-survey-results p span {
text-transform: uppercase;
}

/* Major correlations block ends */
/* Survey results view page ENDS */

/* Account related pages START */

.centered-narrow-content {
  margin: 0 auto 2em auto;
  width:60%;
}
.centered-narrow-content a,
.centered-narrow-content a:link,
.centered-narrow-content a:visited,
.centered-narrow-content a:active
 {
  text-decoration:underline;
  color: #E10034;
}
.centered-narrow-content a:hover
 {
  text-decoration:none;
}


.red-circle-icon {
    background: #E10034;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    color:#fff;
    padding: 3px;
    font-size: 30px;
    margin: -35px auto 0 auto;

}


/*Styles for secondary Evaluate Results pages */

.icon-title-block {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  -webkit-align-items: center;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
.icon-title-block .icon {
  padding:0;
  margin:0;
     }
  .icon-title-block .title h2 {
  padding:0 0 0 .2em;
  margin:0;
     }

   .icon-title-block .square-bg
 {
   position:relative;
   width: 60px;
   height: 60px;
   margin:.5em auto;
  }
 .icon-title-block .square-bg .icon-placement-block {
  position:absolute;
  bottom:0;
  top:0;
  left:0;
  right:0;
  width:50px;
  height:50px;
  background-repeat: no-repeat;
  background-position: center;
  background-color:white;
  margin:.3em auto;
  padding:1em;
  border-radius: 50%;
}

.icon .square-bg .physical_factors {
  background-image: url(../files/sa_img/ICONS/accident_invest.svg);
 }
.icon .square-bg .physical_factors {
  background-image: url(../files/sa_img/ICONS/physical_factors.svg);
 }



.page-heading {
display: inline-block;
text-transform:uppercase;
padding: .3em 0;
margin:0;
color: #000;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  -webkit-align-items: center;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}
/* Heading for secondary pages */
.page-heading h2 {
    font-size: 1.2em;
    text-align: left;
    padding: 0 0 0 .5em;
    margin: 0;
    font-weight: bold;
}

  /* Learn more collapsible */
.sa-main-site-content .show-comparison .panel-heading {
position: relative;
padding:0;
margin:0;
}

.sa-main-site-content .show-comparison .panel-heading a
{
  background-image: url('../../stress_assess_survey/files/sa_img/redArrow_up.png');
  padding: 25px 0 0 0;
  margin: 0;
  background-color: transparent;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 2em;
}

.sa-main-site-content .show-comparison .panel-heading a {
text-align: center;
/*color: #E10034;*/
text-transform:uppercase;
position: relative;
padding-bottom: 1em;
}

.sa-main-site-content .show-comparison .panel-heading a.collapsed
{
  background-image: url('../../stress_assess_survey/files/sa_img/redArrow_dwn.png');
}


.sa-main-site-content .show-comparison .panel-heading a:hover {
  text-decoration: none;
}

.sa-main-site-content .show-comparison .panel-heading a p {
  position: absolute;
  top:-10px;
  bottom:0;
  left:0;
  right:0;
  text-align: center;
  padding: 0;
  margin:-2px 0 0 0;
}


/* Show Natl comparison charts collapsible STARTS */


/* Show Natl comparison charts collapsible ENDS */

.title-breadcrumb-bottom {
font-size: 1.5em;
color: #E10034;
position: relative;

}

.title-breadcrumb::before
{
  position: absolute;
  top:2px;
  bottom:0;
  left:-20px;
  right: 0;
  content: "";
  width: 0;
  height: 0;
  margin: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;

  border-right:12px solid #E10034;
}
.title-breadcrumb-bottom::before
{
  position: absolute;
  top:2px;
  bottom:0;
  left:382px;
  right: 0;
  content: "";
  width: 0;
  height: 0;
  margin: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;

  border-right:12px solid #E10034;
}
@media all and (max-width:75em) {
.title-breadcrumb-bottom::before
{
display: none;
text-decoration: underline;
}
.title-breadcrumb-bottom a
{
text-decoration: underline;
}
.title-breadcrumb-bottom a:hover
{
text-decoration: none;
}
}

/* Secondary pages end*/

/* Customized components */

/* Modal window */

/* Modal box STARTS */
.modal-content {
padding:2rem;
}
.modal-content p {
margin-bottom: 2rem;
}
.modal-body {
  padding: 20px 20px 5px 20px;
  font-size: 1.2rem;
}
.modal-header {
  padding: 10px;
  margin-left: 2rem;
  margin-right: 2rem;
  border-bottom: none;
  background-color: black;
  color:#fff;
}
.modal-footer {
    text-align: center;
    border-top: none;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    align-items: center;
    -webkit-align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 0 auto;
}

.modal-footer .circle-close {
  width: 50px;
  height: 50px;
  background: black;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50px;
  padding:0;
  border:none;
}
.modal-footer .circle-close:focus,
.modal-footer .circle-close:hover {
background-color: rgba(0,0,0, .5);
}
.modal-footer :nth-child(1) .circle-close::before {
  content: "";
  padding:0;
  margin: 0;
  font-size: 3rem;
  font-weight: normal;
  color: #fff;
}
.modal-footer  :nth-child(2) .circle-close::before {
  content: "\00d7";
  padding:0;
  margin: 0;
  font-size: 4rem;
  font-weight: normal;
  color: #fff;
}
.modal-footer div span {
  display: block;
  font-size: 1.2rem;
  color: grey;
  margin: .5rem;
}


/* Modal box ENDS*/