:root {
    --dotbordercolorinner: #000;
    --dotbordercolorouter: #fff;
    --dotbackground: rgba(255,255,255,0);
    --dotbackgroundActive: rgba(255,255,255,0);
    --solidcolor: #001F3F;
}
/* html,body {
    height: auto !important;
} */
.scroll_navigation_dots {
    position: fixed;
    top: 50%;
    right: 55px;
    transform: translate(0, -50%);
    z-index: 21;
    display: none;
}
.scroll_navigation_dots.transparent_dots a,.scroll_navigation_dots.solid_dots a  {
    display: block;
    height: 10px;
    margin: 10px auto;
    position: relative;
    width: 10px;
    border-radius: 50%;
    border: 1px solid var(--dotbordercolorouter) !important;
    background: var(--dotbackground) !important;
}
.scroll_navigation_dots.solid_dots a {
    border:none !important;
    background: var(--solidcolor) !important;
}
.scroll_navigation_dots.transparent_dots a:before,.scroll_navigation_dots.solid_dots a:before {
    border: 1px solid var(--dotbordercolorinner);
    content: '';
    display: block;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.scroll_navigation_dots.solid_dots a:before {
    border: none;
}
 .scroll_navigation_dots.transparent_dots a.active,.scroll_navigation_dots.solid_dots a.active {
    width: 16px;
    height: 16px;
    background: var(--dotbackgroundActive) !important;
}
.scroll_navigation_dots.solid_dots a.active{
background: var(--solidcolor) !important;
        }
@media only screen and (max-width: 1024px) {
    .scroll_navigation_dots {
        display: none !important;
    }
}