/*******************************
            Global
*******************************/

/*-------------------
        Sidebar
--------------------*/

#feed {
  overflow: visible; 
}

#feed .sidebar {
  overflow: visible;
}

.ui-autocomplete {
            max-height: 700px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
        }

        /* IE 6 doesn't support max-height
		 * we use height instead, but this forces the menu to always be this tall
		 */
     * html .ui-autocomplete {
            height: 700px;
        }


/*-------------------
        Grid
--------------------*/

#feed .pusher,
#feed .grid,
#feed .grid > .column {
  height: 100%;
}

/*-------------------
       Inbox
--------------------*/

#feed .pusher {
  background-color: #FFFFFF;
}

#feed .left.column {
  background-color: #F7F7F7;
  padding: 1em 2em;
  max-width: 1200px;
}

#feed .right.column {
  padding: 1em 2em;
  background-color: #FFFFFF;
}

#feed .right.column {
  font-size: 16px;
  max-width: 470px;
}

.ui.header .sub.header {
  font-size: 1.0rem;
}

.feedbackButton {
  float: right;
  padding: .5em;
}

#language_menu {
  max-height: 35rem;
  overflow-x: hidden;
  overflow-y: auto;
}

#locateMe {
  position: absolute;
  z-index: 20000;
  right: 40px;
  top: 100px;
}

#mapTitle {
  padding: 0em 0.5em 0em;
  height: 18px;
}

#resultsBox {
  height:100%;
}

div#mapTitle {
  position:absolute;
  z-index: 20000;
  left: 120px;
  top: 4px;
}

div#mapMenu {
  position:absolute;
  z-index: 20000;
  left: 230px;
  top: 4px;
}

#textSearch {
  width: 400px;
}

div#userLogin {
position: absolute;
top: 8px;
right: 595px;
}

div#textSearch {
  position: absolute;
  right: 80px;
  top: 5px;
}

#closeSearchIcon {
    position: relative;
    top: 25px;
    left: -25px;
    display: none;
    pointer-events: auto;
}

#splashMessage {
  margin: 80px;
  z-index: 1000;
  position: relative;
  top: 60px;
  display: none;
}

#closeSplashButton {
  position: relative;
  top: 0px;
}

#languageButton {
  position: absolute;
  z-index: 20000;
  left: 10px;
  top: 85px;
}

#aboutButton {
  position: absolute;
  z-index: 20000;
  left: 10px;
  top: 8px;
}

#aboutButtonMessage {
  padding-bottom: 40px;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto;
  position: relative;
  top: 60px;
  display:none;
}

#closeAboutButton {
  position: relative;
  bottom: 10px;
}

#backToTopButton {
  position: absolute;
  z-index: 20000;
  right: 5px;
  top: 400px;
  display:none;
}

#bookmarkButton {
  position: absolute;
  z-index: 20000;
  right: 500px;
  top: 8px;
}

#bookmarkUrl {
  position: absolute;
  z-index: 20000;
  right: 495px;
  top: 30px;
}

#loginMenu {
  position: absolute;
  z-index: 20000;
  right: 595px;
  top: 50px;
}

#userTag {
  position: absolute;
  z-index: 20000;
  right: 685px;
  top: -12px;
  height: 70px;
  overflow: hidden;
}

.ui.button {
  margin: 3px;
}

.ui.top.attached.label {
  font-size:18px;
  line-height: 1.8;
  height: 64px;
}

#noaaLogo {
position: absolute;
  z-index: 10000;
  bottom: 25px;
  height: 80px;
  right: 10px;
}

#aiLogo {
position: absolute;
  z-index: 10000;
  bottom: 40px;
  height: 75px;
  right: 100px;
}

#resultContainer {
  width:490px;
  padding: 1em;
}

.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-size: 1.15em;
}

.ui.header.title.active{
  color:#156CCD;
}

.ui.accordion .active.title .chevron.circle.right.icon,
.ui.accordion .accordion .active.title .chevron.circle.right.icon {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.ui.accordion.menu .item .active.title > .chevron.circle.right.icon {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.ui.tabular.menu .item {
    border-left: 1px solid rgb(0 0 0 / 30%);
    border-right: 1px solid rgb(0 0 0 / 30%);
    border-top: 1px solid rgb(0 0 0 / 30%);
}

.ui.blue.menu .active.item, .ui.menu .blue.active.item {
    border-width: medium;
}

#activeLoader {
  background-color:rgba(0,0,0,0);
  border: 0;
  box-shadow: none;
}

#mapContainer {
  position: relative;
  top: 35px;
  height:93%;
  }

.content {
  padding: 1em 0.5em 2em;
  background-color: #e8e8e8;
}


