.hidden{
  display:none;
}

.unaids-logo{
  min-height:65px;
}

.nav-bar{
  display:flex;
  flex-direction: row;
  gap:2em;
  padding: 2em 1em;
  align-items: center;
  justify-content: space-between;
}

.main-menu, .right-menu{
  display:flex;
  flex-direction: row;
  gap: 1em;
  justify-content: space-evenly;
  flex: 2 4 auto;
  border: 1px solid red;
}

.≈ {
  padding:0 2rem 2rem!important;
}
.custom-menu-transition{
   background-color: #f4f2f1!important; /*  OLD BG GREY COLOUR: #f4f3f1!important; */
    opacity: 0;
    height: 0!important; 
    overflow: hidden;
    /*padding: 0px 0.5rem 0.5rem; */
   padding-left:12px;
   padding-right:12px;
}

.customm-menu-transition.hidden{
  display:none;
  line-height:0!important;
  height:0!important;
}

.padding-bottom{
  padding-bottom: 2em!important;
}
.bigger-font{
  font-size:1.4em;
}

.pad-more{
 /* padding-bottom: 2em!important;*/
  padding: 2em 1em!important;
}
.country-selection-area{
    
    margin-top: 2em;
    align-content: baseline;

}
.selection-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 3em;
  align-items: center;
  flex-basis: fit-content;
  flex-wrap:wrap;

}
/*
.customm-menu-transition.hidden{
  display:none;
}

.customm-menu-transition.active{
  display: block;
}
*/
#home-page-content{
  width:100ch; /* limit the paragraph width to be 100 characters for easier reading */
}
.email-address{
  text-decoration: underline;
}

#jumbotron p{
  padding:0;
  line-height: 1.6;
}
.nav-buttons-home-page{
  display:flex;
  flex-direction: row;
  gap:1em;
}
.list .item.active{
  font-weight:600;
}

.rounder-button{
  border-radius: 12px!important;
  min-width: 8em!important;
}

.list .item a.active{
  color:#47a79d;
}


.custom-menu-transition.active{
  transition: opacity 0.8s ease-in-out!important; 
  opacity: 1; 
  height: auto!important;
  padding-top:10px;
  margin-top: -13px;/*  -10px;  to close the gap between the Global, Regional and Country buttons and the top of the menu of indicators*/
}

/*
.customm-menu-transition::hover{
 height:280px;
}*/
@media only screen and (min-width: 768px) and (max-width: 991px) {

  .ui.container {
    width: 723px;
  }

  .ui.grid.container {
    width: calc( 723px  +  2rem ) !important;
  }

  .ui.relaxed.grid.container {
    width: calc( 723px  +  3rem ) !important;
  }

  .ui.very.relaxed.grid.container {
    width: calc( 723px  +  5rem ) !important;
  }
}

.ui.menu {
    border-radius: 0;
    box-shadow: none;
    & .menu {
      border-bottom: none;
    }
  }
  .megamenu {
    background-color:  #efefef;
    position: absolute;
    left: 0;
    right: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    display: none;
    margin-top: 0;
    width: 100%;
  
    .mega-dropdown:hover > & {
      display: block;
    }
  }
  
.region-List,
.country-list{

  line-height: 1.2em;
  font-size: 1.2em;
}

  main{
    background: #b8e1dd;
    border: 2px solid white; /* red;  */
  /*  border-radius: 50px 20px;   for rounded corners */
    padding: 0.8rem; 
   /* height: 100vh;  *//* 100%; */
   /* max-height: 780px; */
    overflow: hidden;

  }

  #frameIt{


    background: white; /* #b8e1dd; */
    padding: 2rem;
    border: 0; /* 1px; */
   /* display: flex !important; */
   /* display:none; */
    /*height: 100vh;  *//* 100%; */
    /*height: 300rem;  */  /* 7 march */
    overflow: hidden; /* auto; */
   /* widows: 98%; */
   margin-bottom: 50px;
  }



  #contentMain{
   /* display: flex !important; */
     display:none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }


#menu.selected{
  background: blue; /* #b8e1dd; */

}

/*

.menu:hover {
  text-decoration: underline;
}
*/

.menu:hover > a:after {
  opacity: .15;
  transform: scalex(1);
}

#menu .active { background-color: #f4f3f1 /* #b8e1dd */ ; text-decoration: none;}
/* to override the existing css for "a" tag */
#menu .active a{ 
  color: #fff; 
  background-color: #b8e1dd

}

body {
    margin: 0;
    font-family: Avenir-book, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";   
}
  
