/* MUI LOADER */
#mui-loaderHeader {
    padding: 0;
    background-color: #FFF;
    background-image: -webkit-linear-gradient(top, #FFF 60%, #bebebe);
    background-image: linear-gradient(180deg, #FFF 60%, #bebebe);
}

#mui-loaderHeader div {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 5px; 
}

#mui-loaderBody {
    text-align: center;
    font-family: Helvetica,Arial,sans-serif;
    padding: 0;
    background-color: #d4d3d3;
    background-image: -webkit-linear-gradient(top, #d5d5d5 30%, #FFF);
    background-image: linear-gradient(180deg, #d5d5d5 30%, #FFF);
}
#mui-loaderBody .image {
    display: inline-block;
}
#mui-loaderFooter {
    color: #fff;
}
body.cq-wcm-edit #muiLoadingContainer,
body.cq-wcm-preview #muiLoadingContainer {
    display: block !important;
    position: initial;
    top: initial;
    left: initial;
    z-index: 0;
    width: initial;
    height: initial;
}
#muiLoadingContainer {
    background-color: #00629b;
    z-index: 9999;
}

.muiloader-footer-content {
  max-width: 1200px;
  color: white !important;
  margin: 0 auto;
}

.muiloader-footer-content li {
  list-style: none;
  display: inline-block;
}

.muiloader-footer-content li.spectrum-first.spectrum-last {
    list-style: none;
    color: white;
}

.mui-loadScreenBoxRow {
    margin-bottom: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.mui-footer-links a {
  color: white;
  font-size: 13px;
  line-height: 21px;
  padding-top: 5px;
  text-decoration: none;
}

body{
    margin: 0;
    padding: 0;
}

div#loaderFooter {
    margin: 0 auto;
}

.text-right.site-header.mui-site-header-top {
    font-weight: 400;
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    color: #0077bc !important;
}

.mui-site-header-top a:hover {
    color: #003057;
}

.muiloader-footer-content ul {
    padding-left: 0px;
    margin-left: -6px;
}

.mui-footer-links a {
    padding: 0 5px;
}

.section.customWrapper #loaderFooter{
    background: linear-gradient(180deg, #083e60 0%, #0b7ac0);
}

#loaderFooter {
    background-color: transparent !important;
}

#loaderFooter .list-component {
  list-style-type: none;
  max-width: 1200px;
  margin: 0 auto;
}

#loaderFooter .list-component li {
  display:inline-block;
}

#muiLoadingContainer {
    background-color: #FEFEFE;
}

.mui-loadScreenCopyBox {
  border-right: 1px solid #c9c9c9;
  display: inline-block;
  padding-bottom: 30px;
  padding-top: 30px;
  width: 33%;
}

.mui-loadScreenCopyMain {
  font-size: 14px;
  color: #00629b;
  font-weight: bold;
}

.mui-loadScreenCopySub {
  font-size: 12px;
  color: black;
}

.belowFooter {
  height: 500px;
  background-color: #FEFEFE;
  width: 100%;
  margin-top: -16px;
}

@media only screen and (max-width: 768px) {
  .mui-loadScreenCopyBox {
    border-right: none;
    display: block;
    padding-bottom: 30px;
    padding-top: 30px;
    width: 100%;
  }
}

