html{
    height: 100%;
    width: 100%;
}
body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Quicksand', sans-serif;
    color: #1f1f1f;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  background-color: #cde4e8;
}

.no-margin {margin: 0;}
.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb60 {margin-bottom: 60px;}

.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt60 {margin-top: 60px;}

.mr10 {margin-right: 10px;}
.mr20 {margin-right: 20px;}
.mr30 {margin-right: 30px;}
.mr60 {margin-right: 60px;}

.ml10 {margin-left: 10px;}
.ml15 {margin-left: 15px;}
.ml20 {margin-left: 20px;}
.ml30 {margin-left: 30px;}
.ml60 {margin-left: 60px;}

.spacer15{
  display: block;
    clear: both;
    overflow: hidden;
    height: 15px;
}
.main {
  position: relative;
}
.section {
	/* padding: 7.5rem 6rem; */
	position: relative;
}
.main-section {
  padding-left: 100px;
  padding-right: 100px;
}



.modal-title {
  color: #C8102E;
}

a.back-to-top {
     display: none;
    width: 60px;
    /* height: 60px; */
    /* text-indent: -9999px; */
    text-align: center;
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 20px;
    background-color: #C8102E;
    color: #ffffff;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    padding: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    line-height: 14px;
}
a.back-to-top:hover {
    text-decoration: none;
}
a.back-to-top i {
  display: block;
  font-size: 16px;
}

.overlapblackbg {
  left: 0;
  z-index: 102;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  display: none;
  background-color: rgba(0,0,0,.6) !important;
  cursor: pointer;
}
.overlapblackbg.active {
  display: block !important;
}

/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.icon-bar {
  position: fixed;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Style the icon bar links */
.icon-bar a {
      display: block;
    text-align: center;
    padding: 9px 11px;
    transition: all 0.3s ease;
    color: white;
    font-size: 18px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: #000;
}

.icon-bar .facebook {
  background: #3B5998;
  color: white;
}

.icon-bar .twitter {
  background: #55ACEE;
  color: white;
}

.icon-bar .instagram {
  background: #E1306C;
  color: white;
}

.icon-bar .whatsapp {
  background: #25D366;
  color: white;
}


.w-20 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20% !important;
          flex: 0 0 20% !important;
  max-width: 20%;
}

@media screen and (max-width: 991px) {

  .row-cols-5 > * {
    -ms-flex: 0 0 33.3%;
    flex: 0 0 33.3%;
    max-width: 33.3%;
  }
  
}

@media screen and (max-width: 767px) {

  .row-cols-5 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 15px;
  }
  
}

p {
	color: #1f1f1f;
	font-size: 1.1rem;
}
@media (max-width: 768px) { 
  p {
    font-size: 1rem;
  }
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  margin-top: 0;
}
h2 {
	color: #1f1f1f;
	font-size: 30px;
	margin-bottom: 1.2rem;
}

.btn {
	font-family: 'Quicksand', sans-serif;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	outline: none;
	border-radius: 12px;	
	font-size: 1.2rem;
  padding: 8px 16px;
}
.btn-lg {
	padding: .8rem 1.2rem;
  font-size: 1rem;
}
 .btn-primary {
	background-color: #C8102E !important;
	color: #ffffff !important;
	border: 0;
	transition: 0.5s;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:visited {
	background-color: #C8102E !important;
	color: #ffffff !important;
	border: 0;
}

/*
.btn-secondary {
	background: transparent;
	color: #ffffff;
	border: 1px solid #C4973A;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:visited {
	background: rgba(255,255,255,0.1);
	border: 1px solid #C4973A;
}


.btn-primary.focus, .btn-primary:focus,
.btn-secondary.focus, .btn-secondary:focus,
.btn-white.focus, .btn-white:focus,
.btn-default.focus, .btn-default:focus  {
    color: inherit;
    background-color: inherit;
    border-color: transparent;
    box-shadow: none;
}

.btn-white {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #ffffff;
}
.btn-white:hover,
.btn-white:focus,
.btn-white:active,
.btn-white:visited {
  background: #ffffff;
  border: 1px solid #333333;
}


.btn-white i {
  font-size: 18px;
} */

.btn-default {
  background-color: #666666;
  color: #ffffff !important;
  border: 1px solid #666666;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default:visited {
  background-color: #666666;
  color: #ffffff !important;
  border: 1px solid #ffffff;
}

.form-control {
  height: 45px;
  border-radius: 12px;
  color: #1f1f1f !important;
  border-color: #D1D1D1 !important;
}
label {
  font-weight: 600;
}

.blurred-box {
  background: rgba( 255, 255, 255, 0.45 );
  box-shadow: 0 8px 16px 0 rgba( 0, 0, 0, 0.10 );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
}
.blurred-box .box-inner {
  z-index: 10;
}


.overlay {
  display: none;
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
  /*background: #333;*/
  overflow: auto;
  z-index: 9999;
  background: rgba( 255, 255, 255, 0.45 );
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.wrap {
  color: #1f1f1f;
  max-width: 80%;
  margin: 0 auto;
  position: relative;
  min-height: 100vh;
  text-align: center;
}
.wrap-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.wrap-inner h4 {
  color: #1f1f1f;
  font-size: 1rem;
}
.wrap-inner h2 {
  color: #1f1f1f;
  margin-bottom: 4rem;
}
.wrap ul.wrap-nav {
  padding: 0;
  list-style: none !important;
  
}
.wrap ul.wrap-nav > li {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  position: relative;
  padding: 0 2%;
  list-style: none !important;
}
.wrap ul.wrap-nav > li a {
  color: #1f1f1f;
  font-size: 1.2rem;
  line-height: 2.4rem;
}

#exploreMore .modal-header {
  border-bottom: 0;
  justify-content: center;
}
#exploreMore .modal-header .close {
  display: none;
}
#exploreMore .modal-body {
  padding: 1.2rem;
}
#exploreMore .modal-body p {
  text-align: center;
  margin-bottom: 1.8rem;
}
#exploreMore .modal-body a {
  font-size: 1.2rem;
  color: #1f1f1f;
  text-decoration: underline;
}
#exploreMore .modal-footer {
  justify-content: center;
}

