/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* --- Properties --- */
:root {
  
  	--color-black: 		#333;
  	--color-grey: 		#646464;
  	--color-blue: 		#4565ad;
  	--color-darkBlue: 	#04043d;
  	--color-green:		#58b88f;
    --color-red1:		#fe6667;
  
  	--color-body: 		var(--color-black);
  
	--color-brand: 		var(--color-blue);
  	--color-navText: 	#3e3f6c;
  	--color-link:		var(--color-black);
  	--color-linkHover:	var(--color-blue);
  	--color-linkActive:	var(--color-blue);
  
  	--color-breadcrumbText: #3e3f6c;
    --color-breadcrumbBg: #f4f5fa;
  
  	--color-inputText:			var(--color-black);
	--color-inputBorder: 		rgb(62 63 108 / 25%);
  	--color-inputBorderHover: 	rgb(62 63 108 / 42%);
  	--color-inputBorderActive: 	rgb(62 63 108 / 60%);
    --color-titleLink:   var(--color-blue);
  
  	--color-categoryTitle: 		var(--color-black);
  	--color-categoryLink: 		var(--color-blue);
  
  	--color-articlesLinkIcon: 	var(--color-link);
    --color-articlesLink: 		var(--color-link);
    --color-articlesLinkActive: var(--color-linkActive);
  
  	--color-btnBg: var(--color-green);
  
  	--color-articlesImgBorder: var(--color-inputBorder);
 	--color-articlesHyperlinkColor: var(--color-green);
  
  	--font-size: var(--size-base13);
  	--font-size-sm: var(--size-base11);
  	--font-size-xs: var(--size-base7);
  
  	--font-size-input: var(--size-base12);
  	--font-size-popup: var(--font-size-sm);
  	--font-size-breadcrumb: var(--font-size-sm);
  
  	--border-radius: 0.325rem;
  	--box-shadow-popup: 0px 2px 3px rgba(0,0,0,0.125);
}

/* --- General --- */
.html {
  font-family: "Poppins", sans-serif;
  color: var(--color-body);
}

a {
  transition: all 0.25s ease;
}

.commonStyle__zt3Link,
.commonStyle__zt3LinkActive {
  transition: all 0.25s ease;
  text-decoration: transparent underline;
}
.commonStyle__zt3Link:hover,
.commonStyle__zt3LinkActive:hover {
  text-decoration: underline;
}

/* --- Search & input --- */
.Input__inputCommon,
.DropDown__dropdown input,
.DropDown__selectedText {
  font-size: var(--font-size-input);
  color: var(--color-inputText);
  transition: all 0.25s ease;
}

.Input__inputCommon:hover,
.DropDown__dropdown:hover,
.DropDown__selectedText:hover {
  border-color: var(--color-inputBorderHover);
}

.Input__inputCommon:focus,
.DropDown__dropdown input:focus,
.DropDown__selectedText:focus {
	border-color: var(--color-inputBorderActive);
}

.SearchContainer__globalSearch {
  /*box-shadow: inset 0 0 0 .05rem var(--color-inputBorder);*/
  border: 1px solid var(--color-inputBorder);
  border-radius: var(--border-radius);
  transition: all 0.25s ease;
}
.SearchContainer__globalSearch:hover {
  border-color: var(--color-inputBorderHover);
}
.SearchContainer__moduleChangePopup {
  padding-top: 0.4rem;
}
.SearchContainer__searchIcon {
  /*border-left: 1px solid var(--color-inputBorder);*/
  border-top-right-radius: calc(var(--border-radius) - 0.125rem);
  border-bottom-right-radius: calc(var(--border-radius) - 0.125rem);
  background: var(--color-btnBg);
  padding-top: 0;
  display: flex;
  align-items: center;
}
.SearchContainer__downArrow {
  border-top-color: #888888;
}
.Input__headerSearch {
  font-size: var(--font-size);
  color: var(--color-inputText);
}
.Input__searchBox {
  border: 1px solid var(--color-inputBorder);
  box-shadow: none !important;
  font-size: var(--font-size-sm);
}
.Input__searchBox:hover {
  border-color: var(--color-inputBorderHover);
}
.Input__searchBox:active,
.Input__searchBox:focus {
  border-color: var(--color-inputBorderActive);
}
.AppContainer__keyBoardfocus, 
[data-focus-added] {
  outline: 1px solid var(--color-blue) !important;
  box-shadow: none;
}
.SearchList__listmenu {
  top: 101%;
}
.SearchContainer__searchBoxIcon .Icon__brand {
  color: var(--color-btnBg);
}

