.shepherd-element.shepherd-has-title > .shepherd-arrow:before {
    background-color: var(--white-background) !important;
}

body.full-screen footer.shepherd-footer {
    display: flex;
}

body.full-screen header.shepherd-header {
    display: flex;
}

footer.shepherd-footer {
    position: static;
    display: flex;
    justify-content: space-between;
    box-shadow: none;
    border-radius: 10px;
    height: fit-content;
}

footer.shepherd-footer  > .shepherd-button:only-of-type {
    margin-left: auto;
}

footer.shepherd-footer  > .shepherd-back-btn {
    margin-left: auto;
}

.shepherd-title {
    width: 100%;
}


/* this is to overwrite keyboard navigation focus, shepherd-elements are in focus by default*/
.shepherd-element:focus {
    outline: none;
    border-radius: 10px;
    padding: 0;
}

.steps {
    filter: drop-shadow(1px 1px 2px grey);
    border-radius: 10px;
    max-width: 90%;
}

.steps.step-1 {
    margin-top: 10px;
    transform: translate(8px, 5px);
}
.steps.step-1 .disabled {
    display: none;
}
.steps.step-2 {
    margin-top: 10px;
    transform: translate(0, 5px);
}
.steps:not(.step-2, .step-1) {
    transform: translateX(-20px);
    width: 75%;
}

.steps.step-3 {
    transform: translate(-10px, 15px);

}
.steps.step-4.disabled,
.steps.step-3.disabled,
.steps.step-5.disabled,
.steps.step-6.disabled,
.steps.step-9.disabled{
    display: none;
}
/* this is to overwrite keyboard navigation focus, shepherd-elements are in focus by default*/

.steps > .shepherd-content:focus {
    outline: none;
    border-radius: 10px;
    padding: 0;
}

.steps > .shepherd-content > .shepherd-header {
    border-radius: 10px 10px 0 0;
    background-color: var(--white-background);
}

.steps > .shepherd-content > .shepherd-header > h3 {
    /*color: var(--secondary-text-colour);*/
    color: #000000;
    text-align: justify;
    font-weight: var(--font-bold);
}
.steps > .shepherd-content > .shepherd-header > .shepherd-text {
    padding: 0 16px 16px;
    text-align: right;
    z-index: 99;
}

button.shepherd-button {
    padding: 10px 10px;
    margin: 5px;
    font-size: var(--current-font-size, 16px);
    background-color: var(--white-background, #FFF);
    border: none;
    border-radius: var(--border-radius, 10px);
    outline: 2px solid var(--main-colour, #FF8C00);
    cursor: pointer;
    font-weight: var(--font-bold, 700);
    transition: .3s;
    color: var(--main-colour);
}

button.shepherd-button[disabled] {
    background: gray !important;
    outline: solid 2px gray;
    cursor: default;
    color: var(--white-background) !important;
}

button.shepherd-button:not(:disabled):hover {
    outline: 2px solid var(--white-background);
    transition: .3s;
    background-color: var(--main-colour, #FF8C00);
    color: var(--text-colour, #FFFFFF);
}

/*styles for desktop*/
@media screen and (min-width: 1024px) {
    footer.shepherd-footer {
        width: auto;
    }

    button.shepherd-button {
        padding: 15px 15px;
    }

    .steps.step-1,
    .steps.step-2,
    .steps.step-3,
    .steps.step-4,
    .steps.step-5,
    .steps.step-6,
    .steps.step-7,
    .steps.step-8,
    .steps.step-9 {
        width: 40%;
    }
}


.disabled {
    cursor: not-allowed;
}


.overlay-padding {
    padding: 20px;
}