body {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/*p {
  color: #b3b3b3;
  font-weight: 300; }*/

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }

a {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease; }
  a, a:hover {
    text-decoration: none !important; }

/*.content {
  padding: 7rem 0; }*/

/*h2 {
  font-size: 20px; }*/

.form-control:active, .form-control:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none; }

#calendar {
  margin: 0 auto; }
  #calendar .fc-view-container {
    background-color: #fff;
    -webkit-box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2); }
  #calendar .fc-toolbar.fc-header-toolbar .fc-center {
    display: block; }

#calendar-container {
  position: fixed;
  top: 0;
  left: 20px;
  right: 20px;
  bottom: 20px; }

.fc-header-toolbar {
  /*
    the calendar will be butting up against the edges,
    but let's scoot in the header's buttons
    */
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em; }

@media (max-width: 767.98px) {
  .fc-toolbar {
    display: block !important;
    text-align: center; }
    .fc-toolbar .fc-center {
      display: block;
      margin-top: 20px;
      margin-bottom: 20px; } }
.accordion-button {
    font-size: 1.15rem !important;
    font-weight: bold !important;
}

.email-verify {
    left: 33%;
}

.phone-verify {
    left: 66%;
}

.offcanvas.offcanvas-top {
    top: 80px;
    height: 30rem;
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
}

.nav-link {
    color: white !important;
    font-weight: 600;
}

.top-nav-items.nav-link {
    color: rgb(15, 15, 15) !important;
    font-size: smaller;
}

    .top-nav-items.nav-link:focus {
        /* color: rgb(15, 15, 15) !important; */
        background-color: transparent !important;
    }

.nav-link.dropdown-toggle.show {
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
    color: rgba(var(--bs-primary-rgb)) !important;
    border-color: rgba(var(--bs-light-rgb)) !important;
}

.nav-link.things-dropping.active {
    background-color: white !important;
}

/*.nav-link:focus {
    background-color: rgba(var(--bs-light-rgb)) !important;
}*/

