/* this is bad 
  the rich text component sets the link color inline
  and it set it black. so override it and take the option to set the color
  works for me, but don't know if it works for the editor
*/

.page .forceCommunityRichText a,
.page .forceCommunityRichText a:hover {
  color: var(--color-forest) !important;
  text-decoration: none !important;
}

.page .forceCommunityRichText a:focus {
  color: var(--color-sun) im !important;
  text-decoration: none !important;
  outline: none;
}

.page .forceCommunityRichText a:focus:before {
  background-color: var(--color-sun);
}

.page .uiOutputCheckbox img.unchecked {
  background-image: none;
  width: 26px;
  height:  26px;
  border: solid 2px var(--color-forest);
  display: inline-block;
  box-sizing: border-box;

}
.page .uiOutputCheckbox img.checked {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  border: solid 2px var(--color-forest);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCI+DQogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgc3R5bGU9ImZpbGw6IzA2NDM0OTsiPjwvcmVjdD4NCiAgPHBhdGggZD0iTTIxLjcxLDQuMjlhMSwxLDAsMCwwLTEuNDIsMEw3LDE3LjU5bC0zLjI5LTMuM2ExLDEsMCwwLDAtMS40MiwxLjQybDQsNGExLDEsMCwwLDAsMS40MiwwbDE0LTE0YTEsMSwwLDAsMCwwLTEuNDJaIiBzdHlsZT0iZmlsbDojNERGMEI0O2ZpbGwtcnVsZTpldmVub2RkIj4NCiAgPC9wYXRoPg0KPC9zdmc+);
}




/* order list view und hopefully all other list view pages too */
.page .forceCommunityRecordListStandard .forceRecordLayout  {
  border: none;
}

.page .forceCommunityRecordListStandard .forceBaseListView {
  font-size: 16px;
  line-height: 20px;
}


.page .forceCommunityRecordListStandard .forceBaseListView thead th {
  background-color: var(--color-forest);
  color: var(--color-cloud);
  border: none;
}

.page .forceCommunityRecordListStandard .forceBaseListView tbody td { 
  border-bottom: solid 1px var(--color-forest);
  padding: 10px 8px;
}
.page .slds-form-element_horizontal .slds-form-element__label {
  margin-left:10px !important;
  color: rgb(127,153,156) !important;  
}
.page .slds-form-element_stacked .slds-form-element__label,
.page .forcePageBlockItemView .slds-form-element .slds-form-element__control{
  margin-left:0px !important;
  color: rgb(127,153,156) !important;  
}

.page .forceBaseListView tbody tr:hover td, 
.page .forceBaseListView tbody tr:hover th, 
.page .forceBaseListView table.resizable-cols:not(.resizing) thead th:hover {
  background-color: transparent;
}

.page .forceCommunityRecordListStandard .forceBaseListView a::before,
.page .forceCommunityRecordListStandard .forceBaseListView a::after,
.page .forceCommunityRecordListStandard .forceBaseListView a::before:hover,
.page .forceCommunityRecordListStandard .forceBaseListView a::after:hover,
.page .forceCommunityRecordListStandard .forceBaseListView a::before:focus,
.page .forceCommunityRecordListStandard .forceBaseListView a::after:focus {
  display: none;
  content: none;
}

.page .forceCommunityRecordListStandard .forceBaseListView a {
  transition: 200ms linear color;
}

.page .forceCommunityRecordListStandard .forceBaseListView a:hover,
.page .forceCommunityRecordListStandard .forceBaseListView a:focus {
  color: var(--color-sun);
}


/* buttons */
.page .slds-button {
  --lwc-buttonBorderRadius: 24px;
  --sds-c-button-line-height: 28px;
  --sds-c-card-footer-font-size: 16px;
  font-weight: bold;
  font-size: 16px;
  padding: 5px 20px;
  --sds-c-button-spacing-block-start: 5px;
  --sds-c-button-spacing-inline-end: 20px;
  --sds-c-button-spacing-block-end: 5px;
  --sds-c-button-spacing-inline-start: 20px;
}

