/*
 * This are the propelus styles, a back up of this was created in the staticResources folder content
 * under propelusStyle Name
 *  because sometimes the site didn't get the right style
 * https: //developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/brand_hooks_map.htm
 */

:root {
  --dxp-c-background-color: var(--dxp-g-neutral-contrast-3, #ffffff);
  --sds-c-input-color-background: var(--dxp-c-background-color);

  /*Forms*/
  --input-color-background: var(--dxp-c-background-color);
  /* rgb(246, 253, 250) */
  --dxp-s-button-color-hover: #8af49b;
  /* rgb(187, 249, 220);*/
  --dxp-s-button-radius-border: 100px;
  /* Tabs content*/
  --slds-c-card-color-background: var(--dxp-c-background-color);
  --dxp-c-text-block-background-color: var(--dxp-c-background-color);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.propelus-form {
  background-color: var(--dxp-c-background-color);
  border-radius: 10px;
  box-shadow: 8px 7px 8px 0 rgba(24, 30, 75, 0.2);
}

/*
  Matches the color of the form even on error.
  .slds-has-error .slds-input {
    background-color: var(--input-color-background);
  }
*/

.propelus-form input {
  background-color: var(--dxp-c-background-color);
  padding: var(--dxp-g-spacing-xsmall);
}

.propelus-form lightning-button {
  width: 100%;
}

.propelus-form button {
  margin: var(--dxp-g-spacing-medium);
  padding: var(--dxp-g-spacing-xsmall) 0;
  width: 100%;
}

.batches-content button {
  margin: 10px 0px 10px 0px;
  width: 100%;
}

.propelus-form .dxp-active-tab-text-style {
  font-weight: bold;
}

.propelus-form .dxp-tab-text-style {
  font-weight: var(--dxp-s-form-element-text-font-weight, normal);
}

/*
  Use this if you want an uniform background color for the entire page
  and remove the style below
    .background-image-overlay {
      background-color: rgb(246, 253, 250) !important;
      background-color: var(--dxp-c-background-color, #FFFFFF) !important;
    }
*/

/*
  Remove this if you want an uniform background color for the entire page
*/
.community_byo-scoped-header-and-footer__footer-content,
.community_byo-scoped-header-and-footer__header-content {
  background-color: var(--dxp-c-background-color) !important;
}

/*
*
*  Header footer trick to get at the bottom the footer
*  And optionally sticky header
*/
.community_byo-scoped-header-and-footer,
community_byo-scoped-header-and-footer {
  display: flex;
  flex-flow: column;
  min-height: 100%;
}

header {
  position: sticky;
  top: 0;
  z-index: 100001;
}

main{
  background-color: rgb(246, 253, 250);
}

.modal button {
  margin: 0 0.5rem;
  padding: 1em 2.5rem;
  border-radius: 0.5rem;
  width: 100px;
}

lightning-modal-base {
  z-index: 9052 !important;
  outline: none;
}

*{
  outline: none;
}

/* last line */