/* NEW NAVIGATION TOP NAV */
.site-header .top-nav {
    bottom-border: 1px solid #374c5e;
    background-color: #001d37;
}
.site-header .top-nav ul {
    margin-bottom: 0;
}
.site-header .top-nav .linkComponent a,
.site-header .top-nav p,
.site-header .top-nav p a {
    font-size: 14px;
    color: #ffffff;
}
.site-header .top-nav .zip-label {
    margin-bottom: 0;
}
@media screen and (max-width:767px) {
    .site-header .top-nav .list-inline {
        width: 100%;
        margin-left: 0;
    }
    .site-header .top-nav .nav-user ul {
        float: none;
        margin: auto;
    }
    .site-header .top-nav .zip-label {
        text-align: center;
    }
}
.site-header .top-nav .spectrum-first,
.site-header .top-nav .contact-link {
    display: none;
}
@media screen and (min-width:768px) {
    .site-header .top-nav .spectrum-first,
        .site-header .top-nav .contact-link {
        display: block;
    }
}
.site-header .top-nav .nav-user a {
    background-color: transparent;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 38px;
}
@media screen and (max-width:767px) {
    .site-header .top-nav .searchform {
        display: none!important;
    }
}
@media screen and (max-width:374px) {
  .site-header .top-nav .nav-user li {
    display: block;
  }
  .site-header .top-nav .nav-user li .zipAction {
    width: 90vw;
    text-align: center;
    height: 45px;
  }
}
.site-header .top-nav .searchform,
.site-header .top-nav .zipAction {
    display: none;
}
@media screen and (min-width:768px) {
    .site-header .top-nav .searchform,
    .site-header .top-nav .spectrum-search {
        padding-top: 3px;
    }
}
.site-header .top-nav .searchform.searchForm {
    width: 290px;
    padding-right: 15px; 
}
.site-header .top-nav .zipAction {
    float: initial;
    direction: inline-block;
    width: auto;
    margin: 0;
    padding: 0;
    height: 28px;
}
.site-header .top-nav input {
    vertical-align: bottom;
    margin-top: 1px;
    height: 28px;
    border-radius: 4px;
    border: none;
    width: 70%;
    font-size: 14px;
    padding: 0 .5rem;
}
.site-header .top-nav .searchForm input[type="text"] {
  font-size: 1.4rem;
  font-style: italic;
  width: 70%;
}
.site-header .top-nav .searchForm .btn {
  margin-top: -1px;
}
@media screen and (max-width:767px) {
    .site-header .top-nav .zipAction .geoLoc {
        padding-top: 4px;
    }
}
.site-header .top-nav button,
.site-header .top-nav .zipAction .geoloc-btn button {
  height: 28px;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  padding: 8px 10px;
}
.site-header .top-nav .zipAction .geoloc-btn button {
  margin-top: 1px;
}
.site-header .top-nav .spectrum-search-input-wrap  input {
    width: 80px;
    position: relative;
}
.site-header .top-nav .zipAction {
    float: initial;
    direction: inline-block;
    width: auto;
    margin: 0;
    padding: 0;
    height: 28px;
}
@media (max-width: 400px) {
    .site-header .main-nav .main-nav-mobile .searchForm input.search-text {
        width: 180px;
    }
}
.site-header .top-nav .searchForm input[type="text"] {
  font-size: 1.4rem;
  font-style: italic;
  width: 70%;
  padding: 0 .5rem;
}
.site-header .top-nav .searchForm .btn {
  margin-top: -1px;
}
.site-header .top-nav button,
.site-header .top-nav .zipAction .geoloc-btn button {
  height: 28px;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  padding: 8px 10px;
}
.site-header .top-nav .zipAction .geoloc-btn button {
  margin-top: 1px;
}
.site-header .top-nav .spectrum-search-input-wrap  input {
    width: 80px;
    position: relative;
}
.site-header .top-nav .nav-user .zip-label {
    line-height: 38px;
}
.site-header .top-nav .nav-user .zip-code {
    font-weight: 700;
    text-decoration: underline; 
}
.site-header .top-nav .nav-user .zip-code .no-zip-message {
    display: none;
}
.site-header .top-nav .btn,
.site-header .top-nav .zipAction .geoloc-btn button {
    -webkit-transition: all 150ms ease-out;
    transition: all 150ms ease-out;
    -webkit-transition-property: color, border, background-color;
    transition-property: color, border, background-color;
}
.site-header .top-nav .btn:hover,
.site-header .top-nav .zipAction .geoloc-btn button:hover {
    background-color: #ffffff;
    color: #0077bc;
}
.site-header .top-nav .nav-user li {
  padding-left: 0;
}
.site-header .top-nav .mpTranslate {
    display: none;
}
@media screen and (min-width:768px) {
    .site-header .top-nav .mpTranslate  {
      display: block;
      padding-left: 15px;
      padding-right: 15px;
    }
        .site-header .top-nav li::before {
          content: "";
          position: absolute;
          width: 1px;
          height: 30px;
          top: 4px;
          background-color: #374c5e;
        }
}
.site-header .top-nav li:first-child::before,
.site-header .top-nav li:last-child::before  {
  content: inherit;
  content: initial;
}
.site-header .top-nav .mpTranslate:before  {
  left: 0;
}
.site-header .top-nav .mpTranslate:after  {
  right: 0;
}

