*, html {
  margin:0 !important;
}

.body {
  background-color: var(--white);
  overflow-x: hidden;
}

.button {
  background-color: var(--primary)!important;
  color: var(--white)!important;
  border-radius: 4px!important;
  border-style: none;
  width: 200px;
  height: 48px;
}

.button.disabled {
  background-color: var(--disabled)!important;
}

.button.clear {
  background-color: transparent !important;
}

.button.outline,
.button.outline:focus,
.button.outline:hover {
  background-color: var(--white)!important;
  color: var(--primary)!important;
  border-color: var(--primary);
  border-width: 1px;
  border-style: solid;
}

.button.checkPage {
  background-color: var(--primary)!important;
  color: var(--white)!important;
  border-radius: 4px!important;
  border-style: none;
  width: 110px;
  height: 48px;
}

.payButton {
  background-color: var(--payPalYellow)!important;
  color: var(--payPalBlue)!important;
  border-radius: 4px!important;
  width: 200px;
  height: 48px;
  margin-top: 20px!important;
}

.row {
  --bs-gutter-x: 0!important;
}

.row.checkPage {
  width: 100%;
  align-items: center;
  justify-content: end;
}

a {
  color: var(--darkGray)!important;
}

/* Header start */

.header {
  background-color: var(--gray);
  padding: 0 56px;
  height: 80px;
  width: 100%;
}

.logoContainer {
  display: flex;
  padding: 16px 0;
  align-items: center;
  justify-content: flex-start;
}

.helpContainer {
  display: flex;
  padding: 16px 0;
  align-items: center;
  justify-content: flex-end;
}

.logo {
  width: 48px;
  height: 48px;
}

.helpIcon{
  width: 32px;
  height: 32px;
}

/* Header end */

/* Content start */

.introContainer {
  padding: 38px 160px;
}

.logoIntroContainer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.logoIntro {
  width: 80px;
  height: 80px;
}

.sdaLogo {
  margin-top: 24px!important;
}

.introFirstSection {
  padding-top: 48px;
  padding-bottom: 32px;
}

.listElement {
  padding-top: 24px;
}

.bulletPoint {
  display: flex;
  color: var(--white);
  background-color: var(--primary);
  border-width: 0px;
  border-radius: 4px;
  border-style: none;
  box-shadow: 0 1px 2px var(--shadowPrimary);
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  margin-top: 6px!important;
}

.introThirdSection {
  padding-top: 32px;
}

.form-check {
  padding: 0!important;
}

.form-check .form-check-input {
  width: 16px;
  height: 16px;
  border-color: var(--lightGreen)!important;
  border-width: 1px;
  border-radius: 2px;
  border-style: solid;
  margin: 4px 0!important;
}

.form-switch .form-check-input {
  width: 40px!important;
  height: 24px;
  background-color: var(--lighterGray)!important;
  border-color: var(--lighterGray)!important;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")!important;
}

.form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23208A86' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")!important;
}

.form-check .form-check-input:checked {
  background-color: var(--white)!important;
  border-color: var(--lightGreen)!important;
}

.form-check-input:focus {
  box-shadow: none!important;
}

.form-switch .form-check-input:checked {
  background-color: var(--primary)!important;
  border-color: var(--lightGreen)!important;
}

.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e)!important;
}

.form-check-label {
  margin-left: 24px!important;
}

.toggle-label {
  padding: 4px 16px;
}

.disclaimer {
  padding: 16px 0;
}

.introImageContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 56px;
  height: 100%;
}

.introImage {
  width: 90%;
}

.tab {
  display: none;
}

.tabContent {
  padding: 32px 56px;
}

.hint {
  text-align: end;
}

.checkIcon {
  width: 18px;
  height: 18px;
}

.stepRow {
  margin-bottom: 100px!important;
}

.stepConfirmRow {
  display: flex;
  margin-bottom: 184px!important;
}

.fieldRow {
  --bs-gutter-x: 16px!important;
}

.textField {
  padding-top: 16px;
}

.fieldLabel, 
.fieldLabelSmall {
  margin-bottom: 12px!important;
}

.fieldError {
  margin-top: 4px!important;
}

.form-control {
  font-size: 16px;
  font-weight: 400;
  color: var(--darkBlue)!important;
  border-color: var(--lighterGray)!important;
  border-width: 1px!important;
  border-radius: 4px!important;
  box-shadow: 0 5px 10px var(--fieldShadow);
}

.form-control::placeholder {
  color: var(--lightGray)!important;
}

.form-control:focus {
  border-color: var(--lightGreen)!important;
  box-shadow: none!important;
}

.form-control.error {
  border-color: var(--red)!important;
}

.step1SecondSection {
  margin-top: 16px!important;
  padding-top: 16px;
  border-top: 1px solid var(--lighterGray);
}

.step2ToggleSection {
  padding-top: 16px!important;
}

.step2FirstSection {
  display: none;
  margin-top: 16px!important;
  border-top: 1px solid var(--lighterGray);
}

