@font-face {
    font-family: 'Gotham Rounded';
    src: url('/sfsites/c/resource/registerresource/font/GothamRoundedBold.woff') format('woff');
}

:root {
    --background-color-1: #FFF;
    --background-color-2: #F7F8F9;
    --border-color-1: #939393;
    --brand-primary-1: #152033;
    --brand-primary-1-rgb: 21, 32, 51;
    --brand-primary-2: #B4EC51;
    --brand-primary-3: #E11E7F;
    --error-background-color-1: #E1BEBE;
    --error-color-1: #AD0000;
    --error-icon-color-1: #000;
    --header-font-family: 'Gotham Rounded';
    --placeholder-color-1: #595959;
    --text-color-contrast: #FFF;
}

/* GENERAL STYLING */
h1 {
    font-size: var(--dxp-s-text-heading-extra-large-font-size, 0.875rem);
    font-family: var(--dxp-s-text-heading-extra-large-font-family, --header-font-family);
    font-weight: var(--dxp-s-text-heading-extra-large-font-weight, 400);
    font-style: var(--dxp-s-text-heading-extra-large-font-style, normal);
    color: var(--dxp-s-text-heading-extra-large-color, --brand-primary-1);
    line-height: var(--dxp-s-text-heading-extra-large-line-height, 1.25);
    letter-spacing: var(--dxp-s-text-heading-extra-large-letter-spacing, 0);
    text-decoration: var(--dxp-s-text-heading-extra-large-text-decoration, none);
    text-transform: var(--dxp-s-text-heading-extra-large-text-transform, none);
}

label abbr.slds-required[title="required"] {
    display: none;
}

.background__secondary {
    background-color: var(--background-color-2);
}

/* HEADER COMPONENT */
.header__content {
    height: 2.1875rem;
}

.header__logo {
    height: 2.1875rem;
}

.header__phone {
    font-size: var(--dxp-s-body-small-font-size, 0.75rem);
    font-weight: 600;
}

.header__phone-icon {
    margin-right: 0.5rem;
}

/* PROGRESS BAR */
.progress-bar {
    max-width: 100%;
}

.progress-bar__container {
    padding: 1.5rem 0.625rem 1rem;
}

.progress-bar__icon_pending {
    fill: var(--background-color-2);
}

.progress-bar__icon_stepped {
    fill: var(--dxp-g-brand, --brand-primary-2);
}

.progress-bar__label {
    margin-top: 1.3125rem;
    font-size: var(--dxp-s-body-small-font-size, 0.75rem);
    font-weight: 700;
    text-align: center;
}

.progress-bar__line {
    background-color: var(--dxp-g-root-contrast, --brand-primary-1);
    height: 0.0625rem;
}

.progress-bar__marker_pending {
    background-color: var(--dxp-g-root-contrast, --brand-primary-1);
    border-color: var(--background-color-2);
}

.progress-bar__marker_stepped {
    background-color: var(--dxp-g-brand, --brand-primary-2);
    border-color: var(--background-color-2);
}

.progress-bar__value {
    width: 100%;
    background-color: var(--dxp-g-root-contrast, --brand-primary-1);
}

/* BODY GENERAL */
.body__button button:active,
.body__button button:focus,
.body__input input:active,
.body__input input:focus,
.body__input .slds-checkbox [type=checkbox]:active+.slds-checkbox__label .slds-checkbox_faux,
.body__input .slds-checkbox [type=checkbox]:focus+.slds-checkbox__label .slds-checkbox_faux,
.body__input_combobox button[lightning-basecombobox_basecombobox]:active,
.body__input_combobox button[lightning-basecombobox_basecombobox]:focus,
.body__input textarea:active,
.body__input textarea:focus {
    border-color: var(--brand-primary-3) !important;
    border-radius: 4px !important;
    box-shadow: inset 0 0 0 1.2px var(--brand-primary-3) !important;
    outline: none !important;
}

.body__form_hidden {
    display: none;
}