.apexcharts-xaxis-title {
  margin-bottom: 15px;;
}

header {
	background-color: #060645;
  background-image: none;
  width: 100%;
}
nav > a {
	z-index: 79;
}
.navbar {
	padding: 1rem 0;
  justify-content: normal;
}

header .ou-logo {
  display: inline-block;
  /* height: 70px; */
    margin-right: 30px;
}
header .open-learn-logo {
  display: inline-block;
  /* height: 65px; */
}

header .explore {
  background-color: #C8102E;
  color: #ffffff;
  font-size: 16px;
  position: absolute;
  top: 33px;
  right: 150px;
  border-radius: 50px;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    text-align: center;
    font-family: "Open Sans",sans-serif;
}
header .explore:hover {
  background-color: #C8102E;
  color: #ffffff;
  font-size: 16px;
}
header .language-link {
  color: #ffffff;
  font-size: 16px;
  position: absolute;
  top: 44px;
  right: 360px;
}
header .language-link:hover {
  color: #ffffff;
  font-size: 16px;
  text-decoration: underline;
}
@media screen and (max-width: 767px) {
  header .language-link {
    top: 44px;
    right: 120px;
  }
}
@media screen and (max-width: 600px) {
  header .language-link {
    display: none;
  }
}

/* ------ FOOTER ------ */
footer {
  background-color: #060645;
  background-image: none;
  width: 100%;
  padding: 2rem 60px 2rem 60px;
}
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer ul li {
  list-style: none;
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
  border-right: 1px solid #ffffff;
  display: inline-block;
}
footer ul li:last-child {
  border-right: 0;
}
footer ul li a {
  color:  #ffffff !important;
  text-decoration: none;
}

/* HAMBURGER ICON */
#nav-icon3 {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 22px;
    right: 30px;
    margin:  0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    background: #ffffff;
	  border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
	  z-index: 999999;
}
#nav-icon3 span{
    display: block;
    position: absolute;
    height: 4px;
    width: 55%;
    background: #000000;
    border-radius: 50px;
    opacity: 1;
    left: 13px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    transition: .5s ease;
}
#nav-icon3 span:nth-child(1) {
  top: 18px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 28px;
}
#nav-icon3 span:nth-child(4) {
  top: 38px;
}
#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}
#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

/* ---------- SLIDE IN MENU ---------- */
.nav-slope {
  background: #C8102E;
  transform-origin: left center;
}
.nav-slope .nav-content {
  margin: 0 auto;
  padding: 50px 40px 1000px 40px;
  height: 100vh;
}
.nav-slope .nav-content h3, .nav-slope .nav-content h5 {
  color: #fff;
}
.nav-slope .nav-content hr {
  border: 1px #fff solid;
  margin: 30px 0;
}
.nav-slope .nav-content ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.nav-slope .nav-content li {
  padding: 0;
  margin: 0 0 10px 0;
  list-style: none;
}
.nav-slope .nav-content li a {
  color: #fff;
  font-size: 18px;
}
.nav-slope .nav-content li:hover {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.nav-slope .nav-content a.close-slide-main {
  font-size: 40px;
  color: #fff;
  margin-bottom: 30px;
  display: inline-block;
}
#main-nav {
  display: block;
  position: fixed;
  top: 0;
  right: -35%;
  width: 35%;
  z-index: 9999999;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  border-left: 4px solid #fff;
}
#main-nav ul li.features {
  position: relative;
}
#main-nav ul li.features i {
  color: #fff;
  font-size: 24px;
  position: absolute;
  top: 0px;
  left: -20px;
}
#main-nav.active {
  visibility: visible;
  right: 0;
}

