/**
 * This file includes any CSS changes made by custom implementations by ASDC
 */

/* Body background image */
body{
  font-size: 1em;
  padding: 0px 0px;
  background-image: none;
}
/* Adding site logo in banner */
.site_logo{
  display: inline-block;
  background-image: url(https://cdn.earthdata.nasa.gov/eui/latest/docs/assets/ed-logos/app-logo_2x.png);
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: 100%;
  max-width: 100%;
  width: 260px;
  height: 70px;
  border-radius: 0px;
  margin-bottom: 4px;
  text-align: left;
  padding: 23px 0 5px 70px;
}
.site_logo:hover{
  background-image: url(https://cdn.earthdata.nasa.gov/eui/latest/docs/assets/ed-logos/app-logo_hover_2x.png);
}
.site_logo > h1{
  height: inherit;
  overflow: inherit;
  margin: auto auto auto 15px;
  color: white;
  font-weight: 200;
}
#forum_version{
  padding: 0.4em;
  background: white;
  color: #1C5D82;
  font-size: 0.4em;
}

#site-description {
  display:inline-block;
  width: 90%;
}

.skiplink {
  background-color: transparent !important;
}

#site-description > p{
  background-color: rgba(0,0,0,.5);
  margin-bottom: 0.5em !important;
  float: right;
  width:60%;
}

/* Logout Modal css */
#modal-logout{
  border-radius: 0px;
  padding: 0 25px 20px 25px;
}
#modal-logout-buttons{
  text-align: center;
}
.forumLogoutButton{
  border-radius: 2px;
  margin: 0 0.2rem;
}
/* Noscript Message css */
#noscript > p{
  font-size: 24px;
  color: #e74c3c;
  text-align: center;
}

/* Legal Message css */
#legal_message_accordion{
  border-radius: 7px;
}
#legal_message_accordion__header{
  border-bottom: none;
  border-radius: 7px;
  height: 30px;
  padding: 8px 2px;
}
#legal_message_accordion__title{
  font-size: 1.1em;
  font-weight: bold;
}
#legal_message_accordion__title:hover{
  text-decoration: underline;
  color: #fff;
}
#legal_message_accordion__body{
  font-size: 1em;
  border-radius: 2px;
  margin: 10px 12px 5px 12px;
  background-color: #fff !important;
  color: #4d4d4d;
}

#searchbox{
  margin-left: 10px;
}

/* Forum OR Text in between search, tag filter, general forum sections */
.forumOR{
  margin: auto;
  color: #454E5F;/* adjust font color to 7.29:1 contrast ratio */
  font-size: 1em;
  text-align: center;
}
.private-post{
  border-radius: 10px; 
  padding: 5px;
  border: 0px;
  background-color: #fff6c7;
}
.forabg{
  margin: 15px auto 15px auto;
  margin-bottom: 0px;
}
/* Forum Search Box css */
#search-forum-body-container{
  height: 40px;
  border: 1px solid #1a608b;
  border-radius: 4px;
}
#search-forum-advanced-search{
  font-size: 0.8rem;
  text-align: right;
  margin: auto 26px 3px auto;
}
#search-forum-input{
  margin: auto;
  width: 85%;
  min-height: 38px;
  background-color: transparent;
  padding-left: 10px;
}
#search-forum-input:focus, #search-forum-button:focus{
  outline: none;
  box-shadow: none;
}
#search-forum-button{
  float: right;
  padding: 0.6em 0.8em;
}
#search-forum-button:hover{
  color: black;
  text-shadow: -0.5px -0.5px 0 #999,
                0.5px -0.5px 0 #999,
               -0.5px 0.5px 0 #999,
                0.5px 0.5px 0 #999;
}
#search-forum-clear{
  float: right;
  outline: none;
  box-shadow: none;
  visibility : hidden;
}
#search-forum-clear:hover{
  color: black;
  text-shadow: -0.5px -0.5px 0 #999,
                0.5px -0.5px 0 #999,
               -0.5px 0.5px 0 #999,
                0.5px 0.5px 0 #999;
}

/* New question button on the main page css */
#new-question-main{
  font-weight: bold;
  margin: 0px 0px 8px 0px;
  float: left;
  border-radius: 1px;
}

/* Tag Groups css */
#tag-group-body-container{
  text-align: center;
}

#posting-selected-tags-space{
  text-align: left;
}