h5, h7 {
  text-decoration: none;
 /* color:  rgba(0,0,0,.6); rgba(0,0,0,.4);*/
  color: rgb(13 39 88 / 70%);
  font-weight: 650; /* was normal */
  font-size: 1.2rem;
  font-family: Avenir-book, Arial, Helvetica, sans-serif;
/*  z-index: 1;*/
}
h5.home-button-h5{
  color:  rgba(0,0,0,.6);
  margin: unset;
}

h7{
  font-size:1em;
}
h8{
  font-size:1.2em;
  color:black;
  font-weight:660;
  line-height: 25px;
}
.padding-left{
  padding: 1rem!important;
}
.home-menu-icon, .nasa-reports-with-icon{
  display:flex;
  flex-direction: row;
  gap:0.2em;
  align-items: center;
}

h5:active {
  color:black
/*  z-index: 1;*/
}

#lstRegions_chosen{
  width:400px!important;
}

.chosen-single{
  font-size:1.2em!important;
  color:red!important;
}
.item.active > h5, .item.active > h7{
  color:black
}
/*

.ui.popup{
  
  overflow:auto;
}
.ui.popup{overflow:auto;}
*/

@media screen and (min-width:768px) {
  .jumbotron {
      padding-top: 48px;
      padding-bottom: 48px
  }



  
  @media (min-width:768px) {
    .megamenu {
        float: left;
        margin: 0
    }
    .megamenu>li {
        float: left
    }
    .megamenu>li>a {
        padding-top: 15px;
        padding-bottom: 15px
    }
  }

  @media (min-width:768px) {
    .megamenu-toggle {
        display: none
    }
  }
  
  .megamenu {
    margin: 7.5px -15px
  }
  
  .megamenu>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px
  }

  
@media (min-width:768px) {
  .megamenu>.container .megamenu-brand,
  .megamenu>.container-fluid .megamenu-brand {
      margin-left: -15px
  }
}



@media (min-width:768px) {
  .container-fluid>.megamenu-collapse,
  .container-fluid>.megamenu-header,
  .container>.megamenu-collapse,
  .container>.megamenu-header {
      margin-right: 0;
      margin-left: 0
  }
}

.megamenu-static-top, 
.megamenu{
  z-index: 1000;
  border-width: 0 0 1px
}

@media (min-width:768px) {
  .megamenu-static-top,
  .megamenu{
      border-radius: 0
  }
}


@media (max-device-width:480px) and (orientation:landscape) {
 .megamenu {
      max-height: 200px
  }
}

.container-fluid>.megamenu-collapse,
.container-fluid>.megamenu-header,
.container>.megamenu-collapse,
.container>.megamenu-header,
.container>.pointing  {
  margin-right: -15px;
  margin-left: -15px
}



@media (min-width:768px) {
  .megamenu-collapse {
      width: auto;
      border-top: 0;
      -webkit-box-shadow: none;
      box-shadow: none
  }
  .megamenu-collapse.collapse {
      display: block!important;
      height: auto!important;
      padding-bottom: 0;
      overflow: visible!important
  }
  .megamenu-collapse.in {
      overflow-y: visible
  }
  .megamenu-fixed-bottom .megamenu-collapse,
  .megamenu-fixed-top .megamenu-collapse,
  .megamenu-static-top .megamenu-collapse {
      padding-right: 0;
      padding-left: 0
  }
}

.megamenu-fixed-bottom .megamenu-collapse,
.megamenu-fixed-top .megamenu-collapse {
  max-height: 340px
}



@media (min-width:768px) {
  .megamenu .megamenu {
      border-radius: 4px
  }
}

@media (min-width:768px) {
  .megamenu-header {
      float: left
  }
}


@media (min-width:768px) {
  .megamenu>li>a,
  .nav-tabs-justified>li>a {
      border-bottom: 1px solid #ddd;
      border-radius: 4px 4px 0 0
  }
  .megamenu>.active>a,,
  .megamenu-justified>.active>a,
  .megamenu-justified>.active>a:focus,
  .megamenu-justified>.active>a:hover 
  .nav-tabs-justified>.active>a,
  .nav-tabs-justified>.active>a:focus,
  .nav-tabs-justified>.active>a:hover {
      border-bottom-color: #fff
  }
}


@media (min-width:768px) {
 .megamenu
  .nav-justified>li {
      display: table-cell;
      width: 1%
  }
  .megamenu
  .nav-justified>li>a {
      margin-bottom: 0
  }
}

*/





/*

.menu {
    list-style: none;
}
.menu li {
    float: left;
    margin-right: 1em;
}
.popup {
    background-color: #fff;
    position: absolute;
    border-radius: 5px;
    border: 1px solid grey;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    padding: 1em;
}

.item:hover~div {
    opacity: 1;
} */