Hey,

They require some extra CSS for the modifying, the CSS can be added on Appearance > Customize > Additional CSS.

This is the Custom CSS to set the dots in the top.

.owl-carousel {
    display: flex;
    flex-direction: column;
}
.owl-carousel .owl-stager-outer {
    order: 2;
}
.owl-carousel .owl-dots {
    order: 1;
    padding-top: 1rem;
    margin-bottom: 20px;
}

These CSS below is for the style.

In normal color

.owl-carousel .owl-dots button span {
    background-color: #333 !important;
}

And this is the for the style in hover and active.

.owl-carousel .owl-dots button.active span, 
.owl-carousel .owl-dots button:hover span {
    background-color: your_color !important;
}

Feel free to ask for anything you need.

Kind Regards