#tag-group-title{
  margin: 2px auto 2px 8px;
  color: #4c5667;
  text-align: left;
}
.tag-group-dropdown-container{
  display: -webkit-box;
  display: ms-flexbox;
  display: flex;
  -ms-foex-wrap: wrap;
  flex-wrap: wrap;
  margin: 10px;
  text-align: left;
}
.tag-group-dropdown-section{
  -webkit-box-flex: 0;
  padding: 6px 0px;
  margin: 4px auto;
}
.tag-group-dropdown-title-container{
  width: 90%;
  height: 30px;
}
.tag-group-dropdown-title{
  color: #454E5E; /* adjust font color to 7.3:1 contrast ratio */
  margin: 4px auto;
  font-size: 1rem;
  width: 90%;
  float: left;
}
.tag-group-dropdown-title-icon{
  margin: 10px auto 4px auto;
  float: right;
  color: #6c7a93;
  cursor: pointer;
}
.tag-group-dropdown{
  width: 90%;
  margin: auto;
}
#tag-group-submit{
  margin: 15px auto;
  text-align: center;
  border-radius: 2px !important;
}
#tag-explanation {
  float: right;
  padding-top: 1em;
  position: relative;
}
#tag-explanation a
{
  padding-top: 1em;
  font-size:1em;
  right: 0;
  bottom: 0;
  margin-right:1em;
}
#posting-tag-group-container{
  margin: 10px auto;
  color: #50596c;
}
#posting-tag-group-title{
  font-size: 14px;
  font-weight: bold;
  margin: auto;
}
#posting-tag-group-note{
  font-size: 15.5px;
  font-weight: normal;
  margin: auto;
}
#posting-selected-tags-container{
  margin: auto 15px;
}
#posting-selected-tags-title{
  float:left;
  margin: 4px 10px;
  font-size: 16px;
}
#posting-selected-tags-space{
  /* margin: auto 10px; */
  float: left;
  padding: 3px;
  overflow: auto;
  word-wrap: break-word;
  background-color: #fff;
  border: 1px solid #595959; /* adjust font color to 7.1:1 contrast ratio */
  border-radius: 2px;
  width: 88%;
  min-height: 35px;
}
#selectedFilters{
  margin-left: 3px;
}
.posting-selected-tags-bubble{
  list-style-type: none;
  display: inline-block;
  text-align: center;
  background: none;
  border-radius: 10px;
  background-color: #2685c0; /* adjust background color to 7.3:1 contrast ratio */
  color: #fff;
  margin: 3px 6px;
  padding: 3px 6px;
}
.posting-selected-tags-bubble:hover{
  cursor: default;
  background-color: #3f78a6;
  color: #cadceb;
}
.posting-tag-remove-button{
  margin: 0 0 3px 7px;
  padding: 0;
  border: none;
  background: 0 0;
  cursor: pointer;
  vertical-align: middle;
  font: 700 16px Arial,sans-serif;
  color: #585858;
}
.posting-tag-remove-button:hover{
  color: #585858;
}
#posting-tag-group-disclaimer{
  font-size: 12px;
  margin: 15px auto;
  text-align: center;
}
.a-tag-alt-text{
  height: 1px;
  width: 1px;
  position: absolute;
  overflow: hidden;
  top: -10px;
  color: #FFFFFF !important; /* Even though this element is hidden, it is still detected by, and failing, the WAVE analysis */
}

.daac-resources-box{
  border-radius: 2px;
  width: 95%;
}
.daac-resources-title{
  background-color: #2685c0;
  box-shadow: -1.5em 0 0 0 #2685c0;
  border-radius: 2px;
  padding: 8px 0px !important;
}
.daac-resources-title > a{
  color: #fff;
}
.daac-resources-list{
  margin-top: 1.5em !important;
  list-style: circle outside none!important;
}
.daac-resources-list > li{
  margin-top: 10px;
}

/* Moderator 'Working In Progress' Icons css */
.icon-in_progress {
  vertical-align: middle;
}
h2.topic-title > a{
  margin-right: 8px;
}
a.topictitle {
  margin-right: 4px;
}

/* External Link css */
#confirm_external_link-modal, #share_link-modal{
  width: 600px;
}
i.ext {
  text-decoration: none;
  margin-left: 3px;
  font-size: 0.7em;
}

/* Footer css */
#forum-footer{
  width: 50% !important;
  height: 100%;
  min-height:130px;
  text-align: right;
  float: right !important;
}
#nasa-footer{
  width: 50% !important;
  height: 100%;
  min-height:130px;
  text-align: left;
  float: left !important;
  background-color: #1A5B84; /* adjust background color to 7.3:1 contrast ratio */
}

/* reCAPTCHA css */
#recaptcha-container{
  width: 320px;
  box-sizing: border-box;
  margin: 5px auto;
}
.recaptcha-error{
  border: 1px solid #dd4b39;
  padding: 5px;
}
.recaptcha-error-message{
  color: #dd4b39;
  font-size: 12px;
  padding: 4px 0;
}