/*******************************
          Responsive
*******************************/
/*
Most Androids Portrait
*/
@media screen and (max-width : 370px) {
  .ui.warning.message{
    font-size: xx-small;
  }
  .ui.three.item.blue.menu{
    display:none;
  }
  .leaflet-control-attribution.leaflet-control{
    display:none;
  }
  .ui.horizontal.divider.showBy {
    display:none;
  }
  div .mpa.legend.leaflet-control {
    height: 0px;
  }
  .ui.top.attached.label {
    height: 65px;
  }
  #backToTopButton{
    right: 35px;
    top: auto;
    bottom: 10px;
  }
  #bookmarkButton{
    display: none;
  }
  #aboutButton {
    display:none;
  }
  #textSearch{
    width: 238px;
  }
  div #textSearch{
    top: 10px;
  }
  #mapContainer {
    top: 35px;
  }
  #mapTitle {
    display: none;
  }
  #mpa_legend {
    height: 80px;
  }
  #feed .inbox .date {
    float: none;
    margin-bottom: 0.5em;
  }
  #feed .right.column {
    font-size: 16px;
    max-width: 350px;
  }
  #resultContainer {
    width: 320px;
    padding: 1em;
}
#noaaLogo {
    position: absolute;
    z-index: 10000;
    bottom: 30px;
    height: 32px;
    right: 10px;
}
#aiLogo {
    position: absolute;
    z-index: 10000;
    bottom: 30px;
    height: 32px;
    right: 45px;
}
#mapMenu {
  display:none;
}
#regionLabel {
  display:none;
}
}
/*
iPhone 6 Portrait
*/
@media screen and (min-width: 371px) and (max-width : 410px) {
  .ui.warning.message{
    font-size: xx-small;
  }
  .ui.three.item.blue.menu{
    display:none;
  }
  .leaflet-control-attribution.leaflet-control{
    display:none;
  }
  .ui.horizontal.divider.showBy {
    display:none;
  }
  div .mpa.legend.leaflet-control {
    height: 0px;
  }
  .ui.top.attached.label {
    height: 70px;
  }
  #backToTopButton{
    right: 35px;
    top: auto;
    bottom: 10px;
  }
  #bookmarkButton{
    display: none;
  }
  #aboutButton {
    display:none;
  }
  #textSearch{
    width: 275px;
  }
  div #textSearch{
    top: 10px;
  }
  #mapContainer {
    top: 40px;
  }
  #mapTitle {
    display: none;
  }
  #mpa_legend {
    height: 80px;
  }
  #feed .inbox .date {
    float: none;
    margin-bottom: 0.5em;
  }
  #feed .right.column {
    font-size: 16px;
    max-width: 375px;
  }
  #resultContainer {
    width: 375px;
    padding: 1em;
}
#noaaLogo {
    position: absolute;
    z-index: 10000;
    bottom: 45px;
    height: 32px;
    right: 10px;
}
#aiLogo {
    position: absolute;
    z-index: 10000;
    bottom: 45px;
    height: 32px;
    right: 45px;
}

#mapMenu {
  display:none;
}
#regionLabel {
  display:none;
}
}

/*
iPhone 6S Portrait
*/
@media screen and (min-width: 411px) and (max-width : 500px) {
  .ui.warning.message{
    font-size: xx-small;
  }
  .ui.three.item.blue.menu{
    display:none;
  }
  .leaflet-control-attribution.leaflet-control{
    display:none;
  }
  .ui.horizontal.divider.showBy {
    display:none;
  }
  div .mpa.legend.leaflet-control {
    height: 0px;
  }
  .ui.top.attached.label {
    height: 70px;
  }
  #backToTopButton{
    right: 35px;
    top: auto;
    bottom: 10px;
  }
  #bookmarkButton{
    display: none;
  }
  #aboutButton {
    display:none;
  }
  #textSearch{
    width: 325px;
  }
  div #textSearch{
    top: 10px;
  }
  #mapContainer {
    top: 40px;
  }
  #mapTitle {
    display: none;
  }
  #mpa_legend {
    height: 130px;
  }
  #feed .inbox .date {
    float: none;
    margin-bottom: 0.5em;
  }
  #feed .right.column {
    font-size: 16px;
    max-width: 414px;
  }
  #resultContainer {
    width: 414px;
    padding: 1em;
}
#noaaLogo {
    position: absolute;
    z-index: 10000;
    bottom: 25px;
    height: 48px;
    right: 10px;
}
#aiLogo {
    position: absolute;
    z-index: 10000;
    bottom: 25px;
    height: 48px;
    right: 65px;
}
#mapMenu {
  display:none;
}
#regionLabel {
  display:none;
}
}

@media only screen and (max-width : 1000px) {
  #feed .inbox .date {
    float: none;
    margin-bottom: 0.5em;
  }

  #mapMenu {
    left:10px;
    top:14px;
  }
}