/* --- Header --- */

/*
.Header__homeContent.Header__homeNavbarFixed .Header__navbar {
  background: #eceff7;
}*/
.Header__navbar {
  display: flex;
}
.Header__container {
  width: 100%;
}

.Header__menu,
.Header__menu::before,
.Header__menu::after {
  background-color: var(--color-navText);
}
.Header__menu.Header__menuToggle {
  background-color: transparent;
}
@media only screen and (max-width: 1024px) {
  .Header__navopen .Header__navbar .Header__menuTab, 
  .Header__homeNavbarFixed.Header__navopen .Header__navbar .Header__menuTab {
    background-color: #f8f8f8;
  }
}

.Header__name {
  font-size: 1.5rem;
  font-weight: 300;
  padding-left: 1.5rem !important;
  line-height: 0;
  overflow: visible !important;
  /*margin-top: -0.125em;*/
}
.Header__logoFlex {
  display: flex !important;
  align-items: center;
}
.Header__active,
.Header__tabsTab,
.LoginDetail__signin {
  position: relative;
  font-weight: 500;
  overflow: visible;
  border-bottom-color: transparent !important;
}
/* Remove the underline that gets added under the header tabs. */
.Header__tabsTab::after,
.LoginDetail__signin::after {
  content: none !important;
}
.Header__tabsTab::before,
.LoginDetail__signin::before,
/* Extend the clickable area of the inner hyperlink to match the new button size. */
.Header__tabsTab a::before,
.LoginDetail__signin a::before {
    content: "";
    position: absolute;
    top: -0.25rem;
    left: -0.6rem;
    right: -0.6rem;
    bottom: -1.5rem;
}

