/*******************/
/*** 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,
c-shield-questionnaire-title-picker .slds-form-element__label {
  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 */
}

/* update left padding for title picker component */
c-shield-questionnaire-title-picker lightning-input input{
  padding-left: var(--slds-c-input-spacing-inlinestart, var(--slds-c-input-spacing-horizontal-start, var(--sds-c-input-spacing-horizontal-start, var(--lwc-spacingSmall, 0.75rem)))) !important;
}


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;}
}