.step2SecondSection,
.step2ThirdSection,
.step3SecondSection {
  margin-top: 16px!important;
  border-top: 1px solid var(--lighterGray);
}

.dropdown,
.dropdown-menu.show {
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  color: var(--darkBlue)!important;
  border-color: var(--lighterGray)!important;
  border-width: 1px!important;
  border-radius: 4px!important;
  box-shadow: 0 5px 10px var(--fieldShadow);
}

.dropdown-toggle {
  text-align: left!important;
}

.dropdown-item:active {
  background-color: var(--primary)!important;
}

.dropdown-toggle::after {
  float: right;
  margin-top: 8px;
}

.afterPayment {
  display: none;
}

.paypalImage {
  height: 24px;
  margin-left: 4px!important;
}

.paypalImageButton {
  margin-right: 4px!important;
}

.paypalError {
  display: none;
  padding-top: 24px;
  color: var(--red);
}

.paymentDescriptionContainer {
  margin-top: 16px!important;
  margin-bottom: 40px!important;
}

.paymentResultContainer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 0;
}

.titleGreen {
  padding-left: 12px;
}

.payedContainer {
  margin-left: 42px!important;
}

.tabImageContainer {
  display: flex;
  background-color: var(--primaryLight);
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 86vh;
}

.tabImageContainer.checkPage {
  display: flex;
  background-color: var(--primaryLight);
  align-items: start;
  justify-content: center;
  height: 100%;
  min-height: 86vh;
}

.tabImage {
  width: 90%;
}

.confirmTitleSection {
  padding-top: 16px;
}

.confirmContentSection {
  padding: 36px 0;
}

.confirmGuideSection {
  padding: 24px 0;
}

.confirmList {
  margin-bottom: 16px!important;
}

#paypal-button-container {
  padding-top: 16px;
  width: 250px;
}

#id_paypal_transaction_id {
  display: none;
}

.sectionTitle.error {
  margin-top: 24px!important;
  border-bottom: 2px solid var(--red);
}

.sectionTitle.valid {
  margin-top: 24px!important;
  border-bottom: 2px solid var(--primary);
}

/* Content end */

/* Footer start */

.footer {
  background-color: var(--white);
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;
  padding: 0 56px;
  z-index: 999;
  box-shadow: 0 -4px 23px var(--shadowBlack);
}

.footerConfirm {
  background-color: var(--white);
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 184px;
  padding: 0 56px;
  box-shadow: 0 -4px 23px var(--shadowBlack);
}

.footer-left {
  text-align: start;
  padding: 32px 0;
}

.footer-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}

.footer-right {
  text-align: end;
  padding: 25px 0;
}

.footer.checkPage {
  display: flex;
  align-items: center;
  justify-content: end;
}

.mobileBackButtonContainer {
  display: none;
}

.back {
  width: 24px;
  height: 24px;
}

.stepsContainer {
  align-items: center;
  justify-content: center;
}

.step {
  display: flex;
}

.stepNumber {
  display: flex;
  color: var(--darkGray);
  background-color: var(--white);
  border-color: var(--border);
  border-width: 1px;
  border-radius: 6px;
  border-style: solid;
  box-shadow: 0 1px 2px var(--shadowBlack);
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.stepNumber.selected {
  display: flex;
  color: var(--white);
  background-color: var(--primary);
  border-width: 0px;
  border-radius: 6px;
  border-style: none;
  box-shadow: 0 1px 2px var(--shadowPrimary);
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.stepText {
  color: var(--darkGray);
  font-size: 14px;
  font-weight: 700;
  padding: 5px 16px;
}

.stepText.selected {
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  padding: 5px 16px;
}

.stepDescription {
  color: var(--darkGray);
  font-size: 14px;
  font-weight: 700;
  padding: 5px 16px;
}

.stepText.selected {
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  padding: 5px 16px;
}

.divider {
  padding-left: 8px;
  padding-right: 24px;
}

.dividerConfirm {
  padding: 0 40px;
}

.stepConfirm {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}

.stepConfirmIcon {
  display: flex;
  color: var(--darkGray);
  background-color: var(--white);
  border-color: var(--border);
  border-width: 1px;
  border-radius: 6px;
  border-style: solid;
  box-shadow: 0 1px 2px var(--shadowBlack);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.stepConfirmIcon.selected {
  display: flex;
  color: var(--white);
  background-color: var(--primary);
  border-width: 0px;
  border-radius: 6px;
  border-style: none;
  box-shadow: 0 1px 2px var(--shadowPrimary);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.stepConfirmTitle {
  color: var(--darkBlue);
  font-size: 16px;
  font-weight: 700;
  padding-top: 8px;
  padding-bottom: 4px;
}

.stepConfirmTitle.selected {
  color: var(--primary);
  font-size: 16px;
  font-weight: 700;
  padding-top: 8px;
  padding-bottom: 4px;
}

.stepConfirmDescription {
  color: var(--darkGray);
  font-size: 14px;
  font-weight: 400;
}

.stepConfirmDescription.selected {
  color: var(--darkGray);
  font-size: 14px;
  font-weight: 400;
}

/* Footer end */