.loading-data {
  min-height: 100vh;
  position: relative;
}
.loading-data .loading-content {
  width: 100%;
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #ffffff;
}
.loading-data .loading-content i {
  font-size: 60px;
  color: #ffffff;
}
.loading-data .loading-content span {
  font-size: 48px;
  color: #ffffff;
  display: block;
}

.chart-protector {
  position: relative;
  margin-bottom: 30px;;
}
.mandmoverlay {
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  padding: 30px;
  width: 100%;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}
.mandmoverlay .mandm-footer {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  border: 0;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  width: 100%;
}
#mob-filter-button, #mob-filter-button-close {
  display: none;
}

/* ------ INTRO AREA ------ */

#intro {
  margin: 60px 0;
  text-align: center;
}
#intro h1 {
  color: #C8102E; 
}

/* ------ / INTRO AREA ------ */


/* ------ FILTER UTILITY BAR ------ */

.search-results-bar {
  background-color: #3f767d;
  border-radius: 12px;
  padding: 20px;
  width: 100%;
}
.search-results-bar .search-count {
  font-weight: 600;
  color: #ffffff;
}
.search-results-bar label {
  color: #ffffff;
}
.search-results-bar .form-select {
  min-width: 180px;
  background-color: white;
  border: 1px solid #ced4da;
  padding: 0.5rem 1rem;
  border-radius: 12px;
}
.search-results-bar .form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  border-color: #86b7fe;
}
.search-results-bar .dropdown-container {
  position: relative;
}
.search-results-bar .dropdown-container::after {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.search-results-bar .btn-reset {
  background-color: #d63031;
  color: white;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  font-weight: 500;
}
.search-results-bar .btn-reset:hover {
  background-color: #c12928;
  color: white;
}
.search-results-bar .btn-reset:focus {
  box-shadow: 0 0 0 0.25rem rgba(214, 48, 49, 0.25);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .search-results-bar h2 {
    font-size: 24px;
  }
  .search-results-bar .row {
    flex-direction: column;
  }
  
  .search-results-bar .row .col-md {
    margin-top: 1rem;
    width: 100%;
  }
  
  .search-results-bar .d-flex {
    flex-wrap: wrap;
    justify-content: flex-start !important;
  }
  .search-results-bar .d-flex .dropdown-container {
    width: 100%;
    margin: 10px 0 15px 0;
  }
}
/* ------ / FILTER UTILITY BAR ------ */

/* ------ LHS FILTER OPTIONS ------ */

.filter-container {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
  max-width: 400px;
  margin: 0 auto 30px auto;
}
.filter-container .filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.filter-container .filters-header h2 {
  margin: 0;
}
.filter-container .card {
  border: none;
  margin-bottom: 8px;
  background: transparent;
}

.filter-container .card-header {
  background-color: #1f1f1f;
  border-radius: 12px !important;
  padding: 10px 15px;
  border: none;
}

.filter-container .btn-link {
  color: white;
  text-decoration: none;
  font-weight: 500;
  width: 100%;
  text-align: left;
  padding: 0;
  background: none;
  border: 0;
  outline: 0;
  font-size: 1.2rem;
}

.filter-container .btn-link:hover, 
.filter-container .btn-link:focus,
.filter-container .btn-link:active {
  color: white;
  text-decoration: none;
  background: none;
  border: 0;
  outline: 0;
}

.filter-container .btn-link.collapsed .fa-chevron-up {
  transform: rotate(180deg);
}

.filter-container .form-group {
  margin-bottom: 15px;
  text-align: left;
}

.filter-container .form-label {
  margin-bottom: 5px;
}

.filter-container .custom-select {
  border-radius: 5px;
  padding: 8px 12px;
  height: auto;
}

.filter-container .close-btn,
.outcomes-container .close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #1f1f1f;
}

.filter-container .close-btn:hover,
.outcomes-container .close-btn:hover {
  color: #1f1f1f;
}

.filter-container .card-body {
  padding: 30px 0 0;
}

/* Custom styling for the dropdown carets */
.filter-container .fa-chevron-up, .filter-container .fa-chevron-down {
  float: right;
  margin-top: 4px;
}

/* Styling for the section headers */
.filter-container .socio-demographics-header {
  background-color: #C8102E;
}

.filter-container .health-related-header {
  background-color: #C8102E;
}

.filter-container .sexual-experience-header {
  background-color: #C8102E;
}

/* ------ / LHS FILTER OPTIONS ------ */

/* ------ LHS OUTCOMES  ------ */

.outcomes-container {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
  max-width: 400px;
  margin: 0 auto 30px auto;
}
.outcomes-container .outcomes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.outcomes-container .outcomes-header h2 {
  margin: 0;
}
.outcomes-container .btn {
  text-align: left;
  margin-bottom: 10px;
}

