#elemHeader {
    position: fixed;
    top: 0;
    width: 100%;
    display: block;
    transition: top 0.3s;
    background-color: var(--mediumBrightBlue);
    z-index: 5;
  }
  @media (min-width: 550px) {
    header {
      position: relative;
      display: flex;
      flex-direction: column;
      background-color: var(--mediumBrightBlue);
    } 
  } /* end of @media (min-width: 550px) */

  .header_top_row {
    position: relative;
    display: flex;
    flex-grow: 1;
    height: fit-content;
  }
  @media (min-width: 550px) {
    .header_top_row {
      display: none;
    }
  } /* end of @media (min-width: 550px) */

  .header_top_row_left {
    margin-right: auto;
    display: flex;
    padding-top: 0.2rem;
    width:70px;
  }

  .header_top_row_center {
    margin: auto;
    display: flex;
    padding: 0.2rem;
  }

  .header_top_row_right {
    margin-left: auto;
    display: flex;
    padding-top: 0.2rem;
  }
  .hamburger_container {
    margin-right: auto;
    display: flex;
    padding-top: 0.3rem;
    padding-left: 10px;
  }
  @media (min-width: 550px) {
    .hamburger_container {
      display: none;
    }
  } /* end of @media (min-width: 550px) */  

  .hamburger {
    cursor: pointer;
    z-index: 2;
  }

  .hamburger_line {
    width: 25px;
    height: 3px;
    background: #000;
    margin-bottom: 5px;
    transition: all 0.15s ease-in;
  }

  .header_title_left {
    display: none;
    font-size:2rem;
    font-weight: bold;
  }
  @media (min-width: 550px) {

    .header_title_left {
      display: flex;
      padding-left: 3px; 
      letter-spacing: .25rem;
      padding-top: 8px;
      font-family: arial; 
      font-size: 2.2rem;
    }
  
    .header_title_left:hover {
      cursor: pointer;
      color: var(--highlightText);
    }

    #leftTitleN {
      padding-top: 0px;
      font-family: 'nw_1048regular', 
      sans-serif; 
      font-size: 2.8rem; 
      padding-right:0px; 
    }

    #leftTitleW {
      padding-top: 0px;
      font-family: 'nw_1048regular', 
      sans-serif; 
      font-size: 2.8rem;   
      padding-left:8px;
    }
  } /* end of @media (min-width: 550px) */  

  .header_title_center {
    display: flex;
    padding-top: 0.3rem;
    font-weight: bold;
    letter-spacing: 2.5px;
    font-size: 1.35rem;
  }

  .top_title_text {
    margin-top: 5.5px;
  }

  #topTitleN {
    font-family: 'nw_1048regular', Arial, sans-serif; 
    font-size: 1.75rem;
    padding-top: 0px;
  }

  #topTitleW {
    font-family: 'nw_1048regular', Arial, sans-serif; font-size: 1.75rem;
    font-size: 1.75rem;
    padding-top: 0px;
    padding-left: 2px;
  }

  @media (min-width: 550px) {

    .header_title_center {
      display: none;
    }
  } /* end of @media (min-width: 550px) */  

  .sign_in {
    margin-left: auto;
    display: flex;
  }

  .header_second_row {
    position: relative;
    display: flex;
    flex-grow: 1;
    padding: 5px;
  }

  @media (min-width: 550px) {
    .header_second_row {
      position: relative;
      display: flex;
      flex-grow: 1;
      margin: auto;
      font-size: 1.3rem;
      padding: 5px;
    }

    .header_second_row_left {
      margin-right: auto;
      display: flex;
      padding-top: 0.2rem;
    }
      
    .header_second_row_right {
      margin-left: auto;
      display: flex;
      padding-top: 0.2rem;
    }

  } /* end of @media (min-width: 550px) */    

  .header_second_row_center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    flex-basis: 100%;
    font-size: 1.8rem;
  }

  @media (min-width: 550px) {
    .header_second_row_center {
      margin: auto;
      display: flex;
      align-items: left;
      padding: 0.2rem;
      font-size: 1.8rem;
    }

  } /* end of @media (min-width: 550px) */  

  .top_search_container {
    display: flex;
    flex-grow: 1;
    height: fit-content;
    font-size: 0.5rem;
    max-width: 600px;
  }
  @media (min-width: 550px) {
    .top_search_container {
      display: flex;
      flex-grow: 1;
      flex-basis: 100%;
      height: fit-content;
      font-size: 0.5rem;
    }
  } /* end of @media (min-width: 550px) */    

  #formTopSearchBar {
    display: flex;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .top_search_bar {
    display: flex;
    flex-grow: 1;
    padding: 6px;
    border-left-style: solid;
    border-top-style: solid;
    border-bottom-style: solid;
    border-color: black;
    border-left-width: 3px;
    border-top-width: 3px;
    border-bottom-width: 3px;
    border-right-width: 0px;
  }
  @media (min-width: 550px) {
    .top_search_bar {
      display: flex;
      flex-grow: 1;
      flex-basis: 90%;
      padding: 6px;
      border-style: solid;
      border-color: black;
      border-width: 3px;
    }
  } /* end of @media (min-width: 550px) */    

  .top_search_button {
    display: flex;
    flex-grow: 0;
    padding: 6px 10px;
    border-style: solid;
    cursor: pointer;
    background-color: gold;
    border-color: black;
    border-width: 3px;
  }
  @media (min-width: 550px) {
    .top_search_button {
      display: flex;
      flex-grow: 0;
      padding: 6px 10px;
      border: none;
      cursor: pointer;
      border-style: solid;
      border-color: black;
      border-width: 3px;
      background-color: gold;
      margin-left: 5px;
    }
  } /* end of @media (min-width: 550px) */    

  #elemSignInLrgScreens {
    display: none;
  }
  @media (min-width: 550px) {
    #elemSignInLrgScreens {
      display: flex;
    }
  } /* end of @media (min-width: 550px) */  

  /* this is the menu bar: visible on both lrg and sm screens */
  #elemMenuBarContainer {    
    display: flex;
    height: fit-content;
    background-color: var(--darkBrightBlue);
    color: white;
  }


  .menu_bar {
    position: relative;
    display: flex;
    /* background-color: var(--darkBackground); removed bc may be related to menu bar funkiness */
    align-items: flex-end;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    flex-basis: 1vw;
  }

  .dropbtn {
    display: flex;
    background-color: var(--darkBackground);
    color: var(--lightText);
    font-size: 1.3rem;
    padding: .8rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    outline: none;
    margin: auto;
  }

  button:disabled,
  button[disabled],
  button[disabled]:hover
  {
    border: 1px solid #999999;
    background-color: #cccccc;
    color: #666666;
  }

  .active_dropbtn {
    display: flex;
    /* background-color: var(--lightishBackground);
    color: var(--darkText); */
    font-size: 1.3rem;
    padding: .8rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
  }

  .active_dropbtn:hover {
    display: flex;
    /* background-color: var(--lightishBackground);
    color: var(--darkText); */
    font-size: 1.3rem;
    padding: .8rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
  }

  .dropbtn:focus {
    outline: none;
    /* background-color:gray; need to turn this off when not focused, when its ddl disappears*/ 
  }

  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
    margin: auto;
  }

  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    left:0px;
    top: 48px; /*top is the height of the menu button bar: in controller: divMenuBar.style.height = "48px";*/ 
    background-color: var(--lightishBackground);
    white-space: nowrap;
    width: fit-content;
    max-width: fit-content;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 80vh;
  }

  @media (min-width: 400px) {
    /* Dropdown Content (Hidden by Default) */
    .dropdown-content {
      display: none;
      position: absolute;
      top: 48px; /*top is the height of the menu button bar: in controller: divMenuBar.style.height = "48px";*/
      background-color: var(--lightishBackground);
      white-space: nowrap;
      width: fit-content;
      max-width: fit-content;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
  }

  /* on small screens, the adv srch load menu drop down
      needs to span the width of the screen  */
  #ddcLoadSavedSearch {
    left: -90px;
    width: 100vw;
  }  
  @media (min-width: 500px) {
    #ddcLoadSavedSearch {
      right: auto; 
      left: 0px;
    }
  }

  /* on small screens, these menu drop downs have zero right
      because they are positioned at the right edge of the menu   */
  #ddcSaveThisSearch,  #ddcSwatchView, #ddcPatternDownload {
    right: 0px; 
    left: auto;
  }
  @media (min-width: 500px) {
    #ddcSaveThisSearch,  #ddcSwatchView, #ddcPatternDownload {
      right: auto; 
      left: 0px;
    }
  }

  /* Links inside the dropdown */
  .dropdown-content a {
    color: var(--darkText);
    /* padding: 12px 16px; */
    padding: .9rem .85rem;
    text-decoration: none;
    display: block;
    /* padding-bottom: 2rem; */

  }

  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {
    font-weight: bold;
  }  

  @media (min-width: 550px) {
    /* Change the background color of the dropdown button when the dropdown content is shown */
    .dropbtn:hover {
      background-color: var(--popupBkground);
      color: var(--darkText);
    }
  } /* end of @media (min-width: 550px) */  

  .ddl_menu_options {
    display: flex;
    flex-direction: column;
    justify-content: baseline;
    min-width: 216px;
    padding-left: .85rem;
    padding-top: .9rem;
  }

  .ddl_menu_option_item {
    padding: .3rem 0rem;
    color: var(--darkText);
    /* width: fit-content; */
  }

  .ddl_menu_option_item:hover {
    cursor: pointer;
    font-weight: bold;
  } 
    
  .ddl_menu_option_item input:hover {
    cursor: pointer;
    font-weight: bold;
  } 

  .ddl_menu_options span {
    line-height: 1.6rem;
    padding-left: .25rem;
  }

  .mbb_rb_label {
     padding: 0px 5px; 
     cursor: pointer;
     color: var(--darkText);
  }
  
  .mbb_rb_label:hover {
    padding: 0px 5px; 
    font-weight: bold;
 }


 .font_options {
    display: flex;
    flex-direction: row;
    justify-content: baseline;
    min-width: 180px;
    padding:.35rem .9rem;
  }

  #fontSizeLabel {
    padding-right: .3rem;
  }

  #fontSizeLabel:hover {
    font-weight: bold;
  }  

  .case_options {
    display: flex;
    flex-direction: column;
    justify-content: baseline;
    min-width: 180px;
      
    padding-top:.9rem;
  }

  .case_options li {
    padding:.3rem 0rem;
  } 

  .case_options li:hover {
    cursor: pointer;
    font-weight: bold;
  } 

  .case_options ul {
    padding-left: .9rem;
    list-style-type: none;
  } 

  .case_options span {
    line-height: 1.6rem;
    padding: 8px 8px;
    color: var(--darkText);
  }

  #fontSizeLabel {
    color: var(--darkText);
  }

  #ddcSwatchSort {
    width: fit-content;
    /* padding-right: 1rem; */
  }
  
  #ddcSwatchFilter {
    width: fit-content;
  }
  
  #ddcSwatchView {
    width: 8rem;
  }

  #ddcPatternDownload {
    right:0px;
    width:216px;
  }

  .ddcSignInWarning {
    padding: 20px;
  }

  #hrefSaveSrchSignIn {
    display: inline;
    padding: 0px;
  }

  /* end of sub menu styles */

  /* in the top search bar, make the 'placeholder' text italic  */
  ::-webkit-input-placeholder {
    font-style: italic;
  }
  :-moz-placeholder {
    font-style: italic;
  }
  ::-moz-placeholder {
    font-style: italic;
  }
  :-ms-input-placeholder {
    font-style: italic;
  }

  #divMenuBarSpacer {
   height: 50px; /* this is used on views which have no menu bar buttons */
  }