.page .slds-button_neutral,
.page .slds-button--neutral {
  --lwc-colorBorderButtonDefault: var(--color-forest);
  --lwc-borderWidthThin: 2px;
  --sds-c-button-text-color: var(--color-forest);
  transition: linear 200ms all;

  --lwc-colorBackgroundButtonDefaultHover: var(--color-forest);
  --sds-c-button-neutral-color-border-hover: var(--color-forest);
  --sds-c-button-text-color-hover: var(--color-cloud);
  border-color: var(--color-forest);
}

.page .slds-button_neutral:focus-within,
.page .slds-button--neutral:focus-within {
  color: var(--color-cloud) !important;
}

.page .uiButton--brand,
.page .slds-button_brand, 
.page .slds-button--brand {
  --lwc-brandAccessible: var(--color-sun);
  --sds-c-button-brand-color-border: var(--color-sun);
  --sds-c-button-brand-text-color: var(--color-cloud);
  
  /* Bug. brand button hover gets --neutral border...*/
  --sds-c-button-neutral-color-border-hover: var(--color-su);
}

.page lightning-helptext .slds-button:hover,
.page lightning-helptext .slds-button:focus {
  color: var(--color-flux);
  box-shadow: none;
}

/* forms */

.page .slds-form-element_readonly {
  border-bottom: none;
}

.page .slds-form-element_readonly .slds-form-element__control {
  padding-top: 0;
  font-size: 16px;
  line-height: 24px;
}

.page .forcePageBlockItemView .slds-form-element {
  /* important to beat the unneccessarily complex sf selector */
  padding-bottom: 8px !important;
}

.page .forcePageBlockItemView .slds-form-element .slds-button_icon {
  --lwc-colorTextButtonInverse: var(--color-grayshade-3);
  --lwc-brandTextLink: var(--color-flux);
}