/* ------ / LHS OUTCOMES  ------ */

.filter-wrapper .filter-header {
  display: none;
}
.filter-wrapper {
  position: relative;
  background: #ffffff);
  border-radius: 10px;
}
.filter-wrapper .filter-wrapper-inner {
  z-index: 10;
  padding: 2%;
}

.filters-section {
  margin: 60px auto;
  z-index: 100;
  /* width: 80%; */
}

.filters-section .filter-top-tab {
  border-top-right-radius: 10px; 
  border-top-left-radius: 10px; 
}
/* .filters-section .filter-bottom-tab {
  border-bottom-right-radius: 10px; 
  border-bottom-left-radius: 10px; 
} */
.filters-section .filter-top-tab{
  background-color: #f5f5f5;
  text-align: center;
  display: inline-block;
  padding: 10px 30px;
  font-size: 1.2rem;
  font-weight: 600;
}
.filters-section .filter-top-tab {
  width: 70%;
}

.filters-section .filter-top-tab span {
  color: #1f1f1f;
  font-size: 1.8rem;
  display: block;
  margin-bottom: 10px;
}
.filters-section .filter-top-tab p {
  font-size: 1rem;
}
/* .filters-section .filter-bottom-tab span {
  display: block;
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.filters-section .filter-bottom-tab a {
  margin: 0 5px;
  font-size: 12px;
  color: #1f1f1f !important;
  border: 1px solid #d1d1d1;
  background-color: transparent;
}
.filters-section .filter-bottom-tab a:hover {
  background-color: #f5f5f5;
} */
.filters-section .col .filter-inner h3 {
  font-size: 1.4rem;
  margin-bottom: 34px;
}