@media only screen and (max-width : 1250px) {
  #feed .left.column > .menu .item {
    font-size: 1rem;
  }
}
/*
Most Androids Landscape
*/
@media screen and (min-width:501px) and (max-width : 550px) {
  .ui.warning.message{
    font-size: xx-small;
  }
  .ui.three.item.blue.menu{
    display:none;
  }
  .leaflet-control-attribution.leaflet-control{
    display:none;
  }
  .ui.horizontal.divider.showBy {
    display:none;
  }
  div .mpa.legend.leaflet-control {
    height: 0px;
    left: -5px;
  }
  .ui.top.attached.label {
    height: 65px;
  }
  #backToTopButton{
    right: 0px;
    top: auto;
    bottom: 40px;
  }
  #bookmarkButton{
    display: none;
  }
  #aboutButton {

  }
  #textSearch{
    width: 238px;
  }
  div #textSearch{
    top: 10px;
  }
  #mapContainer {
    top: 35px;
  }
  #mapTitle {
    display: none;
  }
  #mpa_legend {
    height: 80px;
  }
  #feed .inbox .date {
    float: none;
    margin-bottom: 0.5em;
  }
  #feed .right.column {
    font-size: 16px;
    max-width: 320px;
  }
  #resultContainer {
    width: 320px;
    padding: 1em;
}
#noaaLogo {
    position: absolute;
    z-index: 10000;
    bottom: 40px;
    height: 32px;
    right: 10px;
}
#aiLogo {
    position: absolute;
    z-index: 10000;
    bottom: 40px;
    height: 32px;
    right: 45px;
}
}
/*
Most Android Tablets Portrait
*/
@media screen and (min-width:551px) and (max-width : 880px) {
  .ui.warning.message{
    font-size: small;
  }
  .ui.three.item.blue.menu{

  }
  .leaflet-control-attribution.leaflet-control{
    display: none;
  }
  .ui.horizontal.divider.showBy {

  }
  div .mpa.legend.leaflet-control {
    height: 130px;
    left: -5px;
  }
  .ui.top.attached.label {
    height: 65px;
  }
  #backToTopButton{
    right: 0px;
    top: auto;
    bottom: 40px;
  }
  #bookmarkButton{
    display: none;
  }
  #aboutButton {
    display: none;
  }
  #textSearch{
    width: 238px;
  }
  div #textSearch{
    top: 10px;
  }
  #mapContainer {
    top: 35px;
  }
  #mapTitle {
    font-size:small;
  }
  #regionLabel {
    display:none;
  }
  #mpa_legend {
    height: 110px;
  }
  #feed .inbox .date {
    float: none;
    margin-bottom: 0.5em;
  }
  #feed .right.column {
    font-size: 16px;
    max-width: 320px;
  }
  #resultContainer {
    width: 320px;
    padding: 1em;
}
#noaaLogo {
    position: absolute;
    z-index: 10000;
    bottom: 50px;
    height: 32px;
    right: 10px;
    /*display: none;*/
}
#aiLogo {
    position: absolute;
    z-index: 10000;
    bottom: 50px;
    height: 32px;
    right: 45px;
}
#mapMenu {
  left:10px !important;
  top:14px !important;
}
}
/*
Most Android Phones Landscape
*/
@media screen and (min-width:551px) and (max-width : 880px) and (max-height:400px) {
  .ui.three.item.blue.menu{
    display:none;
  }
  .leaflet-control-attribution.leaflet-control{
    display:none;
  }
  .ui.horizontal.divider.showBy {
    display:none;
  }
  #backToTopButton{
    right: 0px;
    top: auto;
    bottom: 60px;
  }
  div .mpa.legend.leaflet-control {
    height: 180px;
    left: -5px;
  }
  #mpa_legend {
    height: 40px;
  }
#noaaLogo {
    position: absolute;
    z-index: 10000;
    bottom: 40px;
    height: 32px;
    right: 10px;
}
#aiLogo {
    position: absolute;
    z-index: 10000;
    bottom: 40px;
    height: 32px;
    right: 45px;
}
}
/*
Most Android Tablets Landscape + iPad Portrait
*/
@media screen and (min-width:551px) and (max-width : 880px) and (min-height:401px) and (max-height:610px)  {
  #mapTitle {
    font-size:auto !important;
  }
  #backToTopButton{
    right: 0px;
    top: auto;
    bottom: 50px;
  }
  div .mpa.legend.leaflet-control {
    height: 180px;
    left: -5px;
  }
  #mpa_legend {
    height: 110px;
  }
#noaaLogo {
    position: absolute;
    z-index: 10000;
    bottom: 30px;
    height: 32px;
    right: 10px;
}
#aiLogo {
    position: absolute;
    z-index: 10000;
    bottom: 30px;
    height: 32px;
    right: 45px;
}
}

@media screen and (min-width:881px) and (max-width : 1100px)  {
  #aboutButton {
    display: none;
  }
  #bookmarkButton{
   display: none;
  }
  #noaaLogo {
      position: absolute;
      z-index: 10000;
      bottom: 40px;
      height: 32px;
      right: 10px;
  }
  #aiLogo {
      position: absolute;
      z-index: 10000;
      bottom: 40px;
      height: 32px;
      right: 45px;
  }
  div .mpa.legend.leaflet-control {
    height: 130px;
    left: -5px;
  }
  #mpa_legend {
    height: 110px;
  }
}