/* Tooltip css */
.tooltips {
  position: relative;
  display: inline;
}
/* Tooltip box sizing */
.tooltips span {
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 12px;
  position: absolute;
  width: 0px;
  max-height: 200px;
  color: #FFFFFF;
  background: #50596c;
  /* height: 80px; */
  line-height: 16px;
  text-align: center;
  visibility: hidden;
  border-radius: 4px;
  padding: 10px 12px;
  overflow: hidden;
}
/* Tooltip arrow */
.tooltips span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 97%;
  margin-left: -6px;
  width: 0;
  height: 0;
  border-bottom: 6px solid #50596c;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.tooltips.tooltips-reversed span:after {
  left: 4%;
  margin-left: -6px;
}
/* Tooltip box placement */
.tooltips:hover span {
  opacity: 0.95;
  left: 50%;
  margin-left: -240px;
  z-index: 999;
  width: 250px;
  overflow: visible;
}
.tooltips.tooltips-reversed:hover span {
  right: 50%;
  margin-left: -5px;
  width: 250px;
  overflow: visible;
}
.fa {
  padding-left: 0.3em;
}

/* Responsive design for medium sized screens */
@media(max-width:960px){
  /* Header */
  #site-description {
    margin: auto 5%;
    width: 80%;
  }
  #site-description > p{
    width:50%;
  }
  .navbar>.inner{
    margin: auto 5%;
  }
  /* Login time notification in header */
  .responsive-center.time{
    margin: auto;
    text-align: right;
    float: none;
  }
  /* Body */
  #page-body{
    margin: 10px 5% 60px 5%;
  }
  .tag-group-dropdown-container{
    margin: auto;
  }
}
/* Responsive design for mobile devices */
@media(max-width:720px){
  /* Tophat  */
  #earthdata-tophat2 .th-fbm-link-container .th-fbm-link {
    padding: 0;
  }
  /* Header */
  #site-description, #logo, #site-description p{
    display: block;
  }
  #site-description {
    margin: auto 10%;
  }
  #site-description > p{
    display: none;
  }
  /* Login time notification in header */
  .responsive-center.time{
    text-align: center;
  }
  /* Body */
  #page-body{
    margin: 10px 10px 60px 10px;
    padding: 0 5px;
  }
  /* .tag-group-dropdown-section{
    flex: 0 0 80% !important;
    max-width: 80% !important;
    margin: auto auto auto 15%;
  }
  .tag-group-dropdown-title-container{
    width: 80%;
  } */
  /* Footer */
  #forum-footer, #nasa-footer{
    width: 100% !important;
    text-align: center;
    min-height: auto;
    padding: 0px 0px 20px 0px !important;
  }
  /* Logout Modal css */
  #modal-logout{
    left: 35% !important;
    width: 300px;
  }
  /* Moderator Comments css */
  .moderator_comment-sub-header{
    display: block;
  }
  #moderator_comments-modal{
    width: 330px;
  }
  /* External Link Redirect Modal css */
  #confirm_external_link-modal, #share_link-modal{
    width: 330px;
  }
}

table.table2 .center {
  text-align: center;
}

table.table2 .alignTop {
  vertical-align: top;
}

table.table2 {
  border-top: none !important;
  border-left: none !important;
}

table.table2 .blank {
  border-top: none !important;
  border-left: none !important;
}

table.table2 .subrow {
   border-top: none !important;
   border-bottom: none !important;
}

table.table2 .mainrow {
   border-bottom: none !important;
}

.inner ul.with_indent {
    padding-left: 1.4em;
}

.warning {
  color: #b3241c;
  font-weight: bold;
}

a.warning {
  background-color: yellow;
  font-weight: bold;
}

.eui-sidebar-container {
  background-color: white;
  border: 0px;
}

/*************************/
/* Announcements section */

#announcement_accordion {
  padding:5px;
  max-height:280px;
  background-color: #c8e3f4;
  text-size-adjust: 100%
}

#announcement_accordion .eui-accordion__body {
  overflow-y: auto;
  max-height:210px;
  padding:0px;
  background-color: #c8e3f4;
}

#announcement_accordion ul.topiclist li.announce dt .list-inner {
  margin-right: 0px;
}

#announcement_accordion ul.topiclist li.announce dt .list-inner .rh_tag {
	display:none;
}

#announcement_accordion .eui-fa-chevron-circle-down {
  color: #154866; /* adjust font color to 7.32:1 contrast ratio */
}

#announcement_accordion .eui-accordion__header {
  background-color: #c8e3f4;
  padding: 1px;
  margin: 0px;
  border-bottom-width: 0px;
  font-family: Arial, Helvetica, sans-serif;
  color: #154866;
  width:100%;
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  text-align: left;
}

#announcement_accordion .eui-accordion__header:hover {
  background-color: #c8e3f4;
}

/*****************************/
/* End Announcements section */