.filters-section .filter-links {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.filters-section .filter-links a {
  margin: 0 5px;
  font-size: 12px;
  color: #1f1f1f !important;
  border: 1px solid #d1d1d1;
  background-color: transparent;
}
.filters-section .filter-links a:hover {
  background-color: #d1d1d1;
}

/* FILTER 1 */

.filters-section .filter-1 .filter-option {
  padding: 15px 20px;
  border-radius: 10px;
  background-color: #ffffff;
  color: #1f1f1f;
  text-align: center;
  display: inline-block;
  width: 96px;
  cursor: pointer;;
}
.filters-section .filter-1 .filter-option.active {
  background-color: #50AB68;
  color: #ffffff
}
.filters-section .filter-1 .filter-option i {
  font-size: 4.5rem;
  display: block;
  margin-bottom: 15px;
}
.filters-section .filter-1 .filter-option span {
  font-size: 1rem;
  display: block;
  font-weight: 600;
}

@media screen and (max-width: 1200px) and (min-width: 767px) {

  .filters-section .filter-1 .col {
    width: 100% !important;
    min-width: 100%;
    text-align: center !important;
  }
  .filters-section .filter-1 .filter-option {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
  }
  .filters-section .filter-1 .filter-option i {
    font-size: 2.5rem;
    margin-bottom: 5px;
  }

}

/* FILTER 2 */

.filters-section .filter-2 {
  position: relative;
}
.filters-section .filter-2 span {
  padding: 10px;
  border-radius: 10px;
  background-color: #ffffff;
  color: #1f1f1f;
  display: block;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  text-align: center;
  width: 70%;
  margin: 0 auto 10px auto;
  cursor: pointer;
}
.filters-section .filter-2 span.active {
  background-color: #50AB68;
  color: #ffffff
}


@media screen and (max-width: 1200px) and (min-width: 767px) {

  .filters-section .filter-2 .col {
    width: 50% !important;
    min-width: 50%;
    text-align: center !important;
  }
  
}

/* FILTER 3 */

.filters-section .filter-3 span {
  padding: 10px;
  border-radius: 10px;
  background-color: #ffffff;
  color: #1f1f1f;
  text-align: center;
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  margin: 5px;
  width: 66px;
  cursor: pointer;
}
.filters-section .filter-3 span.active {
  background-color: #50AB68;
  color: #ffffff
}

@media screen and (max-width: 1200px) and (min-width: 767px) {

  .filters-section .filter-3 .col {
    width: 100% !important;
    min-width: 100%;
    text-align: center !important;
  }
  .filters-section .filter-3 span {
    width: 100%;
  }
  
}

/* FILTER 4 */

.filters-section .filter-4 span img {
  margin-right: 10px;
  width: 35px;
}
.filters-section .filter-4 span {
  padding: 10px;
  border-radius: 10px;
  background-color: #ffffff;
  color: #1f1f1f;
  display: block;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  text-align: center;
  width: 95%;
  margin: 0 auto 10px auto;
  cursor: pointer
}
.filters-section .filter-4 span.active {
  background-color: #50AB68;
  color: #ffffff
}
.filters-section .filter-4 h3 {
  margin-bottom: 0 !important;
}

@media screen and (max-width: 1200px) and (min-width: 767px) {

  .filters-section .filter-4 span {
    width: 100%;
    text-align: center !important;
  }
  .filters-section .filter-4 span img,
  .filters-section .filter-4 span em {
    display: block;
    margin: 0 auto;
  }
  
}

/* FILTER 5 */

.filters-section .filter-5 {
  position: relative;
}
.filters-section .filter-5 h3 {
  margin-bottom: 0 !important;
}
.filters-section p.small {
  font-size: 65%;
}
.filters-section .filter-5 span {
  padding: 10px;
  border-radius: 10px;
  background-color: #ffffff;
  color: #1f1f1f;
  text-align: center;
  display: block;
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
  margin: 0 auto 10px auto;
  line-height: 1.2rem;
  cursor: pointer;
}
.filters-section .filter-5 span.active {
  background-color: #50AB68;
  color: #ffffff
}
.filters-section .filter-5 span em {
  vertical-align: middle;
  font-style: normal;
}
.filters-section .filter-5 .filter-links {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.filters-section .filter-5 .filter-links a {
  margin: 0 5px;
}

@media screen and (max-width: 1200px) and (min-width: 767px) {

  .filters-section .filter-5 .col {
    width: 100% !important;
    min-width: 100%;
    text-align: center !important;
  }
  .filters-section .filter-5 span {
    min-height: auto;
    width: 100%;
  }
  .filters-section .filter-5 p {
    word-break: break-all;
  }
  
}

/* .graph-section .column {
  padding-left: 30px;
  padding-right: 30px;
} */
.graph-panel {
  margin-bottom: 20px;
  /* min-height: 425px; */
  position: relative;
  background: white;
  border-radius: 12px;
  display: inline-table;
  width: 100%;
  border: 1px solid #d1d1d1;
}
.graph-panel .box-inner {
  padding: 20px;
}
.graph-panel .box-inner .chart-denominator {
  font-size: 0.9rem;
}
.graph-panel .box-inner a.dyk i {
    font-size: 28px;
    color: #C8102E;
    /* background-color: #888888 !important; */
    border: 0;
}
.graph-panel .box-inner h2 {
  font-size: 1.8rem;
  margin: 0 0 15px 0;
}
 /*.graph-panel .box-inner p {
 font-size: 0.9rem;
  margin-bottom: 0.4rem;
   min-height: 110px;
} */

.chart-wrapper {
    user-select: none;
    display: block;
}
/* The percentage labels above the bars. ApexCharts (4.3.0) hides the label
   layer whenever the series data changes and only reveals it at the end of
   the bar animation. Our animations are off, so that reveal never comes -
   the labels only appeared if the chart had also been resized at some point,
   which made them come and go between page loads (seen in Edge). With no
   animation to wait for, there is nothing to hide them for. */
.chart-wrapper .apexcharts-canvas .apexcharts-datalabels.apexcharts-element-hidden,
.chart-wrapper .apexcharts-canvas .apexcharts-datalabel.apexcharts-element-hidden {
    opacity: 1;
}
.chart-wrapper label {
    display: block;
    text-align: center;            
    margin-top: 15px;
    color: #1f1f1f;    
    font-weight: 600;
}
.chart-wrapper .apexcharts-zoom-icon, 
.chart-wrapper .apexcharts-reset-icon, 
.chart-wrapper .apexcharts-menu-icon {
  transform: scale(1.2);
}
.chart-wrapper .apexcharts-toolbar-custom-icon i {
  font-size: 21px;
    margin-top: 5px;
    background-color: #C8102E;
    padding: 6px;
    color: white;
    border-radius: 5px;
}
.chart-wrapper .apexcharts-menu-icon svg {
  font-size: 21px;
  margin-top: 6px;
  background-color: #C8102E;
  padding: 3px;
  color: white;
  border-radius: 5px;
  fill: white;
  height: 27px;
  width: 27px;
}
.chart-wrapper .apexcharts-toolbar {
  right: 23px !important;
}
.chart-wrapper .apexcharts-toolbar .apexcharts-menu {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
  right: 15px;
  min-width: 150px;
  text-align: left;
}
.chart-wrapper .apexcharts-toolbar .apexcharts-menu .apexcharts-menu-item {
  font-size: 16px;
}

.did-you-know {
  margin-top: 40px;
  position: absolute;
  bottom: -3px;
  left: 30px;
  width: 90%;
}
.did-you-know h4 {
  font-size: 1.1rem;
  margin-top: 10px;
}    

.feedback-panel {
  background: #C8102E;
  vertical-align: top;
}
.feedback-panel h2,
.feedback-panel h4 {
  color: #ffffff;
}

.feedback-panel .explore {
  background-color: #ffffff;
  color: #1f1f1f;
  font-size: 16px;
  margin-top: 15px;

}
.feedback-panel .explore:hover {
  background-color: #e8e8e8;
  color: #1f1f1f;
  font-size: 16px;
}

@media screen and (max-width: 1600px) {

	.main-section {
    padding-left: 60px;
    padding-right: 60px;
  }
  .filters-section {
    width: 100%;
  }
}

@media screen and (max-width: 1600px) and (min-width: 1200px) { 

}
@media screen and (max-width: 1200px) and (min-width: 767px) {

  .filters-section .col .filter-inner h3 {
    font-size: 1rem;
    margin-bottom: 34px;
  }
  
}

@media screen and (max-width: 1200px) {
  .graph-panel .box-inner h2 {
    font-size: 1.4rem;
  }
  .graph-panel .box-inner {
    padding: 20px;
  }
	
}
@media screen and (max-width: 991px) {

  .graph-section .column {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  #main-nav {
    right: -65%;
    width: 65%;
  }
 .graph-panel .box-inner a.dyk {
    margin-bottom: 10px;
  }
	
}

@media screen and (max-width: 767px) {

  #mob-filter-button {
    display: block; 
    background-color: #C8102E;
    color: #fff;
    font-size: 16px;
    border-radius: 50px;
    padding: 0.6rem 1.5rem;
    text-align: center;
    border: 0;
  }
  #mob-filter-button i {
    margin-right: 5px;
  }

  #mob-filter-button-close {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    border-radius: 50px;
    padding: 4px 12px;
    margin: 17px 20px 0 0;
    background-color: #C8102E;
    color: white; 
  }

  .filter-wrapper {
    position: fixed;
    background-color: #e7e7e7;
    height: 100%;
    z-index: 999;
    top: 0px;
    left: -300px;
    width: 300px;
    margin: 0;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    overflow-y: scroll;
    border-radius: 0;
  }
  .filter-wrapper.active {
    left: 0%;
    width: 320px;
    z-index: 999999;
  }
  .filter-wrapper.fixedTop {
    top: 0 !important
  }
  .filter-wrapper .filter-header {
    display: block;
    background-color: #C8102E;
    padding: 8px 15px;
    text-align: left;
  }
  .filter-wrapper .filter-header h3 {
    color: #ffffff;
    margin: 0;
  }
  .filter-wrapper .filter-wrapper-inner {
    padding: 5%;
  }
  .filter-wrapper .filter-wrapper-inner .filter-inner .col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .filters-section .filter-1 .filter-option i {
    display: none;
  }
  .filters-section .filter-1 .filter-option,
  .filters-section .filter-2 span,
  .filters-section .filter-3 span,
  .filters-section .filter-4 span,
  .filters-section .filter-5 span {
    padding: 8px 20px;
    display: inline-block;
    width: 100%;
    margin: 0 0 10px 0;
    font-size: 0.8rem;
  }
  .filters-section .filter-1 .filter-option span {
    font-size: 0.8rem;
  }
  .filters-section .col .filter-inner h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
  }
  .chart-protector {
    width: calc(100vw - 197px);
    overflow-x: scroll;
  }
  .chart-wrapper {
    position: relative;
    min-width: 600px;
  }
  header .explore {
    display: none;
  }
  #main-nav {
    right: -80%;
    width: 80%;
 }
 .filter-container .btn-link,
 .outcomes-container .btn {
  font-size: 1rem;
 }

}