.body__section {
    margin-top: 2.5rem;
    padding: 0 0.625rem;
}

.body__section_top-margin-small {
    margin-top: 1.5rem;
}

.body__section_top-margin-medium {
    margin-top: 2rem;
}

.body__section_padding-top {
    padding-top: 0.625rem;
}

.body__section_padding-bottom {
    padding-bottom: 0.625rem;
}

.body__section_top {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.body__sub-title {
    margin-top: 0.75rem;
}

/* BUTTON */
.body__button button {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    transition: none;
}

.body__button_back button:active,
.body__button_back button:focus {
    background-color: var(--background-color-1) !important;
    color: var(--dxp-g-root-contrast, --brand-primary-1) !important;
}

.body__button_back button:hover {
    background-color: var(--dxp-s-button-color, --brand-primary-1);
    color: var(--dxp-s-button-color-contrast, --text-color-contrast);
    border-color: var(--dxp-s-button-color, --brand-primary-1);
}

.body__button_stacked button {
    width: 22.5rem;
    display: block;
}

.body__button-container {
    padding: 0 0.625rem 1rem 0.625rem !important;
}

.body__button-container_top-margin-large {
    margin-top: 2.5rem;
}

.body__button-store-links {
    border: none;
    background-color: transparent;
}

/* BODY INPUT */
.body__input {
    margin-bottom: 0;
}

.body__input input,
.body__input button[lightning-basecombobox_basecombobox] {
    min-height: 2.5rem;
}

.body__input label {
    margin-bottom: 0.25rem;
}

.body__input textarea {
    height: 4.5rem;
}

.body__input-container {
    margin: 1.5rem 0 2.5rem 0;
}

.body__input-container_top {
    margin-bottom: 2rem;
}

.body__input-container_end {
    margin-bottom: 0;
}

.body__input-label,
.body__input-label_sub-labeled {
    margin-bottom: 0.25rem
}

.body__input-label_bold {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.body__input-row {
    margin-bottom: 1rem;
}

.body__input-sub-label {
    margin-bottom: 0.3125rem;
}

.body__input-sub-label_italic {
    font-style: italic;
}

/* ADDRESS */
.body__input_address c-base-combobox-item lightning-icon svg.slds-icon {
    fill: var(--brand-primary-3);
}

.body__input_address c-base-combobox .slds-spinner .slds-spinner__dot-a:before,
.body__input_address c-base-combobox .slds-spinner .slds-spinner__dot-a:after,
.body__input_address c-base-combobox .slds-spinner .slds-spinner__dot-b:before,
.body__input_address c-base-combobox .slds-spinner .slds-spinner__dot-b:after,
.body__input_address c-base-combobox .slds-spinner:before,
.body__input_address c-base-combobox .slds-spinner:after {
    background-color: var(--dxp-g-root-contrast, --brand-primary-1);
}

/* CALENDAR */
.body__input lightning-datepicker .slds-datepicker td[lightning-calendar_calendar].slds-is-selected span[lightning-calendar_calendar].slds-day {
    background-color: var(--dxp-g-root-contrast, --brand-primary-1) !important;
}

.body__input lightning-datepicker .slds-datepicker tbody>tr>td:focus span,
.body__input lightning-datepicker .slds-datepicker tbody>tr>td:active span {
    box-shadow: var(--brand-primary-3) 0 0 0 1px inset !important;
    border-color: var(--brand-primary-3) !important;
}

.body__input lightning-datepicker .slds-select:focus,
.body__input lightning-datepicker .slds-select:active {
    box-shadow: var(--brand-primary-3) 0 0 0 1px inset !important;
    border-color: var(--brand-primary-3) !important;
}

.body__input lightning-datepicker .slds-button:focus,
.body__input lightning-datepicker .slds-button:active {
    box-shadow: var(--brand-primary-3) 0 0 0 1px inset !important;
    border-color: var(--brand-primary-3) !important;
}

/* CHECKBOX */
.body__input.body__input_checkbox .slds-checkbox .slds-checkbox_faux {
    margin-right: 1rem !important;
    border-radius: 0 !important;
    border: 1px solid var(--dxp-s-form-element-color-border, --border-color-1);
}

.body__input .slds-checkbox [type=checkbox]:active+.slds-checkbox__label .slds-checkbox_faux,
.body__input .slds-checkbox [type=checkbox]:focus+.slds-checkbox__label .slds-checkbox_faux {
    border-color: var(--brand-primary-3) !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1.2px var(--brand-primary-3) !important;
    outline: none !important;
}

.body__input[checked] .slds-checkbox_faux {
    background-color: var(--dxp-g-root-contrast, --brand-primary-1) !important;
    box-shadow: none !important;
}

.body__input[checked] .slds-checkbox_faux::after {
    border-bottom: 2px solid var(--text-color-contrast) !important;
    border-left: 2px solid var(--text-color-contrast) !important;
    width: 0.625rem !important;
    height: 0.3125rem !important;
    top: 40% !important;
}

/* COMBOBOX */
.body__input_combobox button[lightning-basecombobox_basecombobox] {
    border-color: var(--dxp-s-form-element-color-border, --border-color-1);
}

.body__input_combobox button[lightning-basecombobox_basecombobox] span {
    color: var(--placeholder-color-1);
    font-family: var(--dxp-s-body-font-family, --body-font-family);
    margin: auto 0;
}

.body__input_combobox lightning-base-combobox div[lightning-basecombobox_basecombobox].slds-dropdown {
    max-height: 80vh;
}

/* RADIO */
.body__input_radio {
    margin-top: 1rem;
    margin-bottom: 0;
}

.body__input_radio legend {
    font-weight: var(--dxp-s-body-font-weight, 400);
    margin-bottom: 0.5rem;
}

.body__input_radio .slds-radio {
    display: inline;
    margin-right: 2rem;
}

.body__input_radio .slds-radio [type=radio]:focus+.slds-radio__label .slds-radio_faux,
.body__input_radio .slds-radio [type=radio]:active+.slds-radio__label .slds-radio_faux  {
    border-color: var(--brand-primary-3);
    box-shadow: inset 0 0 0 1.2px var(--brand-primary-3);
    border-width: 2px;
}

.body__input_radio .slds-radio_faux::after  {
    background-color: var(--dxp-g-root-contrast, --brand-primary-1) !important;
    width: 0.75rem !important;
    height: 0.75rem !important;
}

.body__input_radio-vertical .slds-radio {
    display: block;
    margin-top: 1rem;
}

/* FILE UPLOAD */
.body__input_file {
    width: fit-content;
    margin-bottom: 0;
}

.body__input_file label {
    margin-bottom: 0;
}

.body__input_file .slds-file-selector__button {
    padding: 0.75rem 2.5rem 0.75rem 2.5rem;
    background-color: var(--dxp-s-button-color, --brand-primary-1);
    color: var(--dxp-s-button-color-contrast, --text-color-contrast);
    border-color: var(--dxp-s-button-color, --brand-primary-1);
    transition: none;
}

.body__input_file .slds-file-selector__button:active,
.body__input_file .slds-file-selector__button:focus,
.body__input_file .slds-file-selector__input:focus~.slds-file-selector__body>.slds-file-selector__button {
    background-color: var(--dxp-s-button-color, --brand-primary-1) !important;
    color: var(--dxp-s-button-color-contrast, --text-color-contrast) !important;
    border-color: var(--brand-primary-3) !important;
    border-radius: 4px !important;
    box-shadow: inset 0 0 0 1.2px var(--brand-primary-3) !important;
    outline: none !important;
}

.body__input_file .slds-file-selector__button:hover {
    background-color: var(--dxp-s-button-color-hover, --brand-primary-2);
    color: var(--dxp-s-button-color-hover-contrast, --brand-primary-1);
    border-color: var(--dxp-s-button-color-hover, --brand-primary-2);
}

.body__input_file-name {
    background-color: var(--dxp-g-brand, --brand-primary-2);
    padding: 0.5rem;
    font-weight: 700;
}

.body__input-container_file {
    margin-top: 1rem;
}

/* SERVICE AGREEMENT */
.service-agreement__note {
    line-height: 1.5rem;
}

/* FOOTER MESSAGE*/
.footer__message {
    margin-bottom: 1.5rem;
    white-space: pre-line;
}

.footer__message h1 {
    margin-bottom: 1.125rem;
}

/* ERROR */
.body__input .slds-form-element__help[role="alert"] {
    color: var(--error-color-1);
}

.body__error-icon {
    margin-left: 0.25rem;
}

.body__error-icon .slds-icon {
    height: 1.25rem;
    width: 1.25rem;
    position: relative;
    top: 0.625rem;
    fill:var(--error-icon-color-1);
}

.body__error-icon_textarea .slds-icon {
    top: 1.625rem;
}

.body__error-icon_file .slds-icon {
    top: 0.925rem;
}

.body__input.body__input_empty-error input,
.body__input.slds-has-error input,
.body__input.slds-has-error button[lightning-basecombobox_basecombobox],
.body__input.slds-has-error .slds-file-selector__button,
.body__input .slds-has-error input,
.body__input .slds-has-error button[lightning-basecombobox_basecombobox],
.body__input_file.slds-has-error .slds-file-selector__input:focus~.slds-file-selector__body>.slds-file-selector__button {
    border-color: var(--error-color-1);
    box-shadow: var(--error-color-1) 0 0 0 1px inset;
}

/* FOOTER ERROR */
.footer__error-icon {
    width: 1.375rem;
    height: 1.375rem;
    margin-right: 0.625rem;
    fill: var(--error-color-1);
}

.footer__error-message {
    background-color: var(--error-background-color-1);
    border-radius: 5px;
    border: 1px solid #000;
    line-height: 1.25rem;
    padding: 1.25rem;
}

.footer__error-message h1 {
    margin: 0 0 0.3125rem;
    font-size: 0.75rem;
    font-weight: 350;
}

.footer__error-section {
    padding: 0 0.625rem 1rem;
}

/* LOADER */
.loader__container svg {
    animation: 2s linear infinite svg-animation;
    width: 100%;
    height: 100%;
}

.loader__container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: rgba(var(--brand-primary-1-rgb), 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-color-contrast);
}

.loader__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 6rem;
    height: 6rem;
}

