/* These are Trancore aligned css which will override shield css 
Please write component wise css below like input and button separately 
Do not write feature level css in this file please use pages.css
*/
/* global */
#layoutContentBody.layoutContentBody-new {
  max-width: unset;
}
/* ShieldInput  */
#shieldLibraryComponent .form-control__input input {
  border: 1px solid #858585;
  border-radius: 5px;
  line-height: 1.25em;
  padding: 8px;
  font-size: var(--body-font-size);
}

#shieldLibraryComponent .form-control__input label.is-focused,
.form-control__input label.is-value.is-focused {
  transform: none;
  font-size: 0.75rem;
  font-weight: 700;
  color: #4d4f53;
}

#shieldLibraryComponent input.is-value:focus {
  outline: none;
}

#shieldLibraryComponent .form-control__input input:focus {
  outline: none;
}

#shieldLibraryComponent .form-control__input .helper-text__container {
  padding-top: 0px;
}

#shieldLibraryComponent .form-control__input .helper-text__container .helper-text__text {
  margin: 0px;
}

#shieldLibraryComponent .is-focused .usb--basic-input {
  outline: 1.5px solid #61a0f7;
  cursor: crosshair !important;
}

/* Shield Buttons */
#shieldLibraryComponent .usb-button.button--default {
  font-weight: 700;
  line-height: 1.25em;
  padding: 0px 24px 0px 24px;
  margin: 20px 12px 20px 0px;
  height: 44px;
  max-height: unset;
  border-radius: 4px;
}
#shieldLibraryComponent .usb-button:focus:before,
#shieldLibraryComponent .usb-button:active:before,
#shieldLibraryComponent .usb-button:hover:before {
  height: calc(100% + 0.5rem);
  width: calc(100% + 0.5rem);
}
@media only screen and (min-width: 320px) and (max-width: 640px) {
  #shieldLibraryComponent .usb-button.button--default,
  #shieldLibraryComponent .form_control__select,
  #shieldLibraryComponent .form_control__select__container select {
    width: 100%;
  }
  #shieldLibraryComponent .usb--basic-input,
  #shieldLibraryComponent .label-top input {
    width: -webkit-fill-available;
  }
}

/*Shield arrow/basic links*/
#shieldLibraryComponent span.arrow a,
#shieldLibraryComponent span.arrow {
  padding: 4px 4px 4px 0px;
  line-height: 1.25em;
}
#shieldLibraryComponent span.arrow {
  display: inherit;
}
#shieldLibraryComponent a.basic,
#shieldLibraryComponent a.inline {
  font-weight: 400;
  line-height: 1.25em;
}
#shieldLibraryComponent .arrow .anchor-children,
.arrow > a .anchor-children {
  font-weight: 400;
}
#shieldLibraryComponent .arrow svg,
#shieldLibraryComponent .arrow svg:hover,
#shieldLibraryComponent .accordion-panel__header svg {
  fill: #555555;
}
#shieldLibraryComponent span.usb-link.arrow {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: -ms-fit-content;
}
#shieldLibraryComponent span.usb-link.basic {
  font-weight: 400;
}
#shieldLibraryComponent a.basic:hover,
#shieldLibraryComponent a.arrow:hover,
#shieldLibraryComponent a.subtle:hover,
#shieldLibraryComponent a.inline:hover,
#shieldLibraryComponent a.inline.dark:hover {
  text-decoration: underline;
}
/* Shield Radio Button and text label  */
#shieldLibraryComponent .form-control__radio .label__container {
  margin-top: 15px;
}
#shieldLibraryComponent .form-control__radio .label__text {
  font-size: var(--body-font-size);
  font-weight: 400;
  line-height: 1.25em;
}

#shieldLibraryComponent fieldset {
  border: none;
  padding: 0;
}

#shieldLibraryComponent .form-control__radio {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-left: -0.5rem;
  color: #555;
  font-family: var(--usb-circular, var(--usb-fallback));
  font-weight: 400;
  font-size: 1rem;
  /*line-height: 1.5; */
}

#shieldLibraryComponent .form-control__radio .input__container {
  display: inline-block;
  -ms-flex-preferred-size: 2.75rem;
  flex-basis: 2.75rem;
  position: relative;
}

#shieldLibraryComponent .form-control__radio .input__container input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.5rem;
  border: 1px solid #858585;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  outline: none;
}

#shieldLibraryComponent .form-control__radio .input__container input[type="radio"]:checked {
  border: 2px solid #0a41c5;
  background-color: #0a41c5;
  padding: 3px;
  background-clip: content-box;
}

