div#block-stelar-content {
  padding-top: 2rem;
}

.modal { position: fixed; inset: 0; display: none; }
.modal[aria-hidden="false"] { display: block; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); }

.modal__close { position: absolute; right: .75rem; top: .5rem; font-size: 1rem; border: 0; background: transparent; cursor: pointer; }
.modal__title { margin: .25rem 0 .5rem; font-size: 1.25rem; }
.modal__bar { display: flex; gap: .5rem; margin: .25rem 0 1rem; }
.results .result { margin: 1rem 0; }
.results .result a { font-weight: 600; text-decoration: none; }
.muted { 
    opacity: .75; 
    font-size: .9rem;
}

.modal__dialog {
  position: relative;
  margin: 5vh auto;
  max-width: 800px;
  max-height: 85vh;        /* limit total height */
  overflow-y: auto;         /* enable scrolling within */
  background: #fff;
  border-radius: 12px;
  padding: 1rem 1.25rem 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
 
/* Search styles */
nav#block-useraccountmenu {
  display: flex;
  align-items: center;
  height: 2rem;
}
.menu--account ul.menu{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
  margin-left: 0rem;
  margin-right: 1rem;
  margin-bottom: 0rem;
}
input#modal-search-input,
input#site-search-input {
  padding-left: 0.5rem;
  padding-right: 1.5rem;
  background-image: url('images/magnifying-glass.svg');
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  background-size: 1rem;
  border: 2px solid #cdc7c7;
  border-radius: 0.25rem;
}
input#site-search-input {
  max-width: 12rem;
}

div#results h2 {
  font-size: 1.2rem;
}
form#modal-search-form button[type="submit"],
form#site-search-form button[type="submit"] {
  border: 1px solid darkgrey;
  border-radius: 2px;
  cursor: pointer;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Responsive styles */

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

  nav#block-useraccountmenu {
    flex-direction: column;
    align-items: flex-end; 
  }
  .menu--account ul.menu {
      margin-bottom: 1rem;
  }
}
@media screen and (max-width:767px) {
  nav#block-useraccountmenu {
    width: 24rem;
    top: 0.5rem;
    max-width: 100%;
  }
}
@media screen and (max-width:470px) {
  input#site-search-input {
    max-width: 8rem;
  }
   nav#block-useraccountmenu {
    width: 20rem;
    top: 0.5rem;
    max-width: 100%;
    margin-right: 0px;
  }
}