@media screen and (max-width: 575px) {

}

@media screen and (max-width: 480px) {	

  .main-section {
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 30px !important;
  }
  .graph-section .column {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  header .ou-logo {
    margin-right: 15px;
  }
  header .open-learn-logo {
    width: 35%;
  }
  footer {
    padding-left: 30px;
    padding-right: 30px;
  }
  footer ul {
    list-style-type: disc;
    margin: 0;
    padding: 0;
    color: white;
  }
  footer ul li {
    list-style-type: disc;
    margin: 0 0 5px 10px;
    padding: 0;
    border-right: none;
    display: list-item;
    color: white;
  }
  #nav-icon3 {
    right: 15px;
  }
  #main-nav {
    right: -100%;
    width: 100%;
  }
  .filters-section .filter-top-tab {
    width: 96%;
  }
  .filters-section .filter-top-tab span {
    font-size: 1.4rem;
  }
  .filters-section .filter-top-tab p {
    font-size: 0.8rem;
  }
  .graph-panel .box-inner {
    padding: 20px;
  }
  .sharethis-sticky-share-buttons {
    display: none !important;
  }
  .chart-protector {
    width: calc(100vw - 100px);
    overflow-x: scroll;
  }

}


/* ------ NATSAL-4 LAYOUT OPTIMISATION ------ */