.loader__content:before {
    position: absolute;
    content: "MY";
    top: 0.875rem;
    left: 1.625rem;
    color: var(--text-color-contrast);
    font-size: 1.75rem;
    font-family: var(--header-font-family);
}

.loader__container span {
    font-size: 1rem;
    font-weight: 400;
}

@keyframes svg-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader__container circle {
  animation: 1.4s ease-in-out infinite both circle-animation;
  display: block;
  fill: transparent;
  stroke: var(--dxp-g-brand, --brand-primary-2);
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 280;
  stroke-width: 0.5rem;
  transform-origin: 50% 50%;
}

@keyframes circle-animation {
  0%,
  25% {
    stroke-dashoffset: 280;
    transform: rotate(0);
  }
  
  50%,
  75% {
    stroke-dashoffset: 75;
    transform: rotate(45deg);
  }
  
  100% {
    stroke-dashoffset: 280;
    transform: rotate(360deg);
  }
}

/* TABLET */
@media only screen and (max-width: 1024px) {
    .progress-bar__container {
        padding: 1.5rem 1.25rem 1rem;
    }
}

/* MOBILE*/
@media only screen and (max-width: 768px) {
    .progress-bar__container {
        padding: 1.5rem 1.25rem 1rem;
    }

    .body__button_stacked {
        width: 100%;
    }

    .body__button_stacked button {
        width: 100%;
        margin-bottom: 0.5rem;
        display: block;
    }
}