.noBottomBorder{
  border-bottom: 0px !important;
}

#tag-group-dropdown-description-tagMatch{
  font-size: 1.5em;
  float:left;
  padding-left: 10px;
  margin-top: 3px;
}

.forum-filter .eui-accordion__header {
  background-color: #1A5B84; /* adjust background color to 7.3:1 contrast ratio */
}

.postingTips{
  background-color: #2276ac;
}

.placeHolderColor{
  color:#737373;
}

#message { 
  min-height: 20px; width:100%; justify-self: start;
}

#pageContent{ 
  grid-area: results;
}

.grid-container {
    /* display: grid;
    grid-gap: 10px;
    grid-template-areas: 'filter results results results';
    grid-template-columns:  auto 1fr 1fr 1fr;
   */
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, auto);
  grid-template-areas: 
    'filter'
    'results';
  grid-gap: 10px;
  padding: 0px;
}

.grid-container > div {
  /* text-align: center; */
  padding: 0px;
}

.searchLoader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  position: fixed;
  top: 50%;
  left: 50%;
  display: none;
  opacity: 0.7;
  z-index: 99;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#resetFilters {
  cursor: pointer;
}

.switch-toggle {
  width: 15em;
}

.switch-toggle label {
  cursor: pointer;
}

#shareURL{
  word-wrap: break-word;
}

#filterWrapper{
  grid-area: filter;
}

.larger{
  width: 17px;
  height: 17px;
}

#filterWrapperClosed {
  grid-area: filter;
}

#filterWrapperClosed > .eui-sidebar-container > h3 {
  margin-top: 0; 
}
h3 > a {
  padding-right: 48px; 
}
.forumFilters{
  display: inline;
  padding: 4px
} 
.filterMenuTitle{
  color: white; 
  justify-content: center;
}
/* The container <div> - needed to position the dropdown content */
.filterDropdown {
  position: relative;
  display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 300px;
  max-height: 500px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding: 10px;
  border-radius: 15px;
  border: 2px solid;
  border-color: #1A5B84;
  overflow-y: auto;
}

#thedropdownDates{
  min-width: 170px;
}

#thedropdownAnswered{
  min-width: 250px;
}

#thedropdownDAAC{
  min-width: 200px;
}

#thedropdownAuthor{
  min-width: 325px;
}

#thedropdownDiscipline{
  min-width: 325px;
}

#faceted_author_input{
  border-radius: 5px;
  margin-bottom: 0;
  padding-bottom: 0;
  padding-top: 2px;
}

#tagMatch{
  background-color: #1A5B84;
  border-radius: 10px;
  color: white;
  font-size: 16px;
  border: 1px solid;
  border-color: #1A5B84;
  cursor: pointer;
  max-width: 131px;
  margin: 5px;
  font-size: 16px;
  margin-left: 10px
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 8px 12px;
  text-decoration: none;
  display: block;
}

.filterItem {
  padding: 5px;
}
.dropbtn {
  margin: 5px;
  background-color: white;
  border-radius: 10px;
  color: #1A5B84;
  padding: 5px 10px;
  font-size: 16px;
  border: 1px solid;
  border-color: #1A5B84;
  cursor: pointer;
  
}
.verticalSeparator{
  color: white;
}
/* Dropdown button on hover & focus */
.dropbtn:hover {
  background-color: #2980B9;
  color: white;
  border-color: white;
  border: 1px solid;
  box-sizing: unset;
}

.drpbtnicon {
  pointer-events: none;
}
#search-author-button{
  padding: 5px;
}

#search-author-clear{
  padding: 5px;
}
.toggle-closed {
  margin-left: -10px !important;
}

#tour-pagination{
  float: right;
  font-size: 10px;
}

#tour_buttons{
  float: right;
}

#do-not-show{
  font-size: 10px;
}

#do-not-show-label{
  font-size: 10px;
}
@media screen and (min-width: 1160px) {
  #grid-container {
    display: grid;
    grid-gap: 10px;
    grid-template-areas: 'filter results results results';
    grid-template-columns:  auto 1fr 1fr 1fr;
  }

  #filterWrapperClosed > .eui-sidebar-container > h3 {
    writing-mode: vertical-lr;
    padding-bottom: 5px;
    margin-left: -7px;
    margin-top: 0; 
    letter-spacing: .1rem;
    border: none;
  }
  #filterWrapperClosed{
    grid-area: filter;
    width: 40px;
  }
  .guided-tour-button{
    border: 0px;
    margin-left: 10px
  }
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #ddd;}
  
  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  .show {display:block;}

  .filterDate{
    vertical-align: middle;
  }

  .selectMatch{
    display: inline;
    font-size: 16px;
    float:right;
  }

  #resetFilters{
    margin: 5px;
  }
}