#shieldLibraryComponent .form-control__radio .label__container {
  margin-top: 11px;
}

/* END - Shield Radio Button and text label  */
/* START - Shield SELECT Component and text label  */

/*CSS to display select as full width below 640px*/
#shieldLibraryComponent .form_control__select .form_control__select__container {
  border: none;
  outline: none;
}
@media only screen and (min-width: 641px) {
  #shieldLibraryComponent .form_control__select__container select,
  #shieldLibraryComponent .form_control__select {
    width: 300px !important;
  }
  #shieldLibraryComponent .usb--basic-input {
    width: 282px;
  }
}
#shieldLibraryComponent .form_control__select__container select {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.25em;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #858585;
  padding: 5px 10px 5px 10px;
}
#shieldLibraryComponent .form_control__select .labelText__container p.labelText__text,
#shieldLibraryComponent .form_control__select.error p.labelText__text {
  font-weight: 700 !important;
  margin-bottom: 0px;
  padding-bottom: 5px;
}

#shieldLibraryComponent .form_control__select__container .usb-icon {
  top: 47px;
  right: 5px;
}

#shieldLibraryComponent .form_control__select__container .usb-icon svg {
  height: 15px;
  width: 15px;
}

#shieldLibraryComponent .form_control__select.error .form_control__select__container select {
  border: 1px solid #be1324;
}

#shieldLibraryComponent .form_control__select.error .warning-icon svg {
  width: 1rem;
  margin-top: 7px;
}

#shieldLibraryComponent .form_control__select__container.focused select {
  outline: 1.5px solid #61a0f7;
  /* height: -webkit-fill-available; */
  /* border: none;s */
}

#shieldLibraryComponent .form_control__select .error-text__container .error-text__error {
  font-family: var(--usb-circular, var(--usb-fallback));
}
#shieldLibraryComponent .form-control__input .error-text__container .error-text__error {
  margin: 0;
}

/*Shield Error styles */
/* END - Shield SELECT Component and text label  */

/* Shield tooltip */

#shieldLibraryComponent .tooltip__content--right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0rem;
}

#shieldLibraryComponent .tooltip__content--dark {
  font-weight: normal;
}

/* Shield helpertext */
#shieldLibraryComponent .form-control__input .helper-text__container .helper-text__text {
  color: #6e6e6e;
  font-family: var(--usb-circular, var(--usb-fallback));
  font-weight: 400;
  font-size: var(--body-font-size);
  line-height: 1.5;
}

/* Shield Notification for page level error  */
#shieldLibraryComponent .usb-notification > .confirmation .single-notification--text {
  font-size: var(--body-font-size);
}

#shieldLibraryComponent .usb-notification > .confirmation #link-single-notification {
  padding-top: 2px;
}

#shieldLibraryComponent .usb-notification {
  margin-top: 20px;
}
#shieldLibraryComponent .usb-notification > .error {
  max-width: 500px;
  padding: 16px 16px 16px 16px;
  width: auto;
}
@media only screen and (max-width: 640px) {
  #shieldLibraryComponent .usb-notification > .error{
    max-width: 100% !important;
  }
  #shieldLibraryComponent .usb-notification.fundingPageError > .error{
    max-width: 100% !important;
    padding: 16px 16px 16px 16px !important;
  }
}
#shieldLibraryComponent .usb-notification > .error ul {
  margin: 0px;
  padding: 0px 0px 0px 16px;
}
#shieldLibraryComponent .usb-notification span.usb-link {
  text-decoration: underline;
}
#shieldLibraryComponent .usb-notification span.usb-link {
  color: #2c2c2c;
}

#shieldLibraryComponent .usb-notification span.usb-link:hover {
  color: #2c2c2c;
}

#shieldLibraryComponent .svg-icon.error {
  color: #be1324;
  fill: #be1324;
}
#shieldLibraryComponent .svg-icon.success {
  color: #0a853d;
  fill: #0a853d;
}

#shieldLibraryComponent .svg-icon.error svg{
  width: 1rem;
  height: 1rem;
}

#shieldLibraryComponent .usb-notification .icon svg {
  width: 28px;
  height: 28px;
}

#shieldLibraryComponent .usb-notification > .error .multiple-notification--text,
#shieldLibraryComponent .usb-notification > .error,
#shieldLibraryComponent .usb-notification > .error,
#shieldLibraryComponent .usb-notification > .error a {
  font-family: var(--usb-circular, var(--usb-fallback));
}

/* Shield error handling styles */