/* NEW NAVIGATION SUB-NAV */
.site-header {
    position: relative;
}
.site-header.js-sticky {
  position: fixed;
}
.site-header .sub-nav .nav-primary {
    border-bottom: none;
}
.nav-localization-container img.arrow-right {
    margin-bottom: 2px;
}
.nav-localization-container img.arrow-down {
    margin-bottom: 0;
  margin-left: 5px;
}
/* ADDS FOR NEW HEADER */
.site-header .nav-primary {
    background: -webkit-linear-gradient(#e6e6e6, #e1e1e1);
    background: -o-linear-gradient(#e6e6e6, #e1e1e1);
    background: linear-gradient(#e6e6e6, #e1e1e1);
    border-bottom: 1px solid #002f57;
}
.site-header .nav-primary a {
    white-space: nowrap;
}
.site-header .nav-primary a {
    color: #002f57;
    font-weight: 400;
    font-size: 1.8rem;
    padding: 0 2rem;
    background-color: transparent;
    white-space: nowrap;
}

.site-header .nav-primary a:focus,
.site-header .nav-primary a:hover {
    text-decoration: none;
    background-color: transparent;
    box-shadow: inset 0 -5px 0 0 #0077BC;
    background: url("/content/dam/spectrum/residential/en/images/global/header/subNavIndicatorArrow_up.png") no-repeat;
    background-position: center bottom 5px;
    transition: none;
}

.site-header .nav-primary a:active {
    text-decoration: none;
    background-color: transparent;
    box-shadow: inset 0 -5px 0 0 #0077BC;
    background: url("/content/dam/spectrum/residential/en/images/global/header/subNavIndicatorArrow.png") no-repeat;
    background-position: center bottom -5px;
    transition: none;
}
.site-header .nav-primary li {
    position: relative;
    border-right: none;
}
.site-header .nav-primary li.spectrum-last::after {
    border: none;
}
.site-header .nav-primary li::after  {
  content: '';
    position: absolute;
    bottom: 15px;
    left: 100%;
    height: 35%;
    border-right: 1px solid #112a40;
}
.nav-primary .linkComponent a.text-white:hover .linkLabel {
    text-decoration: none;
}
@media screen and (min-width: 1200px) {
    .site-header-top-04 .messagebox-wrapper.spectrum-container .link-messagebox {
        margin-bottom: 25px;
    }
    .nav-localization-container > div .customWrapper + .customWrapper {
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        bottom: -8px;
        z-index: 20;
    }
    .nav-localization-container .customWrapper #custom-wrapping .container > div {
        width: 730px; 
        position: relative; 
        z-index: 80;
    }
    .nav-localization-container .nav-localization-form .container > div > div {
        display: block;
    }
    .nav-localization-container .nav-localization-form {
        display: table;
        width: 100%;
        background-image: none;
    }
    .nav-localization-container .nav-localization-form h4 img {
        float: right;
        margin-top: 8px;
    }
}
@media screen and (max-width: 767px) {
    .site-header .nav-localization-container {
        display: none;
    }
}