body{ background-color: var(--color-bg-f2)}
.text-wrapper .title-register{ color: var(--color-main)}
.text-wrapper .desc-register{ font-weight: 600; color: var(--color-second)}
.step-wizard{}
.step-wizard .nav{ width: 100%; max-width: 400px;}
.step-wizard .nav li{ position: relative; text-align: right; }
.step-wizard .nav li:first-child{ max-width: 60px; }
.step-wizard .nav li+li:after{ position: absolute; z-index: 1; top: calc(50% - 1px); width: 100%; height: 2px; left: 0; background-color: var(--color-main-border); content: ""; }
.step-wizard .nav .nav-link{ transition: var(--css-transition-ease); color: var(--color-main-81); position: relative; z-index: 3; background-color: var(--color-bg-f2); width: 60px; height: 60px; display: inline-flex; justify-content: center; align-items: center; font-size: 2em; font-weight: 600; border: 2px solid var(--color-main-border); border-radius: 50%;  }
.step-wizard .nav .nav-link:hover,
.step-wizard .nav .nav-link:focus,
.step-wizard .nav li.active .nav-link{ background-color: var(--color-main); color: var(--color-white); border-color: var(--color-main); }
.step-wizard .nav li.actived .nav-link{ color: var(--color-white); background-color: var(--color-main-soft); border-color: var(--color-main-soft); }
.step-wizard .nav li.actived:after,
.step-wizard .nav li.active:after{ background-color: var(--color-main);}
.tab-content{ width: 100%; padding: var(--set-margin-bottom-15); max-width: 990px; margin: 0 auto;  background-color: var(--color-white); border-radius: var(--bs-border-radius) }
.form-wrapper{ border-radius: var(--bs-border-radius); border: 1px solid var(--color-main-border); width: 100%; padding: var(--set-margin-bottom-15); }
.form-wrapper h5{ color: var(--color-main); }
.btn-save{ font-weight: 600; padding: 15px 25px;}
.text-center>.btn i{ position: relative; top: 3px; font-size: 22px; }
.btn-skip{ border-color: var(--color-main); background-color: var(--color-white); padding: 15px 25px;  font-weight: 600; color: var(--color-second); }
.btn-skip:hover,
.btn-skip:active,
.btn-skip:first-child:active,
.btn-skip:focus,
.btn-skip.active{ background-color: var(--color-second); border-color: var(--color-second); color: var(--color-main) }
.form-control,
.form-check,
.form-select{ font-size: var(--base-font-size-14)}

@media screen and (max-width: 460px) {
    .text-wrapper .title-register{ font-size: var(--base-font-size-20); }
    .text-wrapper .desc-register{font-size: var(--base-font-size-16); }
    .step-wizard{ max-width: 260px; margin: 10px auto 30px!important}
    .step-wizard .nav .nav-link{ width: 40px; height: 40px; font-size: var(--base-font-size-20); }
    .form-wrapper-main .wrapper-title h4{ font-size: var(--base-font-size-18); margin-bottom: 10px; }
    .form-check-label{ white-space: nowrap;  }
    .btn-save, .btn-skip{ padding: 7px 15px; font-size: var(--base-font-size-14) }
    .btn-skip{ margin-bottom: 10px;}
    .form-wrapper h5{ font-size: var(--base-font-size-16); }
    .form-control, .form-select{ margin-bottom: 1rem!important }
    .input-group .form-select,
    .input-group .form-control{ margin-bottom: 0!important;}
    .form-wrapper .col-lg-6.mb-3,
    .form-wrapper .col-lg-3.mb-3,
    .form-wrapper .col-lg-4.mb-3,
    .form-wrapper .col-lg-12.mb-3{ margin-bottom: 0!important;}
}