#shieldLibraryComponent .form-control__input .warning-icon {
  top: 0.2rem;
}

#shieldLibraryComponent .form-control__input.error .helper-text__container {
  display: block;
}

#shieldLibraryComponent .form-control__radio.is-focused .input__container:after {
  left: 0.15rem;
  top: 0.15rem;
}

body input[type="text"],
body #shieldLibraryComponent input[type="number"],
body #shieldLibraryComponent input[type="password"],
body #shieldLibraryComponent input[type="tel"],
body input[type="email"],
body select {
  height: 1.8em;
}

@media only screen and (max-width: 1024px) {
  body input[type="text"],
  body #shieldLibraryComponent input[type="number"],
  body #shieldLibraryComponent input[type="password"],
  body #shieldLibraryComponent input[type="tel"],
  body input[type="email"],
  body select {
    height: 1.8em;
  }
}

#shieldLibraryComponent .form-control__input.error input {
  border: 1px solid #be1324;
}

#shieldLibraryComponent .usb-notification > .error ul.pageLevelErrorsList {
  list-style-type: none;
  padding: 0px;
}

#shieldLibraryComponent .form-control__radio .input__container input[type="radio"].error:not(:checked) {
  border: 1px solid #be1324;
  background-color: #faedef;
}
/*Shield Accordion CSS styles*/
#shieldLibraryComponent .accordion-panel__header-title,
#shieldLibraryComponent .accordion-panel__content {
  font-size: var(--body-font-size);
}
#shieldLibraryComponent .accordion-panel__header {
  padding: 12px 8px 12px 0px;
  -webkit-text-size-adjust: 100%;
}
#shieldLibraryComponent .usb-accordion .accordion-panel--expanded .accordion-panel__content,
.single-panel__content {
  padding: 0px 8px 24px 32px;
  -webkit-text-size-adjust: 100%;
}
#shieldLibraryComponent .single-panel__content {
  line-height: 1.5;
}
#shieldLibraryComponent .usb--basic-input {
  border: 1px solid #858585;
  border-radius: 5px;
  line-height: 1.25em;
  padding: 8px;
  font-size: var(--body-font-size);
}

#shieldLibraryComponent .usb--wrapper .usb--floating-label,
#shieldLibraryComponent .label-top label {
  position: static;
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #4d4f53;
  margin-bottom: 0;
  transform: none;
}

#shieldLibraryComponent .label-top label {
  margin-bottom: 0.5rem;
}

#shieldLibraryComponent .usb--wrapper.is-focused:after {
  border: none;
}

#shieldLibraryComponent .usb--wrapper button.show-hide__button {
  font-size: var(--body-font-size);
  color: #444444;
  z-index: 5;
}

/* Shield confirmation Notification styles */
#shieldLibraryComponent .confirmation {
  width: auto;
}

@media only screen and (max-width: 320px) {
  #shieldLibraryComponent .tooltipDirection .tooltip__content--right {
    top: 1.5rem;
    left: 50%;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
  }
}

/*****************Message Granularity Styles******************/
.mgBanner {
  margin-bottom: 20px;
}

@media only screen and (max-width: 640px) {
  .mgBanner {
    padding: 10px;
  }
}

@media all and (-ms-high-contrast: active), all and (-ms-high-contrast: none) {
  .usb-notification.mgBanner .icon {
    width: auto;
  }
}

/**************************************************************/
/**************************************************************/
.usb-notification > .error a,
.usb-notification > .error a:hover,
#shieldLibraryComponent .usb-notification > .error a,
#shieldLibraryComponent .usb-notification > .error a:hover {
  text-decoration: none;
}

#shieldLibraryComponent hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0 0 0;
  padding: 0;
}
#shieldLibraryComponent .form-control__checkbox {
  line-height: 1.25em;
  font-size: 0.75rem;
  position: static;
  z-index: auto;
  margin: 0;
}
#shieldLibraryComponent .form-control__checkbox input[type="checkbox"],
#shieldLibraryComponent .form-control__checkbox-label svg {
  position: static;
  z-index: auto;
}
#shieldLibraryComponent .checkbox-label-text {
  margin-top: 4px;
}
#shieldLibraryComponent .usb-notification {
  margin-top: 0px;
}
.contactDetailsPrompt #shieldLibraryComponent .form-control__input input:focus {
  outline: 1.5px solid #61a0f7;
}

#mgErrorPageLevel.usb-notification > .error {
  max-width: none;
}

@media only screen and (min-width: 320px) and (max-width: 640px) {
  .modal-btn {
    padding-left: 30px !important;
  }
}