.Header__tabsTab::before,
.LoginDetail__signin::before {

  background: var(--color-breadcrumbBg);

  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Reduce the effect on the homepage. */
.Header__homeContent .Header__tabsTab::before,
.Header__homeContent .LoginDetail__signin::before {
  bottom: -0.25rem;
}
.Header__homeContent .Header__tabsTab a::before,
.Header__homeContent .LoginDetail__signin a::before {
  top: -1rem;
  bottom: -1rem;
}

/* Have the tabs stay "lit up" when active. */
.Header__tabsTab:hover::before,
.Header__tabsTab.Header__active:not(#portal_tabHome)::before,
.LoginDetail__signin:hover::before,
.LoginDetail__signin.LoginDetail__active::before {
  opacity: 1;
}

/* Make the entire tab clickable */
.Header__tabs__link,
.LoginDetail__tabLink {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.BreadCrumbs__breadcrumbsView {
	font-size: var(--font-size-breadcrumb);  
}

.BreadCrumbs__breadcrumbsView > ul > li {
	color: var(--color-breadcrumbText) !important;
}

.BreadCrumbs__breadcrumbsView > ul > li:last-child:not(:only-child) > * {
  opacity: 0.65;
  font-weight: 300;
  /*color: #333333;*/
}

.BreadCrumbs__breadCrumbsLink {
  text-decoration: transparent underline;
}
.BreadCrumbs__breadCrumbsLink:hover {
  text-decoration: underline;
}

/* --- User --- */
.AvatarText__avatarText {
  border-color: var(--color-brand);
  color: var(--color-navText);
  background: #fbfdfc;
  
  /* No reason to let people select their avarar initials. */
  user-select: none; 
}

/* --- Footer --- */
.Footer__footerCopyrigt {
  font-size: 80%;
}

/* --- Home page --- */
.Icon__Xlarge {
  width: 5rem;
  height: 5rem;
}
[data-id="home"] .Link__link {
  color: var(--color-categoryLink);
}
/*
Allow users to click on the icons with 
some CSS tricks.
*/
[data-id="home"] .ContentBox__boxInnerHome {
  position: relative;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
[data-id="home"] .Link__link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
[data-id="home"] .popularAricles > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
[data-id="home"] .popularAricles {
  width: 80% !important;
  margin: auto;
}
[data-id="home"] .popularAricles .ListHeader__listHeader2 {
  grid-column: 1 / 3;
  padding-left: 1.35rem;
}
@media only screen and (max-width: 1024px) {
  [data-id="home"] .popularAricles > div {
    display: block;
  }
}
@media only screen and (max-width: 768px) {
  [data-id="home"] .popularAricles {
    width: auto !important;
  }
}

[data-id="home"] .ListHeader__listIcon2 {
  display: none;
}

#Capa2 .commonStyle__zt3BrandFill,
#Capa3 path {
  fill: var(--color-categoryLink) !important;
}
#Capa2 path, 
#Capa3 .commonStyle__zt3BrandFill {
  fill: var(--color-body) !important;
}

/* --- Category --- */
.ArticleListRightContainer__deskHeading {
  color: var(--color-categoryTitle);
}

.ListHeader__linkText,
.ListHeader__header1 {
  color: var(--color-categoryTitle);
  text-decoration: none !important;
}
.KbCategory__box {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
}
.KbCategory__topic {
  position: static;
  padding-right: 0;
}
.KbCategory__topic .Link__link {
  color: var(--color-categoryLink);
}
.KbCategory__topic a {
  font-weight: 500;
  margin: 1rem 0;
  width: 100%;
  display: block;
}
/* 
Allow the user to click on the icon above the
KbCategory title with some CSS trickery.
*/
.KbCategory__topic a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.KbCategory__boxInner {
  padding: 2rem 1.5rem;
}
.KbCategory__box .MediaObject__mediaObject {
  flex-direction: column;
  text-align: center;
}
.KbCategory__box .MediaObject__mediaFigure {
  margin-right: 0;
}
.KbCategory__dottedPopup {
  top: 0.75rem;
  right: 1rem;
}
/* 
Extend the clickable radius of the ... 
to prevent accidental clicks on the element
behind it.
*/
.KbCategory__dottedPopup .DottedMenuPopup__dottedIcon::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  bottom: -0.5rem;
  right: -0.5rem;
}
.KbCategory__followCount:hover {
  background: var(--color-brand);
}
.KbCategory__avatarPhoto .Avatar__avatar,
.KbCategory__avatarPhoto .Avatar__avatarImg {
  width: 6rem;
  height: 6rem;
}
.Menu__arrow {
  padding-left: 0 !important;
}

/* --- Article --- */
.ListHeader__header1 {
  font-size: var(--size-base17);
}
.ListHeader__listIcon1 {
  display: none;
}
.ContentList__activeLink,
.ContentList__listLink {
  font-size: var(--font-size-sm);
}
.ContentList__topicList .Icon__icon {
  color: var(--color-articlesLinkIcon);
}
.ContentList__activeLink {
  color: var(--color-articlesLinkActive);
}
.commonStyle__detailHeader {
  font-weight: 500;
}
.Readingprogress__progressBar {
  /*
  background: linear-gradient(
    90deg,
    var(--color-blue) 16%,
    #009fe3 75.89%,
    #58b88f 99.8%
  );*/
  
  background: linear-gradient(
    90deg,
    var(--color-blue) 16%,
    #009fe3 65.89%,
    var(--color-green) 99.8%
  );
}
.commonStyle__detailHeader {
  font-size: 2.2rem;
}

/* Article TOC */
/* The default appearance of this is a bit lacking; CSS has been used to redesign. */
.KbDetailLtContainer__articelDetail .TOCContainer__arrowRotOpen {
  display: none;
}

.KbDetailLtContainer__articelDetail .TOCContainer__arrowRotOpen,
.KbDetailLtContainer__articelDetail .TOCContainer__arrowRotClose {
  margin-right: 0.5rem;
}

.KbDetailLtContainer__articelDetail .TOCContainer__tocHeading {
  margin-left: 0;
  margin-top: 0.25rem;
  font-weight: 500;
  color: var(--body-color);
}

.KbDetailLtContainer__articelDetail .TOCContainer__tocCategories {
  padding-top: 0.25rem;
}

.KbDetailLtContainer__articelDetail .TOCContainer__tocCategories .Menu__menuItem::before {
  content: "-";
  font-size: 1rem;
  position: absolute;
  right: calc(100% + 0.65rem);
}
.KbDetailLtContainer__articelDetail .TOCContainer__tocCategories .Menu__menuItem .Menu__arrow::before {
  display: none;
}
.KbDetailLtContainer__articleContent li {
  margin-top: 0.75em;
}
.KbDetailLtContainer__articleContent {
  counter-reset: decimal-nest-0;
}
/* Deliberately exluded 'ol' selector. Add this class to other non-ol elements if you need to increment the counter. */
.KbDetailLtContainer__articleContent .list_decimal_nest {
  counter-increment: decimal-nest-0;
}
.KbDetailLtContainer__articleContent ol.list_decimal_nest,
.KbDetailLtContainer__articleContent ol.list_decimal_nest ol {
  counter-reset: decimal-nest-1 !important;
}

.KbDetailLtContainer__articleContent ol.list_decimal_nest,
.KbDetailLtContainer__articleContent ol.list_decimal_nest ol,
.KbDetailLtContainer__articleContent ol.list_decimal_nest ul {
  padding-left: 45px !important;
}

.KbDetailLtContainer__articleContent ol.list_decimal_nest > li,
.KbDetailLtContainer__articleContent ol.list_decimal_nest ol > li {
  list-style-type: none !important;
}
.KbDetailLtContainer__articleContent ol.list_decimal_nest > li::before,
.KbDetailLtContainer__articleContent ol.list_decimal_nest ol > li::before {
  counter-increment: decimal-nest-1;
  content: counter(decimal-nest-0) "." counters(decimal-nest-1, ".") ". ";
  position: absolute;
  transform: translateX(calc(-100% - 0.45em));
  /*color: var(--color-blue);*/
  font-weight: 500;
}

.Menu__treeMenu > .Menu__menuItem:not([aria-expanded]) {
  margin-left: 0;
}

.Menu__menu .Menu__menuItem {
  
}

/* --- Tickets & Account --- */
.TicketListItem__listItem {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.TicketListItem__ticketlistItem {
  margin-top: 0.4rem;
}
.TicketListItem__overdueIcon + span {
  color: var(--color-red1);
}
/* Value */
.Info__infoContent,
.ProfileInformation__profileInfo .name_value,
.ProfileInformation__profileInfo {
  font-size: var(--font-size);
  color: var(--color-black);
  font-weight: 400;
}
/* Label */
.Info__infoLabel,
.FormElement__editLabel,
.ProfileInformation__label {
  font-size: var(--font-size-sm);
  color: var(--color-grey);
  font-weight: 300;
}
.InfoContainer__overDue {
  text-transform: capitalize;
}

/* --- Misc. --- */
.KbSubCategoryContainer__contentList {
  width: 100%;
  margin-right: 0;
}

.KbDetailRtContainer__widgetSection {
  display: flex;
  align-items: center;
}
.KbDetailRtContainer__followOption {
  margin-right: 0.5rem;
  margin-bottom: 0;
}
.KbDetailRtContainer__subscribeDescription {
  line-height: 1.25;
}

/* Shadows for popup menus. */
.SearchList__listmenu,
.Popup__isOpen {
  box-shadow: var(--box-shadow-popup);
}
.SearchList__list,
.Autosuggest__suggestions {
  font-size: var(--font-size-popup);
}
.Autosuggest__suggestions {
  top: 46px;
}

/* Follow button */
.Button__primaryBorder {
  border-color: var(--color-btnBg);
  color: var(--color-btnBg);
}
/* View profile button */
.LoginDetail__profileBtn {
  background: var(--color-btnBg);
}

/* Popup message (at the top of the screen) after submitting a ticket. */
.Message__success {
  background: var(--color-green) !important;
}

/* --- Articles Custom --- */
.KbDetailLtContainer__articleContent kbd,
.KbDetailLtContainer__articleContent .kbd {
  border: 1px solid #cbd3e8;
  color: var(--color-blue);
  padding: 0.1em 0.4em;
  border-radius: var(--border-radius);
  margin: 0 0.2em;
}

/* Table */
.KbDetailLtContainer__articleContent table td,
.KbDetailLtContainer__articleContent table th {
  padding: 0.75rem;
}

.KbDetailLtContainer__articleContent table p:first-child {
  margin-top: 0;
}
.KbDetailLtContainer__articleContent table p:last-child {
  margin-bottom: 0;
}


/* Article Img */
.ImagePopup__imgSrc {
  /* Fixes bug where viewing images in the popup view turns them "blue" (from text selection). */
  user-select: none;
}
.KbDetailLtContainer__articleContent img,
.KbDetailLtContainer__articleContent iframe {
  border: 1px solid var(--color-articlesImgBorder);
  border-radius: var(--border-radius);
  box-shadow: .375rem .375rem .1rem -0.125rem rgba(74,73,73,.03);
  margin: 1.5rem 0rem;
  display: block;
}
.KbDetailLtContainer__articleContent img:first-child,
.KbDetailLtContainer__articleContent iframe:first-child {
  margin-top: 0.75rem;
}

.KbDetailLtContainer__articleContent .KbDetailLtContainer__description > ol {
  position: relative;
  padding-left: 2rem;
  counter-reset: article-steps 0;
}
.KbDetailLtContainer__articleContent .KbDetailLtContainer__description > ol > li {
  padding-bottom: 0.375rem;
}
.KbDetailLtContainer__articleContent .KbDetailLtContainer__description > ol > li::marker {
  color: var(--color-blue);
}
.KbDetailLtContainer__articleContent .KbDetailLtContainer__description > ol > li:not([class]) {
  list-style-type: none;
}
.KbDetailLtContainer__articleContent .KbDetailLtContainer__description > ol > li:not([class])::before {
  counter-increment: article-steps;
  content: counter(article-steps) ". ";
  font-size: 125%;
  text-align: left;
  font-weight: 400;
  width: 1.75rem;
  left: 0.25rem;
  position: absolute;
  line-height: 1.5rem;
  color: var(--color-blue);
}

.KbDetailLtContainer__articleContent .KbDetailLtContainer__description ul {
  /*position: relative;
  padding-left: 1.5rem;*/
}

.KbDetailLtContainer__articleContent h1,
.KbDetailLtContainer__articleContent h2,
.KbDetailLtContainer__articleContent h3 {
  font-weight: 400;
  color: var(--color-darkBlue);
  margin-top: 0.75em;
  margin-bottom: 0.5em;
  opacity: 0.9;
}

.KbDetailLtContainer__articleContent h1 {
  font-size: 2rem;
  position: relative;
}
.KbDetailLtContainer__articleContent h1:not(:first-child) {
  margin-top: 1.5em;
}
.KbDetailLtContainer__articleContent h1:not(:first-child)::before {
  content: "";
  height: 1px;
  left: 0;
  top: -0.75em;
  width: 100%;
  position: absolute;
  background: #ddd;
}

.KbDetailLtContainer__articleContent h2 {
  font-size: 1.5rem;
  opacity: 0.8;
}

.KbDetailLtContainer__articleContent h3 {
  font-size: 1.25rem;
  opacity: 0.7;
}

.KbDetailLtContainer__articleContent code {
  font-size: 1rem;
  background: var(--color-greyTint85);
  padding: 0.5rem;
  border-radius: var(--border-radius);
}

.KbDetailLtContainer__articleContent p > code {
  display: inline-block;
  padding: 0.125rem;
}

.KbDetailLtContainer__articleContent span.red1,
.KbDetailLtContainer__articleContent p.red1 {
  color: var(--color-red1);
}

.level_1_Kbcategory .KbSubCategoryContainer__contentList {
  width: 100%;
  margin-right: 0;
  margin-top: 1rem;
}

/* If a URL is entered without a hyperlink, don't make it look clickable to the user. */
.KbDetailLtContainer__articleContent p a:not([href]) {
  color: var(--color-grey);
  cursor: auto;
  font-weight: 300;
}

.KbDetailLtContainer__articleContent a[href] {
  color: var(--color-articlesHyperlinkColor);
  text-decoration: underline;
}

/* --- TICKETS --- */

/* Remove redundant ticket form breadcrumbs. */
.BreadCrumbs__breadcrumbsView[data-id=breadcrumb_ticketForm] > ul > li:nth-child(n+3) {
  display: none;
}
/* Hide the comment button from the user (we only want them to reply). */
.ticketDetail .ConversationForm__list[data-id$="_comment"] { 
  display:none; 
}

/* Improve readability of user replies */
#layoutContainer[data-id="ticketDetail"] .enduser_thread .description,
#layoutContainer[data-id="ticketDetail"] .agent_thread .description,
#layoutContainer[data-id="ticketDetail"] .enduser_thread .Post__postSummary,
#layoutContainer[data-id="ticketDetail"] .agent_thread .Post__postSummary {
  font-size: var(--font-size-sm);
}

/* Reduce the appearance of <blockquotes> in reply chains. --- */
#layoutContainer[data-id="ticketDetail"] .enduser_thread blockquote,
#layoutContainer[data-id="ticketDetail"] .agent_thread blockquote {
  margin-left: 0.75rem !important;
  padding: 0.5rem 0.5rem 0rem 1.5rem !important;
  border-left: 1px dotted #bbb !important;
  font-size: var(--font-size-xs) !important;
  opacity: 0.75;
}

#layoutContainer[data-id="ticketDetail"] blockquote blockquote {
  opacity: 1 !important;
}

#layoutContainer[data-id="ticketDetail"] .Post__userLastPost,
#layoutContainer[data-id="ticketDetail"] .Comment__userLastPost {
  font-size: var(--size-base6);
}

#layoutContainer[data-id="ticketDetail"] .Post__userName,
#layoutContainer[data-id="ticketDetail"] .Comment__userName {
  font-size: var(--size-base12);
}

#layoutContainer[data-id="ticketDetail"] .ThreadContainer__articleContent,
#layoutContainer[data-id="ticketDetail"] .Comment__articleContent {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* FIXME: There doesn't seem to be a way to add this text through Zoho Desk's UI. */
/* Pseudoelements should be a last resort. */
#ticketform_fields_container #field_attachmentIds {
  padding-bottom: 0.5rem;
}
#ticketform_fields_container #field_attachmentIds::before {
  display: block;
  content: "Please upload a screenshot of your issue.";
  margin-bottom: 0.5rem;
  margin-top: 1.5rem;
}