:root{
  --arrel-teal:#56A099;
  --arrel-blue:#313280;
  --arrel-charcoal:#222221;
  --arrel-light:#F2F2F2;
  --arrel-white:#FFFFFF;
  --arrel-mid:#AFAFAF;
  --arrel-border:rgba(34,34,33,0.08);
  --arrel-shadow:0 8px 22px rgba(0,0,0,0.04);
}

/* Base */
html, body {
  background: var(--arrel-light) !important;
  color: var(--arrel-charcoal) !important;
  font-family: "DIN Pro","Open Sans",Arial,sans-serif !important;
}

body,
.Layout__layout,
.PortalContainer__container,
.ContentContainer__contentContainer,
.WidgetContainer__widgetContainer,
.KBHome__container,
.KBCategory__container,
.KBArticleList__container,
.KBArticleDetail__container,
.MyArea__container,
.Signin__container,
.TicketList__container,
.TicketDetail__container {
  background: var(--arrel-light) !important;
  color: var(--arrel-charcoal) !important;
}

/* Header / hero */
.Header__headerBg,
.Header__bgColor,
.Header__titleSearchWrapper,
#titleSearch {
  background: linear-gradient(135deg, var(--arrel-teal) 0%, var(--arrel-blue) 100%) !important;
}

.Header__menuWrapper {
  background: transparent !important;
  border-bottom: none !important;
}

.Header__menuBox {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
}

.Header__logo {
  max-height: 56px !important;
  width: auto;
}

.Header__logotxt {
  display: none !important;
}

.Header__menuList,
.Header__nav a,
.Header__nav li,
.Header__menuList a {
  color: var(--arrel-white) !important;
  font-weight: 600 !important;
}

.Header__titleSearchBox {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 24px 34px !important;
}

.Header__titleDescription {
  text-align: center;
  margin-bottom: 20px;
}

.Header__welcomeTitle {
  color: var(--arrel-white) !important;
  font-size: 52px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

.Header__welcomeDescription {
  display: none !important;
}

.Header__banneralt {
  max-width: 900px;
  margin: 0 auto;
}

.Header__searchalt,
.Header__searchSubCont,
.Header__searchLink,
.Header__searchBox {
  width: 100%;
}

/* Search */
.Header__searchBox input,
.Header__searchBox input[type="text"],
.Header__searchBox input[type="search"],
.Search__search,
.Search__searchBox,
.Search__searchField {
  background: #ffffff !important;
  color: var(--arrel-charcoal) !important;
  border: 1px solid rgba(34,34,33,0.10) !important;
  border-radius: 8px !important;
  min-height: 56px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08) !important;
  padding-left: 22px !important;
}

/* Breadcrumb */
.BreadCrumbs__breadCrumb,
.BreadCrumbs__breadCrumb a,
.Header__banneralt .BreadCrumbs__breadCrumb,
.Header__banneralt .BreadCrumbs__breadCrumb a {
  color: rgba(255,255,255,0.88) !important;
}

/* Cards / containers */
.KBCategory__box,
.WidgetContainer__widgetContainer,
.Signin__signinBox,
.Signin__contentBox,
.MyArea__box,
.commonStyle__zt3BrandBorder,
.ArticleDetailLeftContainer__left,
.ArticleDetailRightContainer__right,
.TicketFormLeftContainer__left,
.TicketDetailLeftContainer__left,
.TicketDetailRightContainer__right,
.KBArticleList__container,
.KBArticleDetail__container,
.CategoryListView__content {
  background: #ffffff !important;
  color: var(--arrel-charcoal) !important;
  border: 1px solid var(--arrel-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--arrel-shadow) !important;
}

/* Home category card styling only */
.KBCategory__box,
.CategoryListView__content,
.KBCategory__container .WidgetContainer__widgetContainer {
  max-width: 760px;
  margin: 0 auto 24px auto !important;
  padding: 28px !important;
}

.KBCategory__title,
.CategoryListView__title,
.KBCategory__box h3 {
  color: var(--arrel-teal) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}

.KBCategory__description,
.CategoryListView__description,
.KBCategory__box p {
  color: var(--arrel-charcoal) !important;
  font-size: 15px !important;
}

.KBCategory__count,
.CategoryListView__meta {
  color: #666666 !important;
  font-size: 14px !important;
}

/* Hide only obvious view toggle icons */
.IconTab__iconTab,
.CategoryListView__switchView,
.ListHeader__icons,
.commonStyle__listViewSwitch {
  display: none !important;
}

/* Ticket add form: hide right panel only */
.TicketFormRightContainer__rightPanel,
.ticketFormRightPanel,
.TicketFormRightContainer__right {
  display: none !important;
}

.TicketFormLeftContainer__leftPanel,
.ticketFormLeftPanel,
.TicketFormLeftContainer__left {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Buttons */
button,
.Button__button,
[type="button"],
[type="submit"],
.commonStyle__zt3BrandBg,
.commonStyle__zt3BrandFill,
.commonStyle__zt3Brand,
a.commonStyle__zt3BrandBg,
a.commonStyle__zt3BrandFill {
  background: var(--arrel-teal) !important;
  color: var(--arrel-white) !important;
  border: 1px solid var(--arrel-teal) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

button:hover,
.Button__button:hover,
[type="button"]:hover,
[type="submit"]:hover,
a.commonStyle__zt3BrandBg:hover,
a.commonStyle__zt3BrandFill:hover {
  background: var(--arrel-blue) !important;
  border-color: var(--arrel-blue) !important;
}

/* Inputs */
input,
textarea,
select {
  background: #ffffff !important;
  color: var(--arrel-charcoal) !important;
  border: 1px solid rgba(34,34,33,0.12) !important;
  border-radius: 8px !important;
}

/* Links */
a,
.Link__link,
.commonStyle__zt3Link {
  color: var(--arrel-teal) !important;
}

a:hover,
.commonStyle__zt3Link:hover {
  color: var(--arrel-blue) !important;
}

/* Footer */
.Footer__footer,
.Footer__footerBg,
footer {
  background: #ffffff !important;
  color: var(--arrel-mid) !important;
  border-top: 1px solid var(--arrel-border) !important;
  box-shadow: none !important;
}

.Footer__footer a,
footer a {
  color: var(--arrel-mid) !important;
}

.Footer__footer a:hover,
footer a:hover {
  color: var(--arrel-teal) !important;
}

@media (max-width: 767px){
  .Header__welcomeTitle {
    font-size: 34px !important;
  }

  .Header__titleSearchBox {
    padding: 42px 18px 28px !important;
  }

  .KBCategory__box,
  .CategoryListView__content {
    max-width: 100%;
    padding: 20px !important;
  }
}