.nav-item.active {
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

.nav-tabs {
    border-bottom: none !important;
}

.sub-tab {
    /* margin-top: 0%; */
    margin-bottom: 0%;
    /* padding-top: 1%; */
    padding-bottom: 0%;
    align-items: center;
    align-content: center;
    font-size: 0.9em;
}

.sub-link {
    color: rgb(15, 15, 15) !important;
    border: 0 !important;
}

    .sub-link.active {
        background-color: white !important;
    }

.dropdown-toggle.nav-link {
    color: rgb(15, 15, 15) !important;
}

.content {
    max-width: 1000px;
    background-color: white;
}

/*
-- Demo Styles
*/

* {
    box-sizing: border-box;
}

/* body {
  min-height: 100% !important;
  background: rgb(20, 88, 155) !important;
  background: linear-gradient(
    324deg,
    rgba(20, 88, 155, 1) 0%,
    rgba(124, 151, 217, 1) 50%,
    rgba(20, 88, 155, 1) 100%
  ) !important;
} */

/* body {
  padding: 2rem;
} */

h5 {
    text-align: center;
    margin: auto;
    font-size: 0.8rem;
    line-height: 140%;
    margin-top: 1rem;
    max-width: 50ex;
}

p {
    text-align: center;
    margin-top: 3rem;
}

/* .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #14589B;
  --bs-btn-border-color: #14589B;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0C345C;
  --bs-btn-hover-border-color: #004888;
  --bs-btn-focus-shadow-rgb: #14589B;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #004888;
  --bs-btn-active-border-color: #004887;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #14589B;
  --bs-btn-disabled-border-color: #14589B;
} */

/* .btn-primary:focus {
  outline: inset 1px #14589B !important;
  box-shadow: inset 0 0 20 20 #14589B !important;
  border: 0
} */

/* .btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #5AB5D5;
  --bs-btn-border-color: #A4ABBD;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #929baf;
  --bs-btn-hover-border-color: #8791a8;
  --bs-btn-focus-shadow-rgb: red;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #8791a8;
  --bs-btn-active-border-color: #7d879c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #AAB9C6;
  --bs-btn-disabled-border-color: #AAB9C6;
} */

.popover_header {
    background-color: #14589b !important;
}

.table thead {
    color: white;
    background-color: rgba(var(--bs-primary-rgb)) !important;
}

.bg-danger {
    --bs-bg-opacity: 1;
    background-color: #9c2b24 !important;
}


.table th,
td {
    vertical-align: middle !important;
}

.arrow-icon {
    rotate: 90deg;
}

.other-icon {
    rotate: 180deg;
}

.search-input-group {
    position: absolute;
    z-index: 99999;
    max-width: 25%;
    right: 0.25rem;
    top: 0%;
    height: 100%;
}

.search-btn {
    height: 100%;
}

.payPeriodCertificateModalBody {
    height: 80vh !important;
}

.accordion-button {
    font-size: 1.15rem !important;
    font-weight: bold !important;
}

.email-verify {
    left: 33%;
}

.phone-verify {
    left: 66%;
}

.c-stepper {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    animation: fadeIn 1s;
    -webkit-animation: fadeIn 1s;
    -moz-animation: fadeIn 1s;
    -o-animation: fadeIn 1s;
    -ms-animation: fadeIn 1s;
}

.majorStep {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 33% !important;
    padding-left: clamp(0.01rem, 1vw, 0.5rem) !important;
    padding-right: clamp(0.01rem, 1vw, 0.5rem) !important;
    padding-top: clamp(0.01rem, 1vw, 0.5rem) !important;
    /*padding-bottom: 15px;
    padding-top: 15px;*/
}

    .majorStep:before {
        --size: 3rem;
        content: "";
        position: absolute;
        display: block;
        width: var(--circle-size);
        height: var(--circle-size);
        border-radius: 50%;
        margin: 0 auto 1rem;
        animation: fadeIn 2s;
        -webkit-animation: fadeIn 2s;
        -moz-animation: fadeIn 2s;
        -o-animation: fadeIn 2s;
        -ms-animation: fadeIn 2s;
    }

    .majorStep.Completed:not(:last-child):after {
        content: "";
        position: relative;
        top: calc(var(--circle-size) / 2);
        left: 50%;
        height: 2px;
        background-color: #e0e0e0;
        order: -1;
        width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
        left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
        animation: transitionIn 1s;
        -webkit-animation: transitionIn 1s;
        -moz-animation: transitionIn 1s;
        -o-animation: transitionIn 1s;
        -ms-animation: transitionIn 1s;
        background-color: #146c43 !important;
    }
    .majorStep.InProgress:not(:last-child):after {
        content: "";
        position: relative;
        top: calc(var(--circle-size) / 2);
        left: 50%;
        height: 2px;
        background-color: #e0e0e0;
        order: -1;
        width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
        left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
        animation: transitionIn 1s;
        -webkit-animation: transitionIn 1s;
        -moz-animation: transitionIn 1s;
        -o-animation: transitionIn 1s;
        -ms-animation: transitionIn 1s;
        background-color: #22525f !important;
    }

.majorStep.active{
    background-color:lightgrey;
}
.majorStep__bgCircle {
    width: var(--circle-size);
    height: var(--circle-size);
}

.majorStep__bgCircle .bi {
    font-size: clamp(0.85rem, 4vw, 1.75rem) !important;
}

.subStepTextActive input.btn.btn-primary.onboardBtn {
    font-size: clamp(0.9rem, 4vw, 1.15rem) !important;
}

.majorStep-progress:before {
    background-image: url("data:image/svg+xml,%3Csvg width='var(--circle-size)' height='var(--circle-size)' viewBox='0 0 75 75' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.45 41.25q-1.95 0-3.325-1.375Q2.75 38.5 2.75 36.55v-25.1q0-1.95 1.375-3.35Q5.5 6.7 7.45 6.7h33.1q1.95 0 3.35 1.4 1.4 1.4 1.4 3.35v25.1q0 1.95-1.4 3.325-1.4 1.375-3.35 1.375Zm33.1-25.9L25.3 25.6q-.35.2-.65.3-.3.1-.65.1-.35 0-.65-.1-.3-.1-.65-.3L7.45 15.35v21.2h33.1Zm-16.55 7 16.35-10.9H7.7Zm-16.55-7v.5-2.75.05-1.7 1.7-.1 2.8-.5 21.2Z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    background-position: calc(var(--circle-size) / 6) calc(var(--circle-size) / 6);
    background-color: #14589b;
    content: '';
}

.majorStep-pending-phone:before {
    background-image: url("data:image/svg+xml,%3Csvg width='var(--circle-size)' height='var(--circle-size)' viewBox='0 0 75 75' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.55 47.15q-1.95 0-3.325-1.375Q8.85 44.4 8.85 42.45V5.55q0-1.95 1.375-3.325Q11.6.85 13.55.85h20.9q1.95 0 3.325 1.375Q39.15 3.6 39.15 5.55v36.9q0 1.95-1.375 3.325Q36.4 47.15 34.45 47.15Zm0-6.2v1.5h20.9v-1.5Zm0-3h20.9v-27.9h-20.9Zm0-30.9h20.9v-1.5h-20.9Zm0 0v-1.5 1.5Zm0 33.9v1.5Z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    background-position: calc(var(--circle-size) / 6) calc(var(--circle-size) / 6);
    background-color: lightgrey;
    content: '';
}

.majorStep-pending-finished:before {
    background-image: url("data:image/svg+xml,%3Csvg width='var(--circle-size)' height='var(--circle-size)' viewBox='0 0 75 75' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.7 39.6-6-1.25q-.9-.15-1.45-.9-.55-.75-.4-1.65L5.5 30l-3.8-4.45q-.6-.65-.6-1.55t.6-1.55l3.8-4.4-.65-5.8q-.15-.95.4-1.675.55-.725 1.45-.925l6-1.2 3-5.2q.45-.75 1.35-1.1.9-.35 1.7.1L24 4.7l5.25-2.45q.8-.45 1.7-.15.9.3 1.35 1.1l3.05 5.25 5.95 1.2q.9.2 1.45.925.55.725.45 1.675l-.7 5.8 3.8 4.4q.6.65.6 1.55t-.6 1.55L42.5 30l.7 5.8q.1.9-.45 1.65-.55.75-1.45.9l-5.95 1.25-3.05 5.2q-.45.8-1.35 1.1-.9.3-1.7-.15L24 43.3l-5.25 2.45q-.8.45-1.7.1-.9-.35-1.35-1.1ZM24 24Zm-3.8 5.4q.7.7 1.65.7t1.65-.7l8.85-8.75q.5-.5.475-1.225-.025-.725-.575-1.275-.55-.55-1.275-.525-.725.025-1.325.575l-7.8 7.75-3.4-3.65q-.55-.55-1.325-.55-.775 0-1.375.6-.55.6-.575 1.35-.025.75.575 1.3Zm-1.35 11.1L24 38.25l5.3 2.25 3.25-4.85 5.65-1.45-.55-5.8L41.5 24l-3.85-4.5.55-5.8-5.65-1.35L29.2 7.5 24 9.7l-5.3-2.2-3.25 4.85-5.6 1.35.5 5.8L6.5 24l3.85 4.4-.5 5.9 5.6 1.35Z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    background-position: calc(var(--circle-size) / 6) calc(var(--circle-size) / 6);
    background-color: lightgrey;
    content: '';
}

.majorStep:not(:last-child):after {
    content: "";
    position: relative;
    top: calc(var(--circle-size) / 2);
    left: 50%;
    height: 2px;
    background-color: #e0e0e0;
    order: -1;
    width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
    left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
    animation: transitionIn 1s;
    -webkit-animation: transitionIn 1s;
    -moz-animation: transitionIn 1s;
    -o-animation: transitionIn 1s;
    -ms-animation: transitionIn 1s;
}

.majorStep-complete:after {
    background-color: #006833 !important;
}

.subNavTitle {
    font-weight: bold;
    font-size: clamp(0.75rem, 1.45vw, 1.25rem);
    margin-bottom: 0.5rem;
    /*display:none;*/
}

.subNavDesc {
    color: grey;
    font-size: clamp(0.75rem, 2vw, 1rem);
    padding-left: var(--spacing);
    padding-right: var(--spacing);
}

.divMajorStep {
    font-size: clamp(0.85rem, 4vw, 1.15rem);
}

.transition_arrow {
    font-size: clamp(0.85rem, 2vw, 1rem);
}

.subNavNumberText {
    fill: #fff;
    font-size: 0.75rem;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
}

.fadeIn {
    animation: fadeIn 1s;
    -webkit-animation: fadeIn 1s;
    -moz-animation: fadeIn 1s;
    -o-animation: fadeIn 1s;
    -ms-animation: fadeIn 1s;
}

.fadeOut {
    animation: fadeOut 1s;
    -webkit-animation: fadeOut 1s;
    -moz-animation: fadeOut 1s;
    -o-animation: fadeOut 1s;
    -ms-animation: fadeOut 1s;
}

.transitionIn {
    animation: transitionIn 1s;
    -webkit-animation: transitionIn 1s;
    -moz-animation: transitionIn 1s;
    -o-animation: transitionIn 1s;
    -ms-animation: transitionIn 1s;
}

.transitionOut {
    animation: transitionOut 1s;
    -webkit-animation: transitionOut 1s;
    -moz-animation: transitionOut 1s;
    -o-animation: transitionOut 1s;
    -ms-animation: transitionOut 1s;
}

#slide {
    position: absolute;
    left: -100px;
    width: 1000px;
    height: 1000px;
    background: blue;
    animation: slide 0.5s forwards;
    -webkit-animation: slide 0.5s forwards;
}

@-webkit-keyframes slide {
    100% {
        transform: translateX(0%);
    }
}

@keyframes slide {
    100% {
        transform: translateX(0%);
    }
}

:root {
    --circle-size: clamp(1.5rem, 5vw, 3rem);
    --spacing: clamp(0.25rem, 2vw, 0.5rem);
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes transitionIn {
    0% {
        width: 0%;
    }

    100% {
        width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
    }
}

@keyframes transitionOut {
    0% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}

@-moz-keyframes transitionIn {
    0% {
        width: 0%;
    }

    100% {
        width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
    }
}

@-moz-keyframes transitionOut {
    0% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}

@-webkit-keyframes transitionIn {
    0% {
        width: 0%;
    }

    100% {
        width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
    }
}

@-webkit-keyframes transitionOut {
    0% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}

@-o-keyframes transitionIn {
    0% {
        width: 0%;
    }

    100% {
        width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
    }
}

@-o-keyframes transitionOut {
    0% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}

@-ms-keyframes transitionIn {
    0% {
        width: 0%;
    }

    100% {
        width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
    }
}

@-ms-keyframes transitionOut {
    0% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}

.modalEmployeeInputLabel {
    font-weight: bolder;
    font-size: larger;
}

.css-14sza3e-MuiStepLabel-root {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: left;
    padding: 8px 0;
}
.css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root.Mui-active {
    color: #1976d2;
}

.css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    fill: currentColor;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    font-size: 1.5rem;
    display: block;
    -webkit-transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    color: rgba(0, 0, 0, 0.38);
}

.stepNumber{
    fill: #fff;
    font-size: 0.75rem;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
}

.stepTextInactive{
    width: 100%;
    color: rgba(0, 0, 0, 0.6);
}
.bg-lightgrey {
    background-color: lightgrey;
}
.css-14sza3e-MuiStepLabel-root {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: left;
    padding: 8px 0;
}
.css-vnkopk-MuiStepLabel-iconContainer {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-right: 8px;
}

.subStep.subStep-Active{
    color: var(--bs-primary);
}
.subStepTextActive{
    color:black;
}

.subStep {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 1em;
    display: inline-block;
    fill: currentColor;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    font-size: 1.5rem;
    display: block;
    -webkit-transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    color: rgba(0, 0, 0, 0.38);
}
.css-ahj2mt-MuiTypography-root {
    margin: 0;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.00938em;
}
.sectionExpanded {
    margin-left: 12px;
    padding-left: 20px;
    padding-right: 8px;
    border-left: 1px solid #bdbdbd;
}
.subNavStep {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: left;
    padding: 8px 0;
}

.stepInactiveLineOuter {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin-left: 12px;
}
.stepInactiveLineInner {
    display: block;
    border-color: #bdbdbd;
    border-left-style: solid;
    border-left-width: 1px;
    min-height: 24px;
}

.rounded-right {
    border-radius: 1px 1px 1px 1px;
}

.rounded-left {
    border-radius: 1px 1px 1px 1px;
}

.accordion-button {
    font-size: 1.15rem !important;
    font-weight: bold !important;
}

.email-verify {
    left: 33%;
}

.phone-verify {
    left: 66%;
}

.c-stepper {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    animation: fadeIn 1s;
    -webkit-animation: fadeIn 1s;
    -moz-animation: fadeIn 1s;
    -o-animation: fadeIn 1s;
    -ms-animation: fadeIn 1s;
}

.c-stepper__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.c-stepper__item:before {
    --size: 3rem;
    content: "";
    /* position: relative; */
    /* z-index: 1; */
    display: block;
    width: var(--circle-size);
    height: var(--circle-size);
    /* background-color: lightgrey;
    background-color: red; */
    border-radius: 50%;
    /* opacity: 0.5; */
    margin: 0 auto 1rem;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
    -moz-animation: fadeIn 2s;
    -o-animation: fadeIn 2s;
    -ms-animation: fadeIn 2s;
}

.c-stepper__item-complete:before {
    background-image: url("data:image/svg+xml,%3Csvg width='var(--circle-size)' height='var(--circle-size)' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    background-position: calc(var(--circle-size) / 8) calc(var(--circle-size) / 8);
    background-color: #006833;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
    -moz-animation: fadeIn 2s;
    -o-animation: fadeIn 2s;
    -ms-animation: fadeIn 2s;
}

.c-stepper__item-progress:before {
    background-image: url("data:image/svg+xml,%3Csvg width='var(--circle-size)' height='var(--circle-size)' viewBox='0 0 75 75' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.45 41.25q-1.95 0-3.325-1.375Q2.75 38.5 2.75 36.55v-25.1q0-1.95 1.375-3.35Q5.5 6.7 7.45 6.7h33.1q1.95 0 3.35 1.4 1.4 1.4 1.4 3.35v25.1q0 1.95-1.4 3.325-1.4 1.375-3.35 1.375Zm33.1-25.9L25.3 25.6q-.35.2-.65.3-.3.1-.65.1-.35 0-.65-.1-.3-.1-.65-.3L7.45 15.35v21.2h33.1Zm-16.55 7 16.35-10.9H7.7Zm-16.55-7v.5-2.75.05-1.7 1.7-.1 2.8-.5 21.2Z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    background-position: calc(var(--circle-size) / 6) calc(var(--circle-size) / 6);
    background-color: #14589b;
}

.c-stepper__item-pending-phone:before {
    background-image: url("data:image/svg+xml,%3Csvg width='var(--circle-size)' height='var(--circle-size)' viewBox='0 0 75 75' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.55 47.15q-1.95 0-3.325-1.375Q8.85 44.4 8.85 42.45V5.55q0-1.95 1.375-3.325Q11.6.85 13.55.85h20.9q1.95 0 3.325 1.375Q39.15 3.6 39.15 5.55v36.9q0 1.95-1.375 3.325Q36.4 47.15 34.45 47.15Zm0-6.2v1.5h20.9v-1.5Zm0-3h20.9v-27.9h-20.9Zm0-30.9h20.9v-1.5h-20.9Zm0 0v-1.5 1.5Zm0 33.9v1.5Z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    background-position: calc(var(--circle-size) / 6) calc(var(--circle-size) / 6);
    background-color: lightgrey;
}

.c-stepper__item-pending-finished:before {
    background-image: url("data:image/svg+xml,%3Csvg width='var(--circle-size)' height='var(--circle-size)' viewBox='0 0 75 75' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.7 39.6-6-1.25q-.9-.15-1.45-.9-.55-.75-.4-1.65L5.5 30l-3.8-4.45q-.6-.65-.6-1.55t.6-1.55l3.8-4.4-.65-5.8q-.15-.95.4-1.675.55-.725 1.45-.925l6-1.2 3-5.2q.45-.75 1.35-1.1.9-.35 1.7.1L24 4.7l5.25-2.45q.8-.45 1.7-.15.9.3 1.35 1.1l3.05 5.25 5.95 1.2q.9.2 1.45.925.55.725.45 1.675l-.7 5.8 3.8 4.4q.6.65.6 1.55t-.6 1.55L42.5 30l.7 5.8q.1.9-.45 1.65-.55.75-1.45.9l-5.95 1.25-3.05 5.2q-.45.8-1.35 1.1-.9.3-1.7-.15L24 43.3l-5.25 2.45q-.8.45-1.7.1-.9-.35-1.35-1.1ZM24 24Zm-3.8 5.4q.7.7 1.65.7t1.65-.7l8.85-8.75q.5-.5.475-1.225-.025-.725-.575-1.275-.55-.55-1.275-.525-.725.025-1.325.575l-7.8 7.75-3.4-3.65q-.55-.55-1.325-.55-.775 0-1.375.6-.55.6-.575 1.35-.025.75.575 1.3Zm-1.35 11.1L24 38.25l5.3 2.25 3.25-4.85 5.65-1.45-.55-5.8L41.5 24l-3.85-4.5.55-5.8-5.65-1.35L29.2 7.5 24 9.7l-5.3-2.2-3.25 4.85-5.6 1.35.5 5.8L6.5 24l3.85 4.4-.5 5.9 5.6 1.35Z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    background-position: calc(var(--circle-size) / 6) calc(var(--circle-size) / 6);
    background-color: lightgrey;
}

.c-stepper__item:not(:last-child):after {
    content: "";
    position: relative;
    top: calc(var(--circle-size) / 2);
    left: 50%;
    height: 2px;
    background-color: #e0e0e0;
    order: -1;
    width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
    left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
    animation: transitionIn 1s;
    -webkit-animation: transitionIn 1s;
    -moz-animation: transitionIn 1s;
    -o-animation: transitionIn 1s;
    -ms-animation: transitionIn 1s;
}

.c-stepper__item-complete:after {
    background-color: #006833 !important;
}

.c-stepper__title {
    font-weight: bold;
    font-size: clamp(1rem, 4vw, 1.25rem);
    margin-bottom: 0.5rem;
}

.c-stepper__desc {
    color: grey;
    font-size: clamp(0.85rem, 2vw, 1rem);
    padding-left: var(--spacing);
    padding-right: var(--spacing);
    align-self: center;
}

.fadeIn {
    animation: fadeIn 1s;
    -webkit-animation: fadeIn 1s;
    -moz-animation: fadeIn 1s;
    -o-animation: fadeIn 1s;
    -ms-animation: fadeIn 1s;
}

.fadeOut {
    animation: fadeOut 1s;
    -webkit-animation: fadeOut 1s;
    -moz-animation: fadeOut 1s;
    -o-animation: fadeOut 1s;
    -ms-animation: fadeOut 1s;
}

.transitionIn {
    animation: transitionIn 1s;
    -webkit-animation: transitionIn 1s;
    -moz-animation: transitionIn 1s;
    -o-animation: transitionIn 1s;
    -ms-animation: transitionIn 1s;
}

.transitionOut {
    animation: transitionOut 1s;
    -webkit-animation: transitionOut 1s;
    -moz-animation: transitionOut 1s;
    -o-animation: transitionOut 1s;
    -ms-animation: transitionOut 1s;
}

:root {
    --circle-size: clamp(1.5rem, 5vw, 3rem);
    --spacing: clamp(0.25rem, 2vw, 0.5rem);
}
.accordion-button:not(.collapsed) {
    color: inherit !important;
    background-color: inherit !important;
}

.condensed {
    width: 29%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.progressBar {
    transform: scale(.5) translate(0%, -7rem);
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-in-out;
}

.expandedProgressBar {
    transform: scale(1);
}

.accordion-button:focus, .accordion-button:hover{
    z-index: 0 !important;
}

.divOnboardingSection.col-10 > ol > li {
    background-color: white !important;
}

.modal-table-details {
    background-color: white;
    border-radius: 7px;
    padding: 5px;
}

.scaleText {
    font-size: clamp(.8rem, 1.25vw, 1rem) !important;
}