.shepherd-element {
    border-radius: .357rem;
    width: 350px
}

.shepherd-element[data-popper-placement=bottom] {
    margin-top: 1rem!important
}

.shepherd-element[data-popper-placement=bottom] .shepherd-arrow:before {
    background-color: #7367f0!important
}

.shepherd-element[data-popper-placement=top] {
    margin-bottom: 1rem!important
}

.shepherd-element[data-popper-placement=left] {
    margin-right: 1rem!important
}

.shepherd-element[data-popper-placement=right] {
    margin-left: 1rem!important
}

.shepherd-element .shepherd-content {
    border-radius: .357rem
}

.shepherd-element .shepherd-content .shepherd-header {
    background-color: #7367f0;
    border-radius: .357rem .357rem 0 0;
    padding: .38rem 1.2rem
}

.shepherd-element .shepherd-content .shepherd-header .shepherd-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500
}

.shepherd-element .shepherd-content .shepherd-header .shepherd-cancel-icon {
    color: #fff;
    font-size: 1.7rem
}

.shepherd-element .shepherd-content .shepherd-header .shepherd-cancel-icon:focus {
    outline: none
}

.shepherd-element .shepherd-content .shepherd-text {
    color: #313131;
    padding: .8rem 1.2rem
}

.shepherd-element .shepherd-content .shepherd-footer {
    justify-content: space-between;
    padding: 0 1.2rem 1rem
}

.shepherd-element .shepherd-content .shepherd-footer .shepherd-button {
    padding: .5rem 1.3rem
}

@media(max-width:575.98px) {
    .shepherd-element {
        width: 300px
    }
}

.dark-layout .shepherd-element,
.dark-layout .shepherd-element:not([data-popper-placement=bottom]) .shepherd-arrow:before {
    background-color: #283046
}

.dark-layout .shepherd-element .shepherd-content .shepherd-text {
    color: #b4b7bd
}