/*******************/
/*** SHIELD FORM ***/
/*******************/

/* Common spacing */

c-shield-form .page .page-body>slot>div>div>lightning-input,
c-shield-form .page .page-body>slot>div>div>lightning-combobox,
c-shield-form .page .page-body>slot>div>div>lightning-textarea,
c-shield-form .page .page-body>slot>div>div>c-shield-lookup-input {
  padding-bottom: 18px !important;
}

c-shield-form input.slds-input {
  min-height: 44px;
}

/* Labels */
c-shield-form lightning-record-picker .slds-form-element__label,
c-shield-form lightning-input .slds-form-element__label,
c-shield-form lightning-lookup .slds-form-element__label,
c-shield-form lightning-textarea .slds-form-element__label,
c-shield-form lightning-combobox .slds-form-element__label,
c-shield-form lightning-record-edit-form .slds-form-element__label,
c-shield-form lightning-checkbox-group legend.slds-form-element__label,
c-shield-form lightning-radio-group legend.slds-form-element__label,
c-shield-form .fileInputLabel {
  padding-top: 0 !important;
  color: var(--shield-palette-detail-text, #6E6F72);
  font-weight: 600;
  line-height: 135%;
  font-size: 1em;
  /* letter-spacing: .05em;
  text-transform: uppercase; */
}

/* Inputs */

c-shield-form lightning-input input,
c-shield-form lightning-lookup input,
c-shield-form textarea,
c-shield-form lightning-combobox button,
c-shield-form input:-webkit-autofill::first-line {
  font-size: 18px !important;
  line-height: 20px !important;
  color: #121212 !important;
  border: 1px solid #e4e5e9 !important;
  border-radius: 4px !important;
  padding: 12px 12px 10px !important;
  box-shadow: none !important;
  /* focuses */
}

c-shield-form textarea {
  min-height: 100px !important;
}

c-shield-form lightning-lookup input.slds-combobox__input-value {
  padding-left: 2.25rem !important;
}

c-shield-form lightning-lookup .slds-combobox__form-element>lightning-icon {
  left: 10px !important;
}


/* Checks & Rads */

c-shield-form lightning-checkbox-group,
c-shield-form lightning-radio-group {
  padding-bottom: 20px;
}

c-shield-form lightning-checkbox-group:last-of-type,
c-shield-form lightning-radio-group:last-of-type {
  padding-bottom: 0;
  /*background:rgb(255 0 0 / 20%);*/
}

c-shield-form lightning-checkbox-group .slds-checkbox>label,
c-shield-form lightning-radio-group .slds-radio>label {
  display: flex;
  /* fix for wrapping texts */
}

c-shield-form lightning-checkbox-group .slds-checkbox__label .slds-form-element__label,
c-shield-form lightning-radio-group .slds-radio__label .slds-form-element__label {
  font-size: 16px !important;
  line-height: 20px !important;
  color: #121212 !important;
  vertical-align: unset !important;
  padding-top: 0 !important;
}

c-shield-form lightning-checkbox-group .slds-checkbox__label .slds-checkbox_faux,
c-shield-form lightning-radio-group .slds-radio__label .slds-radio_faux {
  border: 1px solid #e4e5e9 !important;
  box-shadow: none !important;
}

c-shield-form lightning-checkbox-group input:focus+.slds-checkbox__label .slds-checkbox_faux,
c-shield-form lightning-radio-group input:focus+.slds-radio__label .slds-radio_faux {
  outline: 1px solid white;
  box-shadow: 0 0 0 3px var(--shield-palette-primary-base, #2D669B) !important;
}

c-shield-form lightning-checkbox-group .slds-checkbox__label .slds-checkbox_faux:after {
  border-bottom-color: rgb(45, 102, 155) !important;
  border-left-color: rgb(45, 102, 155) !important;
}

c-shield-form lightning-radio-group .slds-radio__label .slds-radio_faux:after {
  background-color: rgb(45, 102, 155) !important;
}

c-shield-form lightning-checkbox-group fieldset>div,
c-shield-form lightning-checkbox-group fieldset>div>span,
c-shield-form lightning-radio-group fieldset>div,
c-shield-form lightning-radio-group fieldset>div>span {
  padding-top: 3px;
}

/* Extra focuses */

c-shield-form lightning-combobox button {
  box-shadow: none !important;
}

/* File upload */

c-shield-form .filevalues {
  flex-basis: 250px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-right: auto;
}

c-shield-form .file>slot>lightning-layout-item:not(:first-of-type) {
  padding-top: 22px !important;
}

c-shield-form .file>slot>lightning-layout-item:nth-last-of-type(4)~ :last-child {
  padding-left: 0 !important;
}

@media screen and (min-width:768px) and (max-width: 850px) {
  c-shield-form .file>slot>lightning-layout-item:nth-last-of-type(4) {
    flex-basis: 300px;
  }

  c-shield-form .file>slot>lightning-layout-item:nth-last-of-type(4)~lightning-layout-item:nth-child(2) {
    flex-basis: calc(100% - 300px);
  }
}

@media screen and (min-width:600px) and (max-width: 767px) {
  c-shield-form .file>slot>lightning-layout-item:nth-last-of-type(4) {
    flex-basis: 185px;
  }

  c-shield-form .file>slot>lightning-layout-item:nth-last-of-type(4)~lightning-layout-item:nth-child(2) {
    flex-basis: calc(100% - 185px);
  }
}

@media screen and (max-width:599px) {

  c-shield-form .file>slot>lightning-layout-item:nth-last-of-type(4),
  c-shield-form .file>slot>lightning-layout-item:nth-last-of-type(4)~lightning-layout-item:nth-child(2) {
    flex-basis: 100%;
  }
}

/* Combox */

c-shield-form lightning-combobox lightning-base-combobox-item {
  font-size: 13px;
}

c-shield-form lightning-combobox .slds-listbox {
  max-height: 160px;
}

/* Errors */

c-shield-form lightning-input.slds-has-error input,
c-shield-form lightning-textarea.slds-has-error textarea,
c-shield-form lightning-input lightning-datepicker.slds-has-error input,
c-shield-form lightning-input lightning-datetimepicker.slds-has-error input,
c-shield-form lightning-lookup.slds-has-error input,
c-shield-form lightning-combobox.slds-has-error button,
c-shield-form lightning-input.slds-has-error .slds-form-element__help,
c-shield-form lightning-input lightning-datepicker.slds-has-error .slds-form-element__help,
c-shield-form lightning-combobox.slds-has-error .slds-form-element__help,
c-shield-form lightning-checkbox-group fieldset .slds-form-element__help,
c-shield-form lightning-radio-group fieldset .slds-form-element__help,
c-shield-form lightning-textarea .slds-form-element__help {
  box-shadow: none !important;
  border-color: var(--slds-g-color-error-base-40, var(--lwc-colorTextError, rgb(234, 0, 30))) !important;
  font-size: 0.9em;
}

/* Mob Lookup */

c-shield-form lightning-lookup-mobile .slds-pill {
  padding: 10px;
}

/* Picklist - seems to be mob only (e.g. Serv Prov Request) */

@media screen and (max-width:795px) {
  c-shield-form lightning-picklist select {
    line-height: 44px !important;
    height: 44px !important;
  }

  c-shield-form lightning-picklist .slds-select_container:before {
    top: calc(50% - 8px);
  }

  c-shield-form lightning-picklist .slds-select_container:after {
    bottom: calc(50% - 8px);
  }
}

/* Input 'placeholder texts' */

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  c-shield-form lightning-lookup input::placeholder {
    color: #6e6f72 !important;
  }

  /* Windows */
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  c-shield-form lightning-lookup input::-webkit-input-placeholder {
    color: #6e6f72 !important;
  }

  /*macOS */
}

@-moz-document url-prefix() {
  c-shield-form lightning-lookup input:-moz-placeholder {
    color: #6e6f72 !important;
  }

  /* Firefox */
}

c-shield-form lightning-lookup input::placeholder {
  color: #6e6f72 !important;
}

/* other browsers */

c-shield-form lightning-combobox .slds-combobox__input:not(.slds-combobox__input-value) {
  color: #6e6f72 !important;
}

/* Buttons */

c-shield-form .page-footer lightning-layout-item {
  padding-left: 10px;
}

/* c-shield-form .page-footer button {text-transform:uppercase;font-size:13px;line-height:36px;} */
/* c-shield-form .page-footer button:focus {box-shadow:none;} */
/* c-shield-form .page-footer .prev-btn button.slds-button_neutral {border-color:rgb(228,229,233 );} */
c-shield-form .page-footer .prev-btn button.slds-button_neutral:before,
c-shield-form .page-footer button.slds-button_brand:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
}