.page .forcePageBlockSectionEdit .forcePageBlockItemView .slds-form-element__label,
.page .forceInlineEdit .uiInput .form-element__label,
.page .slds-form-element__label {
  font-size:16px !important;
  color: var(--lwc-inputStaticColor,#333) !important;
  padding: 0;
  line-height: 20px;
}
.page .slds-radio .slds-form-element__label {
  font-size:14px !important;
  color: rgb(6,67,73) !important;  
  padding: 0;
  line-height: 20px;
}


.page .forceInlineEdit .uiInput--compound .uiLegend,
.page .slds-form-element__legend {
  font-size: 20px;
  line-height: 28px;
  font-weight: bold;
  padding-top: 18px;
  color: var(--color-forest);
}

.page .slds-select_container {
  background: var(--color-grayshade-1);
}


.page .slds-checkbox {
  display: flex;
}

.page .slds-checkbox .slds-checkbox_faux, 
.page .slds-checkbox .slds-checkbox--faux {
  border: solid 2px var(--color-forest);
  border-radius: 0;
  width: 24px;
  height: 24px;
  transition: linear all 200ms;
  float:left;
}

.page .slds-checkbox [type="checkbox"]:focus + .slds-checkbox__label .slds-checkbox_faux {
  border-color: var(--color-flux);
  box-shadow: none;
}

.page .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux,
.page .slds-checkbox input:checked + label .slds-checkbox_faux {
  background-color: var(--color-forest);
  border-color: var(--color-forest);
}

.page .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux::after {
  border-bottom-color: var(--color-flux);
  border-left-color: var(--color-flux);
  width: 13px;
  height: 6px;
}


.page .uiInput + .uiInput,
.page .slds-form-element__row + .slds-form-element__row {
  padding-top: 8px;
}

.page .forceInlineEdit .slds-form-element_readonly .slds-form-element__static,
.page .uiPopupTrigger .select,
.page .uiInput input,
.page .slds-textarea,
.page .uiInput--textarea,
.page .slds-select_container .slds-select,
.page [role="combobox"] input[readonly], 
.page input[readonly][role="combobox"],
.page .slds-input {
  background: var(--color-grayshade-1);
  padding: 12px 36px 12px 16px;
  border-radius: 5px;
  transition: linear 200ms all;
  border: none;
  border-bottom: solid 2px var(--color-grayshade-1);
  --lwc-colorBackgroundInputActive: var(--color-grayshade-1);
  font-size: 16px;
  line-height: 22px;
}



.page .slds-combobox__form-element.slds-input-has-icon_left-right .slds-combobox__input-entity-icon {
  left: 12px;
}
.page .slds-combobox__form-element.slds-input-has-icon_left-right input {
  padding-left: 38px;
}

.page .slds-form-element__control.slds-input-has-icon_right .slds-input__icon_right {
  width: 30px;
  top: 14px;
}

.page .slds-form-element__control.slds-input-has-icon_right .slds-input__icon_right .slds-button_icon-bare{
  padding: 7px 6px;
  color: var(--color-forest);
}

.page .slds-form-element__control.slds-input-has-icon_right .slds-input__icon_right .slds-button_icon-bare:focus {
  box-shadow: none;
  color: var(--color-flux);
}

.page lightning-datepicker h2 {
  font-size: 16px;
}

/* for lead record form */

@media (max-width: 600px) {
  .page .slds-form .slds-grid {
    display: block;
  }
}

@media (min-width: 48em) {
  .page .slds-form-element_horizontal .slds-form-element__control, 
  .page .slds-form_horizontal .slds-form-element .slds-form-element__control, 
  .page .slds-form_stacked .slds-form-element_horizontal .slds-form-element__control {
      padding-left: 12px;
  }
}


.page .slds-form .slds-form-element {
  display: flex;
  flex-direction: column;
}

.page .slds-form .slds-form-element .slds-form-element__control {
  display: flex;
  flex-wrap: wrap;
}

.page .slds-form .slds-form-element .slds-form-element__static {
  width: calc(100% - 60px);
  border-bottom: none;
}

.page .slds-form .slds-form-element .slds-form-element__label {
  max-width: 100%;
  padding-left: 0;
  padding-bottom: 3px;
  font-size: 14px;
  line-height: 18px;
  color: var(--color-grayshade-3);
  float: none;
  /* reverse the label and the required sign*/
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

@media (min-width: 48em) {
  .page .slds-form .slds-form-element .slds-form-element__label {
    padding-left: 12px;
  }
}

.page .slds-form .slds-form-element__legend {
  /* reverse the label and the required sign*/
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.page .slds-combobox_container {
  width: 100%;
}
.page .slds-form-element__group {
  width: 100%;
}
.page .slds-dueling-list {
  width: 100%;
}


@media print {
 .page textarea {
   border: none;
   background: transparent;
   resize: none;
 }

 .page select {
    border: none;
 }
}



.page .forceInlineEdit .slds-form-element_readonly .slds-form-element__static {
  background-color: transparent;
  border: solid 3px var(--inputBorderReadonly);
  min-height: 48px;
}

/* the selects in lead edit form */
.page .uiPopupTrigger .select:before,
.page .uiPopupTrigger .select:after {
  content: none;
}

/* variant 2 for selects */
.page .slds-select_container .slds-select {
  padding: 12px 16px;
}
/* variant 3 for selects */

.page .slds-select_container .slds-select[multiple] {
  padding: 12px 0;
}

/* variant 4 for selects */
.page .slds-listbox {
  background-color: var(--color-grayshade-1);
  font-size: 16px;
}

.page .slds-listbox .slds-listbox__option_plain, 
.page .slds-listbox .slds-listbox__option--plain { 
  padding: 3px 16px;
}

.page .slds-listbox .slds-listbox__option_plain:hover, 
.page .slds-listbox .slds-listbox__option--plain:hover,
.page .slds-listbox .slds-listbox__option_plain:focus, 
.page .slds-listbox .slds-listbox__option--plain:focus {
  color: var(--color-darkflux);
}

.page .slds-dueling-list__options [aria-selected="true"], 
.page .slds-picklist__options [aria-selected="true"],
.page .slds-listbox .slds-listbox__option_plain[aria-checked=true], 
.page .slds-listbox .slds-listbox__option--plain[aria-checked=true] {
  background-color: var(--color-flux);
  color: var(--color-darkforest) !important;
}

.page .slds-dueling-list__options {
  padding: 0;
}

.page .uiPopupTrigger .select:hover,
.page .uiPopupTrigger .select:focus,
.page .uiInput input:hover,
.page .uiInput input:focus,
.page .slds-textarea:hover,
.page .slds-textarea:focus,
.page .uiInput--textarea:hover,
.page .uiInput--textarea:focus,
.page .slds-select_container .slds-select:hover,
.page .slds-select_container .slds-select:focus,
.page input[readonly][role="combobox"]:hover,
.page input[readonly][role="combobox"]:focus,
.page .slds-input:hover,
.page .slds-input:focus {
  border: none;
  border-bottom: solid 2px var(--color-flux);
  box-shadow: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}


.page .uiPopupTrigger .select,
.page .slds-select {
  min-height: 48px;
}
.page .slds-select option,
.page select option {
  font-family: "Averta",sans-serif ;
  padding: 8px 16px;
}

.page .slds-select option:hover {
  color: var(--color-darkflux);
}

.page .slds-has-error .slds-input {
  box-shadow: none;
}

.page .slds-has-error .slds-input,
.page .slds-has-error .slds-dropdown-trigger .slds-input,
.page .slds-has-error .slds-combobox .slds-input {
  border: none;
  border-bottom: solid 2px var(--color-blaze);
  box-shadow: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.page .slds-input__icon-group_right {
  right: 12px;
}

.page .slds-input__icon-group_right .slds-input__icon_right, 
.page .slds-input__icon-group_right .slds-input__icon--right {
  --lwc-squareIconUtilitySmall: 22px;
}

.page .slds-input__icon-group_right .slds-input__spinner {
  right: 30px;
}

.page .slds-form-element__help {
  line-height: 20px;
  margin-top: 3px;
}

.page .slds-has-error .slds-form-element__help {
  color: var(--color-blaze);
}


/* the edit button for the lead as part of the actions buttons. Thers is a a inside a .slds-button
// how do they think the slds-button gets notified by hover and focus...within
 */
 .page .oneActionsRibbon li.slds-button--neutral {
  border-color: var(--color-forest);
}
.page .oneActionsRibbon li.slds-button--neutral > a {
  text-decoration: none;
  color: var(--color-forest);
  font-size: 14px;
  /* what a uglyness. on other places the a or something inside the a gets the .slds-button class
  and so the slds-button has its padding. but here is the a inside of the visual layout button
  so the visual hover states  to something in areas where no link is.
  I make the a tag bigger here and override the outside padding */
  margin-top: -10px;
  margin-bottom: -10px;
  padding-top: 10px;
  padding-bottom: 10px;

}

.page .oneActionsRibbon li.slds-button--neutral:hover > a,
.page .oneActionsRibbon li.slds-button--neutral > a:hover,
.page .oneActionsRibbon li.slds-button--neutral > a:focus {
  box-shadow: none;
  color: var(--color-cloud);
}

/* equal to swNoLine this are the overrides for sfdx component */
.page .slds-text-link_reset:before,
.page .slds-text-link_reset:after,
.page .forceActionLink:before,
.page .forceActionLink:after {
  content: none;
}


/* equal to swNoLine this are the overrides for sfdx component */
.page .slds-text-link_reset:before,
.page .slds-text-link_reset:after,
.page .forceActionLink:before,
.page .forceActionLink:after {
  content: none;
}