/* Filters and outcomes stay in view while the chart column scrolls. Without
   this you lose the filters as soon as you look at anything below the fold. */
@media (min-width: 992px) {
  .filter-wrapper {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }
}

/* Equal-height chart cards so a two-up row does not stagger. */
.graph-section .column {
  display: flex;
}
.graph-section .column .graph-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.graph-section .column .graph-panel .box-inner {
  flex: 1 1 auto;
}

/* Chart titles wrap to two lines in a half-width card - keep them tight. */
.graph-panel .box-inner h2 {
  line-height: 1.25;
  min-height: 2.5em;
}

/* Count badge on a collapsed filter group, so you can see something is applied
   without expanding it. */
.filter-container .filter-count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 10px;
  background: #ffffff;
  color: #C8102E;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
}

/* Outcomes are a navigation list, not a set of calls to action. As solid red
   buttons they read as a wall of colour and compete with the charts they point
   at - and there are 28 of them now, not the six this was written for. Quiet by
   default, red only on hover and focus so the target is still obvious. */
.outcomes-container .btn.btn-primary {
  background-color: #ffffff !important;
  color: #1f1f1f !important;
  border: 1px solid #d5d7dc !important;
  border-left: 3px solid #C8102E !important;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}
.outcomes-container .btn.btn-primary:hover,
.outcomes-container .btn.btn-primary:focus {
  background-color: #f0f1f3 !important;
  color: #C8102E !important;
  border-color: #d5d7dc !important;
  border-left-color: #C8102E !important;
}

/* ------ FILTER UPDATE FEEDBACK ------ */

.graph-section {
  position: relative;
}

/* Charts fade back slightly while redrawing so the change is legible without
   hiding the previous values. */
.graph-section.is-updating .row {
  opacity: 0.45;
  transition: opacity 120ms ease-out;
  pointer-events: none;
}
.graph-section .row {
  transition: opacity 180ms ease-in;
}

.chart-updating-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
}

/* Was position:sticky with top:45vh inside an absolutely positioned flex
   overlay - sticky has no scroll container to stick to there, so the badge
   drifted depending on where the page was scrolled. Pinned to the top of the
   chart area instead, which is where the eye already is after a filter click. */
.chart-updating-badge {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 24px;
  background: #1f1f1f;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.chart-updating-badge i {
  font-size: 1rem;
}

/* Respect users who have asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .graph-section .row,
  .graph-section.is-updating .row {
    transition: none;
  }
  .chart-updating-badge i {
    animation: none;
  }
}

/* --- "too few people" panel -------------------------------------------------
   Shown instead of the charts below the 30-participant disclosure threshold.
   Styled as an explanation the user can act on, not as an error. */
