@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');

/* Root Color Styling */
:root {
    --color-brand: #FAD542 !important;
}

/* Header Styling */
#navBarContainer {
    /* height: 100px; */
}

a.portal_tabInstallation {
    color: #ffffff !important;
}

portal li.portal_tabInstallation a:hover, a.portal_tabInstallation:hover {
  color: #FAD542 !important;
}

.Header__tabsTab, .LoginDetail__signin, .LoginDetail__signup, .CustomizeContainer__aPlus {
    text-transform: uppercase;
    letter-spacing: 0px;
    font-weight: 500 !important;
}


portal .Header__logo img {
    max-height: 4rem;
    max-width: 12rem;
    min-height: auto;
}


portal #navBarContainer {
    height: 100px;
}

 portal .Header__tabsTab, portal .Header__menuList {
    line-height: 2.5rem;
}

/*Font Styling */
*, .html {
    font-family: "Manrope", sans-serif;
}

portal b {
  font-family: "Manrope", serif !important;
}

body, .kb-article-title, .kb-article-content {
    font-family: 'Manrope', sans-serif !important;
}

/* General Styling */


/* ----- Styling Footer Button */
.Button__footerBtn {
    background: #FAD542;
    color: #000000;
}

.Button__footerBtn:hover {
    background: #000000;
    color: var(--color-white);
}

/* ----- Hide Logo Title */
#navBarContainer .Header__name {
  display: none;
}

/* ----- Article Progress bar */
.Readingprogress__progressBar {
    background: linear-gradient(90deg, #FAD542 16%, #FAD542 75.89%, #FAD542 99.8%);
}


/* Home page Styling */

portal.en.html.home .commonStyle__zt3BrandBg > .Icon__white {
    color: #000000;
}

portal.en.html.home .SearchContainer__downArrow {
    border-top-color: #000000;
}

portal.en.html.home •AppContainer__keyBoardfocus, [data-focus-added] {
  outline: solid 3px #FAD542 !important;
}

portal.en.html.home .ContentBox__headerMid .commonStyle__zt3Link, .themeLink {
    color: #ffffff;
}

portal.en.html.home .ContentBox__headerMid .commonStyle__zt3Link:hover {
    color: #FAD542;
}

portal.en.html.home .commonStyle__tAlignCenter {
    color: #DCDCDC;
}

portal.en.html.home main#mainContainer {
    background-color: #18191A;
}

portal.en.html.home .Layout__oneColumn{
    background-color: #18191A !important;
}

/* ----- Styling Search Box */
portal.en.html.home .commonStyle__zt3BrandBg {
    background-color: #FAD542 !important;
}



/* Article Page Styling */

portal.en.html.articleDetail.goacousticaudio.products .commonStyle__zt3LinkActive {
  color: #888888;
  text-decoration: underline;
}

/* Article Detail Link Styling*/
portal.en.html.articleDetail.goacousticaudio.products .KbDetailLtContainer__articleContent a {
    color: #3b3b3b;
    font-weight: 700;
}

portal.en.html.articleDetail.goacousticaudio.products .sty__gjnegl__cls {
    border-bottom: 1px solid #3b3b3b;
}

/* --- Link on Hover */
portal.en.html.articleDetail.goacousticaudio.products .KbDetailLtContainer__articleContent a:hover {
    color: #888888;
    border-bottom: 1px solid #888888;
}

/*
.Layout__oneColumn, .Layout__twoColumn, .Layout__twoColumn2, .Layout__twoColumnReverse {
    max-width: 73.125rem;
    min-height: 75vh;
    padding: 2.125rem 0 3.125rem;
    transition: max-width 200msease;
    background-color: white;
}
*/

/* FOOTER */
.newsletter_section {
  background-color: #FAD542;
  padding: 32px 0px;
}

.newsletter.newsletter_section .AppContainer__container {
/*  gap: 24px; */
}

.newsletter_column {
  flex: 1;
}

.newsletter_column.form_holder {
  padding-left: 64px;
}

h3.newsletter-heading-title {
    font-family: "Manrope", Sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    color: #000000;
}

.newsletter_form_input {
  width: 75%;
  font-size: 16px;
  min-height: 47px;
  padding: 6px 16px;
  border-width: 0px 0px 0px 0px;
  border-radius: 50px 0px 0px 50px;
}

.newsletter_form_button {
  cursor: pointer;
  width: 23%;
  background-color: #000000;
  color: #ffffff;
  min-height: 47px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 0px 50px 50px 0px;
  padding: 8px 8px 8px 8px;
}

.newsletter_form_button:hover {
  background-color: #ffffff;
  color: #000000;
  border: 0px;
  border-color: #ffffff;
}