lightning-button[variant="base"] button.slds-button {
  line-height: inherit;
}

c-shield-form .page-footer .prev-btn button.slds-button_neutral:before {
  background-image: url("/shield/s/sfsites/c/resource/osfShieldCommunityImgs/icon-prev-arrow.png"), url("/sfsites/c/resource/osfShieldCommunityImgs/icon-prev-arrow.png"), url("/resource/osfShieldCommunityImgs/icon-prev-arrow.png");
  margin-right: 6px;
  margin-left: -4px;
}

c-shield-form .page-footer button.slds-button_brand:after {
  background-image: url("/shield/s/sfsites/c/resource/osfShieldCommunityImgs/icon-next-arrow.png"), url("/sfsites/c/resource/osfShieldCommunityImgs/icon-next-arrow.png"), url("/resource/osfShieldCommunityImgs/icon-next-arrow.png");
  margin-left: 6px;
  margin-right: -4px;
}

c-shield-form .page-footer .submit button.slds-button_brand:after {
  display: none;
}

@media screen and (max-width: 599px) {
  c-shield-form .page-footer {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  c-shield-form .page-footer lightning-layout {
    flex-direction: column;
  }

  c-shield-form .page-footer lightning-layout-item {
    padding-left: 0;
    width: 100%;
  }

  c-shield-form .page-footer lightning-layout-item:not(:last-of-type) {
    margin-bottom: 15px;
  }

  c-shield-form .page-footer lightning-layout-item button {
    width: 100%;
  }
}

/* Service Provider Specific: Title */

c-shield-form .title-wrapper lightning-record-edit-form lightning-input-field {
  margin-bottom: 20px !important;
  padding-bottom: 0 !important;
}

/***************************/
/*** SHIELD FORM LWC CSS ***/
/***************************/

c-shield-form .form {
  max-width: 1200px;
  margin: 0 auto;
}

c-shield-form .page {
  border: 1px solid #e4e5e9;
  border-radius: 8px;
  box-shadow: 0px 4px 5px -1px rgba(0, 0, 0, 0.1);
  /* removed mix width from form to make it the same width as the component header */
  /* max-width: 782px; */
  margin: 0 auto;
}

c-shield-form .page-header {
  margin: 0;
  padding: 14px var(--lwc-varSpacingLarge, 1.5rem) 11px;
  background: #f7f8f9;
  border-radius: 8px 8px 0px 0px;
  border-bottom: 1px solid #e4e5e9;
  color: var(--shield-palette-text, #121212);
  /* font-size: 12px; */
  font-weight: 800;
  line-height: 100%;
  letter-spacing: .05em;
  text-transform: uppercase;
}

c-shield-form .page-footer {
  border-top: 1px solid #e4e5e9;
}

c-shield-form c-shield-form-page,
c-shield-form c-shield-progress-bar {
  display: block;
}

c-shield-form c-shield-progress-bar ul li span {
  font-size: 1.2em;
  ;
}

li.complete[c-shieldProgressBar_shieldProgressBar],
li.complete[c-shieldProgressBar_shieldProgressBar]:before,
li.complete[c-shieldProgressBar_shieldProgressBar]:after,
li.active[c-shieldProgressBar_shieldProgressBar],
li.active[c-shieldProgressBar_shieldProgressBar]:before,
li.active[c-shieldProgressBar_shieldProgressBar]:after {
  background-color: var(--lwc-colorBorderBrand, #2E659B) !important;
  color: var(--lwc-colorTextDefault, #000) !important;
}

c-shield-form .lead-content h2,
c-shield-form .lead-content p {
  padding-bottom: 25px;
}

c-shield-form .lead-content :nth-last-child(2) {
  padding-bottom: 8px;
}

c-shield-form h2 {
  color: #8f7000;
  line-height: 37.4px;
  font-size: 34px;
  font-weight: 600;
  text-transform: uppercase;
}

c-shield-form .page-body .page-body {
  padding: 0;
}

@media screen and (max-width: 767px) {
  c-shield-form .page-header {
    padding-left: 15px;
    padding-right: 15px;
  }

  c-shield-form .page-body {
    padding: 15px;
  }

  c-shield-form h2 {
    font-size: 26px;
    line-height: 29px;
  }
}

/********************************/
/*** SHIELD FORM PAGE LWC CSS ***/
/********************************/

c-shield-form-page {
  min-height: 200px;
}

c-shield-form-page .sections {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

c-shield-form-page lightning-spinner {
  --dxp-c-spinner-color-background: rgba(255, 255, 255, 0.75);
}

/***********************************/
/*** SHIELD FORM SECTION LWC CSS ***/
/***********************************/

c-shield-form-section .section {
  border: 1px solid #E4E5E9;
  border-radius: 8px;
}

c-shield-form-section .section-header {
  padding: 16px var(--lwc-varSpacingLarge, 1.5rem) 15px;
  border-bottom: 1px solid #E4E5E9;
  color: var(--shield-palette-text, #121212);
  font-size: 12px;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: .05em;
  text-transform: uppercase;
}

@media screen and (max-width: 767px) {
  c-shield-form-section .section-header {
    padding-left: 15px;
    padding-right: 15px;
  }

  c-shield-form-section .section-body {
    padding: 15px;
  }
}

/** Error symbol spacing **/

c-shield-form lightning-input.slds-has-error .slds-input {
  padding-left: 1.75rem !important;
}

/** End error symbol spacing **/