.too-few-panel .box-inner { padding: 32px 24px; }
.too-few-panel h3 { margin-bottom: 12px; }
.too-few-panel p { max-width: 620px; margin: 0 auto 16px; }
.too-few-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.too-few-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f0f1f3; border: 1px solid #d5d7dc; border-radius: 999px;
    padding: 4px 6px 4px 14px; font-size: 0.9rem; color: #1f1f1f;
}
.too-few-clear {
    border: 0; background: #1f1f1f; color: #fff; cursor: pointer;
    width: 20px; height: 20px; line-height: 1; border-radius: 50%;
    font-size: 14px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.too-few-clear:hover, .too-few-clear:focus { background: #C8102E; }

/* Brief highlight on the chart an Outcomes shortcut jumped to. */
.outcome-target .graph-panel {
  animation: outcome-flash 1.5s ease-out 1;
}
@keyframes outcome-flash {
  0%   { box-shadow: 0 0 0 3px #C8102E; }
  70%  { box-shadow: 0 0 0 3px #C8102E; }
  100% { box-shadow: 0 0 0 3px rgba(200, 16, 46, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .outcome-target .graph-panel { animation: none; box-shadow: 0 0 0 3px #C8102E; }
}


/* ---------------------------------------------------------------
   Active filter chips and the reset control.
   The reset is rendered only when something is selected, so it has
   no disabled state to style.
   --------------------------------------------------------------- */
.filter-container .filters-reset {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #d5d7dc; background: #fff; color: #1f1f1f;
  border-radius: 999px; padding: 4px 12px; font-size: 0.85rem; cursor: pointer;
}
.filter-container .filters-reset:hover,
.filter-container .filters-reset:focus { background: #C8102E; border-color: #C8102E; color: #fff; }

.filter-container .filters-active {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f0f1f3; border: 1px solid #d5d7dc; border-radius: 999px;
  padding: 4px 6px 4px 12px; font-size: 0.85rem; color: #1f1f1f;
}
.filter-chip-label { font-weight: 600; }
.filter-chip-clear {
  border: 0; background: #1f1f1f; color: #fff; cursor: pointer;
  width: 20px; height: 20px; line-height: 1; border-radius: 50%;
  font-size: 14px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.filter-chip-clear:hover, .filter-chip-clear:focus { background: #C8102E; }

.filter-container .filters-list { margin: 0; }

/* ---------------------------------------------------------------
   Hide/show toggle for the whole Filters and Outcomes panels.
   The header loses its bottom margin when collapsed so the panel
   shrinks to just its title bar.
   --------------------------------------------------------------- */
.panel-header-actions { display: flex; align-items: center; gap: 8px; }
.panel-collapse-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #d5d7dc; background: #fff; color: #1f1f1f;
  border-radius: 999px; padding: 4px 12px; font-size: 0.85rem; cursor: pointer;
  white-space: nowrap;
}
.panel-collapse-toggle:hover,
.panel-collapse-toggle:focus { background: #1f1f1f; border-color: #1f1f1f; color: #fff; }
.panel-collapse-toggle .fas { font-size: 0.7rem; }
.filter-container .filters-header.is-collapsed,
.outcomes-container .outcomes-header.is-collapsed { margin-bottom: 0; }
.filter-container.is-collapsed .filters-active { margin-bottom: 0; }

/* Reset at the foot of the filters list, above the gender note. */
.filter-container .filters-reset-bottom { display: block; width: 100%; margin-top: 15px; }

/* ---------------------------------------------------------------
   Outcome theme accordion. Sections are open by default - the page
   should show charts on arrival, not a stack of shut drawers.
   --------------------------------------------------------------- */
.outcome-group { margin-bottom: 10px; }
.outcome-group-header { margin: 0 0 15px; }
.outcome-group-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: #ffffff; border: 0; border-left: 4px solid #C8102E;
  padding: 12px 18px; cursor: pointer; text-align: left;
  font-size: 1.2rem; font-weight: 600; color: #1f1f1f;
}
.outcome-group-toggle:hover, .outcome-group-toggle:focus { background: #e4e6ea; }
.outcome-group-title { flex: 1 1 auto; }
.outcome-group-count {
  background: #C8102E; color: #fff; border-radius: 999px;
  padding: 1px 10px; font-size: 0.9rem; font-weight: 600;
}
.outcome-group-toggle .fas { font-size: 0.9rem; }
.outcome-group-body { margin-bottom: 25px; }

@media (max-width: 575px) {
  .outcome-group-toggle { font-size: 1rem; padding: 10px 14px; }
}


/* ---------------------------------------------------------------
   Outcomes side menu, grouped by theme to match the chart
   accordion. Collapsed by default - as a menu it should offer six
   headings, not twenty-eight buttons.
   --------------------------------------------------------------- */
.outcome-menu-group { margin-bottom: 6px; }
.outcome-menu-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: #ffffff; border: 1px solid #d5d7dc;
  border-left: 3px solid #C8102E; border-radius: 6px;
  padding: 9px 12px; cursor: pointer; text-align: left; font-weight: 600; color: #1f1f1f;font-size: 1.2rem;
}
.outcome-menu-toggle:hover, .outcome-menu-toggle:focus { background: #f0f1f3; }
.outcome-menu-title { flex: 1 1 auto; }
.outcome-menu-count {
  background: #C8102E; color: #fff; border-radius: 999px;
  padding: 0 8px; font-size: 0.9rem; font-weight: 600; line-height: 18px;
}
.outcome-menu-toggle .fas { font-size: 0.75rem; }

/* Indented under its heading so the list reads as belonging to it. */
.outcome-menu-body { padding: 6px 0 4px 10px; }
.outcome-menu-body .btn.btn-primary {
  border-left-width: 2px !important;
  margin-bottom: 4px;
  padding: 8px 10px;
}

/* Scope note under the filters. Smaller than body copy - it explains the
   controls above it rather than competing with them. */
.filter-container .filters-note {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #1f1f1f;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #d5d7dc;
}

/* Shown in place of a chart when its own denominator is too small, or when the
   question was never put to the filtered group. Takes roughly the height a
   chart would have so the cards in a row stay level and the page does not jump
   as filters change. */
.chart-suppressed {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 24px;
  text-align: center;
  background: #f5f6f8;
  border-radius: 4px;
}

.chart-suppressed p {
  max-width: 34em;
  margin: 0;
  color: #4a4a4a;
}

/* Tick-box filters. A fieldset per filter, one row per category. The rows are
   deliberately compact: six filters with two to seven categories each is a lot
   of vertical space, and the panel sits above the charts. */
.filter-group {
  border: 0;
  padding: 0;
  margin-bottom: 18px;
}

.filter-group legend {
  float: none;
  width: auto;
  font-size: inherit;
  margin-bottom: 6px;
  font-weight: bold;
}

.filter-check {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4px;
  line-height: 1.35;
}

.filter-check input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 3px 8px 0 0;
}

.filter-check label {
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}